Adds headless tests for example apps

examples/tutorials/TodoApp/.gitignore

@@ -9,3 +9,6 @@ node_modules/
 # Don't ignore example dotenv files.
 !.env.example
 !.env.*.example
+
+# Headless tests
+test-results/

examples/tutorials/TodoApp/headless-tests/playwright.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * 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: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? "dot" : "list",
+  /* 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:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    /* Test against mobile viewports. */
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "run-wasp-app dev --path-to-app=../",
+
+    // Wait for the backend to start
+    url: "http://localhost:3001",
+    reuseExistingServer: !process.env.CI,
+    timeout: 180 * 1000,
+    gracefulShutdown: { signal: "SIGTERM", timeout: 500 },
+  },
+});

examples/tutorials/TodoApp/headless-tests/tests/helpers.ts

@@ -0,0 +1,43 @@
+import type { Page } from "@playwright/test";
+
+export async function performSignup(
+  page: Page,
+  { username, password }: { username: string; password: string }
+) {
+  await page.goto("/signup");
+
+  await page.waitForSelector("text=Create a new account");
+
+  await page.locator("input[name='username']").fill(username);
+  await page.locator("input[type='password']").fill(password);
+  await page.locator("button").click();
+}
+
+export async function performLogin(
+  page: Page,
+  {
+    username,
+    password,
+  }: {
+    username: string;
+    password: string;
+  }
+) {
+  await page.goto("/login");
+
+  await page.waitForSelector("text=Log in to your account");
+
+  await page.locator("input[name='username']").fill(username);
+  await page.locator("input[type='password']").fill(password);
+  await page.getByRole("button", { name: "Log in" }).click();
+}
+
+export function generateRandomCredentials(): {
+  username: string;
+  password: string;
+} {
+  return {
+    username: `test${Math.random().toString(36).substring(7)}`,
+    password: "12345678",
+  };
+}

examples/tutorials/TodoApp/headless-tests/tests/simple.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from "@playwright/test";
+import {
+  generateRandomCredentials,
+  performLogin,
+  performSignup,
+} from "./helpers";
+
+test.describe("auth and work tasks", () => {
+  const { username, password } = generateRandomCredentials();
+
+  test.describe.configure({ mode: "serial" });
+
+  test("can sign up", async ({ page }) => {
+    await performSignup(page, {
+      username,
+      password,
+    });
+
+    await expect(page).toHaveURL("/");
+
+    await page.getByText("Logout").click();
+
+    await expect(page).toHaveURL("/login");
+  });
+
+  test("can log in and interact with tasks", async ({ page }) => {
+    await performLogin(page, {
+      username,
+      password: "12345678xxx",
+    });
+
+    await expect(page.locator("body")).toContainText("Invalid credentials");
+
+    await performLogin(page, {
+      username,
+      password,
+    });
+
+    await expect(page).toHaveURL("/");
+
+    const randomTask = `New Task ${Math.random().toString(36).substring(7)}`;
+    // Fill input[name="description"] with random task
+    await page.locator("input[name='description']").fill(randomTask);
+    // Click input[type="submit"] to submit the form
+    await page.locator("input[type='submit']").click();
+    // Expect to see the task on the page
+    await expect(page.locator("body")).toContainText(randomTask);
+    // Check the task as done input[type="checkbox"]
+    await page.locator("input[type='checkbox']").click();
+    // Reload the page
+    await page.reload();
+    // Expect the task to be checked
+    await expect(page.locator("input[type='checkbox']")).toBeChecked();
+  });
+});

examples/tutorials/TodoApp/package.json

@@ -2,6 +2,7 @@
   "name": "TodoApp",
   "type": "module",
   "dependencies": {
+    "@playwright/test": "^1.51.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.2",

examples/tutorials/TodoAppTs/.gitignore

@@ -9,3 +9,6 @@ node_modules/
 # Don't ignore example dotenv files.
 !.env.example
 !.env.*.example
+
+# Headless tests
+test-results/