test: add unit test suite for Frontend components

[snowrugar-beep]

Problem Statement

The Frontend has zero tests across all components, pages, hooks, and utilities. There are no test files in Frontend/src/. Critical UI components (Map, Header, CTA, AddGistModal, Badge) and pages (Landing, Map) have no automated verification.

Evidence

• No *.spec.ts or *.test.ts files exist anywhere in Frontend/
• Frontend/package.json has no test framework dependency (no Vitest, Jest, or Testing Library)
• Frontend CI only runs lint and TypeScript checks — no test step

Impact

UI regressions undetectable without manual testing. Refactoring is high-risk. No confidence in component behavior under different states.

Proposed Solution

1. Install Vitest, @testing-library/react, @testing-library/jest-dom, jsdom
2. Create vitest.config.ts matching Next.js configuration
3. Add test: npm run test script to package.json
4. Write tests for:
   • Header component (renders logo, nav links, mobile menu)
   • CTA component (animations, link href)
   • AddGistModal (open/close, input, submit, char limit)
   • Badge component (all variants)
   • Map component (renders markers, geolocation)
   • Landing and Map pages (render without errors)
   • cn() utility function

Technical Requirements

• Must use Vitest (fast, native TypeScript support)
• Must use @testing-library/react (encourages testing behavior, not implementation)
• Must mock leaflet (canvas-based, doesn't work in jsdom)
• Must mock framer-motion AnimatePresence in tests
• Coverage threshold: 70% minimum

Acceptance Criteria

1. Header test: renders logo, map link, has correct href
2. CTA test: renders heading, body, link with correct URL
3. AddGistModal test: opens on click, closes on backdrop, submits content, enforces 280 char limit
4. Badge test: renders all 4 variants with correct styling
5. Map test: renders without error with mock geolocation
6. cn() test: merges classes correctly, handles falsy values
7. npm run test passes with >70% coverage
8. CI includes test step

File Inventory

• Frontend/src/components/ (all components need test files)
• Frontend/package.json
• Frontend/vitest.config.ts (new)
• Frontend/src/tests/ or co-located *.spec.tsx files

Dependencies

None.

Testing Strategy

Component unit tests using Vitest + Testing Library. Map component needs window.fetch and geolocation mocking.

Security Considerations

Better test coverage reduces risk of security regressions in UI (e.g., XSS via rendered content).

Definition of Done

• Vitest configured
• Tests for all components
• Coverage >70%
• CI includes test step
• All tests passing

[Lansa-18]

Hi @snowrugar-beep, I'd like to work on this.

I'll set up Vitest with @testing-library/react, @testing-library/jest-dom, and jsdom, then add vitest.config.ts matched to the Next.js setup and the test script in package.json. I'll mock leaflet and framer-motion's AnimatePresence since they don't play nicely with jsdom, then write tests for Header, CTA, AddGistModal, Badge, Map, the Landing/Map pages, and the cn() utility, covering the specific behaviors listed (mobile menu, char limit enforcement, variant rendering, geolocation mocking, class merging with falsy values).

I'll get coverage above the 70% threshold and add the test step to CI so it runs on every PR going forward.

[grantfox-oss]

🦊 GrantFox — @Lansa-18 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #19)
2. Your PR will be reviewed by the VertexChainLabs maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Lansa-18's PR #80 was approved and merged by @snowrugar-beep.

🏆 @Lansa-18: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (783 total points). Track your full progress on GrantFox.

👏 Great work, @Lansa-18! Keep contributing to VertexChainLabs.