Skip to content

Commit

Permalink
test: test overlay errors and warnings filter function
Browse files Browse the repository at this point in the history
  • Loading branch information
@malcolm-kee
malcolm-kee committed May 5, 2023
1 parent 9c6e408 commit 6c017eb
Show file tree
Hide file tree
Showing 6 changed files with 685 additions and 66 deletions.
42 changes: 26 additions & 16 deletions client-src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,30 @@ import createSocketURL from "./utils/createSocketURL.js";
* @property {string} [previousHash]
*/

/**
* @param {boolean | { warnings?: boolean | string; errors?: boolean | string; runtimeErrors?: boolean | string; }} overlayOptions
*/
const decodeOverlayOptions = (overlayOptions) => {
if (typeof overlayOptions === "object") {
["warnings", "errors", "runtimeErrors"].forEach((property) => {
if (typeof overlayOptions[property] === "string") {
const overlayFilterFunctionString = decodeURIComponent(
overlayOptions[property]
);

// eslint-disable-next-line no-new-func
const overlayFilterFunction = new Function(
"message",
`var callback = ${overlayFilterFunctionString}
return callback(message)`
);

overlayOptions[property] = overlayFilterFunction;
}
});
}
};

/**
* @type {Status}
*/
Expand Down Expand Up @@ -92,22 +116,7 @@ if (parsedResourceQuery.overlay) {
...options.overlay,
};

["errors", "warnings", "runtimeErrors"].forEach((property) => {
if (typeof options.overlay[property] === "string") {
const overlayFilterFunctionString = decodeURIComponent(
options.overlay[property]
);

// eslint-disable-next-line no-new-func
const overlayFilterFunction = new Function(
"message",
`var callback = ${overlayFilterFunctionString}
return callback(message)`
);

options.overlay[property] = overlayFilterFunction;
}
});
decodeOverlayOptions(options.overlay);
}
enabledFeatures.Overlay = true;
}
Expand Down Expand Up @@ -198,6 +207,7 @@ const onSocketMessage = {
}

options.overlay = value;
decodeOverlayOptions(options.overlay);
},
/**
* @param {number} value
Expand Down
39 changes: 27 additions & 12 deletions lib/Server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,16 @@ const memoize = (fn) => {

const getExpress = memoize(() => require("express"));

/**
*
* @param {OverlayMessageOptions} [setting]
* @returns
*/
const encodeOverlaySettings = (setting) =>
typeof setting === "function"
? encodeURIComponent(setting.toString())
: setting;

class Server {
/**
* @param {Configuration | Compiler | MultiCompiler} options
Expand Down Expand Up @@ -658,16 +668,6 @@ class Server {
}

if (typeof client.overlay !== "undefined") {
/**
*
* @param {OverlayMessageOptions} [setting]
* @returns
*/
const encodeOverlaySettings = (setting) =>
typeof setting === "function"
? encodeURIComponent(setting.toString())
: setting;

const overlayString =
typeof client.overlay === "boolean"
? String(client.overlay)
Expand Down Expand Up @@ -2647,11 +2647,26 @@ class Server {
/** @type {ClientConfiguration} */
(this.options.client).overlay
) {
const overlayConfig = /** @type {ClientConfiguration} */ (
this.options.client
).overlay;

this.sendMessage(
[client],
"overlay",
/** @type {ClientConfiguration} */
(this.options.client).overlay
typeof overlayConfig === "object"
? {
errors:
overlayConfig.errors &&
encodeOverlaySettings(overlayConfig.errors),
warnings:
overlayConfig.warnings &&
encodeOverlaySettings(overlayConfig.warnings),
runtimeErrors:
overlayConfig.runtimeErrors &&
encodeOverlaySettings(overlayConfig.runtimeErrors),
}
: overlayConfig
);
}

Expand Down
210 changes: 210 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 @@ -2221,3 +2221,213 @@ exports[`overlay should show error for uncaught runtime error: overlay html 1`]
</body>
"
`;

exports[`overlay should show error when it is not filtered: 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;
\\"
>
Compiled with problems:
</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;
\\"
>
Unfiltered error
</div>
</div>
</div>
</div>
</body>
"
`;

exports[`overlay should show error when it is not filtered: page html 1`] = `
"<body>
<h1>webpack-dev-server is running...</h1>
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>

<iframe
id=\\"webpack-dev-server-client-overlay\\"
src=\\"about:blank\\"
style=\\"
position: fixed;
inset: 0px;
width: 100vw;
height: 100vh;
border: none;
z-index: 2147483647;
\\"
></iframe>
</body>
"
`;

exports[`overlay should show warning when it is not filtered: 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;
\\"
>
Compiled with problems:
</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(251, 245, 180, 0.1);
color: rgb(251, 245, 180);
padding: 1rem 1rem 1.5rem;
\\"
>
<div
style=\\"
color: rgb(232, 59, 70);
font-size: 1.2em;
margin-bottom: 1rem;
font-family: sans-serif;
\\"
>
WARNING
</div>
<div
style=\\"
line-height: 1.5;
font-size: 1rem;
font-family: Menlo, Consolas, monospace;
\\"
>
Unfiltered warning
</div>
</div>
</div>
</div>
</body>
"
`;

exports[`overlay should show warning when it is not filtered: page html 1`] = `
"<body>
<h1>webpack-dev-server is running...</h1>
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>

<iframe
id=\\"webpack-dev-server-client-overlay\\"
src=\\"about:blank\\"
style=\\"
position: fixed;
inset: 0px;
width: 100vw;
height: 100vh;
border: none;
z-index: 2147483647;
\\"
></iframe>
</body>
"
`;
Loading

0 comments on commit 6c017eb

Please sign in to comment.