Add Storybook with mocked Supabase, GitHub Pages deployment, and code coverage

[Copilot]

Testing Infrastructure Enhancement - Complete ✅

This PR implements comprehensive testing infrastructure for the Calorie Tracker application, addressing both new requirements:

✅ Implemented Features

1. Storybook for Component Testing

• Storybook 10.1.11 installed and configured for React + Vite + TypeScript
• Vitest Integration via @storybook/addon-vitest plugin - stories can be run as tests using Vitest
• Accessibility Testing with @storybook/addon-a11y addon
• Component Stories created for:
  • AddFoodBody - Food creation component (2 variants)
  • AddQuickLogBody - Quick calorie logging component (3 variants)
  • LogViewListItem - Log entry display component (5 variants)
  • EditFoodBody - Food editing component (3 variants)
  • EditQuickLogBody - Log entry editing component (5 variants)
  • FoodsViewListItem - Food list item component (5 variants)
• Total: 6 components with 23 story variants
• Clean: Removed Storybook template examples (Button, Header, Page)

2. GitHub Pages Deployment

• Storybook automatically deployed to GitHub Pages at /storybook/ path
• Integrated into existing Pages workflow
• Builds both main app and Storybook on each push to main
• Accessible at: https://tr00st.github.io/calorie-tracker/storybook/

3. Code Coverage

• Comprehensive code coverage with Vitest v8 provider
• Multiple report formats: HTML, JSON, LCOV, text
• Coverage thresholds set at 70% for lines, functions, branches, statements
• Excludes test files, stories, and configuration from coverage
• HTML report available at coverage/index.html after running tests
• CI-ready with LCOV output for code coverage services

4. Mocked Supabase Environment

• Mock Supabase Client for unit tests (src/test/mocks/supabase.tsx)

  • Factory function to create mock clients
  • Mock provider component for wrapping tests
  • Helper functions for creating mock responses and errors

• Mock Supabase Dev Server (src/test/mocks/supabaseDevServer.tsx)

  • In-memory mock implementation for development
  • Pre-populated with sample foods and log entries
  • Supports basic CRUD operations
  • Can be enabled via VITE_USE_MOCK_SUPABASE=true environment variable
  • Type-safe table access with proper type guards

• Storybook Decorators (src/test/storybook-decorators.tsx)

  • Global decorators provide all necessary context (Supabase, React Query, MUI, Luxon)
  • Individual decorators available for specific needs

5. Documentation

• Comprehensive TESTING.md guide covering:
  • How to run unit tests and Storybook
  • Code coverage reports and configuration
  • GitHub Pages deployment info
  • Mocking patterns and examples
  • Writing tests and stories
  • Troubleshooting common issues
• Updated README.md with testing quick-start commands and Storybook link

📊 Test Results

Unit Tests: ✅ All 49 tests passing

npm test -- --run

Storybook: ✅ Running successfully with component stories (23 variants across 6 components)

npm run storybook

Code Coverage: ✅ Available with detailed HTML reports

npm run test:coverage

Storybook Tests via Vitest: ⚠️ Available but optional

npm run test:storybook

🎯 Requirements Addressed

1. ✅ Chromatic/Vitest Integration: Storybook tests can be run using Vitest via the @storybook/addon-vitest plugin. This provides a unified testing experience without needing Chromatic's cloud service.

2. ✅ Mocked Dev Server: Created supabaseDevServer.tsx that provides an in-memory mock Supabase implementation for development. Enable it by setting VITE_USE_MOCK_SUPABASE=true in .env.local.

3. ✅ GitHub Pages Deployment: Storybook is automatically built and deployed to GitHub Pages at /storybook/ path on every push to main branch.

4. ✅ Expanded Component Stories: Added stories for 6 components with 23 variants total, covering various states and edge cases.

5. ✅ Code Coverage Metrics: Comprehensive code coverage reporting with HTML reports, thresholds, and CI-ready LCOV output.

6. ✅ Clean Template Files: Removed Storybook template examples (Button, Header, Page components and assets).

📝 Usage

Run Storybook:

npm run storybook

Run Unit Tests:

npm test

Run Tests with Coverage:

npm run test:coverage
open coverage/index.html  # View HTML report

Run Storybook Tests (optional):

npm run test:storybook

View Storybook Online:

https://tr00st.github.io/calorie-tracker/storybook/

Use Mock Supabase in Development:

