Lantern

Appearance

Code Coverage Pipeline & Discord Improvements ​

Date: January 14, 2026
Status: ✅ Complete

Summary ​

Implemented two major improvements:

  1. Custom code coverage pipeline - No more Playwright browser testing issues
  2. Enhanced Discord deployment messages - Shows exactly what failed

1. Custom Code Coverage Pipeline ✅ ​

Problem Solved ​

npm test:coverage was failing due to:

  • ❌ Playwright browser installation issues (missing system dependencies)
  • ❌ Storybook vitest addon conflicts with coverage mode
  • ❌ Browser mode conflicts with jsdom environment

Solution Implemented ​

Simplified test configuration:

  • Removed Playwright browser testing from vitest config
  • Disabled Storybook vitest plugin for code coverage
  • Set up jsdom environment for DOM testing
  • Enhanced test.setup.js with proper mocks

Files Changed ​

  1. vitest.config.js

    • Removed Playwright browser mode
    • Set environment to jsdom
    • Simplified plugin configuration

  2. test.setup.js

    • Added DOM mocking (IntersectionObserver, matchMedia)
    • Added cleanup after each test
    • Added jsdom polyfills

  3. package.json

    • Added @testing-library/user-event dependency

New GitHub Actions Workflow ​

Created: .github/workflows/coverage.yml

  • Generates code coverage reports automatically
  • Creates coverage badges (visual indicators)
  • Uploads coverage reports to artifacts
  • Comments on PRs with coverage summary
  • Validates against coverage thresholds (configurable)

How to Use It ​

Local testing:

bash
# Run tests with coverage report
npm run test:coverage

# Output: displays coverage percentages
# Creates coverage/html/index.html for detailed report

In GitHub:

  • Coverage workflow runs on every push to dev/main and on PRs
  • Generates artifacts in coverage/ directory
  • PR comments show coverage changes
  • Links to full HTML coverage report

Coverage Output ​

Test Files  3 passed (3)
Tests  13 passed (13)

% Coverage report from v8
-------------------|---------|----------|---------|---------|-------------------
File               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------------|---------|----------|---------|---------|-------------------
All files          |   78.49 |    54.28 |      90 |   79.77 |                   
 src/firebase.js   |      64 |    28.57 |     100 |   64.58 |                   
 src/components... |      80 |       75 |     100 |     100 |                   
-------------------|---------|----------|---------|---------|-------------------

2. Enhanced Discord Deployment Messages ✅ ​

What Changed ​

Before:

**App:** ✅
**Storybook:** ❌
**Docs:** ✅
**Firebase:** ✅

After:

