Skip to content

Commit 6c017eb

Browse files
malcolm-keemalcolm-kee
committed
test: test overlay errors and warnings filter function
1 parent 9c6e408 commit 6c017eb

File tree

6 files changed

+685
-66
lines changed

6 files changed

+685
-66
lines changed

‎client-src/index.js

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,30 @@ import createSocketURL from "./utils/createSocketURL.js";
3535
* @property {string} [previousHash]
3636
*/
3737

38+
/**
39+
* @param {boolean | { warnings?: boolean | string; errors?: boolean | string; runtimeErrors?: boolean | string; }} overlayOptions
40+
*/
41+
const decodeOverlayOptions = (overlayOptions) => {
42+
if (typeof overlayOptions === "object") {
43+
["warnings", "errors", "runtimeErrors"].forEach((property) => {
44+
if (typeof overlayOptions[property] === "string") {
45+
const overlayFilterFunctionString = decodeURIComponent(
46+
overlayOptions[property]
47+
);
48+
49+
// eslint-disable-next-line no-new-func
50+
const overlayFilterFunction = new Function(
51+
"message",
52+
`var callback = ${overlayFilterFunctionString}
53+
return callback(message)`
54+
);
55+
56+
overlayOptions[property] = overlayFilterFunction;
57+
}
58+
});
59+
}
60+
};
61+
3862
/**
3963
* @type {Status}
4064
*/
@@ -92,22 +116,7 @@ if (parsedResourceQuery.overlay) {
92116
...options.overlay,
93117
};
94118

95-
["errors", "warnings", "runtimeErrors"].forEach((property) => {
96-
if (typeof options.overlay[property] === "string") {
97-
const overlayFilterFunctionString = decodeURIComponent(
98-
options.overlay[property]
99-
);
100-
101-
// eslint-disable-next-line no-new-func
102-
const overlayFilterFunction = new Function(
103-
"message",
104-
`var callback = ${overlayFilterFunctionString}
105-
return callback(message)`
106-
);
107-
108-
options.overlay[property] = overlayFilterFunction;
109-
}
110-
});
119+
decodeOverlayOptions(options.overlay);
111120
}
112121
enabledFeatures.Overlay = true;
113122
}
@@ -198,6 +207,7 @@ const onSocketMessage = {
198207
}
199208

