From 820838ccb4606a1340ff18f49e3fbbc498ca76eb Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 24 Feb 2021 19:20:21 +0100 Subject: [PATCH 01/13] Add expected behavior --- src/__tests__/pretty-dom.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js index c8d65a26..9266bbce 100644 --- a/src/__tests__/pretty-dom.js +++ b/src/__tests__/pretty-dom.js @@ -110,3 +110,36 @@ describe('prettyDOM fails with first parameter without outerHTML field', () => { ) }) }) + +test('prettyDOM ignores script elements and comments nodes by default', () => { + const {container} = renderIntoDocument( + '

Hello, Dave

', + ) + + expect(prettyDOM(container)).toMatchInlineSnapshot(` + " +

+ Hello, Dave +

+ " + `) +}) + +test('prettyDOM can include all elements with a custom filter', () => { + const {container} = renderIntoDocument( + '

Hello, Dave

', + ) + + expect(prettyDOM(container, Number.POSITIVE_INFINITY, {filter: () => true})) + .toMatchInlineSnapshot(` + " +

Hello, Dave

', ) - expect(prettyDOM(container, Number.POSITIVE_INFINITY, {filter: () => true})) - .toMatchInlineSnapshot(` + expect( + prettyDOM(container, Number.POSITIVE_INFINITY, {filterNode: () => true}), + ).toMatchInlineSnapshot(` " `, + ) expect(() => getByLabelText('LucyRicardo')) .toThrowErrorMatchingInlineSnapshot(` "Unable to find a label with the text of: LucyRicardo From 4ee6ec8c2d300b1eb5de1574ac60fdc4e58b5d0d Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 25 Apr 2021 12:50:41 +0200 Subject: [PATCH 07/13] Update src/DOMElementFilter.ts --- src/DOMElementFilter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DOMElementFilter.ts b/src/DOMElementFilter.ts index 33a62720..b2bb0083 100644 --- a/src/DOMElementFilter.ts +++ b/src/DOMElementFilter.ts @@ -1,5 +1,5 @@ /** - * Source: https://github.com/facebook/jest/blob/master/packages/pretty-format/src/plugins/DOMElement.ts + * Source: https://github.com/facebook/jest/blob/e7bb6a1e26ffab90611b2593912df15b69315611/packages/pretty-format/src/plugins/DOMElement.ts */ import type {Config, NewPlugin, Printer, Refs} from 'pretty-format' From 41ac9b4708cb09c277a229e8e536c107151dc4b9 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 8 Jun 2021 12:02:04 +0200 Subject: [PATCH 08/13] Bump pretty-format --- package.json | 3 ++- src/DOMElementFilter.ts | 1 + src/pretty-dom.js | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d43b3236..f0d8c0a5 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.6", "lz-string": "^1.4.4", - "pretty-format": "^26.6.2" + "pretty-format": "^27.0.2" }, "devDependencies": { "@testing-library/jest-dom": "^5.11.6", @@ -63,6 +63,7 @@ "plugin:import/typescript" ], "rules": { + "@typescript-eslint/prefer-includes": "off", "import/prefer-default-export": "off", "import/no-unassigned-import": "off", "import/no-useless-path-segments": "off", diff --git a/src/DOMElementFilter.ts b/src/DOMElementFilter.ts index b2bb0083..9299205a 100644 --- a/src/DOMElementFilter.ts +++ b/src/DOMElementFilter.ts @@ -1,6 +1,7 @@ /** * Source: https://github.com/facebook/jest/blob/e7bb6a1e26ffab90611b2593912df15b69315611/packages/pretty-format/src/plugins/DOMElement.ts */ +/* eslint-disable -- trying to stay as close to the original as possible */ import type {Config, NewPlugin, Printer, Refs} from 'pretty-format' function escapeHTML(str: string): string { diff --git a/src/pretty-dom.js b/src/pretty-dom.js index 04051a7c..77d58639 100644 --- a/src/pretty-dom.js +++ b/src/pretty-dom.js @@ -1,4 +1,4 @@ -import prettyFormat from 'pretty-format' +import * as prettyFormat from 'pretty-format' import createDOMElementFilter from './DOMElementFilter' import {getUserCodeFrame} from './get-user-code-frame' import {getDocument} from './helpers' @@ -71,7 +71,7 @@ function prettyDOM(dom, maxLength, options = {}) { ...prettyFormatOptions } = options - const debugContent = prettyFormat(dom, { + const debugContent = prettyFormat.format(dom, { plugins: [createDOMElementFilter(filterNode), DOMCollection], printFunctionName: false, highlight: inNode(), From e514cc7ab2e64216e072084fcf17f6e5ba226029 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 8 Jun 2021 12:14:35 +0200 Subject: [PATCH 09/13] Update types --- types/pretty-dom.d.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/types/pretty-dom.d.ts b/types/pretty-dom.d.ts index 890dd4ea..dd34baee 100644 --- a/types/pretty-dom.d.ts +++ b/types/pretty-dom.d.ts @@ -1,13 +1,21 @@ import * as prettyFormat from 'pretty-format' +export interface PrettyFormatOptions extends prettyFormat.OptionsReceived { + /** + * Given a `Node` return `false` if you whish to ignore that node in the output. + * By default, ignores ` +
+ `) + + expect(() => + getByText('.css-selector', {selector: 'style', ignore: 'script'}), + ).toThrowErrorMatchingInlineSnapshot(` + "Unable to find an element with the text: .css-selector. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. + + Ignored nodes: comments,