🎨 Task 5.3: Implement Visual Regression Testing with Chromatic #238

New issue

Open

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

goern commented

2025-08-09 20:55:20 +00:00

(Migrated from codeberg.org)

📋 Beschreibung

Implementierung von Visual Regression Testing mit Chromatic für automatisierte UI-Tests. Diese Aufgabe baut auf der Storybook-Integration auf und ermöglicht visuelle Unterschiede zwischen Component-Versionen zu erkennen.

🎯 Ziele

Chromatic für Visual Regression Testing einrichten
Viewport-Tests für verschiedene Bildschirmgrößen konfigurieren
Visual Diff-Thresholds definieren
Integration in Forgejo Actions CI/CD Pipeline

✅ Implementation Checklist

Install and configure Chromatic
Create chromatic.config.json
Add visual test parameters to stories
Configure viewport testing (mobile, tablet, desktop)
Setup visual diff thresholds
Add to Forgejo Actions workflow

📊 Akzeptanzkriterien

Chromatic erfolgreich konfiguriert und funktionsfähig
Visual Tests für alle wichtigen Komponenten (Note, Occurrence, Recording, etc.)
Multi-Viewport Testing (Mobile 375px, Tablet 768px, Desktop 1200px)
Automatische Visual Regression Checks in PR-Workflow
Visual Diff-Reports verfügbar für Team-Review

🔗 Abhängigkeiten

Prerequisites: Task 5.2 (#237) - Component Story ID Type Issues behoben
Blocks: Task 5.4 (#240) - Storybook Interaction Tests
Related: Task 5.5 (#241) - Coverage Integration

📝 Notizen

Priority: Medium
Estimated Time: 3 hours
Part of PR #225 (Testing Infrastructure Improvements)
Benötigt Chromatic Account für Visual Testing Service

🛠️ Technische Details

Viewport-Konfiguration

// Beispiel-Konfiguration
viewports: {
  mobile: { width: 375, height: 667 },
  tablet: { width: 768, height: 1024 },
  desktop: { width: 1200, height: 800 }
}

Visual Diff Thresholds

Pixel-Unterschied: < 0.2%
Layout-Änderungen: Manuelle Review erforderlich
Neue Components: Baseline-Approval erforderlich

🚀 CI/CD Integration

Automatische Visual Tests bei PR-Erstellung
Visual Diff-Reports als PR-Comments
Baseline-Updates nur bei Main-Branch Merges

📚 Referenzen

## 📋 Beschreibung Implementierung von Visual Regression Testing mit Chromatic für automatisierte UI-Tests. Diese Aufgabe baut auf der Storybook-Integration auf und ermöglicht visuelle Unterschiede zwischen Component-Versionen zu erkennen. ## 🎯 Ziele - Chromatic für Visual Regression Testing einrichten - Viewport-Tests für verschiedene Bildschirmgrößen konfigurieren - Visual Diff-Thresholds definieren - Integration in Forgejo Actions CI/CD Pipeline ## ✅ Implementation Checklist - [ ] Install and configure Chromatic - [ ] Create chromatic.config.json - [ ] Add visual test parameters to stories - [ ] Configure viewport testing (mobile, tablet, desktop) - [ ] Setup visual diff thresholds - [ ] Add to Forgejo Actions workflow ## 📊 Akzeptanzkriterien - Chromatic erfolgreich konfiguriert und funktionsfähig - Visual Tests für alle wichtigen Komponenten (Note, Occurrence, Recording, etc.) - Multi-Viewport Testing (Mobile 375px, Tablet 768px, Desktop 1200px) - Automatische Visual Regression Checks in PR-Workflow - Visual Diff-Reports verfügbar für Team-Review ## 🔗 Abhängigkeiten - **Prerequisites**: Task 5.2 (#237) - Component Story ID Type Issues behoben - **Blocks**: Task 5.4 (#240) - Storybook Interaction Tests - **Related**: Task 5.5 (#241) - Coverage Integration ## 📝 Notizen - Priority: **Medium** - Estimated Time: **3 hours** - Part of PR #225 (Testing Infrastructure Improvements) - Benötigt Chromatic Account für Visual Testing Service ## 🛠️ Technische Details ### Viewport-Konfiguration ```javascript // Beispiel-Konfiguration viewports: { mobile: { width: 375, height: 667 }, tablet: { width: 768, height: 1024 }, desktop: { width: 1200, height: 800 } } ``` ### Visual Diff Thresholds - Pixel-Unterschied: < 0.2% - Layout-Änderungen: Manuelle Review erforderlich - Neue Components: Baseline-Approval erforderlich ## 🚀 CI/CD Integration - Automatische Visual Tests bei PR-Erstellung - Visual Diff-Reports als PR-Comments - Baseline-Updates nur bei Main-Branch Merges ## 📚 Referenzen - [Chromatic Documentation](https://www.chromatic.com/docs/) - [Storybook Visual Testing](https://storybook.js.org/tutorials/visual-testing-handbook/) - [Forgejo Actions Guide](https://forgejo.org/docs/latest/user/actions/)