System Weryfikacji (Verification System)

Przegląd

System weryfikacji składa się z dwóch głównych komponentów uruchamianych automatycznie po zakończeniu wszystkich subtasków:

Visual Verification - Weryfikacja wizualna aplikacji przez screenshoty
Final Task Verification - Weryfikacja zgodności z wymaganiami

Visual Verification

Cel

Automatyczne zbieranie dowodów wizualnych (screenshoty) dla różnych viewportów i route'ów aplikacji.

Workflow

┌─────────────────────────────────────────────────────┐
│  1. Detekcja Środowiska                             │
│     - Sprawdza dostępność backendu                  │
│     - Beta vs Local                                 │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  2. Kompilacja                                      │
│     - npm install                                   │
│     - npm run build                                 │
│     - Weryfikacja błędów kompilacji                │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  3. Uruchomienie Dev Server                         │
│     - npm start                                     │
│     - Health check (czeka max 60s)                 │
│     - Zapisuje PID                                  │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  4. Testy Playwright + Screenshoty                  │
│     - Dla każdego route z konfiguracji             │
│     - Dla każdego viewport (desktop/mobile/tablet) │
│     - Zapisuje do verification/screenshots/        │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  5. Generowanie Raportu                             │
│     - visual_verification_report.md                 │
│     - Podsumowanie statusu                          │
│     - Lista screenshotów                            │
└─────────────────────────────────────────────────────┘

Konfiguracja per Repozytorium

Każde repozytorium może mieć plik .visual_verification.json:

json

{
  "enabled": true,
  "framework": "angular",
  "routes": [
    {
      "path": "/dashboard/settings",
      "requiresAuth": true,
      "description": "Settings page"
    },
    {
      "path": "/user/profile",
      "requiresAuth": true,
      "description": "User profile"
    },
    {
      "path": "/",
      "requiresAuth": false,
      "description": "Landing page"
    }
  ],
  "viewports": [
    {
      "name": "desktop",
      "width": 1920,
      "height": 1080
    },
    {
      "name": "mobile",
      "width": 375,
      "height": 812
    },
    {
      "name": "tablet",
      "width": 768,
      "height": 1024
    }
  ],
  "environment": {
    "detectBackend": true,
    "backendHealthCheck": "http://localhost:3000/health",
    "local": {
      "apiUrl": "http://localhost:3000",
      "login": "[email protected]",
      "password": "pass"
    },
    "beta": {
      "apiUrl": "https://api-beta.sembot.ovh",
      "login": "[email protected]",
      "password": "passpass"
    }
  },
  "playwright": {
    "headless": true,
    "timeout": 30000,
    "waitForSelector": ".app-loaded"
  }
}

Auto-detekcja Środowiska

System automatycznie wykrywa dostępność backendu:

bash

# Próba połączenia z lokalnym backendem
if curl -s http://localhost:3000/health > /dev/null 2>&1; then
  ENV_MODE="local"
  API_URL="http://localhost:3000"
  LOGIN="[email protected]"
  PASSWORD="pass"
else
  # Fallback do beta
  ENV_MODE="beta"
  API_URL="https://api-beta.sembot.ovh"
  LOGIN="[email protected]"
  PASSWORD="passpass"
fi

echo "🌍 Environment detected: $ENV_MODE"

Screenshot Naming Convention

{number}-{viewport}-{route}-{timestamp}.png

Przykłady:
01-desktop-dashboard-settings-20251231-103045.png
02-desktop-user-profile-20251231-103046.png
23-mobile-dashboard-settings-20251231-103105.png
35-tablet-dashboard-settings-20251231-103120.png

Docker Integration

Visual verification wymaga kontenera Chrome (browserless):

yaml

# docker-compose.yml
chrome:
  image: browserless/chrome:latest
  platform: linux/amd64
  environment:
    - MAX_CONCURRENT_SESSIONS=5
    - CONNECTION_TIMEOUT=600000
  ports:
    - "9222:3000"
  shm_size: '2gb'