200209
options.overlay = value;
210+
decodeOverlayOptions(options.overlay);
201211
},
202212
/**
203213
* @param {number} value

‎lib/Server.js

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,16 @@ const memoize = (fn) => {
240240

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

243+
/**
244+
*
245+
* @param {OverlayMessageOptions} [setting]
246+
* @returns
247+
*/
248+
const encodeOverlaySettings = (setting) =>
249+
typeof setting === "function"
250+
? encodeURIComponent(setting.toString())
251+
: setting;
252+
243253
class Server {
244254
/**
245255
* @param {Configuration | Compiler | MultiCompiler} options
@@ -658,16 +668,6 @@ class Server {
658668
}
659669

660670
if (typeof client.overlay !== "undefined") {
661-
/**
662-
*
663-
* @param {OverlayMessageOptions} [setting]
664-
* @returns
665-
*/
666-
const encodeOverlaySettings = (setting) =>
667-
typeof setting === "function"
668-
? encodeURIComponent(setting.toString())
669-
: setting;
670-
671671
const overlayString =
672672
typeof client.overlay === "boolean"
673673
? String(client.overlay)
@@ -2647,11 +2647,26 @@ class Server {
26472647
/** @type {ClientConfiguration} */
26482648
(this.options.client).overlay
26492649
) {
2650+
const overlayConfig = /** @type {ClientConfiguration} */ (
2651+
this.options.client
2652+
).overlay;
2653+
26502654
this.sendMessage(
26512655
[client],
26522656
"overlay",
2653-
/** @type {ClientConfiguration} */
2654-
(this.options.client).overlay
2657+
typeof overlayConfig === "object"
2658+
? {
2659+
errors:
2660+
overlayConfig.errors &&
2661+
encodeOverlaySettings(overlayConfig.errors),
2662+
warnings:
2663+
overlayConfig.warnings &&
2664+
encodeOverlaySettings(overlayConfig.warnings),
2665+
runtimeErrors:
2666+
overlayConfig.runtimeErrors &&
2667+
encodeOverlaySettings(overlayConfig.runtimeErrors),
2668+
}
2669+
: overlayConfig
26552670
);
26562671
}
26572672

‎test/e2e/__snapshots__/overlay.test.js.snap.webpack4

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2221,3 +2221,213 @@ exports[`overlay should show error for uncaught runtime error: overlay html 1`]
22212221
</body>
22222222
"
22232223
`;
2224+
2225+
exports[`overlay should show error when it is not filtered: overlay html 1`] = `
2226+
"<body>
2227+
<div
2228+
id=\\"webpack-dev-server-client-overlay-div\\"
2229+
style=\\"
2230+
position: fixed;
2231+
box-sizing: border-box;
2232+
inset: 0px;
2233+
width: 100vw;
2234+
height: 100vh;
2235+
font-size: large;
2236+
padding: 2rem 2rem 4rem;
2237+
line-height: 1.2;
2238+
white-space: pre-wrap;
2239+
overflow: auto;
2240+
background-color: rgba(0, 0, 0, 0.9);
2241+
color: white;
2242+
\\"
2243+
>
2244+
<div
2245+
style=\\"
2246+
color: rgb(232, 59, 70);
2247+
font-size: 2em;
2248+
white-space: pre-wrap;
2249+
font-family: sans-serif;
2250+
margin: 0px 2rem 2rem 0px;
2251+
flex: 0 0 auto;
2252+
max-height: 50%;
2253+
overflow: auto;
2254+
\\"
2255+
>
2256+
Compiled with problems:
2257+
</div>
2258+
<button
2259+
aria-label=\\"Dismiss\\"
2260+
style=\\"
2261+
color: rgb(255, 255, 255);
2262+
line-height: 1rem;
2263+
font-size: 1.5rem;
2264+
padding: 1rem;
2265+
cursor: pointer;
2266+
position: absolute;
2267+
right: 0px;
2268+
top: 0px;
2269+
background-color: transparent;
2270+
border: none;
2271+
\\"
2272+
>
2273+
×
2274+
</button>
2275+
<div>
2276+
<div
2277+
style=\\"
2278+
background-color: rgba(206, 17, 38, 0.1);
2279+
color: rgb(252, 207, 207);
2280+
padding: 1rem 1rem 1.5rem;
2281+
\\"
2282+
>
2283+
<div
2284+
style=\\"
2285+
color: rgb(232, 59, 70);
2286+
font-size: 1.2em;
2287+
margin-bottom: 1rem;
2288+
font-family: sans-serif;
2289+
\\"
2290+
>
2291+
ERROR
2292+
</div>
2293+
<div
2294+
style=\\"
2295+
line-height: 1.5;
2296+
font-size: 1rem;
2297+
font-family: Menlo, Consolas, monospace;
2298+
\\"
2299+
>
2300+
Unfiltered error
2301+
</div>
2302+
</div>
2303+
</div>
2304+
</div>
2305+
</body>
2306+
"
2307+
`;
2308+
2309+
exports[`overlay should show error when it is not filtered: page html 1`] = `
2310+
"<body>
2311+
<h1>webpack-dev-server is running...</h1>
2312+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
2313+
2314+
<iframe
2315+
id=\\"webpack-dev-server-client-overlay\\"
2316+
src=\\"about:blank\\"
2317+
style=\\"
2318+
position: fixed;
2319+
inset: 0px;
2320+
width: 100vw;
2321+
height: 100vh;
2322+
border: none;
2323+
z-index: 2147483647;
2324+
\\"
2325+
></iframe>
2326+
</body>
2327+
"
2328+
`;
2329+
2330+
exports[`overlay should show warning when it is not filtered: overlay html 1`] = `
2331+
"<body>
2332+
<div
2333+
id=\\"webpack-dev-server-client-overlay-div\\"
2334+
style=\\"
2335+
position: fixed;
2336+
box-sizing: border-box;
2337+
inset: 0px;
2338+
width: 100vw;
2339+
height: 100vh;
2340+
font-size: large;
2341+
padding: 2rem 2rem 4rem;
2342+
line-height: 1.2;
2343+
white-space: pre-wrap;
2344+
overflow: auto;
2345+
background-color: rgba(0, 0, 0, 0.9);
2346+
color: white;
2347+
\\"
2348+
>
2349+
<div
2350+
style=\\"
2351+
color: rgb(232, 59, 70);
2352+
font-size: 2em;
2353+
white-space: pre-wrap;
2354+
font-family: sans-serif;
2355+
margin: 0px 2rem 2rem 0px;
2356+
flex: 0 0 auto;
2357+
max-height: 50%;
2358+
overflow: auto;
2359+
\\"
2360+
>
2361+
Compiled with problems:
2362+
</div>
2363+
<button
2364+
aria-label=\\"Dismiss\\"
2365+
style=\\"
2366+
color: rgb(255, 255, 255);
2367+
line-height: 1rem;
2368+
font-size: 1.5rem;
2369+
padding: 1rem;
2370+
cursor: pointer;
2371+
position: absolute;
2372+
right: 0px;
2373+
top: 0px;
2374+
background-color: transparent;
2375+
border: none;
2376+
\\"
2377+
>
2378+
×
2379+
</button>
2380+
<div>
2381+
<div
2382+
style=\\"
2383+
background-color: rgba(251, 245, 180, 0.1);
2384+
color: rgb(251, 245, 180);
2385+
padding: 1rem 1rem 1.5rem;
2386+
\\"
2387+
>
2388+
<div
2389+
style=\\"
2390+
color: rgb(232, 59, 70);
2391+
font-size: 1.2em;
2392+
margin-bottom: 1rem;
2393+
font-family: sans-serif;
2394+
\\"
2395+
>
2396+
WARNING
2397+
</div>
2398+
<div
2399+
style=\\"
2400+
line-height: 1.5;
2401+
font-size: 1rem;
2402+
font-family: Menlo, Consolas, monospace;
2403+
\\"
2404+
>
2405+
Unfiltered warning
2406+
</div>
2407+
</div>
2408+
</div>
2409+
</div>
2410+
</body>
2411+
"
2412+
`;
2413+
2414+
exports[`overlay should show warning when it is not filtered: page html 1`] = `
2415+
"<body>
2416+
<h1>webpack-dev-server is running...</h1>
2417+
<script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
2418+
2419+
<iframe
2420+
id=\\"webpack-dev-server-client-overlay\\"
2421+
src=\\"about:blank\\"
2422+
style=\\"
2423+
position: fixed;
2424+
inset: 0px;
2425+
width: 100vw;
2426+
height: 100vh;
2427+
border: none;
2428+
z-index: 2147483647;
2429+
\\"
2430+
></iframe>
2431+
</body>
2432+
"
2433+
`;

0 commit comments

Comments
 (0)