131 lines
4.3 KiB
Markdown
131 lines
4.3 KiB
Markdown
|
|
# Integration Testing
|
||
|
|
|
||
|
|
Denne folder indeholder integration test pages til offline-first calendar funktionalitet.
|
||
|
|
|
||
|
|
## Test Filer
|
||
|
|
|
||
|
|
### Test Pages
|
||
|
|
- **`offline-test.html`** - Interaktiv CRUD testing playground
|
||
|
|
- **`sync-visualization.html`** - Live monitoring af sync queue og IndexedDB
|
||
|
|
|
||
|
|
### Data & Scripts
|
||
|
|
- **`test-events.json`** - 10 test events til seeding af IndexedDB
|
||
|
|
- **`test-init.js`** - Standalone initialisering af IndexedDB, queue, event manager og sync manager
|
||
|
|
|
||
|
|
## Sådan Bruges Test Siderne
|
||
|
|
|
||
|
|
### 1. Start Development Server
|
||
|
|
Test siderne skal køres via en web server (ikke file://) for at kunne loade test-events.json:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Fra root af projektet
|
||
|
|
npm run dev
|
||
|
|
# eller
|
||
|
|
npx http-server -p 8080
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. Åbn Test Siderne
|
||
|
|
Naviger til:
|
||
|
|
- `http://localhost:8080/test/integrationtesting/offline-test.html`
|
||
|
|
- `http://localhost:8080/test/integrationtesting/sync-visualization.html`
|
||
|
|
|
||
|
|
### 3. Test Offline Mode
|
||
|
|
1. Åbn DevTools (F12)
|
||
|
|
2. Gå til Network tab
|
||
|
|
3. Aktiver "Offline" mode
|
||
|
|
4. Test CRUD operationer - de skulle gemmes lokalt i IndexedDB
|
||
|
|
5. Deaktiver "Offline" mode
|
||
|
|
6. Observer sync queue blive processeret
|
||
|
|
|
||
|
|
## Test Pages Detaljer
|
||
|
|
|
||
|
|
### offline-test.html
|
||
|
|
Interaktiv testing af:
|
||
|
|
- ✅ Create timed events
|
||
|
|
- ✅ Create all-day events
|
||
|
|
- ✅ Update event title
|
||
|
|
- ✅ Toggle all-day status
|
||
|
|
- ✅ Delete events
|
||
|
|
- ✅ List all events
|
||
|
|
- ✅ Show operation queue
|
||
|
|
- ✅ Trigger manual sync
|
||
|
|
- ✅ Clear all data
|
||
|
|
|
||
|
|
### sync-visualization.html
|
||
|
|
Live monitoring af:
|
||
|
|
- 📊 IndexedDB events med sync status badges
|
||
|
|
- 📊 Operation queue med retry counts
|
||
|
|
- 📊 Statistics (synced/pending/error counts)
|
||
|
|
- 📊 Real-time sync log
|
||
|
|
- 🔄 Auto-refresh hver 2 sekunder
|
||
|
|
- ⏱️ Last sync timestamp i status bar
|
||
|
|
|
||
|
|
## Teknisk Implementation
|
||
|
|
|
||
|
|
### test-init.js
|
||
|
|
Standalone JavaScript fil der initialiserer:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
window.calendarDebug = {
|
||
|
|
indexedDB, // TestIndexedDBService instance
|
||
|
|
queue, // TestOperationQueue instance
|
||
|
|
eventManager, // TestEventManager instance
|
||
|
|
syncManager // TestSyncManager instance
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**Forskel fra main app:**
|
||
|
|
- Ingen NovaDI dependency injection
|
||
|
|
- Ingen DOM afhængigheder (swp-calendar-container etc.)
|
||
|
|
- Simplified event manager uden event bus
|
||
|
|
- Mock sync manager med simuleret API logic (80% success, 20% failure rate)
|
||
|
|
- Auto-seed fra test-events.json hvis IndexedDB er tom
|
||
|
|
- Pending events fra seed får automatisk queue operations
|
||
|
|
|
||
|
|
**TestSyncManager Behavior:**
|
||
|
|
- ✅ Tjekker `navigator.onLine` før sync (respekterer offline mode)
|
||
|
|
- ✅ Simulerer netværk delay (100-500ms per operation)
|
||
|
|
- ✅ 80% chance for success → fjerner fra queue, markerer som 'synced'
|
||
|
|
- ✅ 20% chance for failure → incrementerer retryCount
|
||
|
|
- ✅ Efter 5 fejl → markerer event som 'error' og fjerner fra queue
|
||
|
|
- ✅ Viser detaljeret logging i console
|
||
|
|
- ✅ Network listeners opdaterer online/offline status automatisk
|
||
|
|
|
||
|
|
### Data Flow
|
||
|
|
```
|
||
|
|
User Action → EventManager
|
||
|
|
→ IndexedDB (saveEvent)
|
||
|
|
→ OperationQueue (enqueue)
|
||
|
|
→ SyncManager (background sync når online)
|
||
|
|
```
|
||
|
|
|
||
|
|
### Database Isolation
|
||
|
|
Test-siderne bruger **`CalendarDB_Test`** som database navn, mens main calendar app bruger **`CalendarDB`**. Dette sikrer at test data IKKE blandes med produktions data. De to systemer er helt isolerede fra hinanden.
|
||
|
|
|
||
|
|
## Troubleshooting
|
||
|
|
|
||
|
|
### "Calendar system failed to initialize"
|
||
|
|
- Kontroller at du kører via web server (ikke file://)
|
||
|
|
- Check browser console for fejl
|
||
|
|
- Verificer at test-init.js loades korrekt
|
||
|
|
|
||
|
|
### "Could not load test-events.json"
|
||
|
|
- Normal warning hvis IndexedDB allerede har data
|
||
|
|
- For at reset: Open DevTools → Application → IndexedDB → Delete CalendarDB
|
||
|
|
|
||
|
|
### Events forsvinder efter refresh
|
||
|
|
- Dette skulle IKKE ske - IndexedDB persisterer data
|
||
|
|
- Hvis det sker: Check console for IndexedDB errors
|
||
|
|
- Verificer at browser ikke er i private/incognito mode
|
||
|
|
|
||
|
|
### Test events vises i prod calendar
|
||
|
|
- Test-siderne bruger `CalendarDB_Test` database
|
||
|
|
- Main calendar bruger `CalendarDB` database
|
||
|
|
- Hvis de blandes: Clear begge databases i DevTools → Application → IndexedDB
|
||
|
|
|
||
|
|
## Development Notes
|
||
|
|
|
||
|
|
Test siderne bruger IKKE den compiled calendar.js bundle. De er helt standalone og initialiserer deres egne services direkte. Dette gør dem hurtigere at udvikle på og lettere at debugge.
|
||
|
|
|
||
|
|
Når API backend implementeres skal `TestSyncManager` opdateres til at lave rigtige HTTP calls i stedet for mock sync.
|