import { expect } from "e2e";
import { createServer } from "node:http";
import { test, WEB } from "./t3.ts";

test("The reporter's service worker badge call does not silently delete the Browser tab", WEB,
  async ({ t3, app, screen, browser }) => {
    const html = `<!doctype html><p id=s>loaded</p>
<script>
navigator.serviceWorker.register("sw.js")
  .then(() => navigator.serviceWorker.ready)
  .then(r => { r.active.postMessage("badge"); s.textContent = "sw posted" })
</script>`;
    const worker = `self.addEventListener("install", () => self.skipWaiting())
self.addEventListener("activate", e => e.waitUntil(self.clients.claim()))
self.addEventListener("message", e => e.waitUntil(navigator.setAppBadge(3).catch(() => {})))`;
    const site = createServer((req, res) => {
      res.setHeader("Content-Type", req.url === "/sw.js" ? "application/javascript" : "text/html");
      res.end(req.url === "/sw.js" ? worker : html);
    });
    await new Promise<void>(resolve => site.listen(8765, "127.0.0.1", resolve));
    try {
      const project = await t3.project("Badge crash proof");
      const thread = await t3.thread({project, title: "Service worker badge", messages: ["Ready"]});
      await t3.open(thread);
      await screen.getByRole("button", "Toggle right panel").tap();
      await screen.getByRole("button", "Add panel surface").tap();
      await screen.getByRole("menuitem", "Browser B", {exact: true}).tap();
      const address = screen.getByPlaceholder("Search or enter URL");
      await address.fill("http://127.0.0.1:8765/");
      await browser.keyboard.press("Enter");
      await new Promise(resolve => setTimeout(resolve, 4000));
      await app.screenshot("after-service-worker-badge");
      await expect(address).toBeVisible();
    } finally { await new Promise<void>(resolve => site.close(() => resolve())); }
  });