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 |
||
|---|---|---|
| .. | ||
| offline-test.html | ||
| README.md | ||
| stacking-visualization-new.html | ||
| stacking-visualization.html | ||
| sync-visualization.html | ||
| test-events.json | ||
| test-init.js | ||
Integration Testing
Denne folder indeholder integration test pages til offline-first calendar funktionalitet.
Test Filer
Test Pages
offline-test.html- Interaktiv CRUD testing playgroundsync-visualization.html- Live monitoring af sync queue og IndexedDB
Data & Scripts
test-events.json- 10 test events til seeding af IndexedDBtest-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:
# 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.htmlhttp://localhost:8080/test/integrationtesting/sync-visualization.html
3. Test Offline Mode
- Åbn DevTools (F12)
- Gå til Network tab
- Aktiver "Offline" mode
- Test CRUD operationer - de skulle gemmes lokalt i IndexedDB
- Deaktiver "Offline" mode
- 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:
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.onLinefø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_Testdatabase - Main calendar bruger
CalendarDBdatabase - 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.