Headless tests improvements

.github/workflows/wasp-app-runner.yml

@@ -0,0 +1,25 @@
+name: Publish Wasp App Runner
+on:
+  push:
+    paths:
+      - "wasp-app-runner/**"
+    branches:
+      - release
+
+defaults:
+  run:
+    shell: bash
+    working-directory: wasp-app-runner
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - run: npm ci
+      - uses: JS-DevTools/npm-publish@v3
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

.github/workflows/waspc-ci.yaml

@@ -3,18 +3,18 @@ name: WASPC-CI
 on:
   push:
     paths:
-      - 'waspc/**'
+      - "waspc/**"
     branches:
       - main
       - release
   pull_request:
     paths:
-      - 'waspc/**'
+      - "waspc/**"
   create: { tags: [v*] }
   schedule:
     # Additionally run once per week (At 00:00 on Sunday) to avoid loosing cache
     # (GH deletes it after 7 days of not using it).
-    - cron: '0 0 * * 0'
+    - cron: "0 0 * * 0"
 
 env:
   WASP_TELEMETRY_DISABLE: 1
@@ -51,24 +51,24 @@ jobs:
           - macos-latest
           - windows-latest
         node-version:
-          - 'latest'
+          - "latest"
         ghc:
-          - '8.10.7'
+          - "8.10.7"
         cabal:
-          - '3.6.2.0'
+          - "3.6.2.0"
         # In addition to the default matrix, we also want to run the build job for
         # additional Node.js versions, to make sure that Wasp works with them.
         # To reduce the number of jobs, we only test the Node.js versions on
         # Ubuntu 20.04.
         include:
           - os: ubuntu-20.04
             node-version: 18
-            ghc: '8.10.7'
-            cabal: '3.6.2.0'
+            ghc: "8.10.7"
+            cabal: "3.6.2.0"
           - os: ubuntu-20.04
             node-version: 20
-            ghc: '8.10.7'
-            cabal: '3.6.2.0'
+            ghc: "8.10.7"
+            cabal: "3.6.2.0"
 
     steps:
       - name: Configure git
@@ -80,7 +80,7 @@ jobs:
           git config --global core.autocrlf input
           git config --global core.eol lf
 
-      - uses: 'actions/checkout@v3'
+      - uses: "actions/checkout@v3"
         with:
           # Workaround for a Github Checkout action bug
           # https://github.com/actions/checkout/issues/1359#issuecomment-1567902034
@@ -170,18 +170,29 @@ jobs:
           path: ~/.npm
           key: node-modules-${{ hashFiles('./waspc/headless-test/package-lock.json') }}-${{ matrix.os }}-${{ matrix.node-version }}
 
+      # TODO: remove this once we start publishing the wasp-app-runner
+      # as a npm package
+      - name: Headless - Setup the Wasp app runner
+        id: headless-setup-wasp-app-runner
+        if: matrix.os == 'ubuntu-20.04'
+        run: |
+          cd ../wasp-app-runner
+          npm ci
+          # Installs the wasp-app-runner globally so that it can be used in the tests
+          npm run install:global
+
       - name: Headless - Install Dependencies
         id: headless-install-dependencies
         if: matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
+          cd examples/todoApp
           npm ci
 
       - name: Headless - Store Playwright's Version
         id: headless-store-playwright-version
         if: matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
+          cd examples/todoApp
           PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
           echo "Playwright's Version: $PLAYWRIGHT_VERSION"
           echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
@@ -198,18 +209,17 @@ jobs:
         id: headless-setup-playwright
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true' && matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
+          cd examples/todoApp
           npx playwright install --with-deps
 
       - name: Headless - Run Playwright Tests
         id: headless-run-playwright-tests
         if: matrix.os == 'ubuntu-20.04'
         run: |
-          cd headless-test
-          npm ci
+          cd examples/todoApp
           # Runs the tests with the debug flag so that we can see Wasp output
