test(e2e): exercise the overlay's shared state with two real bundled copies

Same pattern as the indicator: each compilation exposes its own bundled
copy of the overlay module and the tests drive both from the browser —
a second copy adopts the shared iframe instead of stacking one, both
sources paginate together in the union, either copy can dismiss what
the other rendered, errors from one copy outrank another's warnings
until the erroring source recovers, clearing an unreported source does
not rebuild the card another copy is showing, and a leaner state shape
left by an older package version gets its missing fields filled.

The jsdom equivalents are removed.

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

Author: bjohansebas

test/e2e/overlay.test.js

@@ -303,3 +303,190 @@ describe("error overlay (browser)", () => {
     expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
   });
 });
+
+describe("overlay shared state across bundled copies (browser)", () => {
+  const OVERLAY_ENTRY = require.resolve("../../client-src/overlay.js");
+  const OVERLAY_STATE_KEY = "__webpack_dev_middleware_hot_overlay_state__";
+  const CARD_ID = `${OVERLAY_ID}-card`;
+
+  let hotApp;
+  let browser;
+  let page;
+
+  /**
+   * Two real bundled copies of the overlay module — one per compilation —
+   * exposed as globals so the tests can drive both from the page.
+   * @param {string} globalName global to expose the copy under
+   * @returns {string} app source
+   */
+  const exposeOverlay = (globalName) =>
+    `globalThis.${globalName} = require(${JSON.stringify(OVERLAY_ENTRY)});`;
+
+  const start = async () => {
+    hotApp = await createHotApp({
+      // overlay=false keeps the real hot clients from reporting into the
+      // overlay these tests drive themselves.
+      query: "?overlay=false",
+      apps: [
+        { name: "a", code: exposeOverlay("overlayA") },
+        { name: "b", code: exposeOverlay("overlayB") },
+      ],
+    });
+    ({ page, browser } = await runBrowser());
+  };
+
+  /**
+   * @returns {Promise<import("puppeteer").Frame>} the overlay iframe's frame
+   */
+  const overlayFrame = async () => {
+    const handle = await page.waitForSelector(`#${OVERLAY_ID}`, {
+      timeout: 30000,
+    });
+
+    return handle.contentFrame();
+  };
+
+  afterEach(async () => {
+    // try/finally: a rejected browser.close() must not leak the watcher,
+    // the server, and the temp dir behind it.
+    try {
+      if (browser) {
+        await browser.close();
+      }
+    } finally {
+      browser = undefined;
+      if (hotApp) {
+        const closing = hotApp;
+        hotApp = undefined;
+        await closing.close();
+      }
+    }
+  });
+
+  it("shows the problems of two copies in the same overlay", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", ["boom from copy A"]);
+      globalThis.overlayB.showProblems("errors", ["boom from copy B"], "b");
+    });
+
+    // One iframe: the second copy adopted it instead of stacking another,
+    // and both sources are paginated together in the union.
+    expect(
+      await page.evaluate(() => document.querySelectorAll("iframe").length),
+    ).toBe(1);
+
+    const frame = await overlayFrame();
+
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "boom from copy A",
+    );
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "1 / 2",
+    );
+
+    await frame.click('[aria-label="Next problem"]');
+    await frame.waitForFunction(() =>
+      document.body.textContent.includes("boom from copy B"),
+    );
+
+    // The state is shared both ways: dismissing from the first copy removes
+    // the overlay the second copy rendered into.
+    await page.evaluate(() => globalThis.overlayA.clear());
+    expect(
+      await page.evaluate(() => document.querySelectorAll("iframe").length),
+    ).toBe(0);
+  });
+
+  it("prefers one copy's errors over another copy's warnings", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", ["boom from copy A"]);
+      globalThis.overlayB.showProblems(
+        "warnings",
+        ["careful from copy B"],
+        "b",
+      );
+    });
+
+    const frame = await overlayFrame();
+    const errorRed = "rgb(255, 51, 72)";
+    const warningYellow = "rgb(255, 211, 14)";
+
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "boom from copy A",
+    );
+    expect(await frame.evaluate(() => document.body.textContent)).not.toContain(
+      "careful from copy B",
+    );
+    expect(
+      await frame.evaluate(
+        (id) => document.getElementById(id).style.borderTopColor,
+        CARD_ID,
+      ),
+    ).toBe(errorRed);
+
+    // Once the erroring source recovers, the warnings surface.
+    await page.evaluate(() => globalThis.overlayA.clear(""));
+    await frame.waitForFunction(() =>
+      document.body.textContent.includes("careful from copy B"),
+    );
+    expect(
+      await frame.evaluate(
+        (id) => document.getElementById(id).style.borderTopColor,
+        CARD_ID,
+      ),
+    ).toBe(warningYellow);
+  });
+
+  it("does not re-render when a copy clears a source that reported nothing", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", ["a", "b"], "x");
+    });
+
+    const frame = await overlayFrame();
+
+    await frame.evaluate((id) => {
+      globalThis.__cardChild = document.getElementById(id).firstElementChild;
+    }, CARD_ID);
+
+    // What the reporter does on every clean build of its own bundle.
+    await page.evaluate(() => globalThis.overlayB.clear("never-reported"));
+
+    // Same DOM nodes — the card the other copy is showing was not rebuilt.
+    expect(
+      await frame.evaluate(
+        (id) =>
+          globalThis.__cardChild ===
+          document.getElementById(id).firstElementChild,
+        CARD_ID,
+      ),
+    ).toBe(true);
+    expect(await page.$(`#${OVERLAY_ID}`)).not.toBeNull();
+  });
+
+  it("fills state fields missing from an older copy's shape", async () => {
+    await start();
+    // An older package version created a leaner shared state before the
+    // bundles load.
+    await page.evaluateOnNewDocument((key) => {
+      globalThis[key] = { frame: null, card: null };
+    }, OVERLAY_STATE_KEY);
+    await page.goto(hotApp.url);
+
+    await page.evaluate(() => {
+      globalThis.overlayA.showProblems("errors", ["boom"], "newer");
+    });
+
+    expect(
+      await page.evaluate(() => document.querySelectorAll("iframe").length),
+    ).toBe(1);
+  });
+});

