Finish refactor of actions to ADR pattern, improve unit coverage of actions

Author: webstackdev

package.json

@@ -38,8 +38,8 @@
     "containers:logs": "FORCE_COLOR=1 docker compose --env-file test/containers/.env -f test/containers/docker-compose.e2e.yml logs -f",
     "debug:action": "python3 .github/test/runner.py",
     "dev": "npm run sync && cross-env NODE_ENV=development FORCE_COLOR=1 npx astro dev",
-    "dev:env": "FORCE_COLOR=1 dotenv -e .env.development -- npm run dev",
-    "dev:env:verbose": "FORCE_COLOR=1 dotenv -e .env.development -- npm run dev -- --verbose",
+    "dev:local": "FORCE_COLOR=1 dotenv -e .env.development -- npm run dev",
+    "dev:local:verbose": "FORCE_COLOR=1 dotenv -e .env.development -- npm run dev -- --verbose",
     "format": "npm run format:code && npm run format:style",
     "format:code": "FORCE_COLOR=1 npx prettier --write \"@types/**/*.{js,ts}\" \"src/**/*.{js,ts,tsx,astro}\" --plugin=prettier-plugin-astro",
     "format:style": "FORCE_COLOR=1 npx stylelint --fix \"src/**/*.{css,astro}\"",

playwright.config.ts

@@ -35,11 +35,18 @@ const buildWebServerEnv = () => {
   return env
 }
 
+const workersHighParallel = process.env['GITHUB_ACTIONS'] ? 1 : '75%'
+const testMatchHighParallel = '**/*.spec.ts'
+const testIgnoreHighParallel = [
+  '03-forms/**/*.spec.ts',
+  '05-api/**/*.spec.ts',
+  '06-actions/**/*.spec.ts',
+]
+const testMatchSerial = ['03-forms/**/*.spec.ts']
+
 export default defineConfig({
-  /* Look for test files in the "tests" directory, relative to this configuration file. */
+  /** Look for test files in the "tests" directory, relative to this configuration file. */
   testDir: './test/e2e/specs',
-  /* Glob patterns or regular expressions that match test files. */
-  testMatch: '**/*.spec.ts',
   /** Folder for test artifacts such as screenshots, videos, traces, etc. */
   outputDir: `.cache/playwright/output/`,
   /** Tracked by Git LFS */
@@ -53,17 +60,17 @@ export default defineConfig({
      */
     timeout: 5000,
   },
-  /* Run tests in files in parallel */
+  /** Run tests in files in parallel */
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  /** Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env['GITHUB_ACTIONS'],
-  /* Retry on CI only */
+  /** Retry on CI only */
   retries: process.env['GITHUB_ACTIONS'] ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env['GITHUB_ACTIONS'] ? 1 : '75%',
-  /* Only run @ready tests in CI, all tests locally */
+  /** Opt out of parallel tests on CI. */
+  workers: workersHighParallel,
+  /** 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 to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env['GITHUB_ACTIONS']
     ? 'github'
     : isCIMode
@@ -76,59 +83,166 @@ export default defineConfig({
           ['html', { outputFolder: `.cache/playwright/reports/` }],
           ['json', { outputFile: '.cache/playwright/results.json' }],
         ],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  /** Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
       /** Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
+    /** Base URL to use in actions like `await page.goto('/')`. */
     baseURL: 'http://localhost:4321',
     ignoreHTTPSErrors: true,
     /** Capture screenshot after each test failure, other options are 'on' and 'off'. */
     screenshot: 'only-on-failure',
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    /** Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
 
-  /* Configure projects for major browsers */
   projects: [
+    /**
+     * ===========================================================================================
+     *
+     * Most tests run in parallel across all major browsers
+     *
+     * ==========================================================================================
+     */
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
     },
 
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
     },
 
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
     },
 
-    /* Test against mobile viewports. */
+    /** Test against mobile viewports. */
     {
-      name: 'Mobile Chrome',
+      name: 'mobile-chrome',
       use: { ...devices['Pixel 5'] },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
     },
     {
-      name: 'Mobile Safari',
+      name: 'mobile-safari',
       use: { ...devices['iPhone 12'] },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
     },
 
-    /* Test against branded browsers. */
+    /** Test against branded browsers. */
     {
-      name: 'Microsoft Edge',
+      name: 'microsoft-edge',
       use: { ...devices['Desktop Edge'], channel: 'msedge' },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
     },
     {
-      name: 'Google Chrome',
+      name: 'google-chrome',
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      testMatch: testMatchHighParallel,
+      testIgnore: testIgnoreHighParallel,
+    },
+
+    /**
+     * ===========================================================================================
+     *
+     * These projects are designed to run serially due to database contention issues.
+     * We use SQLite in tests, which has limited support for concurrent writes.
+     *
+     * ===========================================================================================
+     */
+
+    {
+      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,
+    },
+
+    /**
+     * ===========================================================================================
+     *
+     * API and Actions tests are only using the browser to fetch so no need to run
+     * across browsers. They run serially to avoid SQLite write contention issues.
+     *
+     * ===========================================================================================
+     */
+
+    {
+      name: 'api-serial',
+      use: { ...devices['Desktop Chrome'] },
+      testMatch: '05-api/**/*.spec.ts',
+      workers: 1,
+    },
+
+    {
+      name: 'actions-serial',
+      use: { ...devices['Desktop Chrome'] },
+      testMatch: '06-actions/**/*.spec.ts',
+      workers: 1,
     },
   ],
 
