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

## 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:
2026-02-22 21:20:19 +00:00
committed by shaun
parent e11fcb56a2
commit fe289f0895
14 changed files with 488 additions and 3 deletions

56
e2e/auth.test.ts Normal file
View 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
View 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;

View 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
View 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
View 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
View 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 })
]);
});