// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: [
    ['html', { open: 'never' }],
    ['junit', { outputFile: 'results.xml' }],
  ],
  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'on-first-retry',
  },
  projects: [
    // Setup: seed test DB
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 7'] },
      dependencies: ['setup'],
    },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// tests/e2e/pages/LoginPage.ts
import { type Page, type Locator, expect } from '@playwright/test';
export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Sign in' });
  }
  async goto() {
    await this.page.goto('/login');
  }
  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
    await this.page.waitForURL('/dashboard');
  }
}

test('shows error when API fails', async ({ page }) => {
  // Intercept and mock API response
  await page.route('**/api/users', (route) => {
    route.fulfill({
      status: 500,
      body: JSON.stringify({ error: 'Internal server error' }),
      contentType: 'application/json',
    });
  });
  await page.goto('/users');
  await expect(page.getByRole('alert')).toContainText('Something went wrong');
});

test('navigation is accessible', async ({ page }) => {
  await page.goto('/');
  
  // Assert accessibility tree structure
  await expect(page.locator('nav')).toMatchAriaSnapshot(`
    - navigation:
      - link "Home"
      - link "Products"
      - link "Pricing"
      - link "Sign in"
  `);
});

// tests/e2e/auth.setup.ts
import { test as setup } from '@playwright/test';
setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.waitForURL('/dashboard');
  
  // Save session state for reuse in all tests
  await page.context().storageState({ path: 'playwright/.auth/user.json' });
});
// tests/e2e/dashboard.spec.ts
import { test } from '@playwright/test';
test.use({ storageState: 'playwright/.auth/user.json' });
test('dashboard loads correctly', async ({ page }) => {
  await page.goto('/dashboard');
  // Already authenticated — no login needed
});

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./tests/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'lcov', 'html'],
      thresholds: { lines: 80, functions: 80 },
    },
  },
});

import { render, screen, userEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Counter } from './Counter';
describe('Counter', () => {
  it('increments count on button click', async () => {
    const user = userEvent.setup();
    render(<Counter initialCount={0} />);
    await user.click(screen.getByRole('button', { name: 'Increment' }));
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
  it('calls onMaxReached when limit hit', async () => {
    const onMaxReached = vi.fn();
    const user = userEvent.setup();
    render(<Counter initialCount={9} max={10} onMaxReached={onMaxReached} />);
    await user.click(screen.getByRole('button', { name: 'Increment' }));
    expect(onMaxReached).toHaveBeenCalledOnce();
  });
});

import { describe, it, expect, beforeEach } from 'vitest';
import { testClient } from 'hono/testing';
import { app } from '../src/server';
import { resetTestDb } from './helpers/db';
describe('POST /api/users', () => {
  beforeEach(resetTestDb);
  it('creates a new user', async () => {
    const client = testClient(app);
    const res = await client.api.users.$post({
      json: { name: 'Alice', email: 'alice@example.com' },
    });
    expect(res.status).toBe(201);
    const data = await res.json();
    expect(data.email).toBe('alice@example.com');
  });
});

# .github/workflows/test.yml
name: CI Tests
 
on: [push, pull_request]
 
jobs:
  unit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '22', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm run typecheck
      - run: pnpm run test:unit --coverage
 
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '22', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps chromium
      - run: pnpm run test:e2e
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/