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:

   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:

   {
     "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:

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.