Skip to content

feat: replace DOMParser with a proper printer #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 28, 2022
Merged

feat: replace DOMParser with a proper printer #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4970c30
working on a real printer
KonnorRogers Nov 22, 2022
0b153dc
we feel real close
KonnorRogers Nov 27, 2022
edb8520
we feel real close
KonnorRogers Nov 27, 2022
f2fc527
formatting
KonnorRogers Nov 27, 2022
8588ce1
formatting
KonnorRogers Nov 27, 2022
c361896
formatting
KonnorRogers Nov 27, 2022
4312c46
add inline snapshots
KonnorRogers Nov 28, 2022
beb40f4
add inline snapshots
KonnorRogers Nov 28, 2022
9f5b13e
add inline snapshots
KonnorRogers Nov 28, 2022
8a06ca3
finish work on a real print
KonnorRogers Nov 28, 2022
5926bc0
prettier
KonnorRogers Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 138 additions & 13 deletions __tests__/pretty-shadow-dom.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
import * as React from "react";
import { render } from "@testing-library/react";
import { Button, NestedShadowRoots } from "../components";
import { prettyDOM, render } from "@testing-library/react";
import { Button, Duplicates, TripleShadowRoots } from "../components";
import { prettyShadowDOM, screen } from "../src/index";

/* @see https://github.com/KonnorRogers/shadow-dom-testing-library/issues/33#issuecomment-1306593757 */
test("Should not modify the original dom", () => {
render(<Duplicates />);
const originalHTML = document.body.innerHTML;
expect(document.querySelector("shadow-root")).toBe(null);

prettyShadowDOM(document.body);

expect(document.querySelector("shadow-root")).toBe(null);
expect(originalHTML).toEqual(document.body.innerHTML);
});

