Calendar/test/integrationtesting
Janus C. H. Knudsen e7011526e3 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
2025-11-05 00:37:57 +01:00
..
offline-test.html Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00
README.md Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00
stacking-visualization-new.html Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00
stacking-visualization.html Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00
sync-visualization.html Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00
test-events.json Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00
test-init.js Implements offline-first calendar sync infrastructure 2025-11-05 00:37:57 +01:00

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:

# 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:

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.