test(e2e): problem-type transitions, runtimeErrors=false, warning updates, and dynamicPublicPath

bjohansebas · claude · bjohansebas · commit 2e0fb147659c · 2026-07-25T21:49:48.000-05:00
A warning overlay escalates to an error overlay when the build breaks,
an error overlay becomes a warning overlay on partial recovery (read
through the page realm so the reload fallback cannot detach it),
overlay={"runtimeErrors":false} leaves runtime errors uncaught, updates
carrying warnings apply without a reload, and the client connects and
updates through a dynamic public path served under /assets/ (the
helper gained a publicPath option). Six jsdom equivalents are removed —
client.test.js keeps only the slash-edge parsing and the protocol
guards nothing can reach end to end.

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/test/client.test.js b/test/client.test.js
@@ -22,14 +22,6 @@ jest.mock("../client-src/overlay", () => {
   return factory;
 });
 
-/**
- * @param {EXPECTED_ANY} obj message payload
- * @returns {{ data: string }} fake SSE event
- */
-function makeMessage(obj) {
-  return { data: typeof obj === "string" ? obj : JSON.stringify(obj) };
-}
-
 /**
  * Stub `EventSource` so each test can drive `message`/`error`/`open` events.
  * @returns {EXPECTED_ANY} fake constructor + last instance accessor
@@ -97,168 +89,6 @@ describe("client", () => {
     jest.useRealTimers();
   });
 
-  describe("with default options", () => {
-    let EventSourceStub;
-
-    beforeEach(() => {
-      EventSourceStub = makeEventSourceStub();
-      globalThis.EventSource = EventSourceStub;
-      jest.spyOn(console, "info").mockImplementation(() => {});
-      jest.spyOn(console, "log").mockImplementation(() => {});
-      jest.spyOn(console, "warn").mockImplementation(() => {});
-      jest.spyOn(console, "error").mockImplementation(() => {});
-      loadClient();
-    });
-
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it("updates overlay when an errored build becomes a warning", () => {
-      const es = EventSourceStub.lastInstance();
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: ["Something broke", "Actually, 2 things broke"],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef2",
-          errors: [],
-          warnings: ["This isn't great, but it's not terrible"],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledTimes(2);
-      expect(clientOverlay.showProblems).toHaveBeenLastCalledWith("warnings", [
-        "This isn't great, but it's not terrible",
-      ]);
-      // The overlay content is replaced, not dismissed.
-      expect(clientOverlay.clear).not.toHaveBeenCalled();
-    });
-
-    it("triggers webpack 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(processUpdate).toHaveBeenCalledTimes(1);
-    });
-
-    it("shows overlay after warning build becomes an error", () => {
-      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: ["Something broke", "Actually, 2 things broke"],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledTimes(2);
-      expect(clientOverlay.showProblems).toHaveBeenLastCalledWith("errors", [
-        "Something broke",
-        "Actually, 2 things broke",
-      ]);
-    });
-  });
-
-  describe("with overlay warnings enabled via the dev-server-shaped option", () => {
-    let EventSourceStub;
-
-    beforeEach(() => {
-      EventSourceStub = makeEventSourceStub();
-      globalThis.EventSource = EventSourceStub;
-      jest.spyOn(console, "info").mockImplementation(() => {});
-      jest.spyOn(console, "log").mockImplementation(() => {});
-      jest.spyOn(console, "warn").mockImplementation(() => {});
-      jest.spyOn(console, "error").mockImplementation(() => {});
-      loadClient('?overlay={"warnings":true}');
-    });
-
-    afterEach(() => {
-      jest.restoreAllMocks();
-    });
-
-    it("updates overlay after errored build becomes a warning", () => {
-      const es = EventSourceStub.lastInstance();
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef",
-          errors: ["Something broke"],
-          warnings: [],
-          modules: [],
-        }),
-      );
-      es.onmessage(
-        makeMessage({
-          action: "built",
-          time: 100,
-          hash: "1234567890abcdef2",
-          errors: [],
-          warnings: ["This isn't great, but it's not terrible"],
-          modules: [],
-        }),
-      );
-      expect(clientOverlay.showProblems).toHaveBeenCalledTimes(2);
-      expect(clientOverlay.showProblems).toHaveBeenNthCalledWith(1, "errors", [
-        "Something broke",
-      ]);
-      expect(clientOverlay.showProblems).toHaveBeenNthCalledWith(
-        2,
-        "warnings",
-        ["This isn't great, but it's not terrible"],
-      );
-    });
-  });
-
-  describe("with overlay runtime/trusted-types options", () => {
-    it("forwards them to the overlay factory", () => {
-      globalThis.EventSource = makeEventSourceStub();
-
-      loadClient(
-        '?overlay={"runtimeErrors":false,"trustedTypesPolicyName":"webpack#overlay","openEditorEndpoint":"/__open-editor"}',
-      );
-
-      const overlayFactory = require("../client-src/overlay");
-
-      expect(overlayFactory).toHaveBeenCalledWith(
-        expect.objectContaining({
-          catchRuntimeError: false,
-          trustedTypesPolicyName: "webpack#overlay",
-          openEditorEndpoint: "/__open-editor",
-        }),
-      );
-    });
-  });
-
   describe("with dynamicPublicPath", () => {
     let EventSourceStub;
 
@@ -274,12 +104,6 @@ describe("client", () => {
       jest.restoreAllMocks();
     });
 
-    it("appends the SSE path to the public path like webpack appends filenames", () => {
-      globalThis.__webpack_public_path__ = "/assets/";
-      loadClient("?dynamicPublicPath=true");
-      expect(EventSourceStub.lastInstance().url).toBe("/assets/__webpack_hmr");
-    });
-
     it("preserves intentional double slashes inside the public path", () => {
       globalThis.__webpack_public_path__ = "https://host//rewritten/";
       loadClient("?dynamicPublicPath=true");
diff --git a/test/e2e/client.test.js b/test/e2e/client.test.js
@@ -329,6 +329,56 @@ describe("hot client (browser)", () => {
     expect(await readReloadMarker(page)).toBe(true);
   });
 
+  it("applies updates that carry warnings", async () => {
+    const warningApp = (text) => `
+      document.getElementById("app").textContent = ${JSON.stringify(text)};
+      const dep = "./nothing";
+      try {
+        require(dep);
+      } catch (err) {
+        // expected
+      }
+      if (module.hot) {
+        module.hot.accept();
+      }
+    `;
+
+    app = await createHotApp({ code: warningApp("v1") });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(app.url);
+    await waitForAppText(page, "v1");
+    await plantReloadMarker(page);
+
+    // Warnings do not block HMR: the update lands without a reload.
+    app.edit(warningApp("v2"));
+    await waitForAppText(page, "v2");
+
+    expect(await readReloadMarker(page)).toBe(true);
+  });
+
+  it("connects through a dynamic public path", async () => {
+    app = await createHotApp({
+      publicPath: "/assets/",
+      hot: { path: "/assets/__webpack_hmr" },
+      query: "?dynamicPublicPath=true&path=/__webpack_hmr",
+      code: acceptedApp("v1"),
+    });
+    ({ page, browser } = await runBrowser());
+    const console_ = collectConsole(page);
+
+    await page.goto(app.url);
+    await waitForAppText(page, "v1");
+    // __webpack_public_path__ ("/assets/") + the path option's basename.
+    await console_.waitFor("connected");
+    await plantReloadMarker(page);
+
+    app.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+
+    expect(await readReloadMarker(page)).toBe(true);
+  });
+
   it("routes server publish() payloads to subscribe handlers", async () => {
     app = await createHotApp({
       code: `
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
@@ -237,6 +237,111 @@ describe("error overlay (browser)", () => {
     expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
   });
 
+  it("escalates a warning overlay to an error overlay", async () => {
+    hotApp = await createHotApp({
+      code: `
+        document.getElementById("app").textContent = "v1";
+        const dep = "./nothing";
+        try {
+          require(dep);
+        } catch (err) {
+          // expected
+        }
+        if (module.hot) {
+          module.hot.accept();
+        }
+      `,
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+
+    const frame = await waitForOverlay(page);
+    await frame.waitForFunction(() =>
+      document.body.textContent.includes("Critical dependency"),
+    );
+
+    // The build breaks: the same overlay now shows the error instead.
+    hotApp.edit("broken after warning {{{");
+    await frame.waitForFunction(
+      () =>
+        document.body.textContent.includes("Module parse failed") &&
+        !document.body.textContent.includes("Critical dependency"),
+    );
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "ERROR",
+    );
+  });
+
+  it("turns an error overlay into a warning overlay on partial recovery", async () => {
+    hotApp = await createHotApp({ code: "broken from the start {{{" });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await waitForOverlay(page);
+
+    // Recovering into a warning-carrying build replaces the error content
+    // (possibly via the reload fallback, which re-syncs the warning). The
+    // overlay is read through the page realm so a reload cannot detach it.
+    hotApp.edit(`
+        document.getElementById("app").textContent = "v1";
+        const dep = "./nothing";
+        try {
+          require(dep);
+        } catch (err) {
+          // expected
+        }
+        if (module.hot) {
+          module.hot.accept();
+        }
+      `);
+    await page.waitForFunction(
+      (id) => {
+        const body = document.getElementById(id)?.contentDocument?.body;
+        return (
+          body &&
+          body.textContent.includes("Critical dependency") &&
+          !body.textContent.includes("Module parse failed")
+        );
+      },
+      { timeout: 30000, polling: 100 },
+      OVERLAY_ID,
+    );
+    expect(
+      await page.evaluate(
+        (id) => document.getElementById(id).contentDocument.body.textContent,
+        OVERLAY_ID,
+      ),
+    ).toContain("WARNING");
+  });
+
+  it('overlay={"runtimeErrors":false} leaves runtime errors uncaught', async () => {
+    hotApp = await createHotApp({
+      query: '?overlay={"runtimeErrors":false}',
+      code: `
+        document.getElementById("app").textContent = "v1";
+        globalThis.boom = (message) => {
+          setTimeout(() => {
+            throw new Error(message);
+          }, 0);
+        };
+      `,
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await page.waitForFunction(
+      () => document.getElementById("app")?.textContent === "v1",
+    );
+
+    await page.evaluate(() => globalThis.boom("uncaught boom"));
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500);
+    });
+
+    expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
+  });
+
   it('overlay={"warnings":false} suppresses warnings (dev-server shape)', async () => {
     hotApp = await createHotApp({
       query: '?overlay={"warnings":false}',
diff --git a/test/helpers/hot-app.js b/test/helpers/hot-app.js
