Add comprehensive frontend test suite

- Add Jest and React Testing Library for unit/component tests
- Add Playwright for E2E tests
- Create colocated test files for components:
  - Utility tests: Timeout, Defer, RoutingListener
  - Core components: AsyncButton, Console, AlternatingSections, MetaTags, Layout
  - Form components: NewsletterSection, ContactSection
  - Modal components: RouteHashBasedModal, Download
- Add E2E tests for user flows:
  - Homepage, navigation, newsletter signup
  - Contact form, download modal, comparison page
- Add mock files for Next.js router, Link, Head, Script
- Add mocks for aphrodite, unfetch
- Update README with testing instructions
- Update CI workflow to run unit and E2E tests before build

Author: claude

.github/workflows/frontend.yml

@@ -14,7 +14,59 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - name: Install Dependencies
+        working-directory: frontend
+        run: npm install
+      - name: Run Unit Tests
+        working-directory: frontend
+        run: npm test -- --ci --coverage
+      - name: Upload Coverage Report
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: frontend/coverage/
+
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+      - name: Install Dependencies
+        working-directory: frontend
+        run: npm install
+      - name: Install Playwright Browsers
+        working-directory: frontend
+        run: npx playwright install --with-deps
+      - name: Run E2E Tests
+        working-directory: frontend
+        run: npm run test:e2e
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30
+
   build:
+    needs: [test, e2e]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -24,7 +76,7 @@ jobs:
         with:
           node-version: 20.x
           cache: npm
-          cache-dependency-path: frontend/package.json
+          cache-dependency-path: frontend/package-lock.json
       - name: Setup Pages
         uses: actions/configure-pages@v5
         with:

frontend/README.md

@@ -9,8 +9,132 @@ Build prod version: $ npm run build
 Start built prod version: $ npm run start
 Export to static files: $ npm run export
 
+Testing
+-------------
+
+### Unit Tests
+
+The project uses Jest and React Testing Library for unit and component tests. Test files are colocated with their source files using the `.test.tsx` or `.test.ts` extension.
+
+**Run all unit tests:**
+```bash
+npm test
+```
+
+**Run tests in watch mode (useful during development):**
+```bash
+npm run test:watch
+```
+
+**Run tests with coverage report:**
+```bash
+npm run test:coverage
+```
+
+The coverage report will be generated in the `coverage/` directory.
+
+### End-to-End Tests
+
+The project uses Playwright for end-to-end testing. E2E tests are located in the `e2e/` directory.
+
+**Run E2E tests:**
+```bash
+npm run test:e2e
+```
+
+**Run E2E tests in headed mode (see the browser):**
+```bash
+npm run test:e2e:headed
+```
+
+**Run E2E tests for a specific browser:**
+```bash
+npx playwright test --project=chromium
+npx playwright test --project=firefox
+npx playwright test --project=webkit
+```
+
+**View E2E test report:**
+```bash
+npx playwright show-report
+```
+
+**Install Playwright browsers (first time setup):**
+```bash
+npx playwright install
+```
+
+### Writing Tests
+
+**Unit Tests:**
+- Place test files next to the source file: `Component.tsx` → `Component.test.tsx`
+- Use React Testing Library for component testing
+- Follow the existing patterns in the codebase
+- Mock external dependencies (fetch, analytics, Next.js router)
+
+Example:
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MyComponent from './MyComponent';
+
+describe('MyComponent', () => {
+  it('renders correctly', () => {
+    render(<MyComponent />);
+    expect(screen.getByText('Expected Text')).toBeInTheDocument();
+  });
+
+  it('handles user interaction', async () => {
+    const user = userEvent.setup();
+    render(<MyComponent />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('Clicked!')).toBeInTheDocument();
+  });
+});
+```
+
+**E2E Tests:**
+- Place test files in the `e2e/` directory with `.spec.ts` extension
+- Use Playwright's testing API
+- Mock API responses when testing form submissions
+
+Example:
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('should complete user flow', async ({ page }) => {
+  await page.goto('/');
+
+  await page.getByRole('button', { name: /submit/i }).click();
+
+  await expect(page.getByText('Success!')).toBeVisible();
+});
+```
+
+### Test Structure
+
+```
+frontend/
+├── components/
+│   ├── MyComponent.tsx
+│   ├── MyComponent.test.tsx      # Unit test (colocated)
+│   └── ...
+├── e2e/
+│   ├── homepage.spec.ts          # E2E tests
+│   ├── navigation.spec.ts
+│   └── ...
+├── __mocks__/                    # Jest mocks
+│   ├── next/
+│   ├── aphrodite.js
+│   └── unfetch.js
+├── jest.config.js
+├── jest.setup.js
+└── playwright.config.ts
+```
+
 Deployment
 -------------
 Circle CI, on a successful master build, exports the project to static files and
 pushes them to the 'gh-pages' branch, where they are picked up by GitHub Pages.
