0d63bb304e
- 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
134 lines
No EOL
3.5 KiB
Markdown
134 lines
No EOL
3.5 KiB
Markdown
# 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)
|
|
|
|
```bash
|
|
# 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
|
|
```
|
|
|
|
### Dev server must be running for E2E/a11y/visual tests
|
|
|
|
```bash
|
|
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
|
|
|
|
```typescript
|
|
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
|
|
|
|
```typescript
|
|
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
|
|
|
|
1. **E2E tests**: Add `.spec.ts` to `tests/e2e/`
|
|
2. **Unit tests**: Add `.test.tsx` to `tests/vitest/components/`
|
|
3. **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` |