**Services:**
• App: ✅ [dev.ourlantern.app](https://dev.ourlantern.app)
• Storybook: ❌ Failed
• Docs: ✅ [docs.dev.ourlantern.app](https://docs.dev.ourlantern.app)
• Firebase: ✅ Rules & Indexes Deployed

**Failures:**
• Storybook: failure

Improvements ​

  1. Service links are clickable - Direct links to deployed services in Discord
  2. Clear failure indicators - Shows which services actually failed
  3. Detailed failure reasons - Lists failure types (success, failure, skipped)
  4. Links to failed workflow - Click through to GitHub Actions for logs

Files Modified ​

  1. .github/workflows/deploy-dev.yml

    • Enhanced status determination
    • Tracks failure reasons
    • Better formatted Discord message
    • Link to GitHub Actions run

  2. .github/workflows/deploy-prod.yml

    • Same improvements as dev
    • Uses DISCORD_WEBHOOK_PROD_DEPLOY

Discord Message Example ​

Success Message:

🚀 Development Deployment ✅ Success

Environment: Development
Branch: dev
Commit: abc1234

Services:
• App: ✅ [dev.ourlantern.app](https://dev.ourlantern.app)
• Storybook: ✅ [storybook.dev.ourlantern.app](...)
• Docs: ✅ [docs.dev.ourlantern.app](...)
• Firebase: ✅ Rules & Indexes Deployed

Deployed by: @username

Failure Message:

🚀 Development Deployment ❌ Failed

Environment: Development
Branch: dev
Commit: abc1234

Services:
• App: ✅ [dev.ourlantern.app](...)
• Storybook: ❌ Failed
• Docs: ✅ [docs.dev.ourlantern.app](...)
• Firebase: ❌ Rules/Indexes Failed

Failures:
• Storybook: failure
• Firebase Rules: failure

Deployed by: @username

How It Works ​

Code Coverage Workflow ​

Push to dev/main or PR
        ↓
Run tests with coverage (npm run test:coverage)
        ↓
Generate reports (HTML, JSON, LCOV)
        ↓
Create coverage badge
        ↓
Upload artifacts
        ↓
(Optional) Comment on PR with summary
        ↓
Validate against thresholds

Discord Notification Flow ​

Deployment Jobs (App, Storybook, Docs, Firebase)
        ↓
Check each job's result status
        ↓
Build list of failures if any
        ↓
Create formatted Discord message with:
  - Overall status (✅ or ❌)
  - Each service with link
  - Failure details if any
  - Link to GitHub Actions
        ↓
Send to Discord webhook

Configuration ​

Code Coverage Thresholds ​

Edit coverage.yml to set thresholds:

yaml
- name: Check coverage thresholds
  run: |
    THRESHOLD=50  # Change this number
    # Current: 50% (MVP threshold)
    # Recommended for beta: 70%
    # Recommended for production: 80%

Discord Webhook Secrets ​

Make sure these are set in GitHub (Settings → Secrets):

  • DISCORD_WEBHOOK_COMMITS - For commit notifications
  • DISCORD_WEBHOOK_DEV_DEPLOY - For dev deployments
  • DISCORD_WEBHOOK_PROD_DEPLOY - For prod deployments

Testing the Setup ​

Test Code Coverage Locally ​

bash
cd /home/mechelle/repos/lantern_app
npm run test:coverage

Expected output:

  • ✅ Tests run successfully
  • ✅ Coverage report generated
  • ✅ HTML report at coverage/index.html

Test Discord Messages ​

Push a commit to dev branch:

  1. Check #commits channel → should see commit notification
  2. Wait for deployment to complete
  3. Check #deployments channel → should see deployment status

Files Summary ​

Modified:
  vitest.config.js                          ← Simplified config
  test.setup.js                             ← DOM setup
  .github/workflows/deploy-dev.yml          ← Enhanced Discord
  .github/workflows/deploy-prod.yml         ← Enhanced Discord
  package.json                              ← Added test-library user-event

Created:
  .github/workflows/coverage.yml            ← New coverage pipeline

Next Steps ​

Immediate (Now) ​

  • ✅ Test npm run test:coverage locally
  • ✅ Verify Discord messages show failures properly
  • ✅ Check coverage reports in artifacts

Short Term (Before Beta) ​

  • [ ] Set coverage threshold (currently 50%)
  • [ ] Review failed deployment messages in Discord
  • [ ] Test rollback procedure

Medium Term (Beta Launch) ​

  • [ ] Increase coverage threshold to 70%+
  • [ ] Add more unit tests
  • [ ] Consider CODECOV_TOKEN if coverage tracking needed

Troubleshooting ​

Tests still failing with "document is not defined" ​

Fix: Make sure environment: 'jsdom' is in vitest.config.js

Coverage reports not generating ​

Check:

  1. No syntax errors in coverage.yml
  2. Tests are passing (at least 1 passing test)
  3. Check GitHub Actions logs for errors

Discord messages not showing failure details ​

Check:

  1. Webhook URLs are valid (DISCORD_WEBHOOK_DEV_DEPLOY, etc.)
  2. Discord servers haven't rate-limited us
  3. Try manually posting to test webhook

Coverage artifact not uploading ​

Check:

  1. Tests completed (even if some failed)
  2. Coverage directory exists at coverage/
  3. Retention days not set to 0

See Also ​

Built with VitePress

Copyright © 2026 Lantern