Skip to main content

Frontend QA & Testing Strategy

This section outlines the testing strategy, workflows, and technologies used in the Control-Hub (my-app) repository.

🛠 Technology Stack​

  • Framework: Next.js 16 (React)
  • Language: TypeScript
  • State Management: React Query (Server state), Context API
  • Styling: Tailwind CSS, Radix UI, shadcn/ui
  • Testing Frameworks:
  • Linting & Formatting: ESLint, Prettier

🧪 Testing Strategy​

We employ a layered testing approach:

1. Unit & Integration Tests (Vitest)​

  • Located in __tests__ or co-located with components.
  • Focus on individual components, hooks, and utility functions.
  • Run with: 
    pnpm test

2. End-to-End Tests (Playwright)​

  • Located in e2e directory.
  • Status: Infrastructure configured in CI, automated tests pending implementation.
  • Run with: 
    pnpm test:e2e

3. Component Testing (Storybook)​

  • Used for developing and testing UI components in isolation.
  • Integration with Chromatic for visual regression testing (configured in chromatic.config.json).
  • Run locally: 
    pnpm storybook

🔄 CI/CD Workflows​

1. CI Pipeline (ci.yml)​

Triggers on push and pull_request to main and dev.

Stages:

  1. Quality Gates:
    • TypeScript Check (tsc --noEmit)
    • Linting (pnpm run lint)
    • Formatting Check (pnpm run format --check)
  2. Security Audit: pnpm audit
  3. Unit Tests: Executes Vitest suite with coverage.
  4. E2E Tests: Runs Playwright tests (headless Chromium).
  5. Build Verification: Verifies that the Next.js application builds successfully.
  6. Storybook Build: Builds Storybook and runs accessibility tests.

2. SonarQube Analysis (sonar.yml)​

  • Runs tests with coverage accumulation.
  • Scans code for bugs, vulnerabilities, and code smells.
  • Sends reports to SonarQube server.

♿ Accessibility​

  • Storybook A11y Addon: Used to check accessibility compliance during component development.
  • Linting: eslint-plugin-jsx-a11y ensures accessibility best practices in JSX.