Tracewebstudio Dev 0d63bb304e Add comprehensive test infrastructure and AI guardrails

- Add Vitest unit tests for AiChatWidget component
- Add Playwright E2E tests: ai-chat-widget, api, security, guardrails
- Add AI guardrails tests validating no phone/email leaks from Ollama
- Add security tests: auth, rate limiting, input validation, token handling
- Add API tests for AI endpoints and authentication
- Fix playwright.config.ts reporter path conflict
- Update CompanyJobsPage with AI generate buttons (orange icon, loading state)
- Fix AiChatWidget accessibility (role=dialog, aria-label, aria-modal)
- Add app.css spin animation for AI loading spinner
- Add Gitea Actions workflow for nightly CI tests
- Add TESTING.md documentation

2026-05-01 02:54:25 +02:00

3.5 KiB

Raw Permalink Blame History

Testing Guide — Nxtgauge Frontend

Test Stack

Type	Tool	Config
Unit	Vitest	`vitest.config.ts`
E2E	Playwright	`playwright.config.ts`
Accessibility	Playwright + axe-core	`playwright.a11y.config.ts`
Visual	Playwright screenshot diff	`playwright.visual.config.ts`

Running Tests

Local (before push)

# Unit tests
npm run test

# Unit tests (watch mode)
npm run test:watch

# Unit tests with coverage
npm run test:coverage

# All E2E tests
npm run test:e2e

# Accessibility tests only
npm run test:accessibility

# Visual tests only
npm run test:visual

npm run dev &
npx wait-on http://localhost:3000
# Then run tests in another terminal

Test Directories

tests/
├── e2e/
│   ├── ai-chat-widget.spec.ts      # AI Chat Widget E2E
│   ├── company-jobs.spec.ts        # Company Jobs Page E2E
│   ├── company-verification-flow.spec.ts
│   ├── signup-verification-submission.spec.ts
│   ├── accessibility.spec.ts
│   └── visual/
│       └── *.png                  # Visual baseline screenshots
├── vitest/
│   └── components/
│       ├── AiChatWidget.test.tsx
│       └── PublicFooter.test.tsx

Writing E2E Tests

import { test, expect } from "@playwright/test";

test("description of test", async ({ page }) => {
  await page.goto("/route");
  await page.waitForLoadState("networkidle");

  // Assertions
  await expect(page.locator("text=Expected")).toBeVisible();

  // Interactions
  await page.click("button[type='submit']");
  await page.fill("input[name='email']", "test@example.com");
});

Writing Vitest Unit Tests

import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@solidjs/testing-library";
import { MyComponent } from "../src/components/MyComponent";

global.fetch = vi.fn();

describe("MyComponent", () => {
  it("renders correctly", () => {
    render(() => <MyComponent />);
    expect(screen.getByText("Hello")).toBeTruthy();
  });
});

Visual Tests

Visual tests compare screenshots against baselines in tests/e2e/visual/.

Update baselines: npx playwright test --config=playwright.visual.config.ts --update-snapshots
Review diffs in test-results/visual/

CI / Nightly Runs

GitHub Actions runs tests nightly via .gitea/workflows/test.yaml:

2:30 AM daily — all test suites
On-demand — use workflow_dispatch trigger in Gitea

Artifacts are uploaded:

vitest-coverage/ — coverage reports
playwright-report/ — HTML test report
playwright-videos/ — recordings of failed tests
playwright-a11y-report/ — accessibility results
playwright-visual-diffs/ — screenshot diffs

Coverage Requirements

Minimum coverage target: 70%
Run npm run test:coverage to generate coverage report
Coverage report location: test-results/vitest-coverage/

Adding New Tests

E2E tests: Add .spec.ts to tests/e2e/
Unit tests: Add .test.tsx to tests/vitest/components/
Visual tests: Add page screenshots to tests/e2e/visual/ as baselines

Troubleshooting

Playwright timeout: Increase timeout in config or use test.setTimeout()

Flaky tests: Use await page.waitForLoadState("networkidle") instead of arbitrary waits

MSW not intercepting: Ensure setup.ts is imported in vitest.config.ts via setupFiles

3.5 KiB Raw Permalink Blame History