Testing Guide

The Testing Pyramid: three complementary layers ensuring enterprise-grade resilience.

Testing Layers

End-to-End

Playwright

Tests what the customer does in the browser

API Discovery

Swagger UI

Tests what developers or bots do over HTTP

Unit and Logic

Vitest

Tests what the code computes mathematically

1. Playwright (E2E)

Launches a real browser and interacts with the app like a real user. Config: playwright.config.ts, Tests: e2e/*.spec.ts

Running E2E Tests

# From workspace root
pnpm --filter @skam/web test:e2e

# OR from apps/web directory
cd apps/web && pnpm test:e2e

Example: e2e/theme-switching.spec.ts

import { test, expect } from '@playwright/test'

test.describe('Theme Switching', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/')
  })

  test('should toggle between light and dark mode', async ({ page }) => {
    const html = page.locator('html')
    await expect(html).toHaveClass(/dark/)

    const toggleBtn = page.getByLabel('Toggle theme mode')
    await toggleBtn.click()
    await expect(html).not.toHaveClass(/dark/)

    await toggleBtn.click()
    await expect(html).toHaveClass(/dark/)
  })
})

2. Vitest (Unit)

Fast, isolated tests using jsdom. Config: vitest.config.ts, Tests: **/*.test.ts

Running Unit Tests

pnpm test          # Run all tests
pnpm test:ui       # Interactive Vitest dashboard

Example: shopier-pat.test.ts

import { describe, it, expect, beforeEach, vi } from 'vitest'
import { setupMockServer, createTestEnv, mockOrders }
  from '../../../packages/test-utils/src'

setupMockServer()

describe('Shopier PAT Authentication', () => {
  beforeEach(() => {
    const env = createTestEnv()
    vi.stubEnv('SHOPIER_PAT', env.SHOPIER_PAT)
  })

  it('should fetch orders with valid PAT token', async () => {
    const PAT = process.env.SHOPIER_PAT
    expect(PAT).toBeDefined()

    const response = await fetch('https://api.shopier.com/v1/orders', {
      headers: { Authorization: `Bearer ${PAT}` }
    })
    const data = await response.json()

    expect(response.ok).toBe(true)
    expect(data).toHaveLength(2)
  })
})

3. Swagger UI (API)

Live, interactive API documentation. Parses @swagger JSDoc comments. Runs on port 3002.

Terminal

pnpm dev:docs

Root Test Configuration

vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    include: [
      'apps/*/tests/**/*.test.{ts,tsx}',
      'packages/*/tests/**/*.test.{ts,tsx}'
    ],
    exclude: ['**/node_modules/**', '**/e2e/**', '**/*.spec.ts'],
    globals: true
  }
})