Skip to content

Commit

Permalink
test: add test for overlay runtimeErrors
Browse files Browse the repository at this point in the history
  • Loading branch information
@malcolm-kee
malcolm-kee committed May 5, 2023
1 parent 9e63422 commit 9c6e408
Show file tree
Hide file tree
Showing 3 changed files with 247 additions and 0 deletions.
86 changes: 86 additions & 0 deletions test/e2e/__snapshots__/overlay.test.js.snap.webpack4
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2135,3 +2135,89 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
</body>
"
`;

exports[`overlay should show error for uncaught runtime error: overlay html 1`] = `
"<body>
<div
id=\\"webpack-dev-server-client-overlay-div\\"
style=\\"
position: fixed;
box-sizing: border-box;
inset: 0px;
width: 100vw;
height: 100vh;
font-size: large;
padding: 2rem 2rem 4rem;
line-height: 1.2;
white-space: pre-wrap;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
color: white;
\\"
>
<div
style=\\"
color: rgb(232, 59, 70);
font-size: 2em;
white-space: pre-wrap;
font-family: sans-serif;
margin: 0px 2rem 2rem 0px;
flex: 0 0 auto;
max-height: 50%;
overflow: auto;
\\"
>
Uncaught runtime errors:
</div>
<button
aria-label=\\"Dismiss\\"
style=\\"
color: rgb(255, 255, 255);
line-height: 1rem;
font-size: 1.5rem;
padding: 1rem;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
background-color: transparent;
border: none;
\\"
>
×
</button>
<div>
<div
style=\\"
background-color: rgba(206, 17, 38, 0.1);
color: rgb(252, 207, 207);
padding: 1rem 1rem 1.5rem;
\\"
>
<div
style=\\"
color: rgb(232, 59, 70);
font-size: 1.2em;
margin-bottom: 1rem;
font-family: sans-serif;
\\"
>
ERROR
</div>
<div
style=\\"
line-height: 1.5;
font-size: 1rem;
font-family: Menlo, Consolas, monospace;
\\"
>
Injected error at throwError (&lt;anonymous&gt;:2:15) at
&lt;anonymous&gt;:3:9 at addScriptContent
(__puppeteer_evaluation_script__:9:27)
</div>
</div>
</div>
</div>
</body>
"
`;
86 changes: 86 additions & 0 deletions test/e2e/__snapshots__/overlay.test.js.snap.webpack5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2152,6 +2152,92 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
"
`;

exports[`overlay should show error for uncaught runtime error: overlay html 1`] = `
"<body>
<div
id=\\"webpack-dev-server-client-overlay-div\\"
style=\\"
position: fixed;
box-sizing: border-box;
inset: 0px;
width: 100vw;
height: 100vh;
font-size: large;
padding: 2rem 2rem 4rem;
line-height: 1.2;
white-space: pre-wrap;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
color: white;
\\"
>
<div
style=\\"
color: rgb(232, 59, 70);
font-size: 2em;
white-space: pre-wrap;
font-family: sans-serif;
margin: 0px 2rem 2rem 0px;
flex: 0 0 auto;
max-height: 50%;
overflow: auto;
\\"
>
Uncaught runtime errors:
</div>
<button
aria-label=\\"Dismiss\\"
style=\\"
color: rgb(255, 255, 255);
line-height: 1rem;
font-size: 1.5rem;
padding: 1rem;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
background-color: transparent;
border: none;
\\"
>
×
</button>
<div>
<div
style=\\"
background-color: rgba(206, 17, 38, 0.1);
color: rgb(252, 207, 207);
padding: 1rem 1rem 1.5rem;
\\"
>
<div
style=\\"
color: rgb(232, 59, 70);
font-size: 1.2em;
margin-bottom: 1rem;
font-family: sans-serif;
\\"
>
ERROR
</div>
<div
style=\\"
line-height: 1.5;
font-size: 1rem;
font-family: Menlo, Consolas, monospace;
\\"
>
Injected error at throwError (&lt;anonymous&gt;:2:15) at
&lt;anonymous&gt;:3:9 at addScriptContent
(__puppeteer_evaluation_script__:9:27)
</div>
</div>
</div>
</div>
</body>
"
`;

exports[`overlay should show overlay when Trusted Types are enabled: overlay html 1`] = `
"<body>
<div
Expand Down
75 changes: 75 additions & 0 deletions test/e2e/overlay.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1145,4 +1145,79 @@ describe("overlay", () => {
await browser.close();
await server.stop();
});

it("should show error for uncaught runtime error", async () => {
const compiler = webpack(config);

const server = new Server(
{
port,
},
compiler
);

await server.start();

const { page, browser } = await runBrowser();

await page.goto(`http://localhost:${port}/`, {
waitUntil: "networkidle0",
});

await page.addScriptTag({
content: `(function throwError() {
throw new Error('Injected error');
})();`,
});

const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
const overlayFrame = await overlayHandle.contentFrame();
const overlayHtml = await overlayFrame.evaluate(
() => document.body.outerHTML
);

expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot(
"overlay html"
);

await browser.close();
await server.stop();
});

it("show not show filtered runtime error", async () => {
const compiler = webpack(config);

const server = new Server(
{
port,
client: {
overlay: {
runtimeErrors: (error) => error && !/Injected/.test(error.message),
},
},
},
compiler
);

await server.start();

const { page, browser } = await runBrowser();

await page.goto(`http://localhost:${port}/`, {
waitUntil: "networkidle0",
});

await page.addScriptTag({
content: `(function throwError() {
throw new Error('Injected error');
})();`,
});

const overlayHandle = await page.$("#webpack-dev-server-client-overlay");

expect(overlayHandle).toBe(null);

await browser.close();
await server.stop();
});
});

0 comments on commit 9c6e408

Please sign in to comment.