test(e2e): dismiss the overlay with real clicks

Backdrop click, close (×) button, and click-inside-stays-open now run
against real mouse events in the overlay iframe — the backdrop case
clicks the frame's top-left corner away from the centered card, and the
close-button pass rides the catch-up sync that re-shows the overlay
after a reload. The jsdom dismiss describe is removed.

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

Author: bjohansebas

test/e2e/overlay.test.js

@@ -106,6 +106,35 @@ describe("error overlay (browser)", () => {
     expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
   });
 
+  it("dismisses on backdrop and close-button clicks, but not inside the card", async () => {
+    hotApp = await createHotApp({ code: app("v1") });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+
+    hotApp.edit("broken for clicks {{{");
+    let frame = await waitForOverlay(page);
+
+    // Clicking inside the card keeps the overlay open…
+    await frame.click(`#${OVERLAY_ID}-card`);
+    expect(await page.$(`#${OVERLAY_ID}`)).not.toBeNull();
+
+    // …clicking the backdrop (top-left corner, away from the centered card)
+    // dismisses it.
+    const body = await frame.$("body");
+    await body.click({ offset: { x: 5, y: 5 } });
+    await waitForNoOverlay(page);
+
+    // A reload brings the overlay back through the catch-up sync — dismiss
+    // it again through the close (×) button.
+    await page.reload();
+    frame = await waitForOverlay(page);
+    await frame.click('[aria-label="Close"]');
+    await waitForNoOverlay(page);
+
+    expect(await page.$(`#${OVERLAY_ID}`)).toBeNull();
+  });
+
   it("catches runtime errors and renders their message as text, not markup", async () => {
     hotApp = await createHotApp({
       // The error must be thrown from the page's own script — errors raised

test/overlay.test.js

@@ -132,28 +132,6 @@ describe("overlay", () => {
     });
   });
 
-  describe("dismiss", () => {
-    it("closes when clicking the backdrop", () => {
-      showProblems("errors", ["boom"]);
-      getOverlay().contentDocument.body.click();
-      expect(getOverlay()).toBeNull();
-    });
-
-    it("stays open when clicking inside the card", () => {
-      showProblems("errors", ["boom"]);
-      getCard().click();
-      expect(getOverlay()).not.toBeNull();
-    });
-
-    it("closes when clicking the close button", () => {
-      showProblems("errors", ["boom"]);
-      const closeButton = getCard().querySelector("button");
-      expect(closeButton).not.toBeNull();
-      closeButton.click();
-      expect(getOverlay()).toBeNull();
-    });
-  });
-
   describe("runtime errors", () => {
     it("shows uncaught errors in the overlay and accumulates them", () => {
       configureOverlay({ catchRuntimeError: true });