// The real Vite 7 dev server (demo/apps/vite, pinned by its lockfile, esbuild and
// rollup overridden with their WebAssembly builds) started through its JS API in
// demo/app.html, the minimal single-app runner. HTML is what real Node v24.16 served
// for `node server.mjs` in that directory, fetched as a plain GET of "/" (not a
// navigation, so no shim is injected).
import { test, expect } from "@playwright/test";
import { cacheTarballs } from "./tarball-cache";

// The demo app installs from its lockfile; tarballs come from the cache, not the network.
test.beforeEach(async ({ context }) => cacheTarballs(context));

const HTML = `<!doctype html>
<html lang="en">
  <head>
    <script type="module">import { injectIntoGlobalHook } from "/@react-refresh";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
`;

test("the Vite dev server serves the React app, its CSS and a connected HMR client", async ({ page }) => {
  test.setTimeout(90_000);
  const consoleLines: string[] = [];
  page.on("console", (m) => consoleLines.push(m.text()));
  await page.goto("/demo/app.html?app=vite");
  const frame = page.frameLocator("#app-frame");
  await expect(frame.locator("#hi")).toHaveText("Hello from Vite", { timeout: 60_000 });
  await expect(page.locator("#console")).toContainText("Local:   http://localhost:5173/");
  await expect(frame.locator("#hi")).toHaveCSS("color", "rgb(100, 108, 255)");
  await expect.poll(() => consoleLines).toContain("[vite] connected.");
  await frame.locator("#count").click();
  await expect(frame.locator("#count")).toHaveText("count is 1");
  const html = await frame.locator("body").evaluate(() => fetch("/").then((r) => r.text()));
  expect(html).toBe(HTML);
});