Skip to main content

Showcase QA & Testing Strategy

This section outlines the testing strategy, workflows, and technologies used in the Firstbreath Showcase repository.

🛠 Technology Stack​

  • Framework: Next.js 16 (React)
  • Language: TypeScript
  • Styling: Tailwind CSS, Shadcn UI
  • Database: Prisma (with MariaDB adapter)
  • CMS/Content: MDX
  • Testing:
  • Linting: ESLint

🧪 Testing Strategy​

Unit & Integration Tests​

  • Vitest: configured in vitest.config.ts.
  • Run locally: 
    pnpm test
  • Coverage: 
    pnpm run test:coverage

Component Development​

  • Storybook: Used for building UI components in isolation (.stories.tsx files).
  • 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: Checks for type errors (tsc --noEmit).
    • Linting: Runs next lint.
    • Formatting Check: pnpm run format --check.
    • Security: Runs pnpm audit.

  2. Build Validation:

    • Prisma: Generates client and validates schema.
    • Next.js Build: Compiles the application (next build).

  3. Storybook Build: Builds Storybook and uploads artifact.

  4. Unit Tests & Accessibility:

    • Vitest: Runs unit tests.
    • Storybook A11y: Runs accessibility tests against the built Storybook.

2. SonarQube Analysis (sonar.yml)​

  • Runs tests with coverage accumulation.
  • Scans code for quality issues and vulnerabilities.

♿ Accessibility​

  • Storybook A11y: Addon configured (@storybook/addon-a11y) to check components for accessibility issues.
  • CI Integration: A11y tests run automatically in the CI pipeline against the built Storybook.