Testing Strategy

// hooks/use-cart.test.ts
import { renderHook, act } from "@testing-library/react"
import { describe, it, expect } from "vitest"
import { useCart } from "./use-cart"

describe("useCart", () => {
  it("adds an item to the cart", () => {
    const { result } = renderHook(() => useCart())

    act(() => {
      result.current.addItem({ id: "1", name: "Widget", price: 9.99, quantity: 1 })
    })

    expect(result.current.items).toHaveLength(1)
    expect(result.current.total).toBe(9.99)
  })

  it("increments quantity when adding an existing item", () => {
    const { result } = renderHook(() => useCart())

    act(() => {
      result.current.addItem({ id: "1", name: "Widget", price: 9.99, quantity: 1 })
      result.current.addItem({ id: "1", name: "Widget", price: 9.99, quantity: 1 })
    })

    expect(result.current.items[0].quantity).toBe(2)
    expect(result.current.total).toBe(19.98)
  })
})

// lib/format-currency.test.ts
import { describe, it, expect } from "vitest"
import { formatCurrency } from "./format-currency"

describe("formatCurrency", () => {
  it("formats USD correctly", () => {
    expect(formatCurrency(1234.5, "USD")).toBe("$1,234.50")
  })

  it("handles zero", () => {
    expect(formatCurrency(0, "USD")).toBe("$0.00")
  })

  it("handles negative values", () => {
    expect(formatCurrency(-50, "USD")).toBe("-$50.00")
  })
})

// components/login-form.test.tsx
import { render, screen, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { vi, describe, it, expect } from "vitest"
import { LoginForm } from "./login-form"

describe("LoginForm", () => {
  it("submits credentials and calls onSuccess", async () => {
    const user = userEvent.setup()
    const onSuccess = vi.fn()

    render(<LoginForm onSuccess={onSuccess} />)

    await user.type(screen.getByLabelText(/email/i), "user@example.com")
    await user.type(screen.getByLabelText(/password/i), "password123")
    await user.click(screen.getByRole("button", { name: /sign in/i }))

    await waitFor(() => expect(onSuccess).toHaveBeenCalledOnce())
  })

  it("shows validation error for empty fields", async () => {
    const user = userEvent.setup()
    render(<LoginForm onSuccess={vi.fn()} />)

    await user.click(screen.getByRole("button", { name: /sign in/i }))

    expect(screen.getByText(/email is required/i)).toBeInTheDocument()
  })
})

// tests/mocks/handlers.ts
import { http, HttpResponse } from "msw"

export const handlers = [
  http.get("/api/user/:id", ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      name: "Jane Smith",
      email: "jane@example.com",
    })
  }),

  http.post("/api/login", async ({ request }) => {
    const { email } = await request.json() as { email: string }
    if (email === "invalid@example.com") {
      return HttpResponse.json({ error: "Invalid credentials" }, { status: 401 })
    }
    return HttpResponse.json({ token: "mock-jwt-token" })
  }),
]

// e2e/checkout.spec.ts
import { test, expect } from "@playwright/test"

test.describe("Checkout flow", () => {
  test.beforeEach(async ({ page }) => {
    // Log in as test user before each test
    await page.goto("/login")
    await page.getByLabel("Email").fill("test@example.com")
    await page.getByLabel("Password").fill("testpassword")
    await page.getByRole("button", { name: "Sign in" }).click()
    await expect(page).toHaveURL("/dashboard")
  })

  test("completes a purchase", async ({ page }) => {
    await page.goto("/products")
    await page.getByRole("button", { name: "Add to cart" }).first().click()
    await page.getByRole("link", { name: "Cart (1)" }).click()
    await page.getByRole("button", { name: "Proceed to checkout" }).click()

    // Fill shipping info
    await page.getByLabel("Street address").fill("123 Main St")
    await page.getByLabel("City").fill("New York")
    await page.getByRole("button", { name: "Continue to payment" }).click()

    // Confirm order
    await expect(page.getByRole("heading", { name: "Order confirmed" })).toBeVisible()
  })
})

1. Developer opens PR with component changes
2. CI builds Storybook and captures screenshots
3. Chromatic / Percy compares against approved baselines
4. Diffs appear in the PR — reviewer accepts or requests changes
5. Accepted screenshots become the new baseline

# .github/workflows/chromatic.yml
name: Chromatic

on:
  pull_request:
    paths:
      - 'components/ui/**'
      - 'app/globals.css'

jobs:
  visual:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: pnpm }
      - run: pnpm install --frozen-lockfile
      - run: pnpm build-storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          storybookBuildDir: storybook-static

// .storybook/test-runner.ts
import { getStoryContext } from '@storybook/test-runner'
import { injectAxe, checkA11y } from 'axe-playwright'

export default {
  async postRender(page, context) {
    const storyContext = await getStoryContext(page, context)
    if (storyContext.parameters?.a11y?.disable) return

    await injectAxe(page)
    await checkA11y(page, '#storybook-root', {
      detailedReport: true,
      detailedReportOptions: { html: true },
    })
  },
}

# .github/workflows/test.yml
name: Test

on:
  pull_request:
    branches: [main]

jobs:
  unit-and-integration:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: pnpm }
      - run: pnpm install --frozen-lockfile
      - run: pnpm test --coverage
      - uses: codecov/codecov-action@v4

  e2e:
    runs-on: ubuntu-latest
    needs: unit-and-integration
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: pnpm }
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps chromium
      - run: pnpm exec playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/