Daftar Isi — Part 4: Testing & QA
- Testing Pyramid — Unit 70%, Integration 20%, E2E 10%
- Unit Tests (Vitest) — Test functions, validations, utils
- Integration Tests — Test API endpoints end-to-end
- E2E Tests (Playwright) — Simulate real user flows
- AI-Generated Tests — Generate 80% test boilerplate
- Security Scanning — npm audit, Snyk, gitleaks
- Performance Testing — Lighthouse, Core Web Vitals
- CI Integration — Auto-run tests on every PR
- Coverage Goals & Checklist
🏠
1. Testing Pyramid
Banyak test cepat di bawah (unit), sedikit test lambat di atas (E2E)Testing pyramid adalah prinsip fundamental: tulis banyak unit tests (cepat, murah, 70% effort), beberapa integration tests (medium, 20%), dan sedikit E2E tests (lambat, mahal, 10%). Dalam Vibe Coding, AI bisa generate 70-80% test boilerplate — tapi Anda tetap harus define edge cases dan acceptance criteria yang bermakna.
| Layer | What | Tool | Speed | Qty | Coverage |
|---|---|---|---|---|---|
| Unit | Individual functions, hooks, utils, Zod schemas | Vitest | <1s/test | 50-100+ | ~70% |
| Integration | API routes, DB operations, auth flows | Vitest + Prisma mock | 1-5s/test | 20-40 | ~20% |
| E2E | Full user flows in real browser | Playwright | 5-30s/test | 5-15 | ~10% |
| Security | Vulnerabilities, secrets, deps | npm audit, Snyk | Varies | Auto | Continuous |
🧪
2. Unit Tests dengan Vitest
Test individual functions: validation rules, calculations, formatting, utilsimport { describe, it, expect } from "vitest";
import { CreateTaskSchema } from "@/lib/schemas";
describe("CreateTaskSchema", () => {
it("accepts valid task data", () => {
const result = CreateTaskSchema.safeParse({
title: "Fix login bug",
boardId: "550e8400-e29b-41d4-a716-446655440000",
});
expect(result.success).toBe(true);
});
it("rejects title shorter than 3 chars", () => {
const result = CreateTaskSchema.safeParse({
title: "ab",
boardId: "550e8400-e29b-41d4-a716-446655440000",
});
expect(result.success).toBe(false);
});
it("rejects missing boardId", () => {
const result = CreateTaskSchema.safeParse({ title: "Valid" });
expect(result.success).toBe(false);
});
it("rejects SQL injection in title", () => {
// Zod catches invalid format, Prisma parameterizes queries
const result = CreateTaskSchema.safeParse({
title: "'; DROP TABLE tasks; --",
boardId: "550e8400-e29b-41d4-a716-446655440000",
});
// Title passes Zod (it's a valid string >3 chars)
// But Prisma ORM will parameterize it — NO injection!
expect(result.success).toBe(true);
});
});
// npx vitest run --reporter=verbose
// 4 tests passed in 0.2s
🌐
3. E2E Tests dengan Playwright
Simulate real user: buka browser, klik, isi form, verifikasi hasilimport { test, expect } from "@playwright/test";
test("user can create and move a task", async ({ page }) => {
// 1. Login
await page.goto("/login");
await page.fill("[name=email]", "test@example.com");
await page.fill("[name=password]", "testpass123");
await page.click("button[type=submit]");
await expect(page).toHaveURL("/dashboard");
// 2. Go to board
await page.click("text=My Board");
await expect(page.getByText("TODO")).toBeVisible();
// 3. Create task
await page.click("[data-testid=add-task-btn]");
await page.fill("[name=title]", "E2E Test Task");
await page.click("[data-testid=submit-task]");
// 4. Verify task visible in TODO column
await expect(page.getByText("E2E Test Task")).toBeVisible();
});
// npx playwright test --headed (see browser)
// npx playwright test (headless, for CI)
🤖
4. AI-Generated Tests
Prompt AI untuk generate comprehensive test suites dari existing codePrompt Pattern: Generate Tests
"Read file src/server/tasks.ts and generate comprehensive tests: (1) Unit tests for every Zod validation rule, (2) Integration tests for CRUD operations, (3) Edge cases: empty string, max length, SQL injection attempt, unauthorized user, non-existent IDs, (4) Use Vitest + Prisma mock, (5) AAA pattern (Arrange-Act-Assert), (6) Generate at least 15 test cases." — AI generates 15-20 tests in seconds. Review manually: AI sometimes misses business-specific edge cases.
🔒
5. Security Scanning
Automated security checks: dependencies, secrets, runtime vulnerabilities| Tool | What It Checks | Command | Frequency |
|---|---|---|---|
| npm audit | Known vulns in npm packages | npm audit --production | Every PR |
| Snyk | Deep dependency scan + fix suggestions | snyk test | Daily |
| gitleaks | Secrets accidentally committed | gitleaks detect | Every commit (hook) |
| ESLint security | Common code security issues | eslint-plugin-security | Every save |
| Lighthouse | Best practices, SEO, accessibility | npx lighthouse URL | Pre-release |
✅
6. Coverage Goals & CI Integration
Target coverage dan auto-run tests di setiap PR| Metric | Target | Tool |
|---|---|---|
| Line coverage | >80% | vitest --coverage |
| Branch coverage | >70% | vitest --coverage |
| E2E critical paths | 100% (all user stories) | Playwright |
| Security vulnerabilities | 0 high/critical | npm audit + Snyk |
| Secrets in repo | 0 | gitleaks |
| Lighthouse score | >90 (all categories) | Lighthouse CI |
| CI pipeline | All above auto-run on every PR | GitHub Actions |
Next: Part 5 — Deployment & DevOps
Dari localhost ke production. CI/CD pipeline (GitHub Actions), Vercel deploy, environment management, database migrations, monitoring, dan rollback strategy.
SDLC
Tech Review Desk — Vibe Coding SDLC Bible
Sumber: Vitest docs, Playwright docs, OWASP Testing Guide, Snyk docs, Google Lighthouse.