Test draft indicator

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3

examples/form/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/test-results/
+/playwright-report/

examples/form/package.json

@@ -21,11 +21,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@playwright/test": "^1.46.1",
     "@tailwindcss/forms": "^0.5.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
+    "is-ci": "^3.0.1",
     "globals": "^15.11.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.9",

examples/form/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: isCI,
+  /* Retry on CI only */
+  retries: isCI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5173/",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    permissions: ["clipboard-read", "clipboard-write"],
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: "pnpm preview --port 5173",
+      url: "http://localhost:5173/",
+      reuseExistingServer: !isCI,
+    },
+  ],
+});

examples/form/src/Orders.tsx

@@ -22,6 +22,7 @@ export function Orders() {
           <h1 className="text-lg pb-2 border-b mb-3">
             <strong>Your orders 🧋</strong>
           </h1>
+
           {me?.profile?.orders?.length ? (
             me?.profile?.orders.map((order) =>
               order ? <OrderThumbnail key={order.id} order={order} /> : null,

examples/form/tests/form.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import { LoginPage } from "./pages/LoginPage";
+
+test("create and edit an order", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.goto();
+  await loginPage.fillUsername("Alice");
+  await loginPage.signup();
+
+  // start an order
+  await page.getByRole("link", { name: "Add new order" }).click();
+  await page.getByLabel("Base tea").selectOption("Oolong");
+
+  // test draft indicator
+  await page.getByRole("link", { name: /Back to all orders/ }).click();
+  await expect(page.getByText("You have a draft")).toBeVisible();
+
+  // fill out the rest of order form
+  await page.getByRole("link", { name: "Add new order" }).click();
+  await page.getByLabel("Pearl").check();
+  await page.getByLabel("Taro").check();
+  await page.getByLabel("Delivery date").fill("2024-12-21");
+  await page.getByLabel("With milk?").check();
+  await page.getByLabel("Special instructions").fill("25% sugar");
+  await page.getByRole("button", { name: "Submit" }).click();
+
+  await page.waitForURL("/");
+
+  // the draft indicator should be gone because the order was submitted
+  await expect(page.getByText("You have a draft")).toHaveCount(0);
+
+  // check if order was created correctly
+  const firstOrder = page.getByRole("link", { name: "Oolong milk tea" });
+  await expect(firstOrder).toHaveText(/25% sugar/);
+  await expect(firstOrder).toHaveText(/12\/21\/2024/);
+  await expect(firstOrder).toHaveText(/with pearl, taro/);
+
+  // edit order
+  await firstOrder.click();
+  await page.getByLabel("Base tea").selectOption("Jasmine");
+  await page.getByLabel("Red bean").check();
+  await page.getByLabel("Brown sugar").check();
+  await page.getByLabel("Delivery date").fill("2024-12-25");
+  await page.getByLabel("With milk?").uncheck();
+  await page.getByLabel("Special instructions").fill("10% sugar");
+  await page.getByRole("link", { name: /Back to all orders/ }).click();
+
+  // check if order was edited correctly
+  const editedOrder = page.getByRole("link", { name: "Jasmine tea" });
+  await expect(editedOrder).toHaveText(/10% sugar/);
+  await expect(editedOrder).toHaveText(/12\/25\/2024/);
+  await expect(editedOrder).toHaveText(
+    /with pearl, taro, red bean, brown sugar/,
+  );
+});

examples/form/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export class LoginPage {
+  readonly page: Page;
+  readonly usernameInput: Locator;
+  readonly signupButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.usernameInput = page.getByRole("textbox");
+    this.signupButton = page.getByRole("button", {
+      name: "Sign up",
+    });
+  }
+
+  async goto() {
+    this.page.goto("/");
+  }
+
+  async fillUsername(value: string) {
+    await this.usernameInput.clear();
+    await this.usernameInput.fill(value);
+  }
+
+  async loginAs(value: string) {
+    await this.page
+      .getByRole("button", {
+        name: value,
+      })
+      .click();
+  }
+
+  async signup() {
+    await this.signupButton.click();
+  }
+
+  async expectLoaded() {
+    await expect(this.signupButton).toBeVisible();
+  }
+}

pnpm-lock.yaml

@@ -662,6 +662,9 @@ importers:
       '@biomejs/biome':
         specifier: 1.9.4
         version: 1.9.4
+      '@playwright/test':
+        specifier: ^1.46.1
+        version: 1.46.1
       '@tailwindcss/forms':
         specifier: ^0.5.9
         version: 0.5.9(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.3)))
@@ -680,6 +683,9 @@ importers:
       globals:
         specifier: ^15.11.0
         version: 15.12.0
+      is-ci:
+        specifier: ^3.0.1
+        version: 3.0.1
       postcss:
         specifier: ^8.4.27
         version: 8.4.47