plant-disease-id/tasks/hyper-specific-plant-disease-id/07-testing-and-deployment.md

# 07. Test Suite, Vercel Deployment Config, and CI Pipeline

meta:
  id: hyper-specific-plant-disease-id-07
  feature: hyper-specific-plant-disease-id
  priority: P2
  depends_on: [hyper-specific-plant-disease-id-02, hyper-specific-plant-disease-id-05, hyper-specific-plant-disease-id-06]
  tags: [testing, deployment, ci, qa]

objective:
- Write comprehensive unit and integration tests for all modules, configure Vercel deployment with proper environment variables and build settings, and set up a GitHub Actions CI pipeline that runs on every push.

deliverables:
- `__tests__/` — organized test directory mirroring source structure
- `jest.config.ts` — Jest configuration for Next.js with `@testing-library/react`
- `__tests__/lib/api/diseases.test.ts` — knowledge base query tests
- `__tests__/lib/image-processing.test.ts` — resize and tensor conversion tests
- `__tests__/lib/ml/inference.test.ts` — softmax, confidence calibration, label mapping tests
- `__tests__/components/ImageUpload.test.tsx` — upload component interaction tests
- `__tests__/components/DiseaseCard.test.tsx` — card expand/collapse and rendering tests
- `__tests__/components/ConfidenceBadge.test.tsx` — badge color/label tests
- `__tests__/components/Navbar.test.tsx` — navigation and mobile menu tests
- `__tests__/components/SymptomChecker.test.tsx` — checklist interaction tests
- `__tests__/pages/homepage.test.tsx` — homepage render and element presence
- `__tests__/pages/browse.test.tsx` — browse page render and search filter
- `__tests__/pages/results.test.tsx` — results page with mock API data
- `__tests__/api/health.test.ts` — health endpoint integration test
- `__tests__/api/plants.test.ts` — plants API endpoint tests
- `__tests__/api/diseases.test.ts` — diseases API endpoint tests
- `__tests__/api/upload.test.ts` — upload endpoint with mock file
- `__tests__/api/identify.test.ts` — identify endpoint integration test
- `.github/workflows/ci.yml` — CI pipeline: lint → test → build
- `next.config.js` — final configuration for Vercel deployment
- `vercel.json` — deployment config (framework, rewrites, headers, regions)

steps:
1. Initialize Jest with `jest.config.ts`:
   - Use `next/jest` preset.
   - Configure `@testing-library/react` and `@testing-library/jest-dom`.
   - Set up `jest.setup.ts` for global mocks (fetch, canvas, File, etc.).
2. Write unit tests for all lib modules:
   - **Knowledge base queries:** search by plant, search by disease, search by text, 404 handling.
   - **Image processing:** resize maintains aspect ratio, tensor shape is correct, normalization range is [0,1].
   - **ML inference:** softmax sums to 1, top-5 extraction, confidence thresholds.
3. Write component tests using `@testing-library/react`:
   - `ImageUpload`: simulate drag/drop, file selection, validation errors, upload progress.
   - `DiseaseCard`: click expands/collapses, content renders.
   - `ConfidenceBadge`: correct color for each confidence level.
   - `SymptomChecker`: toggle checkboxes updates counter.
   - `Navbar`: links render, mobile menu toggles.
   - `LoadingSkeleton`: renders correct variant and count.
   - `ErrorBoundary`: catches error and renders fallback.
4. Write integration tests for API routes:
   - Use `next-test-api-route-handler` or Jest with Vercel's test helpers.
   - Test each endpoint with valid and invalid inputs.
   - Test response status codes and body shapes.
   - Test error paths (404, 400, 413, 500).
5. Write page integration tests:
   - Homepage renders hero, upload CTA, featured plants.
   - Browse page renders plant grid, search filters work.
   - Results page renders with mock prediction data.
   - 404 page shows for unknown routes.
6. Create `.github/workflows/ci.yml`:
   ```yaml
   name: CI
   on: [push, pull_request]
   jobs:
     ci:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - uses: actions/setup-node@v4
           with: { node-version: 20 }
         - run: npm ci
         - run: npm run lint
         - run: npm run test -- --coverage
         - run: npm run build
   ```
7. Finalize `next.config.js`:
   - Enable SWC minification.
   - Configure `images.remotePatterns` if using external plant photos.
   - Set `experimental.serverActions` for any server actions.
   - Add security headers (CSP, X-Frame-Options, etc.).
8. Update `vercel.json`:
   ```json
   {
     "framework": "nextjs",
     "regions": ["iad1"],
     "headers": [
       { "source": "/(.*)", "headers": [
         { "key": "X-Content-Type-Options", "value": "nosniff" },
         { "key": "X-Frame-Options", "value": "DENY" },
         { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
       ]}
     ],
     "functions": {
       "api/identify/route.ts": { "memory": 1024, "maxDuration": 30 }
     }
   }
   ```
9. Add `.env.production` template with production values.
10. Run full test suite and ensure 100% pass rate.
11. Perform a dry-run Vercel deploy (`vercel --prod --dry-run`) to validate config.

tests:
- **All the test files listed in deliverables above** — each must pass.
- **Code coverage:** ≥80% line coverage across lib/, components/, and API routes.
- **Lint:** ESLint passes with zero errors.
- **Build:** `next build` completes with zero warnings (or documented exceptions).

acceptance_criteria:
- `npm test` passes all tests (unit + integration + component).
- `npm run build` completes successfully.
- GitHub Actions CI runs and passes on every push.
- Vercel preview deployment succeeds.
- Code coverage report shows ≥80% across all modules.
- All API endpoints tested for both happy and error paths.
- Security headers present in Vercel response.

validation:
```bash
npm run lint          # → No errors
npm run test          # → All tests passing, coverage report generated
npm run build         # → ✓ Compiled successfully
# CI: push to GitHub → Actions tab shows green checkmark
# Vercel: vercel --prod → deployment URL loads homepage
```

notes:
- Use `jest-canvas-mock` for canvas-dependent tests (image processing).
- Use `next-test-api-route-handler` for API route integration tests without running a full server.
- For ML inference tests, mock the model loading and return deterministic fake predictions.
- If Vercel Hobby plan's 10s function timeout is too restrictive for the identify endpoint, consider upgrading or using a Vercel Serverless Function with increased limits.
- Add a `test-assets/` directory with small sample plant images used across tests.