Merge pull request #461 from Open-Earth-Foundation/feat/login-e2e

feat(e2e): implement integration tests for login

app/README.md

@@ -22,6 +22,8 @@ npm install
 
 ### Database
 
+For a quick setup, run `scripts/start-db.sh`, which will launch a PostgreSQL Docker image with the right configuration. Otherwise continue below ⬇️
+
 You'll need to run a [PostgreSQL](https://www.postgresql.org/) database, locally or remotely.
 
 You'll need access to the `psql`, `createuser`, and `createdb` commands.

app/e2e/helpers.ts

@@ -0,0 +1,28 @@
+import { expect, type Page, APIRequestContext } from "@playwright/test";
+
+export async function expectText(page: Page, text: string) {
+  await expect(page.getByText(text).first()).toBeVisible();
+}
+
+export async function signup(
+  request: APIRequestContext,
+  email: string,
+  password: string = "Test123",
+  confirmPassword: string = "Test123",
+  name: string = "Test Account",
+  inviteCode: string = "123456",
+  acceptTerms: boolean = true,
+) {
+  const result = await request.post("/api/v0/auth/signup", {
+    data: {
+      email,
+      password,
+      confirmPassword,
+      name,
+      inviteCode,
+      acceptTerms,
+    },
+  });
+  expect(result.ok()).toBeTruthy();
+  return await result.json();
+}

app/e2e/login.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect, APIRequestContext } from "@playwright/test";
+import { expectText } from "./helpers";
+import { randomUUID } from "node:crypto";
+
+async function signup(
+  request: APIRequestContext,
+  email: string,
+  password: string = "Test123!",
+  confirmPassword: string = "Test123!",
+  name: string = "Test Account",
+  inviteCode: string = "123456",
+  acceptTerms: boolean = true,
+) {
+  const result = await request.post("/api/v0/auth/register", {
+    data: {
+      email,
+      password,
+      confirmPassword,
+      name,
+      inviteCode,
+      acceptTerms,
+    },
+  });
+  console.log("Signup res", await result.text());
+  expect(result.ok()).toBeTruthy();
+  return await result.json();
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/en/auth/login");
+});
+
+test.describe("Login page", () => {
+  test("redirects to onboarding after entering correct data", async ({
+    page,
+    request,
+  }) => {
+    const email = `login-test+${randomUUID()}@openearth.org`;
+    const password = "Test123!";
+    await signup(request, email, password, password);
+    // await page.route("/api/auth/session", (route) => {
+    //   route.fulfill({ body: JSON.stringify({ ok: true }) });
+    // });
+
+    await expectText(page, "Log In to City Catalyst");
+    await page.locator('input[name="email"]').fill(email);
+    await page.locator('input[name="password"]').fill(password);
+    await page.locator('button[type="submit"]').click();
+
+    // TODO how to ensure that session route was called?
+    await page.waitForResponse("/api/auth/session");
+
+    await expect(page).toHaveURL("/en/onboarding");
+  });
+
+  test("shows errors when entering invalid data", async ({ page }) => {
+    await expectText(page, "Log In to City Catalyst");
+
+    await page.locator('input[name="email"]').fill("testopenearthorg");
+    await page.locator('input[name="password"]').fill("pas");
+    await page.locator('button[type="submit"]').click();
+
+    await expect(page).toHaveURL("/en/auth/login");
+    await expectText(page, "valid email address");
+    await expectText(page, "Minimum length");
+  });
+});

app/e2e/signup.spec.ts

@@ -1,9 +1,6 @@
-import { test, expect, type Page } from "@playwright/test";
+import { test, expect } from "@playwright/test";
 import { randomUUID } from "node:crypto";
-
-async function expectText(page: Page, text: string) {
-  await expect(page.getByText(text).first()).toBeVisible();
-}
+import { expectText } from "./helpers";
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/en/auth/signup");

app/scripts/start-db.sh

@@ -1,8 +1,8 @@
 #!/bin/bash
 
-DB_USER="${POSTGRES_USER:=postgres}"
-DB_PASSWORD="${POSTGRES_PASSWORD:=citycatalyst}"
-DB_NAME="${POSTGRES_DB:=development}"
+DB_USER="${POSTGRES_USER:=citycatalyst}"
+DB_PASSWORD="${POSTGRES_PASSWORD:=development}"
+DB_NAME="${POSTGRES_DB:=citycatalyst}"
 DB_PORT="${POSTGRES_PORT:=5432}"
 DB_HOST="${POSTGRES_HOST:=localhost}"