Testing Showcase
Explore real-world testing strategies, code examples, and interactive demos. Each section covers a layer of the testing pyramid with production-grade patterns you can apply to your own projects.
Unit Testing
Coverage: 92%Fast, isolated tests with Vitest & React Testing Library
Unit tests form the foundation of our testing pyramid. Using Vitest for lightning-fast test execution and React Testing Library for component tests, we verify individual functions, hooks, and components in isolation. Every component in this project is covered by focused unit tests that validate behavior, not implementation details.
Test Isolation
Each test runs independently with mocked dependencies for fast, deterministic results.
Behavior-Driven
Tests verify what users see and interact with, not internal implementation details.
TDD Workflow
Red → Green → Refactor cycle drives confident, incremental development.
Example Tests
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import TDDPlayground from './TDDPlayground';
describe('TDDPlayground', () => {
it('renders the exercise selector', () => {
render(<TDDPlayground />);
expect(
screen.getByText(/select an exercise/i)
).toBeInTheDocument();
});
it('transitions through TDD phases', async () => {
const user = userEvent.setup();
render(<TDDPlayground />);
// Start in RED phase
expect(screen.getByText(/red/i)).toBeInTheDocument();
// Run failing test → GREEN phase
await user.click(screen.getByText(/run tests/i));
expect(screen.getByText(/green/i)).toBeInTheDocument();
});
});import { renderHook, act } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { useTestRunner } from '@/hooks/useTestRunner';
describe('useTestRunner', () => {
it('initializes with idle status', () => {
const { result } = renderHook(() => useTestRunner());
expect(result.current.status).toBe('idle');
expect(result.current.results).toEqual([]);
});
it('runs tests and updates results', async () => {
const { result } = renderHook(() => useTestRunner());
await act(async () => {
await result.current.runTests('return 2 + 2;');
});
expect(result.current.status).toBe('complete');
expect(result.current.results.length).toBeGreaterThan(0);
});
});import { describe, it, expect } from 'vitest';
import { createExpect } from '@/lib/test-runner/assertions';
describe('Assertion Engine', () => {
it('validates equality assertions', () => {
const assertion = createExpect(42);
expect(() => assertion.toBe(42)).not.toThrow();
expect(() => assertion.toBe(99)).toThrow();
});
it('validates deep equality', () => {
const obj = { name: 'test', items: [1, 2, 3] };
const assertion = createExpect(obj);
expect(() => assertion.toEqual({ name: 'test', items: [1, 2, 3] }))
.not.toThrow();
});
});🎮 Try It: TDD Playground
Experience the Red-Green-Refactor cycle interactively. Write a failing test, make it pass, then refactor.
End-to-End Testing
Pass Rate: 100%Full user-flow validation with Playwright
End-to-end tests validate complete user workflows across the full application stack. Using Playwright, we automate real browser interactions — navigating pages, clicking buttons, filling forms, and asserting on visible outcomes — to catch integration issues that unit tests alone cannot surface.
Cross-Browser Testing
Run tests in Chromium, Firefox, and WebKit to ensure consistent behavior across browsers.
Auto-Waiting
Playwright automatically waits for elements to be actionable, eliminating flaky timeouts.
Network Interception
Mock API responses and simulate network conditions for deterministic test results.
Trace Viewer
Debug failed tests with step-by-step screenshots, DOM snapshots, and network logs.
Example Specs
import { test, expect } from '@playwright/test';
test.describe('Site Navigation', () => {
test('navigates to all main pages', async ({ page }) => {
await page.goto('/');
// Verify homepage loads
await expect(
page.getByText('Test Automation Lab')
).toBeVisible();
// Navigate to playgrounds
await page.getByRole('link', { name: /playgrounds/i }).click();
await expect(page).toHaveURL('/playgrounds');
await expect(
page.getByText('Interactive Test Playgrounds')
).toBeVisible();
// Navigate to testing showcase
await page.getByRole('link', { name: /testing/i }).click();
await expect(page).toHaveURL('/testing');
});
});import { test, expect } from '@playwright/test';
test.describe('TDD Playground', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/playgrounds/tdd');
});
test('completes a full TDD cycle', async ({ page }) => {
// Select an exercise
await page.getByTestId('exercise-selector').click();
await page.getByText(/string calculator/i).click();
// Write test code in the editor
const editor = page.getByTestId('test-editor');
await expect(editor).toBeVisible();
// Run tests — expect RED phase
await page.getByTestId('run-tests-btn').click();
await expect(page.getByTestId('phase-indicator'))
.toContainText('RED');
// Write implementation → GREEN phase
await page.getByTestId('run-tests-btn').click();
await expect(page.getByTestId('phase-indicator'))
.toContainText('GREEN');
});
});🚀 CI Integration
E2E tests run automatically on every pull request via GitHub Actions. The pipeline uses Playwright's built-in test sharding to run tests in parallel across multiple workers, keeping feedback loops fast even as the test suite grows.
API Testing
Endpoints: 12Request/response validation and contract testing
API tests validate the contract between frontend and backend services. We use MSW (Mock Service Worker) to intercept network requests at the service-worker level, enabling realistic integration tests without a running server. This approach tests the full request lifecycle — headers, payloads, status codes, and error handling.
Contract Testing
Verify request/response shapes match the expected API contract.
Error Scenarios
Test 4xx/5xx responses, timeouts, and network failures gracefully.
Mock Service Worker
Intercept requests at the network level for realistic integration tests.
Example Tests
import { http, HttpResponse } from 'msw';
export const handlers = [
// Mock GET /api/users
http.get('/api/users', () => {
return HttpResponse.json([
{ id: 1, name: 'Alice', role: 'admin' },
{ id: 2, name: 'Bob', role: 'user' },
]);
}),
// Mock POST /api/users
http.post('/api/users', async ({ request }) => {
const body = await request.json();
return HttpResponse.json(
{ id: 3, ...body },
{ status: 201 }
);
}),
// Mock error scenarios
http.get('/api/users/:id', ({ params }) => {
if (params.id === '999') {
return HttpResponse.json(
{ error: 'User not found' },
{ status: 404 }
);
}
return HttpResponse.json({
id: params.id, name: 'Test User'
});
}),
];import { describe, it, expect, beforeAll, afterAll } from 'vitest';
import { setupServer } from 'msw/node';
import { handlers } from './msw/handlers';
const server = setupServer(...handlers);
beforeAll(() => server.listen());
afterAll(() => server.close());
describe('API Testing Sandbox Integration', () => {
it('fetches and displays user list', async () => {
const response = await fetch('/api/users');
const data = await response.json();
expect(response.status).toBe(200);
expect(data).toHaveLength(2);
expect(data[0]).toHaveProperty('name', 'Alice');
});
it('handles 404 errors gracefully', async () => {
const response = await fetch('/api/users/999');
expect(response.status).toBe(404);
const data = await response.json();
expect(data.error).toBe('User not found');
});
});🎮 Try It: API Testing Sandbox
Send requests to mock API endpoints and inspect responses in real time. Experiment with different HTTP methods, headers, and payloads.
Visual Regression Testing
Snapshots: 48Pixel-perfect UI verification across browsers
Visual regression tests catch unintended UI changes by comparing screenshots against approved baselines. Using Playwright's built-in screenshot comparison, we verify that components render identically across browsers and viewport sizes. This catches CSS regressions, layout shifts, and styling bugs that functional tests miss.
Baseline Snapshots
Capture approved screenshot baselines for every critical page and component.
Pixel Comparison
Detect sub-pixel differences with configurable thresholds for sensitivity control.
Responsive Checks
Test across mobile, tablet, and desktop viewports to catch layout regressions.
Dark Mode Validation
Ensure themes render correctly with color-scheme media emulation.
Example Specs
import { test, expect } from '@playwright/test';
test.describe('Visual Regression', () => {
test('homepage matches baseline', async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
await expect(page).toHaveScreenshot('homepage.png', {
maxDiffPixelRatio: 0.01,
animations: 'disabled',
});
});
test('playgrounds page matches baseline', async ({ page }) => {
await page.goto('/playgrounds');
await page.waitForLoadState('networkidle');
await expect(page).toHaveScreenshot('playgrounds.png', {
maxDiffPixelRatio: 0.01,
});
});
test('dark mode renders correctly', async ({ page }) => {
await page.emulateMedia({ colorScheme: 'dark' });
await page.goto('/');
await page.waitForLoadState('networkidle');
await expect(page).toHaveScreenshot('homepage-dark.png', {
maxDiffPixelRatio: 0.01,
});
});
});import { test, expect } from '@playwright/test';
test.describe('Component Visual Tests', () => {
const viewports = [
{ width: 375, height: 812, name: 'mobile' },
{ width: 768, height: 1024, name: 'tablet' },
{ width: 1440, height: 900, name: 'desktop' },
];
for (const viewport of viewports) {
test(`framework comparison at ${viewport.name}`,
async ({ page }) => {
await page.setViewportSize({
width: viewport.width,
height: viewport.height,
});
await page.goto('/playgrounds/frameworks');
await page.waitForLoadState('networkidle');
await expect(page).toHaveScreenshot(
`frameworks-${viewport.name}.png`
);
}
);
}
});🎮 Try It: Framework Comparison
Compare different testing frameworks side by side. See how Playwright, Cypress, and other tools approach the same testing challenges.