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>

apps/web/tests/e2e/items.test.ts

@@ -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 });
+		}
+	});
+});