-  /* Run your local dev server before starting the tests */
-  /* In debug mode, assume server is already running */
+  /** Run your local dev server before starting the tests */
+  /** In debug mode, assume server is already running */
   ...(isCIMode
     ? {}
     : {
@@ -144,10 +258,4 @@ export default defineConfig({
 
   globalSetup: './test/e2e/config/global-setup.ts',
   globalTeardown: './test/e2e/config/global-teardown.ts',
-
-  // path to the global teardown files.
-  //globalTeardown: require.resolve('./global-teardown'),
-
-  // Each test is given 30 seconds.
-  //timeout: 30000,
 })

src/actions/contact/@types/index.d.ts

@@ -32,3 +32,10 @@ export type EmailData = {
   subject: string
   html: string
 }
+
+interface RequiredStringOptions {
+  required_error: string
+  invalid_type_error: string
+  min: { value: number; message: string }
+  max: { value: number; message: string }
+}

src/actions/contact/__tests__/responder.spec.ts

@@ -0,0 +1,137 @@
+import { JSDOM } from 'jsdom'
+import { describe, expect, it } from 'vitest'
+
+import {
+  generateEmailContent,
+  getFormDataFromInput,
+  parseAttachmentsFromInput,
+} from '../responder'
+
+describe('contact responder', () => {
+  describe('generateEmailContent', () => {
+    it('generates valid HTML with required elements', () => {
+      const html = generateEmailContent(
+        {
+          name: 'Jane Doe',
+          email: 'jane@example.com',
+          service: 'Website redesign',
+          timeline: '2-3-months',
+          budget: '$5k-$10k',
+          message: 'Hi team!\nWe need help <ASAP> & would like a call.',
+          consent: true,
+          DataSubjectId: '123e4567-e89b-12d3-a456-426614174000',
+        },
+        []
+      )
+
+      const dom = new JSDOM(html)
+      const { document } = dom.window
+
+      expect(document.querySelector('html')).not.toBeNull()
+      expect(document.querySelector('head')).not.toBeNull()
+      expect(document.querySelector('body')).not.toBeNull()
+
+      // Content sanity checks: ensure HTML is escaped and newlines are represented.
+      expect(document.documentElement.outerHTML).toContain('&lt;ASAP&gt;')
+      expect(document.documentElement.outerHTML).toContain('&amp;')
+
+      // Header should exist and include the sender name.
+      expect(document.querySelector('meta[charset="utf-8"]')).not.toBeNull()
+      expect(document.querySelector('h1')?.textContent ?? '').toContain('New Contact Form Submission')
+      expect(document.body.textContent ?? '').toContain('Jane Doe')
+
+      // Key fields should appear somewhere in the rendered content.
+      expect(document.body.textContent ?? '').toContain('jane@example.com')
+      expect(document.body.textContent ?? '').toContain('Website redesign')
+      expect(document.body.textContent ?? '').toContain('$5k-$10k')
+    })
+
+    it('renders attachments section when attachments exist', () => {
+      const html = generateEmailContent(
+        {
+          name: 'Jane Doe',
+          email: 'jane@example.com',
+          service: 'Website redesign',
+          timeline: 'flexible',
+          message: 'See attached.',
+          consent: true,
+        },
+        [
+          {
+            filename: 'brief.pdf',
+            content: Buffer.from('pdf-bytes'),
+            contentType: 'application/pdf',
+            size: 1234,
+          },
+        ]
+      )
+
+      const dom = new JSDOM(html)
+      expect(dom.window.document.body.textContent ?? '').toContain('brief.pdf')
+    })
+  })
+
+  describe('getFormDataFromInput', () => {
+    it('maps input fields into normalized form data', () => {
+      const input = {
+        name: ' Jane ',
+        email: 'jane@example.com',
+        message: ' Hello ',
+        service: 'Web development',
+        timeline: '2-3-months',
+        budget: '$5k-$10k',
+        consent: true,
+        DataSubjectId: '123e4567-e89b-12d3-a456-426614174000',
+      }
+
+      const formData = getFormDataFromInput(input)
+
+      // `getFormDataFromInput` does not trim; Zod validation handles normalization.
+      expect(formData.name).toBe(' Jane ')
+      expect(formData.email).toBe('jane@example.com')
+      expect(formData.message).toBe(' Hello ')
+      expect(formData.service).toBe('Web development')
+      expect(formData.timeline).toBe('2-3-months')
+      expect(formData.budget).toBe('$5k-$10k')
+      expect(formData.consent).toBe(true)
+      expect(formData.DataSubjectId).toBe('123e4567-e89b-12d3-a456-426614174000')
+    })
+  })
+
+  describe('parseAttachmentsFromInput', () => {
+    it('returns empty array when no attachments provided', async () => {
+      const attachments = await parseAttachmentsFromInput({})
+      expect(attachments).toEqual([])
+    })
+
+    it('parses a File into attachment payload', async () => {
+      const file = new File(['hello'], 'hello.txt', { type: 'text/plain' })
+
+      const attachments = await parseAttachmentsFromInput({
+        file0: file,
+      })
+
+      expect(attachments).toHaveLength(1)
+
+      const [firstAttachment] = attachments
+      if (!firstAttachment) {
+        throw new Error('Expected first attachment to exist')
+      }
+
+      expect(firstAttachment.filename).toBe('hello.txt')
+      expect(firstAttachment.contentType).toBe('text/plain')
+      expect(firstAttachment.size).toBeGreaterThan(0)
+      expect(firstAttachment.content).toBeInstanceOf(Buffer)
+    })
+
+    it('rejects disallowed mime types', async () => {
+      const file = new File(['x'], 'x.exe', { type: 'application/x-msdownload' })
+
+      await expect(
+        parseAttachmentsFromInput({
+          file0: file,
+        })
+      ).rejects.toThrow(/type/i)
+    })
+  })
+})