feat(ci): install Playwright for e2e tests and create e2e test for signup

.github/workflows/web-develop.yml

@@ -58,6 +58,17 @@ jobs:
       - name: Run tests and generate coverage file
         run: npm run ci:test
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
       - name: Upload coverage reports to Codecov
         continue-on-error: true
         uses: codecov/codecov-action@v4.0.1

.github/workflows/web-tag.yml

@@ -50,6 +50,17 @@ jobs:
       - name: Run API tests
         run: npm run api:test
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
       - name: Shut down database
         run: docker stop github_action_postgresql
 

.github/workflows/web-test.yml

@@ -45,24 +45,19 @@ jobs:
       - name: Run NextJS build
         run: npm run build
 
-      # - name: Run Cypress tests
-      #   run: npm run cy:test
-
-      # ... Generate LCOV files or download it from a different job
       - name: Run tests and generate coverage file
         run: npm run ci:test
 
-      # - name: Setup LCOV
-      #   uses: hrishikesh-kadam/setup-lcov@v1
-      # - name: Report code coverage
-      #   uses: zgosalvez/github-actions-report-lcov@v3
-      #   with:
-      #     coverage-files: ./app/lcov*.info
-      #     minimum-coverage: 40
-      #     artifact-name: code-coverage-report
-      #     github-token: ${{ secrets.GITHUB_TOKEN }}
-      #     working-directory: ./app
-      #     update-comment: true
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
       - name: Upload coverage reports to Codecov
         continue-on-error: true

app/.gitignore

@@ -35,4 +35,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

app/README.md

@@ -95,3 +95,15 @@ Then, you can run the app in a container:
 ```bash
 docker run -p 3000:3000 ghcr.io/open-earth-foundation/citycatalyst
 ```
+
+### End to end testing
+
+We use Playwright to run automated E2E tests.
+
+Setup: `npx playwright install --with-deps`
+
+Run: `npm run e2e:test`
+
+### API unit tests
+
+Run: `npm run api:test`

app/e2e/signup.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect, type Page } from "@playwright/test";
+import { randomUUID } from "node:crypto";
+
+async function expectText(page: Page, text: string) {
+  await expect(page.getByText(text).first()).toBeVisible();
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/en/auth/signup");
+});
+
+test.describe("Signup", () => {
+  test("should navigate to signup from login", async ({ page }) => {
+    await page.goto("/");
+    const link = page.getByText("Sign up");
+    await expect(link).toBeVisible();
+    await link.click();
+    await expect(
+      page.getByRole("heading", { name: "Sign Up to City Catalyst" }),
+    ).toBeVisible();
+  });
+
+  test("should redirect to dashboard after entering correct data", async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole("heading", { name: "Sign Up to City Catalyst" }),
+    ).toBeVisible();
+
+    const email = `e2e-test+${randomUUID()}@example.com`;
+
+    await page.getByPlaceholder("Your full name").fill("Test User");
+    await page.getByPlaceholder("e.g. youremail@domain.com").fill(email);
+    await page.getByLabel("Password", { exact: true }).fill("Test123");
+    await page.getByLabel("Confirm Password").fill("Test123");
+    await page.getByPlaceholder("Enter the code you received").fill("123456");
+    await page
+      .locator('input[name="acceptTerms"] + .chakra-checkbox__control')
+      .click();
+    await page.getByRole("button", { name: "Create Account" }).click();
+
+    await expect(page).toHaveURL(
+      `/en/auth/check-email?email=${email.replace("@", "%40")}`,
+    );
+  });
+
+  test("should show errors when entering invalid data", async ({ page }) => {
+    await expect(
+      page.getByRole("heading", { name: "Sign Up to City Catalyst" }),
+    ).toBeVisible();
+
+    await page.getByPlaceholder("Your full name").fill("asd");
+    await page
+      .getByPlaceholder("e.g. youremail@domain.com")
+      .fill("testopenearthorg");
+    await page.getByLabel("Password", { exact: true }).fill("Pas");
+    await page.getByLabel("Confirm Password").fill("Pa1");
+    await page.getByPlaceholder("Enter the code you received").fill("12345");
+    await page.getByRole("button", { name: "Create Account" }).click();
+
+    await expect(page).toHaveURL(`/en/auth/signup`);
+    await expectText(page, "valid email address");
+    await expectText(page, "Minimum length");
+    await expectText(page, "Invalid invite code");
+    await expectText(page, "Please accept the terms");
+  });
+
+  test("should require matching passwords", async ({ page }) => {
+    await expect(
+      page.getByRole("heading", { name: "Sign Up to City Catalyst" }),
+    ).toBeVisible();
+
+    await page.getByPlaceholder("Your full name").fill("Test Account");
+    await page
+      .getByPlaceholder("e.g. youremail@domain.com")
+      .fill("e2e-test-fail@example.com");
+    await page.getByLabel("Password", { exact: true }).fill("Password1");
+    await page.getByLabel("Confirm Password").fill("Password2");
+    await page.getByPlaceholder("Enter the code you received").fill("123456");
+    await page
+      .locator('input[name="acceptTerms"] + .chakra-checkbox__control') // sibling
+      .click();
+    await page.getByRole("button", { name: "Create Account" }).click();
+
+    await expect(page).toHaveURL(`/en/auth/signup`);
+    await expectText(page, "Passwords don't match");
+  });
+
+  test.skip("should correctly handle and pass callbackUrl", () => {});
+});

app/package.json

@@ -8,8 +8,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "npm run api:test & npm run cy:test",
+    "test": "npm run api:test & npm run e2e:test",
     "api:test": "glob -c \"tsx --no-warnings --test\" \"./tests/**/*.test.ts\"",
+    "e2e:test": "npx playwright test",
+    "e2e:test:head": "npx playwright test -- --headed",
     "test-single": "tsx --no-warnings --test",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -22,9 +24,6 @@
     "db:gen-seed": "sequelize-cli seed:generate --name",
     "sync-catalogue": "tsx scripts/catalogue-sync.ts",
     "ci:test": "tsx --test --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info tests/**/*.test.ts",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
-    "cy:test": "start-server-and-test start http://localhost:3000/en/auth/login cy:run",
     "prettier": "npx prettier . --write",
     "email": "email dev --dir src/lib/emails",
     "create-admin": "tsx scripts/create-admin.ts"
@@ -99,6 +98,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^7.6.16",
     "@storybook/addon-interactions": "^7.4.5",
     "@storybook/addon-links": "^7.6.17",