- 

frontend/__mocks__/aphrodite.js

@@ -0,0 +1,15 @@
+const StyleSheet = {
+  create: (styles) => styles,
+  rehydrate: jest.fn(),
+};
+
+const css = (...args) =>
+  args
+    .filter(Boolean)
+    .map((arg) => (typeof arg === 'object' ? Object.keys(arg).join(' ') : ''))
+    .join(' ');
+
+module.exports = {
+  StyleSheet,
+  css,
+};

frontend/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

frontend/__mocks__/next/head.js

@@ -0,0 +1,8 @@
+const React = require('react');
+
+const Head = ({ children }) => {
+  return React.createElement(React.Fragment, null, children);
+};
+
+module.exports = Head;
+module.exports.default = Head;

frontend/__mocks__/next/link.js

@@ -0,0 +1,13 @@
+const React = require('react');
+
+const Link = ({ children, href, legacyBehavior, passHref, prefetch, replace, scroll, shallow, locale, ...props }) => {
+  // Filter out Next.js-specific props that shouldn't be passed to DOM elements
+  return React.createElement(
+    'a',
+    { href, ...props },
+    children
+  );
+};
+
+module.exports = Link;
+module.exports.default = Link;

frontend/__mocks__/next/router.js

@@ -0,0 +1,48 @@
+const React = require('react');
+
+const mockRouter = {
+  asPath: '/',
+  pathname: '/',
+  query: {},
+  push: jest.fn(() => Promise.resolve(true)),
+  replace: jest.fn(() => Promise.resolve(true)),
+  prefetch: jest.fn(() => Promise.resolve()),
+  back: jest.fn(),
+  forward: jest.fn(),
+  reload: jest.fn(),
+  events: {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+  },
+  isFallback: false,
+  isReady: true,
+  isPreview: false,
+};
+
+const useRouter = jest.fn(() => mockRouter);
+
+const withRouter = (Component) => {
+  const WithRouterWrapper = (props) => {
+    return React.createElement(Component, { ...props, router: mockRouter });
+  };
+  WithRouterWrapper.displayName = `withRouter(${Component.displayName || Component.name || 'Component'})`;
+  return WithRouterWrapper;
+};
+
+const Router = {
+  ...mockRouter,
+  events: {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+  },
+};
+
+module.exports = {
+  useRouter,
+  withRouter,
+  Router,
+  default: Router,
+  mockRouter,
+};

frontend/__mocks__/next/script.js

@@ -0,0 +1,8 @@
+const React = require('react');
+
+const Script = ({ children, ...props }) => {
+  return React.createElement('script', props, children);
+};
+
+module.exports = Script;
+module.exports.default = Script;

frontend/__mocks__/unfetch.js

@@ -0,0 +1,10 @@
+const mockFetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({}),
+    text: () => Promise.resolve(''),
+  })
+);
+
+module.exports = mockFetch;
+module.exports.default = mockFetch;