Worker ma dostęp przez zmienne środowiskowe:

bash

export CHROME_HOST="chrome"
export CHROME_PORT="9222"

Playwright Test Example

javascript

// visual-verification.spec.js
const { test, expect } = require('@playwright/test');

test.describe('Visual Verification', () => {
  test('Dashboard Settings - Desktop', async ({ page }) => {
    // Login
    await page.goto(`${API_URL}/login`);
    await page.fill('input[name="email"]', LOGIN);
    await page.fill('input[name="password"]', PASSWORD);
    await page.click('button[type="submit"]');

    // Navigate
    await page.goto('/dashboard/settings');
    await page.waitForSelector('.app-loaded');

    // Screenshot
    await page.screenshot({
      path: 'verification/screenshots/01-desktop-dashboard-settings.png',
      fullPage: true
    });
  });
});

Raport Weryfikacji Wizualnej

Przykład: visual_verification_report.md

markdown

# Visual Verification Report

## Summary
- **Date**: 2025-12-31 10:30:45
- **Environment**: BETA (no local backend detected)
- **Total Screenshots**: 45
- **Status**: ✅ PASSED

## Build Status
- **Compilation**: ✅ SUCCESS
- **Build Time**: 45s
- **Errors**: 0
- **Warnings**: 2

## Startup Status
- **Dev Server**: ✅ STARTED
- **Startup Time**: 12s
- **Health Check**: ✅ PASSED
- **PID**: 12345

## Screenshots Captured

### Desktop (1920x1080): 15 screenshots
- ✅ /dashboard/settings
- ✅ /user/profile
- ✅ /user/profile/picture
- ✅ /dashboard/analytics
- ✅ /settings/team

### Mobile (375x812): 15 screenshots
- ✅ /dashboard/settings
- ✅ /user/profile
- ✅ /user/profile/picture
- ✅ /dashboard/analytics
- ✅ /settings/team

### Tablet (768x1024): 15 screenshots
- ✅ /dashboard/settings
- ✅ /user/profile
- ✅ /user/profile/picture
- ✅ /dashboard/analytics
- ✅ /settings/team

## Issues Found
- ⚠️ Warning: Menu icons missing on mobile viewport (23-mobile-dashboard-settings.png)

## Final Status
✅ **APPROVED FOR RELEASE** (with minor warnings)

Final Task Verification

Cel

Weryfikacja końcowa zadania względem oryginalnych wymagań i zebranie wszystkich artefaktów.

Workflow

┌─────────────────────────────────────────────────────┐
│  1. Odczyt Oryginalnych Wymagań                     │
│     - task.md (backup)                              │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  2. Zebranie Zmian w Kodzie                         │
│     - git diff per repository                       │
│     - Lista zmienionych plików                      │
│     - Statystyki (+lines, -lines)                  │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  3. Analiza Subtasków                               │
│     - START: completed/total                        │
│     - P0: completed/total                           │
│     - P1: completed/total                           │
│     - P2: completed/total                           │
│     - P3: completed/total                           │
│     - END: completed/total                          │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  4. Weryfikacja Visual Verification                 │
│     - Liczba screenshotów                           │
│     - Build status                                  │
│     - Startup status                                │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  5. Generowanie Checklisty                          │
│     - [ ] Requirements implemented                  │
│     - [ ] All P0/P1 subtasks completed             │
│     - [ ] Code committed                            │
│     - [ ] Visual verification passed                │
│     - [ ] Build successful                          │
└────────────────┬────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────────┐
│  6. Decision                                        │
│     - READY FOR REVIEW                              │
│     - REQUIRES FIXES                                │
└─────────────────────────────────────────────────────┘

Raport Końcowy

Przykład: final_verification_report.md

markdown

# Final Task Verification Report

## Task Overview
- **Task ID**: DEV-7315
- **Title**: Settings UI Unification
- **Status**: ✅ READY FOR REVIEW
- **Completed At**: 2025-12-31 10:45:00

