Refactor privacy my-data page to Lit web component, add E2E test

Author: webstackdev

playwright.config.ts

@@ -170,55 +170,42 @@ export default defineConfig({
       name: 'chromium-serial',
       use: { ...devices['Desktop Chrome'] },
       testMatch: testMatchSerial,
-      workers: 1,
     },
 
     {
       name: 'firefox-serial',
       use: { ...devices['Desktop Firefox'] },
-      dependencies: ['chromium-serial'],
       testMatch: testMatchSerial,
-      workers: 1,
     },
 
     {
       name: 'webkit-serial',
       use: { ...devices['Desktop Safari'] },
-      dependencies: ['firefox-serial'],
       testMatch: testMatchSerial,
-      workers: 1,
     },
 
     /** Test against mobile viewports. */
     {
       name: 'mobile-chrome-serial',
       use: { ...devices['Pixel 5'] },
-      dependencies: ['webkit-serial'],
       testMatch: testMatchSerial,
-      workers: 1,
     },
     {
       name: 'mobile-safari-serial',
       use: { ...devices['iPhone 12'] },
-      dependencies: ['mobile-chrome-serial'],
       testMatch: testMatchSerial,
-      workers: 1,
     },
 
     /** Test against branded browsers. */
     {
       name: 'microsoft-edge-serial',
       use: { ...devices['Desktop Edge'], channel: 'msedge' },
-      dependencies: ['mobile-safari-serial'],
       testMatch: testMatchSerial,
-      workers: 1,
     },
     {
       name: 'google-chrome-serial',
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-      dependencies: ['microsoft-edge-serial'],
       testMatch: testMatchSerial,
-      workers: 1,
     },
 
     /**

src/components/Forms/Privacy/client/__tests__/index.spec.ts

@@ -0,0 +1,142 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import PrivacyForm from '@components/Forms/Privacy/index.astro'
+import type { PrivacyFormElement as PrivacyFormElementInstance } from '../index'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+import { getPrivacyFormElements } from '../selectors'
+
+type PrivacyFormModule = WebComponentModule<PrivacyFormElementInstance>
+
+type ActionResult<TData> = { data?: TData; error?: { message?: string } }
+
+type VerifyResult =
+  | { status: 'download'; filename: string; json: string }
+  | { status: 'deleted' }
+  | { status: 'expired' }
+
+const requestDataMock = vi.fn<
+  (_input: { email: string; requestType: 'ACCESS' | 'DELETE' }) => Promise<ActionResult<{ message: string }>>
+>()
+
+const verifyDsarMock = vi.fn<(_input: { token: string }) => Promise<ActionResult<VerifyResult>>>()
+
+vi.mock('astro:actions', () => ({
+  actions: {
+    gdpr: {
+      requestData: requestDataMock,
+      verifyDsar: verifyDsarMock,
+    },
+  },
+}))
+
+async function flushMicrotasks(): Promise<void> {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+describe('PrivacyForm behavior', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+    requestDataMock.mockReset()
+    verifyDsarMock.mockReset()
+  })
+
+  it('submits an access request and shows success', async () => {
+    requestDataMock.mockResolvedValue({ data: { message: 'Access request sent.' } })
+
+    await executeRender<PrivacyFormModule>({
+      container,
+      component: PrivacyForm,
+      moduleSpecifier: '@components/Forms/Privacy/client/index',
+      args: {
+        props: {
+          status: undefined,
+        },
+      },
+      waitForReady: async (element: PrivacyFormElementInstance) => {
+        window.history.replaceState({}, '', 'http://localhost/privacy/my-data')
+        element.initialize()
+      },
+      assert: async ({ element }) => {
+        const elements = getPrivacyFormElements(element)
+        elements.accessEmailInput.value = 'test@example.com'
+
+        elements.accessForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+        await flushMicrotasks()
+
+        expect(requestDataMock).toHaveBeenCalledWith({ email: 'test@example.com', requestType: 'ACCESS' })
+        expect(elements.accessMessage.textContent).toBe('Access request sent.')
+        expect(elements.accessMessage.classList.contains('hidden')).toBe(false)
+        expect(elements.accessMessage.classList.contains('border-success')).toBe(true)
+        expect(elements.accessEmailInput.value).toBe('')
+      },
+    })
+  })
+
+  it('blocks delete submit when confirmation is not checked', async () => {
+    requestDataMock.mockResolvedValue({ data: { message: 'Delete request sent.' } })
+
+    await executeRender<PrivacyFormModule>({
+      container,
+      component: PrivacyForm,
+      moduleSpecifier: '@components/Forms/Privacy/client/index',
+      args: {
+        props: {
+          status: undefined,
+        },
+      },
+      waitForReady: async (element: PrivacyFormElementInstance) => {
+        window.history.replaceState({}, '', 'http://localhost/privacy/my-data')
+        element.initialize()
+      },
+      assert: async ({ element }) => {
+        const elements = getPrivacyFormElements(element)
+        elements.deleteEmailInput.value = 'test@example.com'
+        elements.deleteConfirmCheckbox.checked = false
+
+        elements.deleteForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+        await flushMicrotasks()
+
+        expect(requestDataMock).not.toHaveBeenCalled()
+        expect(elements.deleteMessage.textContent).toBe('Please confirm you understand the deletion request.')
+        expect(elements.deleteMessage.classList.contains('border-danger')).toBe(true)
+      },
+    })
+  })
+
+  it('verifies token, downloads JSON, then redirects', async () => {
+    verifyDsarMock.mockResolvedValue({
+      data: { status: 'download', filename: 'dsar.json', json: '{"ok":true}' },
+    })
+
+    const downloadJsonSpy = vi.fn()
+    const navigateToSpy = vi.fn()
+
+    await executeRender<PrivacyFormModule>({
+      container,
+      component: PrivacyForm,
+      moduleSpecifier: '@components/Forms/Privacy/client/index',
+      args: {
+        props: {
+          status: undefined,
+        },
+      },
+      waitForReady: async (element: PrivacyFormElementInstance) => {
+        window.history.replaceState({}, '', 'http://localhost/privacy/my-data?token=unit-test-token')
+        ;(element as unknown as { downloadJson: typeof downloadJsonSpy }).downloadJson = downloadJsonSpy
+        ;(element as unknown as { navigateTo: typeof navigateToSpy }).navigateTo = navigateToSpy
+        element.initialize()
+      },
+      assert: async () => {
+        await flushMicrotasks()
+
+        expect(verifyDsarMock).toHaveBeenCalledWith({ token: 'unit-test-token' })
+        expect(downloadJsonSpy).toHaveBeenCalledWith('dsar.json', '{"ok":true}')
+        expect(navigateToSpy).toHaveBeenCalledWith('/privacy/my-data?status=already-completed')
+      },
+    })
+  })
+})

src/components/Forms/Privacy/client/__tests__/selectors.spec.ts

@@ -0,0 +1,68 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import PrivacyForm from '@components/Forms/Privacy/index.astro'
+import type { PrivacyFormElement as PrivacyFormElementInstance } from '../index'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+import { getPrivacyFormElements } from '../selectors'
+
+type PrivacyFormModule = WebComponentModule<PrivacyFormElementInstance>
+
+type ActionResult<TData> = { data?: TData; error?: { message?: string } }
+
+const requestDataMock = vi.fn<
+  (_input: { email: string; requestType: 'ACCESS' | 'DELETE' }) => Promise<ActionResult<{ message: string }>>
+>()
+
+const verifyDsarMock = vi.fn<(_input: { token: string }) => Promise<ActionResult<{ status: string }>>>()
+
+vi.mock('astro:actions', () => ({
+  actions: {
+    gdpr: {
+      requestData: requestDataMock,
+      verifyDsar: verifyDsarMock,
+    },
+  },
+}))
+
+describe('PrivacyForm selectors', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+    requestDataMock.mockReset()
+    verifyDsarMock.mockReset()
+  })
+
+  it('stays in sync with the PrivacyForm layout', async () => {
+    await executeRender<PrivacyFormModule>({
+      container,
+      component: PrivacyForm,
+      moduleSpecifier: '@components/Forms/Privacy/client/index',
+      args: {
+        props: {
+          status: undefined,
+        },
+      },
+      waitForReady: async (element: PrivacyFormElementInstance) => {
+        window.history.replaceState({}, '', 'http://localhost/privacy/my-data')
+        element.initialize()
+      },
+      assert: async ({ element }) => {
+        const elements = getPrivacyFormElements(element)
+
+        expect(elements.accessForm.id).toBe('access-form')
+        expect(elements.accessEmailInput.id).toBe('access-email')
+        expect(elements.accessMessage.id).toBe('access-message')
+
+        expect(elements.deleteForm.id).toBe('delete-form')
+        expect(elements.deleteEmailInput.id).toBe('delete-email')
+        expect(elements.deleteConfirmCheckbox.id).toBe('confirm-delete')
+        expect(elements.deleteMessage.id).toBe('delete-message')
+
+        expect(elements.accessEmailInput.tagName).toBe('INPUT')
+        expect(elements.deleteEmailInput.tagName).toBe('INPUT')
+      },
+    })
+  })
+})