Testing movie-web: From Unit Tests to End‑to‑End Validation

Testing Framework and Tool Selection

movie-web uses vitest (v1.1.0) as the test runner, tightly integrated with Vite, and jsdom (v23.0.1) to simulate the DOM for React component testing. The test script in package.json runs vitest run.

Unit Test Strategy

Unit tests target isolated functions and utilities in src/utils, such as formatSeconds.ts, timestamp.ts, and typeguard.ts. Example tests for formatSeconds verify formatting of 0, 65, and 3661 seconds:

import { formatSeconds } from '../utils/formatSeconds';

describe('formatSeconds', () => {
  it('should format 0 seconds correctly', () => {
    expect(formatSeconds(0)).toBe('00:00');
  });
  it('should format 65 seconds correctly', () => {
    expect(formatSeconds(65)).toBe('01:05');
  });
  it('should format 3661 seconds correctly', () => {
    expect(formatSeconds(3661)).toBe('01:01:01');
  });
});

State management uses zustand. Tests for the volume store ( src/stores/volume/index.ts) check default values, volume updates, and mute toggling:

import { renderHook, act } from '@testing-library/react-hooks';
import useVolumeStore from '../volume';

describe('Volume Store', () => {
  it('should initialize with default volume', () => {
    const { result } = renderHook(() => useVolumeStore());
    expect(result.current.volume).toBe(100);
    expect(result.current.muted).toBe(false);
  });
  it('should update volume correctly', () => {
    const { result } = renderHook(() => useVolumeStore());
    act(() => { result.current.setVolume(50); });
    expect(result.current.volume).toBe(50);
  });
  it('should toggle mute state correctly', () => {
    const { result } = renderHook(() => useVolumeStore());
    act(() => { result.current.toggleMute(); });
    expect(result.current.muted).toBe(true);
  });
});

Component Test Strategy

UI components in src/components are tested with React Testing Library. The Button component example checks rendering, click handling, and variant‑specific styling:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button Component', () => {
  it('renders button with correct text', () => {
    render(<Button>Click Me</Button>);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });
  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click Me</Button>);
    fireEvent.click(screen.getByText('Click Me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
  it('applies correct variant styles', () => {
    const { rerender } = render(<Button variant="primary">Primary</Button>);
    expect(screen.getByText('Primary')).toHaveClass('bg-primary');
    rerender(<Button variant="secondary">Secondary</Button>);
    expect(screen.getByText('Secondary')).toHaveClass('bg-secondary');
  });
});

Player component tests should cover initialization, play/pause, progress bar, volume, and fullscreen controls, typically by mocking the video element and related events.

Integration Test Strategy

Integration tests verify interactions between modules. API calls in src/backend are mocked with Mock Service Worker (MSW). Example for the TMDB API demonstrates successful data fetching and error handling:

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { fetchMovieDetails } from './tmdb';

const server = setupServer(
  rest.get('https://api.themoviedb.org/3/movie/:id', (req, res, ctx) => {
    return res(
      ctx.json({
        id: parseInt(req.params.id as string),
        title: 'Test Movie',
        overview: 'This is a test movie'
      })
    );
  })
);

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

describe('TMDB API', () => {
  it('fetches movie details correctly', async () => {
    const result = await fetchMovieDetails(123);
    expect(result.title).toBe('Test Movie');
    expect(result.overview).toBe('This is a test movie');
  });
  it('handles API errors gracefully', async () => {
    server.use(
      rest.get('https://api.themoviedb.org/3/movie/:id', (req, res, ctx) => {
        return res(ctx.status(500));
      })
    );
    await expect(fetchMovieDetails(123)).rejects.toThrow('Failed to fetch movie details');
  });
});

State‑component integration tests ensure UI updates reflect store changes and vice‑versa, e.g., linking src/stores/player with src/components/player/Player.tsx.

End‑to‑End Test Strategy

E2E tests simulate real user flows using Cypress or Playwright. Core scenarios include login, movie search and playback, and favorite‑movie management. Tests should run against browsers listed in the project's browserslist configuration.

Automation and CI/CD Integration

Pre‑commit hooks via husky run linting and unit tests. CI pipelines (GitHub Actions, GitLab CI, etc.) execute the following steps: install dependencies, lint, run unit and integration tests, build the app, and run E2E suites.

Coverage Goals and Monitoring

Coverage targets are set per code type: utility functions ≥ 90%, component code ≥ 80%, business logic ≥ 85%. Vitest’s --coverage flag generates reports to identify gaps.

{
  "scripts": {
    "test": "vitest run",
    "test:coverage": "vitest run --coverage"
  }
}

Test Environment Configuration

A dedicated .env.test file supplies test‑specific variables and API keys, preventing interference with production data.