Implements offline-first calendar sync infrastructure

Adds IndexedDB and operation queue for robust offline synchronization
Introduces SyncManager to handle background data synchronization
Supports local event operations with automatic remote sync queuing

Enhances application reliability and user experience in low/no connectivity scenarios
This commit is contained in:
Janus C. H. Knudsen 2025-11-05 00:37:57 +01:00
parent 9c765b35ab
commit e7011526e3
20 changed files with 3822 additions and 57 deletions

View file

@ -0,0 +1,130 @@
# 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.