test("Should strip style and script tags", () => {
const div = document.createElement("div");
div.innerHTML = `
<!-- Comment -->
<style>style {}</style>
<script>const script = null</script>
<div>Hi</div>
`;
const str = prettyShadowDOM(div) as string;

const comment = document.createComment("Comment");
const style = document.createElement("style");
style.innerHTML = `style {}`;
const script = document.createElement("script");
script.innerHTML = `const script = null`;
const otherDiv = document.createElement("div");
otherDiv.innerHTML = "Hi";

div.append(comment, style, script, otherDiv);

const str = prettyDOM(div) as string;

expect(str.includes("Comment")).toBe(false);
expect(str.includes("style")).toBe(false);
Expand All @@ -25,12 +42,23 @@ test("Should test shadow roots of passing in element", async () => {
const button = await screen.findByShadowRole("button");

// @ts-expect-error
const str = prettyShadowDOM(button.getRootNode().host) as string;
let str = prettyShadowDOM(button.getRootNode().host) as string;

expect(str.includes("my-button")).toBe(true);
expect(str.includes("shadow-root")).toBe(true);
expect(str.includes("ShadowRoot")).toBe(true);
expect(str.includes("body")).toBe(false);
expect(str.includes("div")).toBe(false);

expect(str).toMatchInlineSnapshot(`
"<my-button>
<ShadowRoot>
<button>
<slot />
</button>
</ShadowRoot>
0
</my-button>"
`);
});

test("Should render body if passed in", () => {
Expand All @@ -39,8 +67,23 @@ test("Should render body if passed in", () => {
const str = prettyShadowDOM(document.body) as string;

expect(str.includes("my-button")).toBe(true);
expect(str.includes("shadow-root")).toBe(true);
expect(str.includes("ShadowRoot")).toBe(true);
expect(str.includes("body")).toBe(true);

expect(str).toMatchInlineSnapshot(`
"<body>
<div>
<my-button>
<ShadowRoot>
<button>
<slot />
</button>
</ShadowRoot>
0
</my-button>
</div>
</body>"
`);
});

test("Should render HTML tag if passed in", () => {
Expand All @@ -49,6 +92,88 @@ test("Should render HTML tag if passed in", () => {
const str = prettyShadowDOM() as string;

expect(str.includes("my-button")).toBe(true);
expect(str.includes("shadow-root")).toBe(true);
expect(str.includes("ShadowRoot")).toBe(true);
expect(str.includes("body")).toBe(true);

expect(str).toMatchInlineSnapshot(`
"<body>
<div>
<my-button>
<ShadowRoot>
<button>
<slot />
</button>
</ShadowRoot>
0
</my-button>
</div>
</body>"
`);
});

test("It should render 3 shadow root instances", () => {
render(<TripleShadowRoots />);
const str = prettyShadowDOM() as string;

expect(str.includes("ShadowRoot")).toBe(true);

expect(str).toMatchInlineSnapshot(`
"<body>
<div>
<triple-shadow-roots>
<ShadowRoot>


<nested-shadow-roots>
<ShadowRoot>


<duplicate-buttons>
<ShadowRoot>


<slot
name=\\"start\\"
/>


<button>
Button One
</button>


<br />


<slot />


<br />


<button>
Button Two
</button>


<slot
name=\\"end\\"
/>


</ShadowRoot>
</duplicate-buttons>


</ShadowRoot>


</nested-shadow-roots>


</ShadowRoot>
</triple-shadow-roots>
</div>
</body>"
`);
});
81 changes: 13 additions & 68 deletions __tests__/screenDebug.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,26 @@ import {
NestedShadowRoots,
TripleShadowRoots,
} from "../components";
import { prettyShadowDOM, screen } from "../src/index";
import { screen } from "../src/index";

beforeEach(() => {
// jest.spyOn(console, 'log').mockImplementation(() => {})
jest.spyOn(console, "log").mockImplementation(() => {});
jest.spyOn(screen, "debug");
});

afterEach(() => {
// // @ts-expect-error
// console.log.mockRestore()
// @ts-expect-error
console.log.mockRestore();
});

/* @see https://github.com/KonnorRogers/shadow-dom-testing-library/issues/33#issuecomment-1306593757 */
test("Should not modify the original dom", () => {
render(<Duplicates />);
const originalHTML = document.body.innerHTML;
expect(document.querySelector("shadow-root")).toBe(null);

prettyShadowDOM(document.body);

expect(document.querySelector("shadow-root")).toBe(null);
expect(originalHTML).toEqual(document.body.innerHTML);
});

test.skip("Triple shadow roots", async () => {
test("Triple shadow roots", async () => {
render(<TripleShadowRoots />);

screen.debug();
expect(console.log).toHaveBeenCalledTimes(1);
});

test.skip("Double shadow root", async () => {
render(<NestedShadowRoots />);

screen.debug();
});

test.skip("Single shadow root", async () => {
test("Single shadow root", async () => {
render(
<Duplicates>
<div slot="start">Start Slot</div>
Expand All @@ -49,50 +33,11 @@ test.skip("Single shadow root", async () => {
</Duplicates>
);

// jest.spyOn(console, 'log').mockImplementation(() => { })

screen.debug();

// @TODO: this is supposed to work but doesnt...
// https://github.com/testing-library/dom-testing-library/blob/edffb7c5ec2e4afd7f6bedf842c669ddbfb73297/src/__tests__/pretty-dom.js#L61
// expect(console.log).toHaveBeenCalledTimes(1)
// expect(console.log.mock.calls[0][0]).toEqual(`
// <body>
// <div>
// <duplicate-buttons>
// <shadow-root>
// <slot
// name="start"
// />
// <button>
// Button One
// </button>
// <br />
// <slot />
// <br />
// <button>
// Button Two
// </button>
// <slot
// name="end"
// />
// </shadow-root>
// <div
// slot="start"
// >
// Start Slot
// </div>
// <div>
// Default Slot
// </div>
// <div
// slot="end"
// >
// End Slot
// </div>
// </duplicate-buttons>
// </div>
// </body>
// `)
// jest.resetAllMocks()
expect(console.log).toHaveBeenCalledTimes(1);

// This is kind of a silly testing, but its more about making sure we properly loaded our plugin.
// @ts-expect-error
expect(console.log.mock.calls[0][0]).toMatch(/ShadowRoot/);
});
18 changes: 15 additions & 3 deletions src/log-shadow-dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
import { logDOM } from "@testing-library/dom";
import { toJSDOM } from "./pretty-shadow-dom";
import {
createDOMElementFilter,
filterCommentsAndDefaultIgnoreTagsTags,
} from "./pretty-shadow-dom";
import type { NewPlugin } from "pretty-format";

export function logShadowDOM(
...args: Parameters<typeof logDOM>
): ReturnType<typeof logDOM> {
const [dom, maxLength, options] = args;
let [dom, maxLength, options] = args;

logDOM(toJSDOM(dom), maxLength, options);
const plugin: NewPlugin = createDOMElementFilter(
options?.filterNode || filterCommentsAndDefaultIgnoreTagsTags
);

if (options == null) options = {};
if (options.plugins == null) options.plugins = [];
options.plugins.push(plugin);

logDOM(dom, maxLength, options);
}
Loading