fix www tests

Author: marvinhagemeister

www/main_test.ts

@@ -1,87 +1,100 @@
 import VERSIONS from "../versions.json" with { type: "json" };
-import { app } from "./main.ts";
 import {
-  buildProd,
-  withBrowserApp,
+  withBrowser,
+  withChildProcessServer,
 } from "../packages/fresh/tests/test_utils.tsx";
 import { expect } from "@std/expect";
 import { retry } from "@std/async/retry";
+import { buildVite } from "../packages/plugin-vite/tests/test_utils.ts";
 
-const applyCache = await buildProd({ root: import.meta.dirname! });
-applyCache(app);
-
-const handler = app.handler();
+const result = await buildVite(import.meta.dirname!);
 
 Deno.test("CORS should not set on GET /fresh-badge.svg", async () => {
-  const req = new Request("http://localhost/fresh-badge.svg");
-  const resp = await handler(req);
-  await resp?.body?.cancel();
-
-  expect(resp.headers.get("cross-origin-resource-policy")).toEqual(null);
+  await withChildProcessServer(
+    {
+      cwd: result.tmp,
+      args: ["serve", "-A", "--port", "0", "_fresh/server.js"],
+    },
+    async (address) => {
+      const resp = await fetch(`${address}/fresh-badge.svg`);
+      await resp?.body?.cancel();
+      expect(resp.headers.get("cross-origin-resource-policy")).toEqual(null);
+    },
+  );
 });
 
 Deno.test({
   name: "shows version selector",
   fn: async () => {
     await retry(async () => {
-      await withBrowserApp(app, async (page, address) => {
-        await page.goto(`${address}/docs`);
-        await page.waitForSelector("#version");
+      await withChildProcessServer(
+        {
+          cwd: result.tmp,
+          args: ["serve", "-A", "--port", "0", "_fresh/server.js"],
+        },
+        async (address) => {
+          await withBrowser(async (page) => {
+            await page.goto(`${address}/docs`);
+            await page.waitForSelector("#version");
 
-        // Check that we redirected to the first page
-        await page.waitForFunction(() => {
-          const url = new URL(window.location.href);
-          return url.pathname === "/docs/introduction";
-        });
+            // Check that we redirected to the first page
+            await page.waitForFunction(() => {
+              const url = new URL(window.location.href);
+              return url.pathname === "/docs/introduction";
+            });
 
-        // Wait for version selector to be enabled
-        await page.waitForSelector("#version:not([disabled])");
+            // Wait for version selector to be enabled
+            await page.waitForSelector("#version:not([disabled])");
 
-        const options = await page
-          .locator<HTMLSelectElement>("#version")
-          .evaluate((el) => {
-            return Array.from(el.options).map((option) => ({
-              value: option.value,
-              label: option.textContent,
-            }));
-          });
+            const options = await page
+              .locator<HTMLSelectElement>("#version")
+              .evaluate((el) => {
+                return Array.from(el.options).map((option) => ({
+                  value: option.value,
+                  label: option.textContent,
+                }));
+              });
 
-        expect(options).toEqual([
-          {
-            value: "canary",
-            label: "canary",
-          },
-          {
-            value: "latest",
-            label: VERSIONS[0],
-          },
-        ]);
+            expect(options).toEqual([
+              {
+                value: "canary",
+                label: "canary",
+              },
+              {
+                value: "latest",
+                label: VERSIONS[0],
+              },
+            ]);
 
-        const selectValue = await page
-          .locator<HTMLSelectElement>("#version")
-          .evaluate((el) => el.value);
-        expect(selectValue).toEqual("latest");
+            const selectValue = await page
+              .locator<HTMLSelectElement>("#version")
+              .evaluate((el) => el.value);
+            expect(selectValue).toEqual("latest");
 
-        // Go to canary page
-        await page.evaluate(() => {
-          const el = document.querySelector("#version") as HTMLSelectElement;
-          el.value = "canary";
-          el.dispatchEvent(new Event("change"));
-        });
+            // Go to canary page
+            await page.evaluate(() => {
+              const el = document.querySelector(
+                "#version",
+              ) as HTMLSelectElement;
+              el.value = "canary";
+              el.dispatchEvent(new Event("change"));
+            });
 
-        await new Promise((r) => setTimeout(r, 1000));
+            await new Promise((r) => setTimeout(r, 1000));
 
-        await page.waitForSelector("#version:not([disabled])");
-        const selectValue2 = await page
-          .locator<HTMLSelectElement>("#version")
-          .evaluate((el) => el.value);
-        expect(selectValue2).toEqual("canary");
+            await page.waitForSelector("#version:not([disabled])");
+            const selectValue2 = await page
+              .locator<HTMLSelectElement>("#version")
+              .evaluate((el) => el.value);
+            expect(selectValue2).toEqual("canary");
 
-        await page.waitForFunction(() => {
-          const url = new URL(window.location.href);
-          return url.pathname === "/docs/canary/introduction";
-        });
-      });
+            await page.waitForFunction(() => {
+              const url = new URL(window.location.href);
+              return url.pathname === "/docs/canary/introduction";
+            });
+          });
+        },
+      );
     });
   },
 });