## Original Requirements

### Cel
Zunifikować UI menu ustawień - wszystkie ikony mają być widoczne.

### Wymagania
1. ✅ Wszystkie ikony w menu ustawień muszą być widoczne
2. ✅ Zachować istniejący design system
3. ✅ Responsive design (desktop + mobile)
4. ✅ Dodać testy Playwright

### Acceptance Criteria
- [x] Ikony widoczne na desktop
- [x] Ikony widoczne na mobile
- [x] Testy przechodzą
- [x] Build bez błędów

## Code Changes

### Repository: sembot-angular
**Branch**: feature/DEV-7315

**Files Changed**: 8
- Modified: 5
- Added: 3
- Deleted: 0

**Statistics**:
- Lines Added: +245
- Lines Removed: -87
- Net Change: +158

**Modified Files**:
1. `src/app/dashboard/settings/settings.component.ts` (+45, -12)
2. `src/app/dashboard/settings/settings.component.html` (+32, -8)
3. `src/app/dashboard/settings/settings.component.scss` (+28, -15)
4. `src/app/shared/components/menu-icon/menu-icon.component.ts` (+67, -0) [NEW]
5. `src/app/shared/components/menu-icon/menu-icon.component.html` (+23, -0) [NEW]
6. `src/app/shared/components/menu-icon/menu-icon.component.scss` (+18, -0) [NEW]
7. `e2e/settings.spec.ts` (+25, -0) [NEW]
8. `package.json` (+7, -52)

## Subtasks Status

### START Phase
- ✅ init_workspace (completed)
- ✅ plan_task (completed)
**Total**: 2/2 completed

### P0 Phase (Critic)
- ✅ critic_a1b2c3 (completed)
**Total**: 1/1 completed

### P1 Phase (High Priority)
- ✅ frontend_component_d4e5f6 (completed)
- ✅ frontend_service_g7h8i9 (completed)
- ✅ test_playwright_j0k1l2 (completed)
**Total**: 3/3 completed

### P2 Phase (Medium Priority)
- ✅ reviewer_product_m3n4o5 (completed)
**Total**: 1/1 completed

### P3 Phase (Low Priority)
- ✅ reviewer_tech_p6q7r8 (completed)
**Total**: 1/1 completed

### END Phase
- ✅ move_task_spec (completed)
- ✅ persist_git (completed)
- ✅ github_push_mr (completed)
**Total**: 3/3 completed

**Grand Total**: 11/11 subtasks completed (100%)

## Visual Verification

### Screenshots
- **Desktop**: 5 screenshots
- **Mobile**: 5 screenshots
- **Tablet**: 5 screenshots
- **Total**: 15 screenshots

### Build Status
- ✅ Compilation: SUCCESS
- ✅ Build Time: 45s
- ✅ No Errors

### Startup Status
- ✅ Dev Server: STARTED
- ✅ Health Check: PASSED

### Issues Found
- None

## Pull Request

- **URL**: https://github.com/sembot-io/sembot-angular/pull/123
- **Branch**: feature/DEV-7315 → master
- **Assignee**: @techleadgithub
- **Status**: Open (ready for review)

## Final Checklist

- [x] All requirements from task.md implemented
- [x] All P0/P1 subtasks completed successfully
- [x] Code changes committed to working branch
- [x] Visual verification passed (15 screenshots)
- [x] Build completed successfully
- [x] Pull request created
- [x] Assignee set correctly

## Recommendation

✅ **READY FOR REVIEW**

All requirements have been met. Code is ready for team review and merge.

## Evidence Location

/tasks/done/DEV-7315/ ├── verification/ │ ├── screenshots/ # 15 screenshots │ ├── visual_verification_report.md │ └── final_verification_report.md ├── artifacts/ │ └── logs/ # All execution logs └── subtasks/ # All completed subtasks

Follow-up Task Creation

Jeśli weryfikacja wykryje problemy (REQUIRES FIXES), system automatycznie tworzy follow-up task.

