Implement basic snapshot testing framework

[a3626a]

Summary

• Add snapshot testing framework for code generation
• Capture current behavior to detect unintended changes during refactoring

Motivation

This repository currently has no tests. When modifying code generation logic, there's no way to verify whether the output changed unintentionally. Snapshot tests solve this by capturing the current output as a baseline, making any behavioral changes visible in PR diffs.

Changes

• Add Vitest as test framework
• Implement custom snapshot testing system with manual approval workflow
• Support HTML renderer with 3 modes: html, jsx, styled-components
  • can be easily expanded

Test Workflow

1. Add Figma JSON fixture to __tests__/fixtures/
2. Run pnpm --filter backend test
3. Review generated -new snapshots
4. Accept by removing -new suffix from filename

File Structure

  packages/backend/
  ├── vitest.config.ts
  ├── tests/
  │   ├── README.md
  │   ├── snapshot.test.ts
  │   ├── fixtures/           # Figma JSON inputs
  │   ├── snapshots/html/     # Generated code snapshots
  │   └── helpers/
  │       ├── fixtureLoader.ts
  │       ├── snapshotManager.ts
  │       ├── codeGenerator.ts
  │       └── rendererConfig.ts

Maintenance

• Add more fixtures as edge cases are discovered
• When code generation changes intentionally, review and accept new snapshots
• Extend rendererConfig.ts to cover more renderers/modes over time