📊 Task 5.5: Integrate Storybook Coverage with Main Pipeline #240

New issue

Open

opened 2025-08-09 20:56:04 +00:00 by goern · 0 comments

goern commented

2025-08-09 20:56:04 +00:00

(Migrated from codeberg.org)

📋 Beschreibung

Integration der Storybook Test Coverage mit dem Haupt-Coverage-System. Diese Aufgabe kombiniert Coverage-Daten von Unit Tests, Integration Tests, E2E Tests und Storybook Tests zu einem unified Coverage Report.

🎯 Ziele

Storybook Coverage in scripts/merge-coverage.js integrieren
Unified Coverage Reports erstellen (alle Test-Typen kombiniert)
CI/CD Pipeline für kombinierte Coverage-Checks einrichten
Coverage-Thresholds für Storybook-spezifische Metriken definieren

✅ Implementation Checklist

Update scripts/merge-coverage.js to include Storybook
Add Storybook tests to CI/CD pipeline
Create storybook-coverage-report.js script
Update npm scripts for combined execution
Verify coverage correctly merged

📊 Akzeptanzkriterien

Unified Coverage Report kombiniert alle Test-Typen
Coverage-Merge-Script verarbeitet Storybook-Coverage korrekt
CI/CD Pipeline führt alle Tests inkl. Storybook aus
Coverage-Thresholds berücksichtigen Storybook-Daten
HTML Coverage Report zeigt alle Test-Quellen an
Coverage-Badges reflektieren unified Coverage-Werte

🔗 Abhängigkeiten

Prerequisites: Tasks 5.1-5.4 (Storybook Setup, Stories, Visual/Interaction Tests)
Related: Task 3.1 (#229) - Coverage Merging Infrastructure
Related: Task 3.2 (#230) - CI/CD Pipeline Setup

📝 Notizen

Priority: High
Estimated Time: 2 hours
Part of PR #225 (Testing Infrastructure Improvements)
Final Integration Step für Phase 5

🛠️ Technische Details

Coverage-Quellen Integration

// scripts/merge-coverage.js Enhancement
const coverageSources = [
  'coverage/units',      // Unit Tests
  'coverage/integration', // Integration Tests  
  'coverage/e2e',        // E2E Tests
  'coverage/storybook'   // Storybook Tests (NEW)
];

NPM Scripts Update

{
  "test:all": "npm run test:units && npm run test:integrations && npm run test:e2e && npm run test:storybook",
  "test:storybook": "test-storybook --coverage",
  "coverage:merge": "node scripts/merge-coverage.js",
  "coverage:report": "npm run coverage:merge && npm run coverage:html"
}

Coverage-Thresholds

Global: 80% (includes Storybook data)
Components: 90% (Storybook heavily contributes)
Stories: 100% (all stories must render)
Interactions: 85% (interaction test coverage)

🎯 Expected Coverage Impact

Mit Storybook Integration erwarten wir:

Component Coverage: +15-20% (Story Rendering)
Interaction Coverage: +10-15% (User Event Testing)
Visual Coverage: +5-10% (Rendering Path Coverage)
Overall Coverage: Target 85%+ (aktuell 42.19%)

🚀 CI/CD Pipeline Integration

.forgejo/workflows/test-coverage.yml

- name: Run Storybook Tests
  run: |
    npm run build-storybook
    npm run test:storybook
    
- name: Merge Coverage Reports  
  run: npm run coverage:merge

📚 Referenzen

Istanbul Coverage Merging
Storybook Test Coverage
Internal: /scripts/merge-coverage.js
Internal: /docs/testing/coverage-setup.md

## 📋 Beschreibung Integration der Storybook Test Coverage mit dem Haupt-Coverage-System. Diese Aufgabe kombiniert Coverage-Daten von Unit Tests, Integration Tests, E2E Tests und Storybook Tests zu einem unified Coverage Report. ## 🎯 Ziele - Storybook Coverage in scripts/merge-coverage.js integrieren - Unified Coverage Reports erstellen (alle Test-Typen kombiniert) - CI/CD Pipeline für kombinierte Coverage-Checks einrichten - Coverage-Thresholds für Storybook-spezifische Metriken definieren ## ✅ Implementation Checklist - [ ] Update scripts/merge-coverage.js to include Storybook - [ ] Add Storybook tests to CI/CD pipeline - [ ] Create storybook-coverage-report.js script - [ ] Update npm scripts for combined execution - [ ] Verify coverage correctly merged ## 📊 Akzeptanzkriterien - Unified Coverage Report kombiniert alle Test-Typen - Coverage-Merge-Script verarbeitet Storybook-Coverage korrekt - CI/CD Pipeline führt alle Tests inkl. Storybook aus - Coverage-Thresholds berücksichtigen Storybook-Daten - HTML Coverage Report zeigt alle Test-Quellen an - Coverage-Badges reflektieren unified Coverage-Werte ## 🔗 Abhängigkeiten - **Prerequisites**: Tasks 5.1-5.4 (Storybook Setup, Stories, Visual/Interaction Tests) - **Related**: Task 3.1 (#229) - Coverage Merging Infrastructure - **Related**: Task 3.2 (#230) - CI/CD Pipeline Setup ## 📝 Notizen - Priority: **High** - Estimated Time: **2 hours** - Part of PR #225 (Testing Infrastructure Improvements) - Final Integration Step für Phase 5 ## 🛠️ Technische Details ### Coverage-Quellen Integration ```javascript // scripts/merge-coverage.js Enhancement const coverageSources = [ 'coverage/units', // Unit Tests 'coverage/integration', // Integration Tests 'coverage/e2e', // E2E Tests 'coverage/storybook' // Storybook Tests (NEW) ]; ``` ### NPM Scripts Update ```json { "test:all": "npm run test:units && npm run test:integrations && npm run test:e2e && npm run test:storybook", "test:storybook": "test-storybook --coverage", "coverage:merge": "node scripts/merge-coverage.js", "coverage:report": "npm run coverage:merge && npm run coverage:html" } ``` ### Coverage-Thresholds - **Global**: 80% (includes Storybook data) - **Components**: 90% (Storybook heavily contributes) - **Stories**: 100% (all stories must render) - **Interactions**: 85% (interaction test coverage) ## 🎯 Expected Coverage Impact Mit Storybook Integration erwarten wir: - **Component Coverage**: +15-20% (Story Rendering) - **Interaction Coverage**: +10-15% (User Event Testing) - **Visual Coverage**: +5-10% (Rendering Path Coverage) - **Overall Coverage**: Target 85%+ (aktuell 42.19%) ## 🚀 CI/CD Pipeline Integration ### .forgejo/workflows/test-coverage.yml ```yaml - name: Run Storybook Tests run: | npm run build-storybook npm run test:storybook - name: Merge Coverage Reports run: npm run coverage:merge ``` ## 📚 Referenzen - [Istanbul Coverage Merging](https://istanbul.js.org/docs/advanced/alternative-reporters/) - [Storybook Test Coverage](https://storybook.js.org/docs/react/writing-tests/test-coverage) - Internal: `/scripts/merge-coverage.js` - Internal: `/docs/testing/coverage-setup.md`