Trigger

bash

# Po final_task_verification
if grep -q "REQUIRES FIXES" final_verification_report.md; then
  # Uruchom analizę
  /analyze_verification_results /task

  # Jeśli decision = "create_followup"
  ./create_followup_task.sh DEV-7315
fi

Struktura Follow-up

Task ID: {ORIGINAL_ID}-FIX-{N}

Przykład: DEV-7315 → DEV-7315-FIX-1

task.md follow-up:

markdown

# Fix Issues from DEV-7315 Verification

## Parent Task
- **Original**: DEV-7315 - Settings UI Unification
- **Evidence**: `/tasks/done/DEV-7315/verification/`

## Issues Summary
Build failed with 2 compilation errors. Visual verification
found 1 critical bug (menu icons missing on mobile).

## Detailed Issues

### Critical (P0)
1. **Build Failed** - TypeScript compilation error in settings.component.ts:45

Property 'iconVisible' does not exist on type 'SettingsComponent'


2. **Visual Bug** - Menu icons not visible on mobile viewport
- Screenshot: `23-mobile-dashboard-settings.png`
- Expected: Icons should be visible with proper spacing
- Actual: Icons hidden, only text labels visible

### Major (P1)
1. **Incomplete Requirement** - User profile picture upload not implemented
- Originally required in task.md point 5
- Not found in any committed code

## Evidence Location

/tasks/done/DEV-7315/verification/ ├── screenshots/ │ └── 23-mobile-dashboard-settings.png # Shows missing icons ├── visual_verification_report.md # Build errors detailed here └── final_verification_report.md # Summary of all issues


## Success Criteria

- ✅ All TypeScript compilation errors fixed
- ✅ Menu icons visible on mobile (verified by screenshot)
- ✅ User profile picture upload implemented
- ✅ Visual verification: PASSED
- ✅ Final verification: READY FOR REVIEW

Maksymalna liczba Follow-upów

System ogranicza do 10 follow-upów na task (infinite loop prevention):

bash

# W create_followup_task.sh
FIX_NUMBER=$(echo "$TASK_ID" | grep -oE 'FIX-[0-9]+' | grep -oE '[0-9]+' || echo "0")
NEXT_FIX=$((FIX_NUMBER + 1))

if [ "$NEXT_FIX" -gt 10 ]; then
  echo "❌ Maximum follow-ups reached (10). Manual intervention required."
  send_webhook "task_max_followups_exceeded" "$TASK_ID"
  exit 1
fi

Error Handling

Build Failed

markdown

## Build Status
- ❌ Compilation: FAILED
- Build Time: N/A
- Errors: 2

### Errors
1. src/app/dashboard/settings/settings.component.ts:45:12
   Property 'iconVisible' does not exist on type 'SettingsComponent'

2. src/app/shared/components/menu-icon/menu-icon.component.ts:23:5
   Type 'string' is not assignable to type 'IconType'

## Status
❌ **REQUIRES FIXES** (build failed)

Startup Failed

markdown

## Startup Status
- ❌ Dev Server: FAILED
- Startup Time: timeout after 60s
- Health Check: FAILED

### Error Log (last 30 lines)

[error] Failed to compile. [error] Module not found: Error: Can't resolve './icon-config' [error] in /workspace/sembot-angular/src/app/shared/components/menu-icon


## Status
❌ **REQUIRES FIXES** (startup failed)

Screenshots Failed

markdown

## Screenshots Status
- Desktop: 3/5 (2 failed)
- Mobile: 0/5 (5 failed - navigation error)
- Tablet: 5/5

### Failed Screenshots
- desktop-user-profile.png - Timeout waiting for selector '.profile-loaded'
- desktop-settings-team.png - Page crashed (out of memory)
- mobile-* - All failed due to authentication issues

## Status
⚠️ **PARTIAL SUCCESS** (some screenshots missing)

Monitoring

Sprawdzanie statusu weryfikacji

