Refactor newsletter confirmation page to Lit custom web component

Author: webstackdev

_TODO.md

@@ -56,33 +56,3 @@ Right now we're using string literals to define HTML email templates for site ma
 Vercel AI Gateway, maybe could use for a chatbot:
 
 https://vercel.com/kevin-browns-projects-dd474f73/astro-webstackbuilders-com/ai-gateway
-
-1. Firefox/WebKit locator.setChecked(...) “did not change its state”
-
-With your markup, the checkbox is sr-only and the visual switch is a separate element (peer-based). In Firefox/WebKit, a forced click on a clipped/visually-hidden checkbox can “click” without producing the native toggle behavior Playwright expects (or the component’s JS is not wired to the checkbox click in a way that actually flips the DOM checked state).
-
-Most deterministic alternatives (conceptually):
-
-- Don’t uncheck via the hidden input. Use the “Deny All” control (it exists as #consent-deny-all), then click “Allow All”, then assert all are checked. This tests the same behavior (“Allow All enables every category”) without the fragile intermediate toggle interaction.
-
-- If you truly need to uncheck just one category, do it by setting state via JS (checked = false + dispatch input/change) because that bypasses the click/geometry issues and targets the state machine the component is likely listening to.
-
-2. mobile-safari consent banner: waitForPageLoad() still times out (15s)
-
-Important observation: in consentBanner.spec.ts, you already wait on a much more direct readiness signal right after waitForPageLoad():
-
-consent-banner.isInitialized === true
-So the likely story here is: waitForPageLoad() is unnecessary for these tests, and when it flakes it blocks the entire suite.
-
-3. mobile-safari store persistence beforeEach timeouts + Edge footer page.goto('/') timeouts
-
-These are pure navigation-level failures (timeouts in page.goto or in a beforeEach that presumably can’t get through its startup navigation). The usual causes are:
-
-a global readiness wait that never resolves (which can cascade into beforeEach timing out)
-
-- Two questions so we pick the right fixes
-
-For the consent “Allow All enables every category” test: are you okay with changing the test to use #consent-deny-all instead of unchecking a single toggle (still verifies Allow All enables everything, but avoids the hidden-switch interaction entirely)?
-
-For the navigation timeouts (mobile-safari + Edge): were these runs executed while npm run dev was definitely running and stable, or is it possible the server wasn’t up / got interrupted?
-

playwright.config.ts

@@ -35,7 +35,7 @@ const buildWebServerEnv = () => {
   return env
 }
 
-const workersHighParallel = process.env['GITHUB_ACTIONS'] ? 1 : 2
+//const workersHighParallel = process.env['GITHUB_ACTIONS'] ? 1 : 1
 const testMatchHighParallel = '**/*.spec.ts'
 const testIgnoreHighParallel = [
   '03-forms/**/*.spec.ts',
@@ -66,9 +66,13 @@ export default defineConfig({
   forbidOnly: !!process.env['GITHUB_ACTIONS'],
   /** Retry on CI only */
   retries: process.env['GITHUB_ACTIONS'] ? 2 : 0,
-  /** Opt out of high parallelism in CI-mode runs. */
-  workers: workersHighParallel,
-  /** Only run @ready tests in CI, all tests locally */
+  /**
+   * Global maximum workers. Setting to 1 forces serial mode for tests. Setting
+   * higher causes flakiness especially in mobile-safari tests due to resource
+   * contention on Vite dev server.
+   */
+  workers: 1,
+  /** Only run `@ready` tests in CI, all tests locally */
   ...(process.env['GITHUB_ACTIONS'] ? { grep: /@ready/ } : {}),
   /** Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env['GITHUB_ACTIONS']

src/components/Newsletter/Confirm/client/__tests__/index.spec.ts

@@ -0,0 +1,100 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import NewsletterConfirm from '@components/Newsletter/Confirm/index.astro'
+import type { NewsletterConfirmElement as NewsletterConfirmElementInstance } from '../index'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+import { getNewsletterConfirmElements } from '../selectors'
+
+type NewsletterConfirmModule = WebComponentModule<NewsletterConfirmElementInstance>
+
+type ActionResult<TData> = { data?: TData; error?: { message?: string } }
+
+type ConfirmActionData = {
+  success?: boolean
+  email?: string
+  status?: string
+  message?: string
+}
+
+const confirmMock = vi.fn<
+  (_input: { token: string }) => Promise<ActionResult<ConfirmActionData>>
+>()
+
+vi.mock('astro:actions', () => ({
+  actions: {
+    newsletter: {
+      confirm: confirmMock,
+    },
+  },
+}))
+
+const flushPromises = async () => {
+  await Promise.resolve()
+  await new Promise(resolve => setTimeout(resolve, 0))
+}
+
+describe('NewsletterConfirmElement web component', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    confirmMock.mockReset()
+    container = await AstroContainer.create()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const renderConfirm = async (
+    assertion: (_context: {
+      element: NewsletterConfirmElementInstance
+      elements: ReturnType<typeof getNewsletterConfirmElements>
+    }) => Promise<void> | void,
+    mockResult: ActionResult<ConfirmActionData>
+  ) => {
+    confirmMock.mockResolvedValue(mockResult)
+
+    await executeRender<NewsletterConfirmModule>({
+      container,
+      component: NewsletterConfirm,
+      moduleSpecifier: '@components/Newsletter/Confirm/client/index',
+      args: {
+        props: {
+          token: 'unit-test-token',
+        },
+      },
+      waitForReady: async (element: NewsletterConfirmElementInstance) => {
+        element.initialize()
+        await flushPromises()
+      },
+      assert: async ({ element }) => {
+        const elements = getNewsletterConfirmElements(element)
+        await assertion({ element, elements })
+      },
+    })
+  }
+
+  test('shows success state when confirmation succeeds', async () => {
+    await renderConfirm(
+      async ({ elements }) => {
+        expect(elements.successState.classList.contains('hidden')).toBe(false)
+        expect(elements.loadingState.classList.contains('hidden')).toBe(true)
+        expect(elements.userEmail.textContent).toBe('test@example.com')
+        expect(elements.statusAnnouncer.textContent).toBe('Subscription confirmed.')
+      },
+      { data: { success: true, email: 'test@example.com' } }
+    )
+  })
+
+  test('shows expired state when confirmation is expired', async () => {
+    await renderConfirm(
+      async ({ elements }) => {
+        expect(elements.expiredState.classList.contains('hidden')).toBe(false)
+        expect(elements.loadingState.classList.contains('hidden')).toBe(true)
+        expect(elements.statusAnnouncer.textContent).toBe('Confirmation link expired.')
+      },
+      { data: { success: false, status: 'expired' } }
+    )
+  })
+})

src/components/Newsletter/Confirm/client/__tests__/selectors.spec.ts

@@ -0,0 +1,73 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import NewsletterConfirm from '@components/Newsletter/Confirm/index.astro'
+import type { NewsletterConfirmElement as NewsletterConfirmElementInstance } from '../index'
+import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
+import { executeRender } from '@test/unit/helpers/litRuntime'
+import { getNewsletterConfirmElements } from '../selectors'
+
+type NewsletterConfirmModule = WebComponentModule<NewsletterConfirmElementInstance>
+
+type ActionResult<TData> = { data?: TData; error?: { message?: string } }
+
+type ConfirmActionData = {
+  success?: boolean
+  email?: string
+  status?: string
+  message?: string
+}
+
+const confirmMock = vi.fn<
+  (_input: { token: string }) => Promise<ActionResult<ConfirmActionData>>
+>()
+
+vi.mock('astro:actions', () => ({
+  actions: {
+    newsletter: {
+      confirm: confirmMock,
+    },
+  },
+}))
+
+describe('NewsletterConfirm selectors', () => {
+  let container: AstroContainer
+
+  beforeEach(async () => {
+    container = await AstroContainer.create()
+    confirmMock.mockReset()
+    confirmMock.mockResolvedValue({ data: { success: true, email: 'test@example.com' } })
+  })
+
+  it('stays in sync with the NewsletterConfirm layout', async () => {
+    await executeRender<NewsletterConfirmModule>({
+      container,
+      component: NewsletterConfirm,
+      moduleSpecifier: '@components/Newsletter/Confirm/client/index',
+      args: {
+        props: {
+          token: 'unit-test-token',
+        },
+      },
+      waitForReady: async (element: NewsletterConfirmElementInstance) => {
+        element.initialize()
+      },
+      assert: async ({ element }) => {
+        const elements = getNewsletterConfirmElements(element)
+
+        expect(elements.loadingState.id).toBe('loading-state')
+        expect(elements.successState.id).toBe('success-state')
+        expect(elements.expiredState.id).toBe('expired-state')
+        expect(elements.errorState.id).toBe('error-state')
+        expect(elements.statusAnnouncer.id).toBe('confirmation-status')
+        expect(elements.userEmail.id).toBe('user-email')
+        expect(elements.errorTitle.id).toBe('error-title')
+        expect(elements.errorMessage.id).toBe('error-message')
+        expect(elements.errorDetails.id).toBe('error-details')
+
+        expect(elements.loadingHeading.tagName).toBe('H2')
+        expect(elements.successHeading.tagName).toBe('H2')
+        expect(elements.expiredHeading.tagName).toBe('H2')
+      },
+    })
+  })
+})