diff --git a/src/__tests__/screen.js b/src/__tests__/screen.js index b1dc5c7c..d9c99d82 100644 --- a/src/__tests__/screen.js +++ b/src/__tests__/screen.js @@ -1,9 +1,65 @@ import {renderIntoDocument} from './helpers/test-utils' import {screen} from '..' +beforeEach(() => { + jest.spyOn(console, 'log').mockImplementation(() => {}) +}) + +afterEach(() => { + console.log.mockRestore() +}) + test('exposes queries that are attached to document.body', async () => { renderIntoDocument(`
hello world
`) screen.getByText(/hello world/i) await screen.findByText(/hello world/i) expect(screen.queryByText(/hello world/i)).not.toBeNull() }) + +test('exposes debug method', () => { + renderIntoDocument( + `multi-test
multi-test
`, + ) + // log document + screen.debug() + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + " + + + multi-test + +
+ multi-test +
+ " + `) + console.log.mockClear() + // log single element + screen.debug(screen.getByText('test', {selector: 'button'})) + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + "" + `) + console.log.mockClear() + // log multiple elements + screen.debug(screen.getAllByText('multi-test')) + expect(console.log).toHaveBeenCalledTimes(2) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + " + multi-test + " + `) + expect(console.log.mock.calls[1][0]).toMatchInlineSnapshot(` + "
+ multi-test +
" + `) + console.log.mockClear() +}) + +/* eslint no-console:0 */ diff --git a/src/get-queries-for-element.js b/src/get-queries-for-element.js index 3ddda7e0..cc81578b 100644 --- a/src/get-queries-for-element.js +++ b/src/get-queries-for-element.js @@ -7,14 +7,19 @@ import * as defaultQueries from './queries' /** * @param {HTMLElement} element container * @param {FuncMap} queries object of functions + * @param {Object} initialValue for reducer * @returns {FuncMap} returns object of functions bound to container */ -function getQueriesForElement(element, queries = defaultQueries) { +function getQueriesForElement( + element, + queries = defaultQueries, + initialValue = {}, +) { return Object.keys(queries).reduce((helpers, key) => { const fn = queries[key] helpers[key] = fn.bind(null, element) return helpers - }, {}) + }, initialValue) } export {getQueriesForElement} diff --git a/src/screen.js b/src/screen.js index 51b25416..f6768c6b 100644 --- a/src/screen.js +++ b/src/screen.js @@ -1,14 +1,23 @@ import * as queries from './queries' import {getQueriesForElement} from './get-queries-for-element' +import {logDOM} from './pretty-dom' + +const debug = (element, maxLength, options) => + Array.isArray(element) + ? element.forEach(el => logDOM(el, maxLength, options)) + : logDOM(element, maxLength, options) export const screen = typeof document !== 'undefined' && document.body - ? getQueriesForElement(document.body) - : Object.keys(queries).reduce((helpers, key) => { - helpers[key] = () => { - throw new TypeError( - 'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error', - ) - } - return helpers - }, {}) + ? getQueriesForElement(document.body, queries, {debug}) + : Object.keys(queries).reduce( + (helpers, key) => { + helpers[key] = () => { + throw new TypeError( + 'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error', + ) + } + return helpers + }, + {debug}, + )