From 1611b06a5dfb5d8608068082a1662b509a7fe7be Mon Sep 17 00:00:00 2001 From: josh-dowdle Date: Tue, 21 Jan 2020 14:29:10 -0700 Subject: [PATCH 1/2] Add a debug method to screen. --- src/__tests__/screen.js | 54 ++++++++++++++++++++++++++++++++++ src/get-queries-for-element.js | 9 ++++-- src/screen.js | 27 +++++++++++------ 3 files changed, 79 insertions(+), 11 deletions(-) diff --git a/src/__tests__/screen.js b/src/__tests__/screen.js index b1dc5c7c..9268617a 100644 --- a/src/__tests__/screen.js +++ b/src/__tests__/screen.js @@ -1,9 +1,63 @@ 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
`, + ) + expect(screen.debug).toBeInstanceOf(Function) + // log document + screen.debug() + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + " + + + multi-test + +
+ multi-test +
+ " + `) + // log single element + screen.debug(screen.getByText('test', {selector: 'button'})) + expect(console.log).toHaveBeenCalledTimes(2) + expect(console.log.mock.calls[1][0]).toMatchInlineSnapshot(` + "" + `) + // log multiple elements + screen.debug(screen.getAllByText('multi-test')) + expect(console.log).toHaveBeenCalledTimes(4) + expect(console.log.mock.calls[2][0]).toMatchInlineSnapshot(` + " + multi-test + " + `) + expect(console.log.mock.calls[3][0]).toMatchInlineSnapshot(` + "
+ multi-test +
" + `) +}) + +/* 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}, + ) From d64f32b20c2f2870b466b25c2dd53bed67f49272 Mon Sep 17 00:00:00 2001 From: josh-dowdle Date: Tue, 28 Jan 2020 14:25:58 -0700 Subject: [PATCH 2/2] Make suggested edits. --- src/__tests__/screen.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/__tests__/screen.js b/src/__tests__/screen.js index 9268617a..d9c99d82 100644 --- a/src/__tests__/screen.js +++ b/src/__tests__/screen.js @@ -20,7 +20,6 @@ test('exposes debug method', () => { renderIntoDocument( `multi-test
multi-test
`, ) - expect(screen.debug).toBeInstanceOf(Function) // log document screen.debug() expect(console.log).toHaveBeenCalledTimes(1) @@ -37,27 +36,30 @@ test('exposes debug method', () => { " `) + console.log.mockClear() // log single element screen.debug(screen.getByText('test', {selector: 'button'})) - expect(console.log).toHaveBeenCalledTimes(2) - expect(console.log.mock.calls[1][0]).toMatchInlineSnapshot(` + 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(4) - expect(console.log.mock.calls[2][0]).toMatchInlineSnapshot(` + expect(console.log).toHaveBeenCalledTimes(2) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` " multi-test " `) - expect(console.log.mock.calls[3][0]).toMatchInlineSnapshot(` + expect(console.log.mock.calls[1][0]).toMatchInlineSnapshot(` "
multi-test
" `) + console.log.mockClear() }) /* eslint no-console:0 */