Add Playwright e2e coverage + comment-level video upload workflow (#40)
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m31s
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m31s
## Summary - add Playwright e2e auth setup + seeded test DB flow - fix Playwright startup order so DB seed runs before web server uses SQLite - add full trip-planning e2e scenario (future trip, travellers, destination, flight, lodging, upcoming verification) - configure Auth.js custom sign-in page for base-path routing - add repo guidance in AGENTS.md / CLAUDE.md requiring e2e for user-facing changes - document and validate comment-level Gitea video attachment workflow (create comment, upload to comment assets endpoint) ## Validation - bunx playwright test e2e/auth.test.ts --project=chromium\n- bunx playwright test e2e/trip-planning.test.ts --project=chromium - PW_VIDEO_MODE=on PW_TRACE_MODE=off bunx playwright test e2e/trip-planning.test.ts --project=chromium ## Issue - relates to #38 Co-authored-by: AI Agent <ai-agent@campbellwireless.net> Reviewed-on: #40 Co-authored-by: Shaun Campbell <shaun@campbellwireless.net> Co-committed-by: Shaun Campbell <shaun@campbellwireless.net>
This commit was merged in pull request #40.
This commit is contained in:
56
e2e/auth.test.ts
Normal file
56
e2e/auth.test.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
import { TEST_USERS } from './setup/test-users.js';
|
||||
|
||||
const LOGIN_URL = '/trips/login';
|
||||
const DASHBOARD_URL = '/trips/dashboard';
|
||||
const ADMIN_USERS_URL = '/trips/admin/users';
|
||||
|
||||
async function loginAsLocalUser(page: Page, username: string, password: string): Promise<void> {
|
||||
await page.goto(LOGIN_URL);
|
||||
await page.fill('input[name="identifier"]', username);
|
||||
await page.fill('input[name="password"]', password);
|
||||
await page.click('button[type="submit"]:has-text("Sign in locally")');
|
||||
await page.waitForURL(`**${DASHBOARD_URL}`, { timeout: 15_000 });
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ context }) => {
|
||||
await context.clearCookies();
|
||||
});
|
||||
|
||||
test.describe('regular user', () => {
|
||||
test('can log in and lands on dashboard', async ({ page }) => {
|
||||
await loginAsLocalUser(page, TEST_USERS.regular.username, TEST_USERS.regular.password);
|
||||
await expect(page).toHaveURL(/\/trips\/dashboard/);
|
||||
});
|
||||
|
||||
test('cannot access admin — redirected to dashboard', async ({ page }) => {
|
||||
await loginAsLocalUser(page, TEST_USERS.regular.username, TEST_USERS.regular.password);
|
||||
await page.goto(ADMIN_USERS_URL);
|
||||
await expect(page).toHaveURL(/\/trips\/dashboard/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('admin user', () => {
|
||||
test('can log in and lands on dashboard', async ({ page }) => {
|
||||
await loginAsLocalUser(page, TEST_USERS.admin.username, TEST_USERS.admin.password);
|
||||
await expect(page).toHaveURL(/\/trips\/dashboard/);
|
||||
});
|
||||
|
||||
test('can access /admin/users', async ({ page }) => {
|
||||
await loginAsLocalUser(page, TEST_USERS.admin.username, TEST_USERS.admin.password);
|
||||
await page.goto(ADMIN_USERS_URL);
|
||||
await expect(page).toHaveURL(/\/trips\/admin\/users/);
|
||||
await expect(page.locator('h1')).toContainText('Users');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('error handling', () => {
|
||||
test('bad password shows error on login page', async ({ page }) => {
|
||||
await page.goto(LOGIN_URL);
|
||||
await page.fill('input[name="identifier"]', TEST_USERS.regular.username);
|
||||
await page.fill('input[name="password"]', 'wrong-password-long-enough');
|
||||
await page.click('button[type="submit"]:has-text("Sign in locally")');
|
||||
await page.waitForURL(/error=CredentialsSignin/, { timeout: 10_000 });
|
||||
await expect(page.locator('.text-rose-700')).toContainText('Invalid credentials');
|
||||
});
|
||||
});
|
||||
20
e2e/setup/global-setup.ts
Normal file
20
e2e/setup/global-setup.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { FullConfig } from '@playwright/test';
|
||||
import { spawnSync } from 'child_process';
|
||||
import { resolve } from 'path';
|
||||
import { config as dotenvConfig } from 'dotenv';
|
||||
|
||||
dotenvConfig({ path: resolve(process.cwd(), '.env.test'), override: true });
|
||||
|
||||
async function globalSetup(_config: FullConfig): Promise<void> {
|
||||
console.log('[e2e] Seeding test database via Bun...');
|
||||
const result = spawnSync('bun', ['run', 'e2e/setup/seed-db.ts'], {
|
||||
env: { ...process.env },
|
||||
stdio: 'inherit',
|
||||
cwd: process.cwd()
|
||||
});
|
||||
if (result.status !== 0) {
|
||||
throw new Error(`[e2e] DB seed script failed with exit code ${result.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default globalSetup;
|
||||
17
e2e/setup/global-teardown.ts
Normal file
17
e2e/setup/global-teardown.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import type { FullConfig } from '@playwright/test';
|
||||
import { existsSync, unlinkSync } from 'fs';
|
||||
import { resolve } from 'path';
|
||||
|
||||
const DB_PATH = resolve(process.cwd(), 'trips.test.db');
|
||||
|
||||
async function globalTeardown(_config: FullConfig): Promise<void> {
|
||||
for (const ext of ['', '-shm', '-wal']) {
|
||||
const p = DB_PATH + ext;
|
||||
if (existsSync(p)) {
|
||||
unlinkSync(p);
|
||||
}
|
||||
}
|
||||
console.log('[e2e] Removed trips.test.db');
|
||||
}
|
||||
|
||||
export default globalTeardown;
|
||||
77
e2e/setup/seed-db.ts
Normal file
77
e2e/setup/seed-db.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
// Bun script — runs with `bun run e2e/setup/seed-db.ts`.
|
||||
// Uses bun:sqlite and argon2 directly; must NOT be imported from Node context.
|
||||
import { Database as BunSqlite } from 'bun:sqlite';
|
||||
import { existsSync, unlinkSync } from 'fs';
|
||||
import { resolve } from 'path';
|
||||
import argon2 from 'argon2';
|
||||
import { randomUUID } from 'crypto';
|
||||
import { config as dotenvConfig } from 'dotenv';
|
||||
import { TEST_USERS } from './test-users.js';
|
||||
|
||||
dotenvConfig({ path: resolve(process.cwd(), '.env.test'), override: true });
|
||||
|
||||
const DB_PATH = resolve(process.cwd(), 'trips.test.db');
|
||||
|
||||
// Delete any existing test DB so we start clean each run
|
||||
for (const ext of ['', '-shm', '-wal']) {
|
||||
const p = DB_PATH + ext;
|
||||
if (existsSync(p)) {
|
||||
unlinkSync(p);
|
||||
}
|
||||
}
|
||||
|
||||
const db = new BunSqlite(DB_PATH);
|
||||
db.exec('PRAGMA foreign_keys = ON');
|
||||
|
||||
// Wrap bun:sqlite to match the Database interface expected by runMigrations
|
||||
const dbWrapper = {
|
||||
run(sql: string, params: unknown[] = []) {
|
||||
db.query(sql).run(...(params as [unknown?, ...unknown[]]));
|
||||
},
|
||||
get<T = Record<string, unknown>>(sql: string, params: unknown[] = []): T | undefined {
|
||||
const row = db.query(sql).get(...(params as [unknown?, ...unknown[]]));
|
||||
return (row === null ? undefined : row) as T | undefined;
|
||||
},
|
||||
all<T = Record<string, unknown>>(sql: string, params: unknown[] = []): T[] {
|
||||
return db.query(sql).all(...(params as [unknown?, ...unknown[]])) as T[];
|
||||
},
|
||||
close() {
|
||||
db.close();
|
||||
}
|
||||
};
|
||||
|
||||
const { runMigrations } = await import('../../src/lib/server/db/migrations.js');
|
||||
runMigrations(dbWrapper);
|
||||
console.log('[e2e] Migrations complete.');
|
||||
|
||||
async function hashPassword(password: string): Promise<string> {
|
||||
return argon2.hash(password, {
|
||||
type: argon2.argon2id,
|
||||
memoryCost: 8192,
|
||||
timeCost: 2,
|
||||
parallelism: 1
|
||||
});
|
||||
}
|
||||
|
||||
const regularId = randomUUID();
|
||||
dbWrapper.run(
|
||||
`INSERT INTO users (id, username, full_name, email, auth_source) VALUES (?, ?, ?, ?, ?)`,
|
||||
[regularId, TEST_USERS.regular.username, TEST_USERS.regular.fullName, TEST_USERS.regular.email, 'Local']
|
||||
);
|
||||
dbWrapper.run(`INSERT INTO local_credentials (user_id, password_hash) VALUES (?, ?)`, [
|
||||
regularId,
|
||||
await hashPassword(TEST_USERS.regular.password)
|
||||
]);
|
||||
|
||||
const adminId = randomUUID();
|
||||
dbWrapper.run(
|
||||
`INSERT INTO users (id, username, full_name, email, auth_source) VALUES (?, ?, ?, ?, ?)`,
|
||||
[adminId, TEST_USERS.admin.username, TEST_USERS.admin.fullName, TEST_USERS.admin.email, 'Local']
|
||||
);
|
||||
dbWrapper.run(`INSERT INTO local_credentials (user_id, password_hash) VALUES (?, ?)`, [
|
||||
adminId,
|
||||
await hashPassword(TEST_USERS.admin.password)
|
||||
]);
|
||||
|
||||
db.close();
|
||||
console.log(`[e2e] Seeded users: ${TEST_USERS.regular.username}, ${TEST_USERS.admin.username}`);
|
||||
15
e2e/setup/test-users.ts
Normal file
15
e2e/setup/test-users.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
// Shared test user definitions — no runtime deps, importable from both Node and Bun contexts.
|
||||
export const TEST_USERS = {
|
||||
regular: {
|
||||
username: 'e2e_user',
|
||||
fullName: 'E2E Regular User',
|
||||
email: 'e2e_user@test.local',
|
||||
password: 'e2e-regular-password123'
|
||||
},
|
||||
admin: {
|
||||
username: 'e2e_admin',
|
||||
fullName: 'E2E Admin User',
|
||||
email: 'e2e_admin@test.local',
|
||||
password: 'e2e-admin-password123'
|
||||
}
|
||||
} as const;
|
||||
186
e2e/trip-planning.test.ts
Normal file
186
e2e/trip-planning.test.ts
Normal file
@@ -0,0 +1,186 @@
|
||||
import { test, expect, type Locator, type Page } from '@playwright/test';
|
||||
import { TEST_USERS } from './setup/test-users.js';
|
||||
|
||||
const LOGIN_URL = '/trips/login';
|
||||
const PROFILE_URL = '/trips/profile';
|
||||
|
||||
function formatDate(offsetDays: number): string {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + offsetDays);
|
||||
return date.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
async function loginAsLocalUser(page: Page, username: string, password: string): Promise<void> {
|
||||
await page.goto(LOGIN_URL);
|
||||
await page.fill('input[name="identifier"]', username);
|
||||
await page.fill('input[name="password"]', password);
|
||||
await page.click('button[type="submit"]:has-text("Sign in locally")');
|
||||
await page.waitForURL('**/trips/dashboard', { timeout: 15_000 });
|
||||
}
|
||||
|
||||
async function ensureSelfProfile(page: Page): Promise<void> {
|
||||
await page.goto(PROFILE_URL);
|
||||
await page.fill('#first_name', 'E2E');
|
||||
await page.fill('#last_name', 'User');
|
||||
await page.fill('#email', TEST_USERS.regular.email);
|
||||
await page.getByRole('button', { name: 'Save profile' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'My Profile' })).toBeVisible();
|
||||
}
|
||||
|
||||
async function openAddToTripMenuItem(page: Page, label: string): Promise<void> {
|
||||
await page.getByRole('button', { name: 'Add to trip' }).click();
|
||||
await page.getByRole('button', { name: label, exact: true }).click();
|
||||
}
|
||||
|
||||
async function addLoggedInTraveller(page: Page): Promise<void> {
|
||||
await page.getByRole('button', { name: "Who's travelling?" }).click();
|
||||
const dialog = page.getByRole('dialog', { name: 'Add traveller' });
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
const selfButton = dialog.getByRole('button', { name: /You/ }).first();
|
||||
if (await selfButton.isVisible().catch(() => false)) {
|
||||
await selfButton.click();
|
||||
} else {
|
||||
const firstNameInput = dialog.getByLabel('First name *');
|
||||
if (!(await firstNameInput.isVisible().catch(() => false))) {
|
||||
await dialog.getByRole('button', { name: 'Add someone new' }).click();
|
||||
}
|
||||
await dialog.getByLabel('First name *').fill('E2E');
|
||||
await dialog.getByLabel('Last name *').fill('User');
|
||||
await dialog.getByLabel(/Email/).fill(TEST_USERS.regular.email);
|
||||
await dialog.getByRole('button', { name: 'Add traveller' }).click();
|
||||
}
|
||||
|
||||
await expect(dialog).toBeHidden();
|
||||
}
|
||||
|
||||
async function addNewTraveller(
|
||||
page: Page,
|
||||
firstName: string,
|
||||
lastName: string,
|
||||
email: string
|
||||
): Promise<void> {
|
||||
await openAddToTripMenuItem(page, 'Travellers');
|
||||
const dialog = page.getByRole('dialog', { name: 'Add traveller' });
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
const firstNameInput = dialog.getByLabel('First name *');
|
||||
if (!(await firstNameInput.isVisible().catch(() => false))) {
|
||||
await dialog.getByRole('button', { name: 'Add someone new' }).click();
|
||||
}
|
||||
|
||||
await dialog.getByLabel('First name *').fill(firstName);
|
||||
await dialog.getByLabel('Last name *').fill(lastName);
|
||||
await dialog.getByLabel(/Email/).fill(email);
|
||||
await dialog.getByRole('button', { name: 'Add traveller' }).click();
|
||||
await expect(dialog).toBeHidden();
|
||||
}
|
||||
|
||||
async function addDestination(page: Page, cityQuery: string, startDate: string): Promise<void> {
|
||||
await openAddToTripMenuItem(page, 'Destinations');
|
||||
const dialog = page.getByRole('dialog', { name: 'Add destination' });
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
await dialog.getByLabel('City *').fill(cityQuery);
|
||||
const cityOption = dialog.locator('ul button').filter({ hasText: cityQuery }).first();
|
||||
await expect(cityOption).toBeVisible();
|
||||
await cityOption.click();
|
||||
|
||||
await dialog.getByLabel('Arrival').fill(startDate);
|
||||
await dialog.getByRole('button', { name: 'Add to trip' }).click();
|
||||
await expect(dialog).toBeHidden();
|
||||
}
|
||||
|
||||
async function addFlight(page: Page, departureDate: string): Promise<void> {
|
||||
await openAddToTripMenuItem(page, 'Transportation');
|
||||
const transportDialog = page.getByRole('dialog', { name: 'Add transportation' });
|
||||
await expect(transportDialog).toBeVisible();
|
||||
|
||||
await transportDialog.getByRole('button', { name: /Flight/ }).click();
|
||||
const form = transportDialog.locator('form');
|
||||
await expect(form.locator('input[name="segments[0][departure_date]"]')).toBeVisible();
|
||||
|
||||
await form.locator('input[name="segments[0][departure_date]"]').fill(departureDate);
|
||||
await form.getByPlaceholder('Search airline or enter code').fill('UA');
|
||||
await form.locator('input[name="segments[0][flight_number]"]').fill('1001');
|
||||
await form.getByPlaceholder('Code or search').nth(0).fill('SFO');
|
||||
await form.getByPlaceholder('Code or search').nth(1).fill('LAX');
|
||||
await expect(form.getByRole('button', { name: 'Add transportation' })).toBeEnabled();
|
||||
await form.getByRole('button', { name: 'Add transportation' }).click();
|
||||
await expect(transportDialog).toBeHidden();
|
||||
}
|
||||
|
||||
async function addLodging(page: Page, lodgingName: string): Promise<void> {
|
||||
await openAddToTripMenuItem(page, 'Lodgings');
|
||||
const dialog = page.getByRole('dialog', { name: 'Add lodging' });
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
await dialog.getByLabel('Name *').fill(lodgingName);
|
||||
await dialog.getByRole('button', { name: 'Add lodging' }).click();
|
||||
await expect(dialog).toBeHidden();
|
||||
}
|
||||
|
||||
async function expectPlanSectionsAndDetails(
|
||||
page: Page,
|
||||
tripName: string,
|
||||
destinationQuery: string,
|
||||
flightText: RegExp,
|
||||
lodgingName: string,
|
||||
travellerLocators: Locator[]
|
||||
): Promise<void> {
|
||||
await page.getByRole('link', { name: 'Upcoming Trips' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'Upcoming Trips' })).toBeVisible();
|
||||
await expect(page.getByRole('link', { name: tripName })).toBeVisible();
|
||||
|
||||
await page.getByRole('link', { name: tripName }).click();
|
||||
await expect(page.getByRole('heading', { name: tripName })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Destinations' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Transportation' })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Lodgings' })).toBeVisible();
|
||||
|
||||
await expect(page.getByText(destinationQuery, { exact: false })).toBeVisible();
|
||||
await expect(page.getByText(flightText)).toBeVisible();
|
||||
await expect(page.getByText(lodgingName, { exact: true })).toBeVisible();
|
||||
for (const traveller of travellerLocators) {
|
||||
await expect(traveller).toBeVisible();
|
||||
}
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ context }) => {
|
||||
await context.clearCookies();
|
||||
});
|
||||
|
||||
test('regular user can plan a detailed future trip and see it in upcoming', async ({ page }) => {
|
||||
const startDate = formatDate(30);
|
||||
const tripName = `E2E Future Trip ${Date.now()}`;
|
||||
const tripDescription = 'Future trip created in Playwright e2e scenario';
|
||||
const destinationQuery = 'Tokyo';
|
||||
const lodgingName = `E2E Hotel ${Date.now()}`;
|
||||
const newTravellerFirstName = 'Jamie';
|
||||
const newTravellerLastName = 'Companion';
|
||||
const newTravellerEmail = `jamie+${Date.now()}@test.local`;
|
||||
|
||||
await loginAsLocalUser(page, TEST_USERS.regular.username, TEST_USERS.regular.password);
|
||||
await ensureSelfProfile(page);
|
||||
|
||||
await page.getByRole('link', { name: 'Plan New Trip' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'Plan New Trip' })).toBeVisible();
|
||||
await page.getByLabel('Trip name *').fill(tripName);
|
||||
await page.getByLabel('Start date').fill(startDate);
|
||||
await page.getByLabel('End date').fill('');
|
||||
await page.getByLabel('Description').fill(tripDescription);
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
await page.waitForURL('**/trips/trips/*', { timeout: 15_000 });
|
||||
await expect(page.getByRole('heading', { name: tripName })).toBeVisible();
|
||||
|
||||
await addLoggedInTraveller(page);
|
||||
await addNewTraveller(page, newTravellerFirstName, newTravellerLastName, newTravellerEmail);
|
||||
await addDestination(page, destinationQuery, startDate);
|
||||
await addFlight(page, startDate);
|
||||
await addLodging(page, lodgingName);
|
||||
|
||||
await expectPlanSectionsAndDetails(page, tripName, destinationQuery, /UA\s*1001/, lodgingName, [
|
||||
page.getByText('E2E User', { exact: false }),
|
||||
page.getByText(`${newTravellerFirstName} ${newTravellerLastName}`, { exact: false })
|
||||
]);
|
||||
});
|
||||
Reference in New Issue
Block a user