[Feature] Improve Testing suite

[maximedogawa]

User Story

As a developer
I want a comprehensive testing strategy using Bun for unit/integration tests and Playwright for E2E tests
So that I can ensure code quality, maintain visual consistency, catch regressions early, and have confidence in application reliability with fast test execution and pre-commit validation.

Description

Establish a complete testing infrastructure covering all testing levels: unit testing (Bun), integration testing (Bun with pre-commit hooks) and E2E testing (Playwright). Implement a practical testing workflow where unit and integration tests run automatically on pre-commit, and E2E tests verify critical user flows. This approach ensures quality at every stage of development while maintaining fast feedback loops.

Acceptance Criteria

• Bun test runner is configured and running unit tests successfully
• Integration tests are implemented for critical user flows
• Pre-commit hook runs unit and integration tests automatically
• Husky and lint-staged are configured for pre-commit validation
• Playwright is installed with simple, practical configuration
• E2E test folder structure is created with clear organization (smoke/regression/acceptance)
• Documentation explains each test type and when to use it
• Example tests are provided for each testing category
• Test scripts added to package.json for all testing types
• Code coverage reporting is configured (minimum 80% for critical paths)
• CI/CD pipeline runs all test types

Design Considerations

Testing Strategy Overview

┌─────────────────────────────────────────────────────────────┐
│ Testing Pyramid │
├─────────────────────────────────────────────────────────────┤
│ E2E (Playwright) 10% │ Slow, High Value │
│ - Smoke Tests │ Critical User Flows │
│ - Regression Tests │ │
│ - Acceptance Tests │ │
├─────────────────────────────────────────────────────────────┤
│ Integration (Bun) 20% │ Medium Speed │
│ - Feature Flows │ Feature Interactions │
│ - API Integration │ Pre-commit Hook │
│ - State Management │ │
├─────────────────────────────────────────────────────────────┤
│ Unit (Bun) 70% │ Fast, Instant Feedback │
│ - Utils & Helpers │ Pure Functions │
│ - Hooks │ Business Logic │
│ - Services │ Pre-commit Hook │
├───────────────────────────────────────────────────────

Test Type DefinitionsUnit Tests (Bun)

• Pure functions and utilities
• React hooks (custom hooks)
• Service classes and methods
• Validators and formatters
• Business logic calculations
• Run on: Every save (watch mode), Pre-commit, CI/CD
• Integration Tests (Bun)

Feature workflows (login flow, transaction flow)

• Component + API interactions
• State management + UI
• Multiple components working together
• Run on: Pre-commit, CI/CD

Visual documentation of components

• Interactive component playground

• Different component states and variants

• Accessibility testing

• Run on: Development, Build time

• E2E Tests (Playwright)

• Smoke Tests: Quick checks that critical paths work (5-10 tests, < 5 min)

• Regression Tests: Tests for previously fixed bugs (reference bug tickets)

• Acceptance Tests: Full user story validation (based on acceptance criteria)

• Run on: Pre-deployment, CI/CD

• Pre-commit Hook Strategy

On Commit Attempt:

1. Lint staged files (ESLint, Prettier)
2. Run unit tests for changed files
3. Run integration tests for affected features
4. Type check (TypeScript)
5. If all pass → Commit succeeds
6. If any fail → Commit blocked, fix issuesFile Organization

• Colocation: Tests live next to the code they test
• Integration tests: Separate tests/integration folder
• E2E tests: Separate tests/e2e folder with clear structure
• Technical ImplementationFolder Structure