From 6c5a150b81ead7a85be936db3d8e0768b020c56a Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Mon, 10 Oct 2022 12:43:59 +0200 Subject: [PATCH] :window: :wrench: Ignore classnames during jest snapshot comparison (#17773) * Ignore classnames during jest snapshot comparison * Replace by simple placeholder * Update snapshots --- airbyte-webapp/package.json | 1 + .../scripts/classname-serializer.js | 32 ++ .../components/ui/Spinner/Spinner.test.tsx | 4 +- .../__snapshots__/Spinner.test.tsx.snap | 12 +- .../components/GitBlock/GitBlock.test.tsx | 8 +- .../__snapshots__/GitBlock.test.tsx.snap | 160 +++--- .../FrequentlyUsedDestinations.test.tsx | 4 +- .../FrequentlyUsedDestinations.test.tsx.snap | 506 +++++++++--------- .../StartWithDestination.test.tsx | 4 +- .../StartWithDestination.test.tsx.snap | 77 +-- 10 files changed, 426 insertions(+), 382 deletions(-) create mode 100644 airbyte-webapp/scripts/classname-serializer.js diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json index c074e8448712..7354e7bc034e 100644 --- a/airbyte-webapp/package.json +++ b/airbyte-webapp/package.json @@ -162,6 +162,7 @@ }, "jest": { "transformIgnorePatterns": [], + "snapshotSerializers": ["./scripts/classname-serializer.js"], "coveragePathIgnorePatterns": [ ".stories.tsx" ] diff --git a/airbyte-webapp/scripts/classname-serializer.js b/airbyte-webapp/scripts/classname-serializer.js new file mode 100644 index 000000000000..40bb27a80cd6 --- /dev/null +++ b/airbyte-webapp/scripts/classname-serializer.js @@ -0,0 +1,32 @@ +import { prettyDOM } from "@testing-library/react"; + +/** + * Traverse a tree of nodes and replace all class names with + * the count of classnames instead, e.g. "<3 classnames>" + */ +const traverseAndRedactClasses = (node) => { + if (node.className && typeof node.className === "string") { + node.className = ``; + } + node.childNodes.forEach(traverseAndRedactClasses); +}; + +module.exports = { + serialize(val, config) { + // Clone the whole rendered DOM tree, since we're modifying it + const clone = val.baseElement.cloneNode(true); + // Redact all classnames + traverseAndRedactClasses(clone); + // Use prettyDOM to format the modified DOM as a string. + return prettyDOM(clone, Infinity, { + indent: config.indent.length, + highlight: false, + }); + }, + + test(val) { + // Only use this serializer when creating a snapshot of RenderResult, which is + // the return value of testing-library/react's render method. + return val && val.baseElement && val.baseElement instanceof Element; + }, +}; diff --git a/airbyte-webapp/src/components/ui/Spinner/Spinner.test.tsx b/airbyte-webapp/src/components/ui/Spinner/Spinner.test.tsx index a83ba72ade2c..bbbf0a4fd32f 100644 --- a/airbyte-webapp/src/components/ui/Spinner/Spinner.test.tsx +++ b/airbyte-webapp/src/components/ui/Spinner/Spinner.test.tsx @@ -4,8 +4,8 @@ import { Spinner } from "./Spinner"; describe("", () => { it("should render without crash", () => { - const { asFragment } = render(); + const component = render(); - expect(asFragment()).toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/airbyte-webapp/src/components/ui/Spinner/__snapshots__/Spinner.test.tsx.snap b/airbyte-webapp/src/components/ui/Spinner/__snapshots__/Spinner.test.tsx.snap index 25bf19f80f44..d234965e6e97 100644 --- a/airbyte-webapp/src/components/ui/Spinner/__snapshots__/Spinner.test.tsx.snap +++ b/airbyte-webapp/src/components/ui/Spinner/__snapshots__/Spinner.test.tsx.snap @@ -1,9 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` should render without crash 1`] = ` - - - - - + + + - + `; diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/StartWithDestination.test.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/StartWithDestination.test.tsx index a184b1827a39..1985f8eba272 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/StartWithDestination.test.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/StartWithDestination.test.tsx @@ -18,9 +18,9 @@ const renderStartWithDestination = (props: StartWithDestinationProps) => describe("", () => { it("should renders without crash with provided props", () => { - const { asFragment } = renderStartWithDestination({ destination: mockData, onDestinationSelect: jest.fn() }); + const component = renderStartWithDestination({ destination: mockData, onDestinationSelect: jest.fn() }); - expect(asFragment()).toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); it("should call provided handler with right params", async () => { diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap index c6e68f28119c..90c99f117a07 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap +++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap @@ -1,62 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` should renders without crash with provided props 1`] = ` - -
- + +
- + `;