Implement component consent preferences full stack E2E test case with container mocks for third party services

Author: webstackdev

_TODO.md

@@ -26,23 +26,6 @@ For faster troubleshooting in that noisy log stream, filter just warnings/errors
 
 E2E Starting Point
 
-Stabilize infra first: run npm run containers:up, npm run containers:wait, npm run containers:supabase:start, and the dev server. Keep containers:logs and containers:supabase:logs tailing in another terminal so every mock failure is visible before Playwright runs.
-
-Create a shared Playwright "mocks ready" fixture: add a helper that checks process.env.E2E_MOCKS === '1' and pings `http://127.0.0.1:8079/` plus the two WireMock endpoints before each suite. That gives quick feedback if someone forgets the setup commands.
-
-Those PGRST000 lines are just PostgREST complaining while Postgres is still booting. Every time Supabase restarts (or Docker does a health restart), PostgREST hammers the DB before it's ready and logs "database system is starting up". Once Postgres finishes (~10-15 seconds later), the errors stop. If you scroll further down the same log stream you should see "schema cache loaded" messages confirming it recovered.
-
-The Vector errors are fallout from the same startup noise—its remap transform tries to parse the PostgREST log lines as access logs (with to_timestamp), but that "Failed listening for database notifications…" text doesn't match the timestamp pattern. After PostgREST stabilizes, Vector goes back to normal. Harmless unless you depend on those telemetry pipelines.
-
-If the chatter is distracting, tail each container separately so you only see current warnings: docker logs -f supabase_rest_astro.webstackbuilders.com 2>&1 | grep -E '\\[(error|warn)\\]'. You'll notice the burst only happens immediately after start.sh runs or when the DB container is restarted.
-
-You can also extend the REST container's startup delay to avoid the spam: set PGRST_DB_CONFIG variables or wrap npx supabase start in the script with a sleep until supabase_db reports healthy. But functionally, this is expected Supabase CLI behavior; it doesn't indicate a broken state once the stack reports healthy in npm run containers:supabase:status.
-
-Implementation order
-
-03-forms: once the API layer is stable, wire the UI flows. Use Playwright to submit each form, but assert success by checking the mock mappings were triggered, not just the UI toast.
-Consent Preferences (@wip): convert it to use the same helper that verifies mocked Upstash REST and Supabase responses. This test should (1) toggle UI controls, (2) check the outbound request via the mock logs, and (3) read back seeded data to confirm persistence.
-
 04-components/consentPreferences.spec.ts
 
 ## Typing client-side API calls and SSR API endpoints

test/e2e/specs/03-forms/newsletter-double-optin.spec.ts