-          DEBUG=pw:webserver npx playwright test
-      
+          DEBUG=pw:webserver npx playwright test --config headless-tests/
+
       - name: Run e2e tests
         run: cabal test e2e-test
 
@@ -226,7 +236,7 @@ jobs:
         with:
           draft: true
           allowUpdates: true
-          artifacts: 'waspc/artifacts/*'
+          artifacts: "waspc/artifacts/*"
           artifactErrorsFailBuild: true
           replacesArtifacts: true
           token: ${{ secrets.GITHUB_TOKEN }}

examples/todo-typescript/.gitignore

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

waspc/headless-test/playwright.config.ts → examples/todo-typescript/headless-tests/playwright.config.ts

@@ -44,10 +44,13 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "npm run example-app:start",
+    command:
+      "wasp-app-runner --app-path=../ --app-name=examples-todo-typescript --db-type=sqlite",
+
     // Wait for the backend to start
     url: "http://localhost:3001",
     reuseExistingServer: !process.env.CI,
-    timeout: 120 * 1000,
+    timeout: 180 * 1000,
+    gracefulShutdown: { signal: "SIGTERM", timeout: 500 },
   },
 });

examples/todo-typescript/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",
+  };
+}

waspc/headless-test/tests/simple.spec.ts → examples/todo-typescript/headless-tests/tests/simple.spec.ts

@@ -8,64 +8,49 @@ import {
 test("has title", async ({ page }) => {
   await page.goto("/");
 
-  await expect(page).toHaveTitle(/ToDo App/);
+  await expect(page).toHaveTitle(/ToDo TypeScript/);
 });
 test.describe("signup and login", () => {
-  const { email, password } = generateRandomCredentials();
+  const { username, password } = generateRandomCredentials();
 
   test.describe.configure({ mode: "serial" });
 
-  test("social button renders", async ({ page }) => {
-    await page.goto("/signup");
-
-    await page.waitForSelector("text=Create a new account");
-
-    await expect(
-      page.locator("a[href='http://localhost:3001/auth/google/login']")
-    ).toBeVisible();
-  });
-
   test("can sign up", async ({ page }) => {
     await performSignup(page, {
-      email,
+      username,
       password,
     });
 
-    await expect(page.locator("body")).toContainText(
-      `You've signed up successfully! Check your email for the confirmation link.`
-    );
+    await expect(page).toHaveURL("/");
+
+    await page.locator("button.logout").click();
+
+    await expect(page).toHaveURL("/login");
   });
 
   test("can log in and create a task", async ({ page }) => {
     await performLogin(page, {
-      email,
+      username,
       password: "12345678xxx",
     });
 
     await expect(page.locator("body")).toContainText("Invalid credentials");
 
     await performLogin(page, {
-      email,
+      username,
       password,
     });
 
-    await expect(page).toHaveURL("/profile");
-
-    await page.goto("/");
+    await expect(page).toHaveURL("/");
 
     // Create a new task
     const randomTask = `New Task ${Math.random().toString(36).substring(7)}`;
     await page.locator("input[type='text']").fill(randomTask);
-    await page.getByText("Create new task").click();
+    await page.getByText("Create task").click();
 
-    const fullTaskText = `${randomTask} by ${email}`;
+    const fullTaskText = `${randomTask}`;
     await page.waitForSelector(`text=${fullTaskText}`);
 
     await expect(page.locator("body")).toContainText(fullTaskText);
-
-    // Navigate to task page
-    await page.locator(`text=${fullTaskText}`).click();
-    const taskPageText = `description: ${randomTask}`;
-    await page.waitForSelector(`text=${taskPageText}`);
   });
 });

examples/todo-typescript/package.json

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

examples/todo-typescript/src/Main.css

@@ -26,7 +26,8 @@ img {
   max-height: 100px;
 }
 
-.logout {
+.logout,
+.delete-tasks {
   margin-top: 1rem;
 }
 
@@ -70,4 +71,4 @@ li {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-}
+}