diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js index 45e07c3d..1aa4ae83 100644 --- a/src/__tests__/pretty-dom.js +++ b/src/__tests__/pretty-dom.js @@ -1,27 +1,61 @@ -import {prettyDOM} from '../pretty-dom' -import {render} from './helpers/test-utils' +import {prettyDOM, logDOM} from '../pretty-dom' +import {render, renderIntoDocument} from './helpers/test-utils' -test('prints out the given DOM element tree', () => { +beforeEach(() => { + jest.spyOn(console, 'log').mockImplementation(() => {}) +}) + +afterEach(() => { + console.log.mockRestore() +}) + +test('prettyDOM prints out the given DOM element tree', () => { const {container} = render('
Hello World!
') expect(prettyDOM(container)).toMatchInlineSnapshot(` -"
-
- Hello World! -
-
" -`) + "
+
+ Hello World! +
+
" + `) }) -test('supports truncating the output length', () => { +test('prettyDOM supports truncating the output length', () => { const {container} = render('
Hello World!
') expect(prettyDOM(container, 5)).toMatch(/\.\.\./) }) -test('supports receiving the document element', () => { +test('prettyDOM defaults to document.body', () => { + renderIntoDocument('
Hello World!
') + expect(prettyDOM()).toMatchInlineSnapshot(` + " +
+ Hello World! +
+ " + `) +}) + +test('prettyDOM supports receiving the document element', () => { expect(prettyDOM(document)).toMatchInlineSnapshot(` -" - - -" -`) + " + + + " + `) }) + +test('logDOM logs prettyDOM to the console', () => { + const {container} = render('
Hello World!
') + logDOM(container) + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + "
+
+ Hello World! +
+
" + `) +}) + +/* eslint no-console:0 */ diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js index 45c662b2..9e7ae158 100644 --- a/src/__tests__/role-helpers.js +++ b/src/__tests__/role-helpers.js @@ -1,6 +1,14 @@ import {getRoles, logRoles, getImplicitAriaRoles} from '../role-helpers' import {render} from './helpers/test-utils' +beforeEach(() => { + jest.spyOn(console, 'log').mockImplementation(() => {}) +}) + +afterEach(() => { + console.log.mockRestore() +}) + function setup() { const {getByTestId} = render(`
@@ -137,16 +145,9 @@ test('getRoles returns expected roles for various dom nodes', () => { test('logRoles calls console.log with output from prettyRoles', () => { const {section} = setup() - - jest.spyOn(console, 'log').mockImplementationOnce(() => {}) - logRoles(section) - // eslint-disable-next-line no-console expect(console.log).toHaveBeenCalledTimes(1) - // eslint-disable-next-line no-console expect(console.log.mock.calls[0][0]).toMatchSnapshot() - // eslint-disable-next-line no-console - console.log.mockRestore() }) test('getImplicitAriaRoles returns expected roles for various dom nodes', () => { @@ -158,3 +159,5 @@ test('getImplicitAriaRoles returns expected roles for various dom nodes', () => expect(getImplicitAriaRoles(radio)).toEqual(['radio']) expect(getImplicitAriaRoles(input)).toEqual(['textbox']) }) + +/* eslint no-console:0 */ diff --git a/src/pretty-dom.js b/src/pretty-dom.js index 162d4355..28f2cfca 100644 --- a/src/pretty-dom.js +++ b/src/pretty-dom.js @@ -1,21 +1,50 @@ import prettyFormat from 'pretty-format' +import {getDocument} from './helpers' + +function inCypress(dom) { + const window = + (dom.ownerDocument && dom.ownerDocument.defaultView) || undefined + return ( + (typeof global !== 'undefined' && global.Cypress) || + (typeof window !== 'undefined' && window.Cypress) + ) +} + +const inNode = () => + typeof process !== 'undefined' && + process.versions !== undefined && + process.versions.node !== undefined + +const getMaxLength = dom => + inCypress(dom) ? 0 : process.env.DEBUG_PRINT_LIMIT || 7000 const {DOMElement, DOMCollection} = prettyFormat.plugins -function prettyDOM(htmlElement, maxLength, options) { - if (htmlElement.documentElement) { - htmlElement = htmlElement.documentElement +function prettyDOM( + dom = getDocument().body, + maxLength = getMaxLength(dom), + options, +) { + if (maxLength === 0) { + return '' + } + if (dom.documentElement) { + dom = dom.documentElement } - const debugContent = prettyFormat(htmlElement, { + const debugContent = prettyFormat(dom, { plugins: [DOMElement, DOMCollection], printFunctionName: false, - highlight: true, + highlight: inNode(), ...options, }) - return maxLength !== undefined && htmlElement.outerHTML.length > maxLength + return maxLength !== undefined && dom.outerHTML.length > maxLength ? `${debugContent.slice(0, maxLength)}...` : debugContent } -export {prettyDOM} +const logDOM = (...args) => console.log(prettyDOM(...args)) + +export {prettyDOM, logDOM} + +/* eslint no-console:0 */ diff --git a/src/query-helpers.js b/src/query-helpers.js index f91ba209..062e9df9 100644 --- a/src/query-helpers.js +++ b/src/query-helpers.js @@ -2,33 +2,8 @@ import {prettyDOM} from './pretty-dom' import {fuzzyMatches, matches, makeNormalizer} from './matches' import {waitForElement} from './wait-for-element' -/* eslint-disable complexity */ -function debugDOM(htmlElement) { - const limit = process.env.DEBUG_PRINT_LIMIT || 7000 - const inNode = - typeof process !== 'undefined' && - process.versions !== undefined && - process.versions.node !== undefined - /* istanbul ignore next */ - const window = - (htmlElement.ownerDocument && htmlElement.ownerDocument.defaultView) || - undefined - const inCypress = - (typeof global !== 'undefined' && global.Cypress) || - (typeof window !== 'undefined' && window.Cypress) - /* istanbul ignore else */ - if (inCypress) { - return '' - } else if (inNode) { - return prettyDOM(htmlElement, limit) - } else { - return prettyDOM(htmlElement, limit, {highlight: false}) - } -} -/* eslint-enable complexity */ - function getElementError(message, container) { - return new Error([message, debugDOM(container)].filter(Boolean).join('\n\n')) + return new Error([message, prettyDOM(container)].filter(Boolean).join('\n\n')) } function getMultipleElementsFoundError(message, container) { @@ -111,7 +86,6 @@ function buildQueries(queryAllBy, getMultipleError, getMissingError) { } export { - debugDOM, getElementError, getMultipleElementsFoundError, queryAllByAttribute, diff --git a/src/role-helpers.js b/src/role-helpers.js index 99e2db8e..8020ed02 100644 --- a/src/role-helpers.js +++ b/src/role-helpers.js @@ -1,5 +1,5 @@ import {elementRoles} from 'aria-query' -import {debugDOM} from './query-helpers' +import {prettyDOM} from './pretty-dom' const elementRoleList = buildElementRoleList(elementRoles) @@ -73,14 +73,14 @@ function getRoles(container) { }, {}) } -function prettyRoles(container) { - const roles = getRoles(container) +function prettyRoles(dom) { + const roles = getRoles(dom) return Object.entries(roles) .map(([role, elements]) => { const delimiterBar = '-'.repeat(50) const elementsString = elements - .map(el => debugDOM(el.cloneNode(false))) + .map(el => prettyDOM(el.cloneNode(false))) .join('\n\n') return `${role}:\n\n${elementsString}\n\n${delimiterBar}` @@ -88,9 +88,8 @@ function prettyRoles(container) { .join('\n') } -function logRoles(container) { - // eslint-disable-next-line no-console - console.log(prettyRoles(container)) -} +const logRoles = dom => console.log(prettyRoles(dom)) export {getRoles, logRoles, getImplicitAriaRoles, prettyRoles} + +/* eslint no-console:0 */ diff --git a/typings/query-helpers.d.ts b/typings/query-helpers.d.ts index f15a174e..032b8059 100644 --- a/typings/query-helpers.d.ts +++ b/typings/query-helpers.d.ts @@ -20,7 +20,7 @@ export type AllByAttribute = ( export const queryByAttribute: QueryByAttribute export const queryAllByAttribute: AllByAttribute -export const debugDOM: (htmlElement: HTMLElement) => string +export const logDOM: (htmlElement: HTMLElement) => void export const getElementError: (message: string, container: HTMLElement) => Error /** @@ -53,7 +53,7 @@ export type BuiltQueryMethods = [ GetAllBy, GetBy, FindAllBy, - FindBy + FindBy, ] export const buildQueries: ( queryByAll: GetAllBy,