SPA Testing — Unit, Integration, and E2E Tests for Single-Page Applications

import { describe, it, expect, vi } from 'vitest';

// Pure utility function to test
function formatPrice(amount, currency = 'USD') {
    if (typeof amount !== 'number' || isNaN(amount)) {
        return '$0.00';
    }
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency
    }).format(amount);
}

describe('formatPrice', () => {
    it('formats USD correctly', () => {
        expect(formatPrice(10.99)).toBe('$10.99');
    });

    it('handles zero', () => {
        expect(formatPrice(0)).toBe('$0.00');
    });

    it('handles large numbers with commas', () => {
        expect(formatPrice(1234567.89)).toBe('$1,234,567.89');
    });

    it('handles invalid input gracefully', () => {
        expect(formatPrice(NaN)).toBe('$0.00');
        expect(formatPrice('abc')).toBe('$0.00');
    });

    it('supports different currencies', () => {
        expect(formatPrice(10.99, 'EUR')).toBe('€10.99');
    });
});

// Hook test
import { renderHook, act } from '@testing-library/react';
import { useState } from 'react';

function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);
    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);
    return { count, increment, decrement, reset };
}

describe('useCounter', () => {
    it('initializes with default value', () => {
        const { result } = renderHook(() => useCounter());
        expect(result.current.count).toBe(0);
    });

    it('increments count', () => {
        const { result } = renderHook(() => useCounter(10));
        act(() => result.current.increment());
        expect(result.current.count).toBe(11);
    });

    it('decrements count', () => {
        const { result } = renderHook(() => useCounter(5));
        act(() => result.current.decrement());
        expect(result.current.count).toBe(4);
    });
});

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { setupServer } from 'msw/node';

// Mock API server
const server = setupServer(
    rest.get('/api/products', (req, res, ctx) => {
        return res(ctx.json([
            { id: 1, name: 'Widget', price: 9.99 },
            { id: 2, name: 'Gadget', price: 19.99 }
        ]));
    }),
    rest.post('/api/cart', (req, res, ctx) => {
        return res(ctx.json({ success: true }));
    })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// Component test
function ProductList() {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/products')
            .then(r => r.json())
            .then(data => {
                setProducts(data);
                setLoading(false);
            });
    }, []);

    if (loading) return <div data-testid="loading">Loading...</div>;

    return (
        <ul>
            {products.map(product => (
                <li key={product.id}>
                    <span>{product.name}</span>
                    <span>${product.price}</span>
                    <button>Add to Cart</button>
                </li>
            ))}
        </ul>
    );
}

describe('ProductList', () => {
    it('shows loading state initially', () => {
        render(<ProductList />);
        expect(screen.getByTestId('loading')).toBeInTheDocument();
    });

    it('displays products after loading', async () => {
        render(<ProductList />);
        await waitFor(() => {
            expect(screen.getByText('Widget')).toBeInTheDocument();
        });
        expect(screen.getByText('$9.99')).toBeInTheDocument();
        expect(screen.getByText('Gadget')).toBeInTheDocument();
    });

    it('handles API errors gracefully', async () => {
        server.use(
            rest.get('/api/products', (req, res, ctx) => {
                return res(ctx.status(500));
            })
        );

        render(<ProductList />);
        await waitFor(() => {
            expect(screen.getByText(/error/i)).toBeInTheDocument();
        });
    });
});

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

test.describe('Shopping Cart Flow', () => {
    test('user can add product to cart and checkout', async ({ page }) => {
        // Navigate to home page
        await page.goto('/');
        await expect(page).toHaveTitle(/Shop/);

        // Find and click a product
        await page.click('text=Widget');
        await expect(page.locator('h1')).toContainText('Widget');

        // Add to cart
        await page.click('button:has-text("Add to Cart")');
        await expect(page.locator('[data-testid="cart-count"]')).toContainText('1');

        // View cart
        await page.click('[data-testid="cart-icon"]');
        await expect(page.locator('[data-testid="cart-item"]')).toContainText('Widget');

        // Checkout
        await page.click('button:has-text("Checkout")');
        await page.fill('[name="email"]', 'test@example.com');
        await page.fill('[name="address"]', '123 Main St');
        await page.click('button:has-text("Place Order")');

        // Verify order confirmation
        await expect(page.locator('h1')).toContainText('Order Confirmed');
        await expect(page.locator('[data-testid="order-number"]')).toBeVisible();
    });

    test('shows error for empty cart checkout', async ({ page }) => {
        await page.goto('/cart');
        await page.click('button:has-text("Checkout")');
        await expect(page.locator('[data-testid="error"]'))
            .toContainText('Your cart is empty');
    });
});