test: full test suite (Vitest + pgTAP + Playwright) + TDD plan restructure
Add a 4-layer test stack covering RLS, triggers, and UI flows for Fases 0–2a, then restructure every plan file so future fases start with tests and end with a verification gate. Test suite - packages/test-utils: Vitest integration tests signing HS256 JWTs via jose so each test acts as a specific seed user (createClientAs + createAdminClient) - supabase/tests: pgTAP for accept_invitation(), item_frequency trigger, and promote-on-admin-leave; each file self-installs pgtap extension - apps/web/tests: Playwright E2E with live Keycloak login per test (storageState caching doesn't rehydrate Supabase's session state reliably) - just test-all chains the three suites; test-db forwards POSTGRES_PASSWORD as PGPASSWORD with ON_ERROR_STOP=1 so failures abort the chain Supabase auth gotcha - PostgREST queries inside onAuthStateChange deadlock on GoTrue's navigator.locks auth lock (getAccessToken → getSession → initializePromise waits on the same lock that's held during event dispatch). Fix is two defenses: a pass-through lock in $lib/supabase, and a setTimeout(0) defer in root +layout.svelte to push loadUserCollectives out of the callback's microtask chain. Either alone is insufficient; both together unblock the Playwright suite. Env key rotation - apps/web/.env.development had a stale demo anon key signed with a different secret than root .env; Vite inlined that into the browser bundle so Kong (which uses the root .env value) rejected every request with 401. Aligned the two files and added a memory entry to flag this for the next rotation. Plan restructure (TDD) - Every fase now opens with X.0 Tests primero and closes with X.Z Verificación final. Completed fases (0, 1, 2a) show the pattern retroactively with the tests that currently cover them; pending fases (2b, 3, 4) list the tests to write before implementation. Docs - CLAUDE.md status line reports 54 + 12 + 15 = 81 green tests, adds gotchas #11 (auth-lock deadlock) and #12 (no storageState caching) - README.md adds a TDD methodology section and the test-all command - .gitignore excludes Playwright's generated reports and auth state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
56
apps/web/tests/e2e/auth.test.ts
Normal file
56
apps/web/tests/e2e/auth.test.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* A-series: Auth flows — login, logout, route protection, role visibility.
|
||||
*
|
||||
* Uses live Keycloak login per test (see fixtures/login.ts). The passthrough
|
||||
* lock in `$lib/supabase` is required for queries to resolve in headless
|
||||
* Chromium — see the comment there for details.
|
||||
*/
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { USERS, COLLECTIVE_NAME, KEYCLOAK_REALM } from '../fixtures/users.js';
|
||||
import { loginAs } from '../fixtures/login.js';
|
||||
|
||||
test.describe('Auth — login and route protection', () => {
|
||||
test('A-01: unauthenticated user is redirected to Keycloak', async ({ page }) => {
|
||||
await page.goto('/lists');
|
||||
await expect(page).toHaveURL(
|
||||
new RegExp(`realms/${KEYCLOAK_REALM}/protocol/openid-connect/auth`),
|
||||
{ timeout: 10_000 }
|
||||
);
|
||||
});
|
||||
|
||||
test('A-02: Ana can log in and reach the app', async ({ page }) => {
|
||||
await loginAs(page, USERS.ana);
|
||||
await expect(page.locator('body')).not.toContainText('Error');
|
||||
});
|
||||
|
||||
test('A-04: Ana sees the collective name in the sidebar', async ({ page }) => {
|
||||
await loginAs(page, USERS.ana);
|
||||
await page.goto('/lists');
|
||||
// Sidebar button label includes both the emoji and the collective name
|
||||
await expect(
|
||||
page.getByRole('button', { name: new RegExp(COLLECTIVE_NAME) })
|
||||
).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
|
||||
test('A-05: Ana can sign out', async ({ page }) => {
|
||||
await loginAs(page, USERS.ana);
|
||||
await page.goto('/settings');
|
||||
|
||||
const signOutButton = page.getByRole('button', { name: /sign out|cerrar sesión/i });
|
||||
await expect(signOutButton).toBeVisible({ timeout: 10_000 });
|
||||
await signOutButton.click();
|
||||
|
||||
// After sign out, the session is cleared. The (app) layout's auth effect
|
||||
// will redirect back to Keycloak for re-auth (SSO still active there), so
|
||||
// we end up somewhere other than /settings. We just verify we left.
|
||||
await expect(page).not.toHaveURL(/\/settings/, { timeout: 15_000 });
|
||||
});
|
||||
|
||||
test('A-06: David (guest) can log in and see the collective', async ({ page }) => {
|
||||
await loginAs(page, USERS.david);
|
||||
await page.goto('/lists');
|
||||
await expect(
|
||||
page.getByRole('button', { name: new RegExp(COLLECTIVE_NAME) })
|
||||
).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
});
|
||||
142
apps/web/tests/e2e/items.test.ts
Normal file
142
apps/web/tests/e2e/items.test.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* D-series (UI): Shopping item CRUD flows on `/lists/[id]`.
|
||||
*
|
||||
* Each test does a full Keycloak login. The seed list ("Weekly shop",
|
||||
* id bbbb...) is created by supabase/seed.sql and reused read-only by all
|
||||
* assertions that don't mutate it. Tests that do mutate (add / check / delete)
|
||||
* use items whose names include the Date.now() stamp so they're unique.
|
||||
*/
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
import { USERS } from '../fixtures/users.js';
|
||||
import { loginAs } from '../fixtures/login.js';
|
||||
|
||||
const SEED_LIST_ID = 'bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb';
|
||||
const SEED_LIST_PATH = `/lists/${SEED_LIST_ID}`;
|
||||
const ADD_ITEM_PLACEHOLDER = /add item|añadir producto/i;
|
||||
|
||||
async function gotoSeedList(page: Page) {
|
||||
await page.goto(SEED_LIST_PATH);
|
||||
// Sidebar collective loaded = we're authenticated and the page has hydrated.
|
||||
await expect(page.getByRole('button', { name: /Casa García-López/ })).toBeVisible({
|
||||
timeout: 15_000
|
||||
});
|
||||
}
|
||||
|
||||
/** Find the row for a given item. The template sets role="listitem" per row. */
|
||||
function itemRow(page: Page, name: string) {
|
||||
return page.locator('[role="listitem"]').filter({ hasText: name }).first();
|
||||
}
|
||||
|
||||
test.describe('Shopping items — member (Borja)', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginAs(page, USERS.borja);
|
||||
});
|
||||
|
||||
test('D-01: can open the seed list and see its items', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
// Seed items: Milk, Bread, Eggs, Coffee, Apples. Scope to listitem rows
|
||||
// so we don't collide with the suggestion chips that share the same text.
|
||||
await expect(itemRow(page, 'Milk')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(itemRow(page, 'Bread')).toBeVisible();
|
||||
await expect(itemRow(page, 'Coffee')).toBeVisible();
|
||||
});
|
||||
|
||||
test('D-02: can add a new item via the sticky form', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
const nameInput = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await expect(nameInput).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const itemName = `E2E-item-${Date.now()}`;
|
||||
await nameInput.fill(itemName);
|
||||
await nameInput.press('Enter');
|
||||
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Reload to confirm the item persisted (not just optimistic).
|
||||
await page.reload();
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('D-03: can check an item — toggles the aria-checked state', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
// Add a fresh item so we don't race with other tests' check state.
|
||||
const nameInput = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await expect(nameInput).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const itemName = `Check-me-${Date.now()}`;
|
||||
await nameInput.fill(itemName);
|
||||
await nameInput.press('Enter');
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const row = itemRow(page, itemName);
|
||||
const toggle = row.getByRole('button', { name: /toggle item|uncheck item/i });
|
||||
await toggle.click();
|
||||
|
||||
// A checked item is moved into the "Checked" section. Verify it still
|
||||
// shows on the page (it slides to the checked list with animation).
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test('D-04: can delete an item on desktop via the trash button', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
const nameInput = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await expect(nameInput).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const itemName = `Delete-me-${Date.now()}`;
|
||||
await nameInput.fill(itemName);
|
||||
await nameInput.press('Enter');
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const row = itemRow(page, itemName);
|
||||
await row.hover();
|
||||
|
||||
// The row has 3 "Delete" buttons in markup (swipe-reveal behind the row,
|
||||
// desktop-hover on the row, and a checked-state one). The desktop-hover
|
||||
// button is the one with `sm:flex` — target it via class.
|
||||
await row.locator('button.sm\\:flex[aria-label="Delete"]').click();
|
||||
|
||||
await expect(page.getByText(itemName)).not.toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test('D-06: frequency suggestions render below the add-item input', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
const nameInput = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await expect(nameInput).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Focus the input. The seed data has "milk", "bread", "eggs", etc. in
|
||||
// item_frequency, so suggestion chips should render.
|
||||
await nameInput.click();
|
||||
// At least one of the seed-frequency items should be visible as a chip.
|
||||
await expect(page.getByRole('button', { name: /^milk$/i })).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Typing a prefix should narrow suggestions. "mi" matches "milk".
|
||||
await nameInput.fill('mi');
|
||||
await expect(page.getByRole('button', { name: /^milk$/i })).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Shopping items — guest (David, read-only)', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginAs(page, USERS.david);
|
||||
});
|
||||
|
||||
test('D-10: David sees seed items but cannot commit a new one', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
await expect(itemRow(page, 'Milk')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Either the add input is hidden for guests, or typing + Enter does not
|
||||
// commit a persisted item (RLS blocks the insert → the optimistic row,
|
||||
// if any, rolls back).
|
||||
const input = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
const visible = await input.isVisible({ timeout: 2_000 }).catch(() => false);
|
||||
if (visible) {
|
||||
const name = `Guest-sneaky-${Date.now()}`;
|
||||
await input.fill(name);
|
||||
await input.press('Enter');
|
||||
await page.waitForTimeout(1_500);
|
||||
await page.reload();
|
||||
// After reload, nothing persisted on the server should render.
|
||||
await expect(page.getByText(name)).not.toBeVisible({ timeout: 5_000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
123
apps/web/tests/e2e/lists.test.ts
Normal file
123
apps/web/tests/e2e/lists.test.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* C-series (UI): Shopping list CRUD flows — create, complete, trash.
|
||||
*
|
||||
* Live Keycloak login per test (no cached storageState). See fixtures/login.ts
|
||||
* and the comment in $lib/supabase for why the Supabase client uses a
|
||||
* pass-through lock.
|
||||
*/
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
import { USERS } from '../fixtures/users.js';
|
||||
import { loginAs } from '../fixtures/login.js';
|
||||
|
||||
const PLACEHOLDER_NEW_LIST = /weekly shop|compra semanal/i;
|
||||
|
||||
/** Heading for a list — may render as h2 (featured card) or h3 (grid item). */
|
||||
function listHeading(page: Page, name: string) {
|
||||
return page.getByRole('heading', { name: new RegExp(`^${name}$`) });
|
||||
}
|
||||
|
||||
/**
|
||||
* The action menu button inside the card for a specific list. The DOM has one
|
||||
* "List actions" button per active card, so we scope by the card wrapper
|
||||
* (ancestor of the heading) — this avoids the strict-mode ambiguity of picking
|
||||
* from many grid siblings.
|
||||
*/
|
||||
function cardActionsButton(page: Page, name: string) {
|
||||
// The card wrapper is the `<div class="relative group">` two levels above
|
||||
// the `<h3>` (or one level above `<h2>` for featured). An xpath that walks
|
||||
// up until it finds the button gives us a stable selector.
|
||||
return page
|
||||
.locator(
|
||||
`xpath=//h2[normalize-space()="${name}"]/ancestor::div[.//button[@aria-label]][1]` +
|
||||
` | //h3[normalize-space()="${name}"]/ancestor::div[.//button[@aria-label]][1]`
|
||||
)
|
||||
.first()
|
||||
.getByRole('button', { name: /list actions|acciones de lista/i });
|
||||
}
|
||||
|
||||
async function gotoListsClean(page: Page) {
|
||||
await page.goto('/lists');
|
||||
await expect(page.getByPlaceholder(PLACEHOLDER_NEW_LIST)).toBeVisible({ timeout: 15_000 });
|
||||
}
|
||||
|
||||
async function createList(page: Page, name: string) {
|
||||
const input = page.getByPlaceholder(PLACEHOLDER_NEW_LIST);
|
||||
await input.fill(name);
|
||||
await input.press('Enter');
|
||||
await expect(listHeading(page, name)).toBeVisible({ timeout: 5_000 });
|
||||
}
|
||||
|
||||
test.describe('Shopping lists — member (Borja)', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginAs(page, USERS.borja);
|
||||
});
|
||||
|
||||
test('C-07: create a new shopping list', async ({ page }) => {
|
||||
await gotoListsClean(page);
|
||||
|
||||
const listName = `E2E list ${Date.now()}`;
|
||||
await createList(page, listName);
|
||||
|
||||
// Reload to prove the list persists server-side (not just optimistic).
|
||||
await page.reload();
|
||||
await expect(listHeading(page, listName)).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
|
||||
test('C-11: soft-delete a list — it moves to trash', async ({ page }) => {
|
||||
await gotoListsClean(page);
|
||||
|
||||
const listName = `Trash me ${Date.now()}`;
|
||||
await createList(page, listName);
|
||||
|
||||
// Scope the menu button to the card containing our new heading — it's
|
||||
// the nearest ancestor that also has a List actions button.
|
||||
await cardActionsButton(page, listName).click();
|
||||
await page.getByRole('button', { name: /move to trash|enviar a la papelera/i }).click();
|
||||
|
||||
await expect(listHeading(page, listName)).not.toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// It shows up under the Trash drawer.
|
||||
await page.getByRole('button', { name: /^trash$|^papelera$/i }).first().click();
|
||||
await expect(page.getByText(listName)).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test('C-12: archive a list — it moves out of the active grid', async ({ page }) => {
|
||||
await gotoListsClean(page);
|
||||
|
||||
const listName = `Archive me ${Date.now()}`;
|
||||
await createList(page, listName);
|
||||
|
||||
await cardActionsButton(page, listName).click();
|
||||
await page.getByRole('button', { name: /^archive$|^archivar$/i }).click();
|
||||
|
||||
// Active grid no longer shows the archived list.
|
||||
await expect(listHeading(page, listName)).not.toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Shopping lists — guest (David, read-only)', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginAs(page, USERS.david);
|
||||
});
|
||||
|
||||
test('C-13: guest sees the seed list (read-only)', async ({ page }) => {
|
||||
await page.goto('/lists');
|
||||
await expect(
|
||||
page.getByRole('button', { name: /Casa García-López/ })
|
||||
).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
await expect(listHeading(page, 'Weekly shop')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// If the create-list input is even rendered for guests, typing into it
|
||||
// and pressing Enter must NOT create a committed list (RLS blocks the
|
||||
// insert; the optimistic row rolls back).
|
||||
const input = page.getByPlaceholder(PLACEHOLDER_NEW_LIST);
|
||||
if (await input.isVisible({ timeout: 2_000 }).catch(() => false)) {
|
||||
const name = `David sneaky ${Date.now()}`;
|
||||
await input.fill(name);
|
||||
await input.press('Enter');
|
||||
await page.waitForTimeout(1_500);
|
||||
await expect(listHeading(page, name)).not.toBeVisible({ timeout: 2_000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user