test(e2e): add Playwright smoke test covering the core flows

playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	testDir: 'tests/e2e',
+	timeout: 60_000,
+	fullyParallel: false,
+	workers: 1,
+	use: { baseURL: 'http://localhost:4173', viewport: { width: 390, height: 844 } },
+	webServer: {
+		command: 'rm -rf .data-e2e && npm run build && node build',
+		port: 4173,
+		reuseExistingServer: false,
+		timeout: 180_000,
+		env: {
+			STORAGE: 'local',
+			LOCAL_DATA_DIR: '.data-e2e',
+			SESSION_SECRET: 'e2e-secret-e2e-secret-e2e-secret-e2e',
+			PORT: '4173',
+			ORIGIN: 'http://localhost:4173',
+			BODY_SIZE_LIMIT: '8M',
+			COMPACTION_INTERVAL_MS: '3600000'
+		}
+	}
+});

tests/e2e/smoke.spec.ts

@@ -0,0 +1,173 @@
+import { expect, test, type Page } from '@playwright/test';
+
+const ONE_PX_PNG = Buffer.from(
+	'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
+	'base64'
+);
+
+/** The expense/settlement amount field; `Amount for <name>` inputs exist too in exact mode. */
+const AMOUNT_LABEL = /^Amount \(/;
+
+async function login(page: Page, username: string, password: string) {
+	await page.goto('/login');
+	await page.getByLabel('Username').fill(username);
+	await page.getByLabel('Password', { exact: true }).fill(password);
+	await page.getByRole('button', { name: 'Log in' }).click();
+	// The form is progressively enhanced: wait for the redirect before navigating away,
+	// otherwise a following goto() aborts the in-flight submission.
+	await expect(page).not.toHaveURL(/\/login/);
+}
+
+async function changePassword(page: Page, current: string, next: string) {
+	await expect(page).toHaveURL(/\/me\/password/);
+	await page.getByLabel('Current password').fill(current);
+	await page.getByLabel('New password (8+ characters)').fill(next);
+	await page.getByLabel('Confirm new password').fill(next);
+	await page.getByRole('button', { name: 'Save password' }).click();
+	await expect(page).toHaveURL('/');
+}
+
+async function logout(page: Page) {
+	await page.goto('/me');
+	await page.getByRole('button', { name: 'Log out' }).click();
+	await expect(page).toHaveURL(/\/login/);
+}
+
+test.describe.configure({ mode: 'serial' });
+
+test('admin bootstraps, is forced to change password, and creates users', async ({ page }) => {
+	await login(page, 'admin', '1234');
+	await changePassword(page, '1234', 'adminpass123');
+
+	await page.goto('/admin');
+	for (const [username, name] of [
+		['alice', 'Alice'],
+		['bob', 'Bob']
+	]) {
+		await page.getByLabel('Username').fill(username);
+		await page.getByLabel('Display name', { exact: true }).fill(name);
+		await page.getByLabel(/Temporary password/).fill('temppass1');
+		await page.getByRole('button', { name: 'Create user' }).click();
+		await expect(page.getByText(`Created user ${username}`)).toBeVisible();
+	}
+	await expect(page.getByText('@alice')).toBeVisible();
+	await expect(page.getByText('@bob')).toBeVisible();
+	await logout(page);
+});
+
+test('member adds expenses with every split mode and a photo', async ({ page }) => {
+	await login(page, 'alice', 'temppass1');
+	await changePassword(page, 'temppass1', 'alicepass1');
+
+	// Equal split, with photo.
+	await page.goto('/expenses/new');
+	await page.getByLabel('Description').fill('Pizza');
+	await page.getByLabel(AMOUNT_LABEL).fill('30');
+	await page
+		.getByLabel('Receipt photo (optional)')
+		.setInputFiles({ name: 'r.png', mimeType: 'image/png', buffer: ONE_PX_PNG });
+	await page.getByRole('button', { name: 'Save expense' }).click();
+	await expect(page).toHaveURL(/\/expenses\/e_/);
+	await expect(page.getByRole('heading', { name: 'Pizza' })).toBeVisible();
+	const img = page.getByAltText('Receipt for Pizza');
+	await expect(img).toBeVisible();
+	const src = await img.getAttribute('src');
+	const res = await page.request.get(src!);
+	expect(res.status()).toBe(200);
+	expect(res.headers()['content-type']).toMatch(/^image\//);
+
+	// Percent split: Alice 25 / Bob 75 of 100.
+	await page.goto('/expenses/new');
+	await page.getByLabel('Description').fill('Concert');
+	await page.getByLabel(AMOUNT_LABEL).fill('100');
+	await page.getByText('By %').click();
+	await page.getByLabel('Percent for Alice').fill('25');
+	await page.getByLabel('Percent for Bob').fill('75');
+	await expect(page.getByText('Total 100.00%')).toBeVisible();
+	await page.getByRole('button', { name: 'Save expense' }).click();
+	await expect(page).toHaveURL(/\/expenses\/e_/);
+
+	// Exact split with a validation error first.
+	await page.goto('/expenses/new');
+	await page.getByLabel('Description').fill('Groceries');
+	await page.getByLabel(AMOUNT_LABEL).fill('40');
+	await page.getByText('Exact').click();
+	await page.getByLabel('Amount for Alice').fill('10');
+	await page.getByLabel('Amount for Bob').fill('20');
+	await page.getByRole('button', { name: 'Save expense' }).click();
+	await expect(page.getByRole('alert')).toContainText('add up to the total');
+	await page.getByLabel('Amount for Bob').fill('30');
+	await page.getByRole('button', { name: 'Save expense' }).click();
+	await expect(page).toHaveURL(/\/expenses\/e_/);
+
+	// Feed lists all three.
+	await page.goto('/');
+	for (const t of ['Pizza', 'Concert', 'Groceries'])
+		await expect(page.getByText(t, { exact: true })).toBeVisible();
+
+	// Balances: Bob owes Alice 15 + 75 + 30 = 120.
+	await page.goto('/balances');
+	await expect(page.getByText('You are owed')).toBeVisible();
+	await expect(page.getByText('$120.00').first()).toBeVisible();
+	await expect(page.getByText(/Bob\s+owes\s+Alice/)).toBeVisible();
+});
+
+test('concurrent edit is rejected with a conflict', async ({ browser }) => {
+	const ctx = await browser.newContext();
+	const a = await ctx.newPage();
+	await login(a, 'alice', 'alicepass1');
+	await a.goto('/');
+	await a.getByText('Pizza', { exact: true }).click();
+	await a.getByRole('link', { name: 'Edit' }).click();
+	await expect(a).toHaveURL(/\/expenses\/e_[^/]+\/edit$/);
+	const editUrl = a.url();
+
+	const b = await ctx.newPage();
+	await b.goto(editUrl);
+	await b.getByLabel('Description').fill('Pizza (edited by B)');
+	await b.getByRole('button', { name: 'Save changes' }).click();
+	await expect(b).toHaveURL(/\/expenses\/e_[^/]+$/);
+
+	await a.getByLabel('Description').fill('Pizza (edited by A)');
+	await a.getByRole('button', { name: 'Save changes' }).click();
+	await expect(a.getByRole('alert')).toContainText('changed by someone else');
+	await ctx.close();
+});
+
+test('settle up records a payment and clears the debt; delete works', async ({ page }) => {
+	await login(page, 'bob', 'temppass1');
+	await changePassword(page, 'temppass1', 'bobpass123');
+
+	await page.goto('/balances');
+	await expect(page.getByText('You owe', { exact: true })).toBeVisible();
+	await page.getByRole('link', { name: 'Settle up' }).click();
+	await expect(page).toHaveURL(/\/settlements\/new\?from=/);
+	await expect(page.getByLabel(AMOUNT_LABEL)).toHaveValue('120.00');
+	await page.getByRole('button', { name: 'Save payment' }).click();
+	await expect(page).toHaveURL(/\/settlements\/s_/);
+
+	await page.goto('/balances');
+	await expect(page.getByText("You're all settled up")).toBeVisible();
+	await expect(page.getByText('Nobody owes anything')).toBeVisible();
+
+	// Delete the Groceries expense via the two-step confirm.
+	await page.goto('/');
+	await page.getByText('Groceries', { exact: true }).click();
+	await page.getByRole('link', { name: 'Delete expense' }).click();
+	await page.getByRole('button', { name: 'Confirm delete' }).click();
+	await expect(page).toHaveURL('/');
+	await expect(page.getByText('Groceries', { exact: true })).toHaveCount(0);
+});
+
+test('admin compacts pending events into the ledger', async ({ page }) => {
+	await login(page, 'admin', 'adminpass123');
+	await page.goto('/admin/storage');
+	await expect(page.getByText('Pending event files')).toBeVisible();
+	await page.getByRole('button', { name: 'Compact now' }).click();
+	await expect(page.getByText(/Done: appended \d+, deleted \d+/)).toBeVisible();
+	await page.reload();
+	const pending = page
+		.locator('dt', { hasText: 'Pending event files' })
+		.locator('xpath=following-sibling::dd[1]');
+	await expect(pending).toHaveText('0');
+});