@@ -8,7 +8,7 @@ import { TEST_EMAILS } from '@test/e2e/fixtures/test-data'
 test.describe('Newsletter Double Opt-In Flow', () => {
   test.skip('@blocked complete double opt-in flow', async ({ page: playwrightPage }) => {
     const page = await BasePage.init(playwrightPage)
-    // Blocked by: Need email testing service integration (e.g., Mailosaur)
+    // Blocked by: Need email testing service integration (Resend mock)
     // Expected: Full flow from subscription to welcome email
     // Actual: Cannot test without email service
 

test/e2e/specs/04-components/consentPreferences.spec.ts

@@ -4,14 +4,26 @@
  */
 
 import type { Page } from '@playwright/test'
-import { BasePage, expect, test, mockFetchEndpointResponse, type FetchOverrideHandle } from '@test/e2e/helpers'
+import { env } from 'node:process'
+import { createClient, type SupabaseClient } from '@supabase/supabase-js'
+import { BasePage, expect, mocksEnabled, test, mockFetchEndpointResponse, type FetchOverrideHandle } from '@test/e2e/helpers'
+import type { ConsentResponse } from '@pages/api/_contracts/gdpr.contracts'
 
 const ALLOW_ALL_BUTTON = '#consent-allow-all'
 const SAVE_BUTTON = '#consent-save-preferences'
 const COMPONENT_SELECTOR = 'consent-preferences'
-const WIP_TAG = '@wip'
+const FULL_STACK_TAG = '@containers'
 const CONSENT_PAGE_PATH = '/consent'
 
+const SUPABASE_URL = env['SUPABASE_URL']?.replace(/\/$/, '')
+const SUPABASE_SERVICE_ROLE_KEY = env['SUPABASE_SERVICE_ROLE_KEY']
+
+const supabaseAdminClient: SupabaseClient | null = SUPABASE_URL && SUPABASE_SERVICE_ROLE_KEY
+  ? createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, {
+      auth: { autoRefreshToken: false, persistSession: false },
+    })
+  : null
+
 const toggleLabel = (checkboxId: string): string => `[data-consent-toggle="${checkboxId}"]`
 
 const interceptConsentApi = async (page: Page): Promise<FetchOverrideHandle> => {
@@ -21,6 +33,55 @@ const interceptConsentApi = async (page: Page): Promise<FetchOverrideHandle> =>
   })
 }
 
+const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms))
+
+type ConsentRecordRow = {
+  id: string
+  data_subject_id: string
+  purposes: string[]
+  source: string | null
+  timestamp: string
+}
+
+/**
+ * Polls Supabase until the consent record for the provided subject includes the expected purposes.
+ */
+const waitForSupabaseConsentRecord = async (
+  dataSubjectId: string,
+  expectedPurposes: string[],
+  timeoutMs = 7_000,
+): Promise<ConsentRecordRow> => {
+  if (!supabaseAdminClient) {
+    throw new Error('Supabase admin client unavailable')
+  }
+
+  const deadline = Date.now() + timeoutMs
+  let lastError: string | undefined
+
+  while (Date.now() <= deadline) {
+    const { data, error } = await supabaseAdminClient
+      .from('consent_records')
+      .select('id, data_subject_id, purposes, source, timestamp')
+      .eq('data_subject_id', dataSubjectId)
+      .order('timestamp', { ascending: false })
+      .limit(1)
+
+    if (error) {
+      lastError = error.message
+    } else if (data && data.length > 0) {
+      const record = data[0]!
+      const hasAllPurposes = expectedPurposes.every((purpose) => record.purposes?.includes(purpose))
+      if (hasAllPurposes) {
+        return record
+      }
+    }
+
+    await wait(250)
+  }
+
+  throw new Error(lastError ?? 'Timed out waiting for consent record to persist in Supabase')
+}
+
 async function removeViteErrorOverlay(page: BasePage): Promise<void> {
   await page.evaluate(() => {
     const styleId = 'disable-vite-overlay-style'
@@ -56,7 +117,7 @@ test.describe('Consent Preferences Component', () => {
 
   test.beforeEach(async ({ page: playwrightPage, context }, testInfo) => {
     const page = await BasePage.init(playwrightPage)
-    const shouldMockConsentApi = !testInfo.title.includes(WIP_TAG)
+    const shouldMockConsentApi = !testInfo.title.includes(FULL_STACK_TAG)
 
     if (shouldMockConsentApi) {
       consentApiOverride = await interceptConsentApi(playwrightPage)
@@ -78,30 +139,61 @@ test.describe('Consent Preferences Component', () => {
     }
   })
 
-  test.skip(
-    '@wip full stack consent submission hits backend mocks',
-    async ({ page: playwrightPage }) => {
-      // This smoke test is intended to run against the local dev/mock Docker stack
-      // (e.g., Supabase container) and therefore bypasses request interception.
-      const page = await BasePage.init(playwrightPage)
-      await page.goto(CONSENT_PAGE_PATH, { timeout: 15000 })
-      await playwrightPage.waitForLoadState('networkidle')
-      await waitForConsentPreferences(page)
+  test('@containers full stack consent submission hits backend mocks', async ({ page: playwrightPage }) => {
+    test.skip(!mocksEnabled, 'E2E_MOCKS=1 is required to run Supabase-backed consent tests')
+    test.skip(!supabaseAdminClient, 'Supabase containers must be running for full stack consent coverage')
 
-      await page.locator(ALLOW_ALL_BUTTON).click()
+    const page = await BasePage.init(playwrightPage)
+    await waitForConsentPreferences(page)
 
-      const consentRequest = page.waitForResponse('**/api/gdpr/consent')
+    const analyticsCheckbox = page.locator('#analytics-cookies')
+    const functionalCheckbox = page.locator('#functional-cookies')
+    const marketingCheckbox = page.locator('#marketing-cookies')
 
-      await page.locator(SAVE_BUTTON).click()
+    await page.locator(ALLOW_ALL_BUTTON).click()
 
-      const response = await consentRequest
-      expect(response.ok()).toBeTruthy()
+    const consentResponsePromise = page.waitForResponse((response) => {
+      return response.url().includes('/api/gdpr/consent') && response.request().method() === 'POST'
+    })
 
-      await expect(page.locator('#analytics-cookies')).toBeChecked()
-      await expect(page.locator('#functional-cookies')).toBeChecked()
-      await expect(page.locator('#marketing-cookies')).toBeChecked()
+    await page.locator(SAVE_BUTTON).click()
+
+    const consentResponse = await consentResponsePromise
+    expect(consentResponse.ok()).toBeTruthy()
+
+    const responseBody = (await consentResponse.json()) as ConsentResponse
+    expect(responseBody.success).toBeTruthy()
+
+    const dataSubjectId = responseBody.record?.DataSubjectId
+    expect(dataSubjectId).toBeTruthy()
+    if (!dataSubjectId) {
+      throw new Error('Consent API did not return a DataSubjectId')
     }
-  )
+
+    const expectedPurposes = ['analytics', 'functional', 'marketing']
+
+    let cleanupId: string | null = dataSubjectId
+    try {
+      const record = await waitForSupabaseConsentRecord(dataSubjectId, expectedPurposes)
+      cleanupId = record.data_subject_id
+
+      const sortedRecordPurposes = [...record.purposes].sort()
+      const sortedExpectedPurposes = [...expectedPurposes].sort()
+      expect(sortedRecordPurposes).toEqual(sortedExpectedPurposes)
+      expect(record.source).toBe('cookies_modal')
+
+      await expect(analyticsCheckbox).toBeChecked()
+      await expect(functionalCheckbox).toBeChecked()
+      await expect(marketingCheckbox).toBeChecked()
+    } finally {
+      if (cleanupId) {
+        await supabaseAdminClient
+          ?.from('consent_records')
+          .delete()
+          .eq('data_subject_id', cleanupId)
+      }
+    }
+  })
 
   test('@ready component renders headings and CTAs', async ({ page: playwrightPage }) => {
     const page = await BasePage.init(playwrightPage)