test/overlay.test.js

@@ -438,101 +438,4 @@ describe("overlay", () => {
       configureOverlay({ ansiColors: { red: "ff3348" } });
     });
   });
-
-  describe("shared state across module copies", () => {
-    it("shows the errors of two clients in the same overlay", () => {
-      // First client (e.g. the webpack-dev-middleware SSE client) reports.
-      showProblems("errors", ["boom from the wdm client"]);
-
-      expect(document.querySelectorAll("iframe")).toHaveLength(1);
-      expect(getCard().textContent).toContain("boom from the wdm client");
-
-      // A second client bundling its own copy of the module (e.g. the
-      // webpack-dev-server client) reports into the SAME overlay: it adopts
-      // the shared iframe instead of stacking a duplicate, and its own
-      // source slot joins the union next to the first client's problems.
-      jest.resetModules();
-
-      const secondClient = require("../client-src/overlay");
-
-      secondClient.showProblems("errors", ["boom from the wds client"], "wds");
-
-      expect(document.querySelectorAll("iframe")).toHaveLength(1);
-      // Both clients' errors are in the union, paginated together.
-      expect(getCard().textContent).toContain("boom from the wdm client");
-      expect(getCard().textContent).toContain("1 / 2");
-
-      getOverlay().contentDocument.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "ArrowRight" }),
-      );
-      expect(getCard().textContent).toContain("boom from the wds client");
-
-      // The state is shared both ways: dismissing from the first client
-      // removes the overlay the second client rendered.
-      clear();
-      expect(getOverlay()).toBeNull();
-      expect(document.querySelectorAll("iframe")).toHaveLength(0);
-    });
-
-    it("prefers one client's errors over another client's warnings", () => {
-      showProblems("errors", ["boom from the wdm client"]);
-
-      jest.resetModules();
-
-      const secondClient = require("../client-src/overlay");
-
-      // Errors from any source suppress warnings in the union, so another
-      // client's warnings do not hide the broken build.
-      secondClient.showProblems(
-        "warnings",
-        ["careful from the wds client"],
-        "wds",
-      );
-
-      expect(document.querySelectorAll("iframe")).toHaveLength(1);
-      expect(getCard().textContent).toContain("boom from the wdm client");
-      expect(getCard().textContent).not.toContain(
-        "careful from the wds client",
-      );
-      expect(getCard().style.borderTopColor).toBe("rgb(255, 51, 72)");
-
-      // Once the erroring source recovers, the warnings surface.
-      secondClient.clear("");
-
-      expect(getCard().textContent).toContain("careful from the wds client");
-      expect(getCard().style.borderTopColor).toBe("rgb(255, 211, 14)");
-    });
-
-    it("does not re-render when clearing a source that reported nothing", () => {
-      showProblems("errors", ["a", "b"], "x");
-
-      const cardChild = getCard().firstElementChild;
-
-      // What the reporter does on every clean build of its own bundle.
-      clear("never-reported");
-
-      // Same DOM nodes — the card another client is showing was not rebuilt.
-      expect(getCard().firstElementChild).toBe(cardChild);
-      expect(getOverlay()).not.toBeNull();
-    });
-
-    it("fills state fields missing from an older copy's shape", () => {
-      const OVERLAY_STATE_KEY = "__webpack_dev_middleware_hot_overlay_state__";
-
-      // Simulate an older package version having created a leaner state.
-      window[OVERLAY_STATE_KEY] = { frame: null, card: null };
-
-      jest.resetModules();
-
-      const newerCopy = require("../client-src/overlay");
-
-      expect(() =>
-        newerCopy.showProblems("errors", ["boom"], "newer"),
-      ).not.toThrow();
-      expect(document.querySelectorAll("iframe")).toHaveLength(1);
-
-      newerCopy.clear();
-      delete window[OVERLAY_STATE_KEY];
-    });
-  });
 });