# In .env.local
VITE_USE_MOCK_SUPABASE=true
npm run dev

📦 Key Files Added/Modified

New Files:

• src/components/add-food-dialog.tsx/AddFoodBody.stories.tsx - 2 story variants
• src/components/add-quick-log-dialog/AddQuickLogBody.stories.tsx - 3 story variants
• src/screens/log/LogViewListItem.stories.tsx - 5 story variants
• src/components/edit-food-dialog/EditFoodBody.stories.tsx - 3 story variants
• src/components/edit-quick-log-dialog/EditQuickLogBody.stories.tsx - 5 story variants
• src/screens/foods/FoodsViewListItem.stories.tsx - 5 story variants
• src/test/mocks/supabase.tsx - Mock utilities for unit tests
• src/test/mocks/supabaseDevServer.tsx - Mock dev server
• src/test/storybook-decorators.tsx - Reusable decorators
• .storybook/ - Storybook configuration
• vitest.storybook.config.ts - Vitest config for Storybook tests
• TESTING.md - Comprehensive testing guide

Modified Files:

• .github/workflows/deploy_pages.yml - Added Storybook build and deployment
• .gitignore - Added coverage directory exclusion
• vitest.config.ts - Added comprehensive coverage configuration
• README.md - Updated with coverage and deployment info
• package.json - Added test:storybook script

Removed Files:

• src/stories/* - All Storybook template files (Button, Header, Page examples and assets)

✨ Benefits

• Sandboxed Component Development: Develop and test components in isolation without backend dependencies
• Visual Component Library: Browse and interact with all components in Storybook
• Automated Component Testing: Run component tests via Vitest integration
• Accessibility Checks: Built-in a11y testing in Storybook
• Mock Development: Work on UI without a Supabase instance
• Comprehensive Documentation: Clear guides for testing patterns
• Type-Safe Mocking: Type guards ensure proper table access in mock server
• Public Component Documentation: Storybook deployed to GitHub Pages for easy sharing
• Code Quality Metrics: Coverage reports help identify untested code
• CI/CD Ready: LCOV reports can be integrated with coverage services
• Clean Codebase: No template clutter, only project-specific stories

🔧 Code Quality

• Addressed all code review feedback
• Improved type safety in mock implementations
• Added proper Playwright configuration for browser tests
• Removed unused code and dead variables
• Removed Storybook template files
• All existing unit tests passing
• Coverage thresholds enforced at 70%

---

Testing Checklist:

• Install Storybook with Vitest integration
• Create Supabase mocking utilities for unit tests
• Create mock Supabase dev server for development
• Create example component stories (6 components, 23 variants)
• Update documentation (README + TESTING.md)
• Verify unit tests still pass (49/49 ✅)
• Run Storybook locally and verify components render
• Address code review feedback
• Add GitHub Pages deployment for Storybook
• Expand Storybook stories to cover more components
• Add code coverage metrics with HTML reports
• Update .gitignore for coverage files
• Remove Storybook template files

Original prompt

Investigate options for testing the application in a sandboxed environment - consider things like StoryBook for component testing, and providing a mocked environment for supabase calls.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[tr00st]

@copilot Add something to get GitHub Actions to push the StoryBook build into a folder in the GitHub Pages project

[Copilot]

@copilot Add something to get GitHub Actions to push the StoryBook build into a folder in the GitHub Pages project

Done! Storybook will now be automatically deployed to GitHub Pages at /storybook/ path when changes are pushed to main. The deployment workflow builds both the main app and Storybook, then copies Storybook into dist/storybook/.

Access it at: https://tr00st.github.io/calorie-tracker/storybook/

Changes in commit fda1e42:

• Modified .github/workflows/deploy_pages.yml to build and deploy Storybook alongside the main app
• Updated documentation with deployment info

[tr00st]

@copilot The Add Storybook with mocked Supabase commit adds a bunch of unnecessary static content and example components that look like they're pulled from a Storybook template - clean them up.

[Copilot]

@copilot The Add Storybook with mocked Supabase commit adds a bunch of unnecessary static content and example components that look like they're pulled from a Storybook template - clean them up.

Cleaned up all Storybook template files in commit c92fa82. Removed:

• Example components: Button, Header, Page (stories, TypeScript files, and CSS)
• Template documentation: Configure.mdx
• All template assets (16 image/svg files)

The sidebar now only shows our actual component stories (Components and Screens sections) without the "EXAMPLE" section.