Files

T

shancheas 67e1e0a74f feat: integrate Playwright for E2E testing and enhance testing framework

- Added Playwright for end-to-end testing in the `apps/web` module, including a new `login.spec.ts` for testing login functionality.
- Updated package.json to include Playwright dependencies and new test commands for E2E testing.
- Enhanced .gitignore to exclude Playwright test results and reports.
- Modified existing documentation to reflect the integration of Playwright and updated testing guidelines.
- Refactored test commands to streamline the testing process, including a dedicated command for E2E tests.

These changes improve the testing framework by providing robust E2E testing capabilities, enhancing the reliability and quality of the application.

2026-08-31 11:52:27 +07:00

2.6 KiB

Raw Blame History

name, description

name	description
tdd-workflow	Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage using Vitest, Testing Library, and Playwright E2E.

Test-Driven Development Workflow

TDD for this frontend monorepo (Vitest, not NestJS/Supertest).

When to Activate

New features or components
Bug fixes
Refactors
New validators, transformers, stores

Core Principles

Tests BEFORE code
80% coverage (unit + component + critical journeys)
Edge cases and error paths

Test types

Unit — validators, transformers, utils, stores (*.test.ts)
Component — Testing Library in packages/ui / packages/core-events
Journeys — Playwright in apps/web/e2e/ (login sample first); mock HTTP with page.route

Workflow

Write the failing test (RED)
pnpm --filter web test or pnpm test — must fail
Minimal implementation (GREEN)
Tests pass
Refactor
pnpm check:all

Unit example

import { describe, it, expect } from 'vitest';
import { createFullPageSchema } from './full-page.validator';

describe('createFullPageSchema', () => {
  const t = (key: string) => key;

  it('rejects an empty code', () => {
    const result = createFullPageSchema(t).safeParse({ code: '', name: 'Widget' });
    expect(result.success).toBe(false);
  });
});

Component example

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('calls onClick', async () => {
  const onClick = vi.fn();
  render(<Button onClick={onClick}>Save</Button>);
  await userEvent.click(screen.getByRole('button', { name: 'Save' }));
  expect(onClick).toHaveBeenCalledTimes(1);
});

Mocking

Mock @repo/core-api and apiClient, not a database.

vi.mock('@repo/core-api/http-client', () => ({
  createHttpClient: () => ({ get: vi.fn(), post: vi.fn(), put: vi.fn(), delete: vi.fn() }),
}));

File organization

Colocate unit tests as *.test.ts(x) next to source. Playwright E2E lives in apps/web/e2e/ (see login.spec.ts). Do not use a NestJS test/*.e2e-spec.ts tree.

Commands

pnpm test
pnpm --filter @repo/ui test
pnpm --filter web test -- --watch
pnpm test:e2e:web
pnpm lint

Mistakes to avoid

Testing implementation details instead of behavior
Tests that depend on each other
CSS-class selectors instead of roles/labels
Hitting a real API in unit tests

Success

80%+ coverage
All tests green
Critical FULL_PAGE flows covered by Playwright or browser-verified

2.6 KiB Raw Blame History