test(fullstack): test vue-router (#1187)

Author: hi-ogawa

packages/fullstack/e2e/basic.test.ts

@@ -87,6 +87,7 @@ function defineTest(f: Fixture) {
   if (f.mode === "dev") {
     test("hmr react", async ({ page }) => {
       await page.goto(f.url());
+      await waitForHydration(page, "main");
       await using _ = await expectNoReload(page);
 
       await expect(
@@ -112,6 +113,7 @@ function defineTest(f: Fixture) {
 
     test("hmr css", async ({ page }) => {
       await page.goto(f.url());
+      await waitForHydration(page, "main");
       await using _ = await expectNoReload(page);
 
       await expect(

packages/fullstack/e2e/vue-router.test.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { type Page, expect, test } from "@playwright/test";
 import { type Fixture, useFixture } from "./fixture";
 import { expectNoReload, waitForHydration } from "./helper";
 
@@ -36,24 +36,92 @@ function defineTest(f: Fixture) {
     await waitForHydration(page, "#root");
     expect(errors).toEqual([]); // no hydration mismatch
 
-    // client
-    await expect(page.locator(".counter-card")).toContainText("Count: 0");
-    await page.getByRole("button", { name: "Increment" }).click();
-    await expect(page.locator(".counter-card")).toContainText("Count: 1");
-
-    // css
-    // - styles.css
-    await expect(page.getByRole("button", { name: "Increment" })).toHaveCSS(
-      "background-color",
-      "rgb(83, 91, 242)",
-    );
-    // - index.vue (scoped css)
-    await expect(
-      page.getByRole("heading", { name: "Vue Router Custom Framework" }),
-    ).toHaveCSS("color", "rgb(100, 108, 255)");
+    await testClient(page);
+    await testCss(page);
+    await testNavigation(page);
 
     expect(errors).toEqual([]);
   });
 
-  // TODO: hmr
+  test.describe(() => {
+    test.use({ javaScriptEnabled: false });
+
+    test("ssr", async ({ page }) => {
+      await page.goto(f.url());
+      await expect(page.locator(".counter-card")).toContainText("Count: 0");
+      await testCss(page);
+      if (f.mode === "build") {
+        await expect(
+          page.locator("link[rel='modulepreload']").first(),
+        ).toBeAttached();
+      }
+    });
+  });
+
+  if (f.mode === "dev") {
+    test("hmr vue", async ({ page }) => {
+      await page.goto(f.url());
+      await waitForHydration(page, "#root");
+      await using _ = await expectNoReload(page);
+
+      await testClient(page);
+
+      const jsFile = f.createEditor("src/routes/index.vue");
+      jsFile.edit((s) => s.replace("Count:", "Count-edit:"));
+
+      await expect(page.locator(".counter-card")).toContainText(
+        "Count-edit: 1",
+      );
+
+      jsFile.reset();
+      await expect(page.locator(".counter-card")).toContainText("Count: 1");
+
+      await testCss(page);
+    });
+
+    test("hmr css", async ({ page }) => {
+      await page.goto(f.url());
+      await waitForHydration(page, "#root");
+      await using _ = await expectNoReload(page);
+
+      await testClient(page);
+
+      // scoped css
+      const cssFile = f.createEditor("src/routes/index.vue");
+      cssFile.edit((s) =>
+        s.replace("color: rgb(100, 108, 255);", "color: rgb(0, 0, 255);"),
+      );
+      await expect(
+        page.getByRole("heading", { name: "Vue Router Custom Framework" }),
+      ).toHaveCSS("color", "rgb(0, 0, 255)");
+      cssFile.reset();
+
+      // css is restored
+      await testCss(page);
+    });
+  }
+}
+
+async function testClient(page: Page) {
+  await expect(page.locator(".counter-card")).toContainText("Count: 0");
+  await page.getByRole("button", { name: "Increment" }).click();
+  await expect(page.locator(".counter-card")).toContainText("Count: 1");
+}
+
+async function testCss(page: Page) {
+  // styles.css
+  await expect(page.getByRole("button", { name: "Increment" })).toHaveCSS(
+    "background-color",
+    "rgb(83, 91, 242)",
+  );
+  // index.vue (scoped css)
+  await expect(
+    page.getByRole("heading", { name: "Vue Router Custom Framework" }),
+  ).toHaveCSS("color", "rgb(100, 108, 255)");
+}
+
+async function testNavigation(page: Page) {
+  await page.getByRole("link", { name: "About" }).click();
+  await page.waitForURL("**/about");
+  await expect(page.getByRole("heading", { name: "About" })).toBeVisible();
 }