test(e2e): cover the client option surface in the browser and slim the jsdom suite

The subscribe/subscribeAll contract, the ?name= filter, per-source badge
counting, the shared SSE connection between bundled clients (asserted
explicitly in the multi-compiler console snapshot: one "connected" for
two clients), the dev-server-shaped overlay option, and the warnings
filter function — parsed from the entry query and applied against two
real warning-producing modules — now all run in Chrome. The warnings
overlay test also covers clearing on a recovered build, and the
pagination test snapshots the two-error console output that the deleted
jsdom snapshot used to document.

client.test.js keeps only what the browser cannot pin deterministically:
problem-type transitions, the multi-bundle problem union, option
forwarding to the overlay factory, dynamicPublicPath URL building, and
protocol edges.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: bjohansebas

test/__snapshots__/client.test.js.snap.webpack5

@@ -99,7 +99,6 @@ describe("client", () => {
 
   describe("with default options", () => {
     let EventSourceStub;
-    let client;
 
     beforeEach(() => {
       EventSourceStub = makeEventSourceStub();
@@ -108,53 +107,13 @@ describe("client", () => {
       jest.spyOn(console, "log").mockImplementation(() => {});
       jest.spyOn(console, "warn").mockImplementation(() => {});
       jest.spyOn(console, "error").mockImplementation(() => {});
-      client = loadClient();
+      loadClient();
     });
 
     afterEach(() => {
       jest.restoreAllMocks();
     });
 
-    it("calls subscribeAll handler on default messages", () => {
-      const spy = jest.fn();
-      client.subscribeAll(spy);
-      const message = {
-        action: "built",
-        time: 100,
-        hash: "1234567890abcdef",
-        errors: [],
-        warnings: [],
-        modules: [],
-      };
-      EventSourceStub.lastInstance().onmessage(makeMessage(message));
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith(message);
-    });
-
-    it("calls subscribeAll handler on custom messages", () => {
-      const spy = jest.fn();
-      client.subscribeAll(spy);
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({ action: "thingy" }),
-      );
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ action: "thingy" });
-    });
-
-    it("calls only the custom handler for custom messages", () => {
-      const spy = jest.fn();
-      client.subscribe(spy);
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({ custom: "thingy" }),
-      );
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({ action: "built" }),
-      );
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ custom: "thingy" });
-      expect(processUpdate).not.toHaveBeenCalled();
-    });
-
     it("does not trigger webpack on errored builds", () => {
       EventSourceStub.lastInstance().onmessage(
         makeMessage({
@@ -289,41 +248,6 @@ describe("client", () => {
     });
   });
 
-  describe("with an overlay warnings filter function", () => {
-    let EventSourceStub;
-
-    beforeEach(() => {
-      EventSourceStub = makeEventSourceStub();
-      globalThis.EventSource = EventSourceStub;
-      jest.spyOn(console, "info").mockImplementation(() => {});
-      jest.spyOn(console, "log").mockImplementation(() => {});
-      jest.spyOn(console, "warn").mockImplementation(() => {});
-      loadClient(
-        '?overlay={"warnings":"function(message){return message.includes(`keep`)}"}',
-      );
-    });
-
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it("only shows the warnings the filter keeps (dev-server parity)", () => {
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: [],
-          warnings: ["drop this warning", "keep this warning"],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledWith("warnings", [
-        "keep this warning",
-      ]);
-    });
-  });
-
   describe("with overlay warnings enabled via the dev-server-shaped option", () => {
     let EventSourceStub;
 
@@ -341,69 +265,6 @@ describe("client", () => {
       jest.restoreAllMocks();
     });
 
-    it("shows overlay on errored builds", () => {
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: ["Something broke", "Actually, 2 things broke"],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledTimes(1);
-      expect(clientOverlay.showProblems).toHaveBeenCalledWith("errors", [
-        "Something broke",
-        "Actually, 2 things broke",
-      ]);
-      expect(console.error.mock.calls).toMatchSnapshot();
-    });
-
-    it("shows overlay on warning builds", () => {
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: [],
-          warnings: ["This isn't great, but it's not terrible"],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledTimes(1);
-      expect(clientOverlay.showProblems).toHaveBeenCalledWith("warnings", [
-        "This isn't great, but it's not terrible",
-      ]);
-    });
-
-    it("hides overlay after warning build is fixed", () => {
-      const es = EventSourceStub.lastInstance();
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: [],
-          warnings: ["This isn't great, but it's not terrible"],
-          modules: [],
-        }),
-      );
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef2",
-          errors: [],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledTimes(1);
-      expect(clientOverlay.clear).toHaveBeenCalledWith("");
-      expect(clientOverlay.clear).toHaveBeenCalledWith("runtime");
-    });
-
     it("updates overlay after errored build becomes a warning", () => {
       const es = EventSourceStub.lastInstance();
       es.onmessage(
@@ -438,53 +299,6 @@ describe("client", () => {
     });
   });
 
-  describe("with name option", () => {
-    let EventSourceStub;
-
-    beforeEach(() => {
-      EventSourceStub = makeEventSourceStub();
-      globalThis.EventSource = EventSourceStub;
-      jest.spyOn(console, "info").mockImplementation(() => {});
-      jest.spyOn(console, "log").mockImplementation(() => {});
-      jest.spyOn(console, "warn").mockImplementation(() => {});
-      loadClient("?name=test");
-    });
-
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it("does not trigger webpack when event name differs", () => {
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({
-          name: "foo",
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: [],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      expect(processUpdate).not.toHaveBeenCalled();
-    });
-
-    it("does not trigger webpack on sync when event name differs", () => {
-      EventSourceStub.lastInstance().onmessage(
-        makeMessage({
-          name: "bar",
-          action: "sync",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: [],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      expect(processUpdate).not.toHaveBeenCalled();
-    });
-  });
-
   describe("with overlay runtime/trusted-types options", () => {
     it("forwards them to the overlay factory", () => {
       globalThis.EventSource = makeEventSourceStub();
@@ -543,55 +357,6 @@ describe("client", () => {
     });
   });
 
-  describe("with progress option", () => {
-    const INDICATOR_ID = "webpack-dev-middleware-building-indicator";
-    let EventSourceStub;
-
-    beforeEach(() => {
-      EventSourceStub = makeEventSourceStub();
-      globalThis.EventSource = EventSourceStub;
-      jest.spyOn(console, "info").mockImplementation(() => {});
-      jest.spyOn(console, "log").mockImplementation(() => {});
-    });
-
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it("keeps the badge until every compilation finished", () => {
-      loadClient();
-      const es = EventSourceStub.lastInstance();
-
-      es.onmessage(makeMessage({ action: "building", name: "app" }));
-      es.onmessage(makeMessage({ action: "building", name: "admin" }));
-
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          name: "app",
-          time: 1,
-          hash: "h1",
-          errors: [],
-          warnings: [],
-        }),
-      );
-      // "admin" is still building — its `built` has not arrived yet.
-      expect(document.getElementById(INDICATOR_ID)).not.toBeNull();
-
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          name: "admin",
-          time: 1,
-          hash: "h2",
-          errors: [],
-          warnings: [],
-        }),
-      );
-      expect(document.getElementById(INDICATOR_ID)).toBeNull();
-    });
-  });
-
   describe("connection lifecycle", () => {
     let EventSourceStub;
     let client;
@@ -625,14 +390,6 @@ describe("client", () => {
         ),
       ).toBe(true);
     });
-
-    it("reuses the EventSource wrapper across reloads on the same path", () => {
-      // Re-loading the entry on the same page should reuse the cached SSE
-      // connection rather than opening a new one.
-      jest.resetModules();
-      require("../client-src");
-      expect(EventSourceStub.instances).toHaveLength(1);
-    });
   });
 
   describe("with no EventSource", () => {

test/client.test.js

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`error overlay (browser) paginates multiple problems with a counter 1`] = `
+[
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] bundle has 2 errors",
+  "[webpack-dev-middleware] ./a.js 1:7
+Module parse failed: Unexpected token (1:7)
+You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
+> broken a {{{
+./b.js 1:7
+Module parse failed: Unexpected token (1:7)
+You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
+> broken b {{{",
+]
+`;

test/e2e/__snapshots__/overlay.test.js.snap.webpack5

@@ -242,6 +242,10 @@ describe("hot client (browser)", () => {
     app = await createHotApp({
       code: `
         const hotClient = require(${JSON.stringify(CLIENT_ENTRY)});
+        globalThis.__all = [];
+        hotClient.subscribeAll((payload) => {
+          globalThis.__all.push(payload.action);
+        });
         hotClient.subscribe((payload) => {
           globalThis.__custom = payload;
         });
@@ -269,6 +273,13 @@ describe("hot client (browser)", () => {
     expect(await page.evaluate(() => globalThis.__custom.action)).toBe(
       "my-event",
     );
+
+    // subscribeAll saw both the protocol traffic (the connect-time sync) and
+    // the custom payload; subscribe saw only the custom one.
+    const all = await page.evaluate(() => globalThis.__all);
+
+    expect(all).toContain("sync");
+    expect(all).toContain("my-event");
   });
 
   it("disconnect() during the reconnect window cancels the pending reconnect", async () => {