bash

# Status visual verification
cat tasks/done/DEV-7315/verification/visual_verification_report.md

# Status final verification
cat tasks/done/DEV-7315/verification/final_verification_report.md

# Lista screenshotów
ls -lh tasks/done/DEV-7315/verification/screenshots/

# Logi weryfikacji
cat tasks/done/DEV-7315/artifacts/logs/visual_verification.log

Debugging

bash

# Jeśli build failuje
cat tasks/done/DEV-7315/verification/build.log

# Jeśli startup failuje
cat tasks/done/DEV-7315/verification/startup.log

# Logi Playwright
cat tasks/done/DEV-7315/verification/playwright.log

Best Practices

1. Konfiguruj .visual_verification.json

Zawsze dodaj plik .visual_verification.json do repozytorium:

bash

# W root repozytorium
touch .visual_verification.json

2. Testuj route'y krytyczne

Skup się na najważniejszych ścieżkach:

json

{
  "routes": [
    {"path": "/login", "requiresAuth": false},
    {"path": "/dashboard", "requiresAuth": true},
    {"path": "/user/profile", "requiresAuth": true}
  ]
}

3. Różne viewporty

Zawsze testuj przynajmniej desktop i mobile:

json

{
  "viewports": [
    {"name": "desktop", "width": 1920, "height": 1080},
    {"name": "mobile", "width": 375, "height": 812}
  ]
}

4. Health check przed screenshotami

Upewnij się że aplikacja się załadowała:

json

{
  "playwright": {
    "waitForSelector": ".app-loaded",
    "timeout": 30000
  }
}

Changelog

v2.1 - Follow-up Tasks

✅ Automatyczne tworzenie follow-up tasków
✅ Analiza raportów przez AI
✅ Infinite loop prevention (max 10)

v2.0 - Visual Verification

✅ Automatyczne screenshoty
✅ Multi-viewport support
✅ Environment auto-detection
✅ Playwright integration

v1.0 - Basic Verification

✅ Build verification
✅ Final task checklist
✅ Requirements validation

System Weryfikacji (Verification System) ​

Przegląd ​

Visual Verification ​

Cel ​

Workflow ​

Konfiguracja per Repozytorium ​

Auto-detekcja Środowiska ​

Screenshot Naming Convention ​

Docker Integration ​

Playwright Test Example ​

Raport Weryfikacji Wizualnej ​

Final Task Verification ​

Cel ​

Workflow ​

Raport Końcowy ​

Follow-up Task Creation ​

Trigger ​

Struktura Follow-up ​

Maksymalna liczba Follow-upów ​

Error Handling ​

Build Failed ​

Startup Failed ​

Screenshots Failed ​

Monitoring ​

Sprawdzanie statusu weryfikacji ​

Debugging ​

Best Practices ​

1. Konfiguruj .visual_verification.json ​

2. Testuj route'y krytyczne ​

3. Różne viewporty ​

4. Health check przed screenshotami ​

Changelog ​

v2.1 - Follow-up Tasks ​

v2.0 - Visual Verification ​

v1.0 - Basic Verification ​

System Weryfikacji (Verification System)

Przegląd

Visual Verification

Cel

Workflow

Konfiguracja per Repozytorium

Auto-detekcja Środowiska

Screenshot Naming Convention

Docker Integration

Playwright Test Example

Raport Weryfikacji Wizualnej

Final Task Verification

Cel

Workflow

Raport Końcowy

Follow-up Task Creation

Trigger

Struktura Follow-up

Maksymalna liczba Follow-upów

Error Handling

Build Failed

Startup Failed

Screenshots Failed

Monitoring

Sprawdzanie statusu weryfikacji

Debugging

Best Practices

1. Konfiguruj .visual_verification.json

2. Testuj route'y krytyczne

3. Różne viewporty

4. Health check przed screenshotami

Changelog

v2.1 - Follow-up Tasks

v2.0 - Visual Verification

v1.0 - Basic Verification