- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
131 lines
3.8 KiB
Markdown
131 lines
3.8 KiB
Markdown
# ATDD Checklist - Epic 3: "My Legacy" - History, Offline Sync & PWA Polish
|
|
|
|
**Date:** 2026-01-23
|
|
**Author:** Max
|
|
**Primary Test Level:** Integration
|
|
|
|
---
|
|
|
|
## Story Summary
|
|
|
|
Implement History Feed with Offline Sync capabilities and PWA polish. Users need to access their chat history offline, delete entries, and have changes synced when back online.
|
|
|
|
**As a** User
|
|
**I want** to access and manage my chat history offline
|
|
**So that** I don't lose context or data when connection drops
|
|
|
|
---
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Offline actions (save, delete) are queued when network is unavailable.
|
|
2. Queue is replayed automatically when connection is restored.
|
|
3. Deleting an entry removes it from UI immediately (optimistic) and persists to DB.
|
|
4. Initial load shows empty state for new users.
|
|
|
|
---
|
|
|
|
## Failing Tests Created (RED Phase)
|
|
|
|
### Integration Tests (4 tests)
|
|
|
|
**File:** `tests/integration/offline-action-queueing.test.ts`
|
|
- ✅ **Test:** should enqueue SAVE_DRAFT action when offline
|
|
- **Status:** RED - Expected true to be false
|
|
- **Verifies:** Action is added to Dexie 'syncQueue' table
|
|
- ✅ **Test:** should enqueue DELETE_ENTRY action when offline
|
|
- **Status:** RED - Expected true to be false
|
|
- **Verifies:** Delete action is queued
|
|
|
|
**File:** `tests/integration/sync-action-replay.test.ts`
|
|
- ✅ **Test:** should process pending actions when network restores
|
|
- **Status:** RED - Expected true to be false
|
|
- **Verifies:** Queue is processed and API called
|
|
|
|
**File:** `tests/integration/deletion-persistence.test.ts`
|
|
- ✅ **Test:** should permanently remove item from Dexie DB
|
|
- **Status:** RED - Expected true to be false
|
|
- **Verifies:** Data is removed from IndexedDB
|
|
|
|
### Component Tests (1 test)
|
|
|
|
**File:** `tests/component/DeleteEntryDialog.test.tsx`
|
|
- ✅ **Test:** should show dialog and optimistically remove item from UI on confirm
|
|
- **Status:** RED - Expected true to be false
|
|
- **Verifies:** UI interaction and callback
|
|
|
|
### E2E Tests (1 test)
|
|
|
|
**File:** `tests/e2e/initial-load.spec.ts`
|
|
- ✅ **Test:** should render empty state history feed for new user
|
|
- **Status:** RED - Element not found
|
|
- **Verifies:** Empty state UX
|
|
|
|
---
|
|
|
|
## Data Factories Created
|
|
|
|
**File:** `tests/support/factories/history-entry.factory.ts`
|
|
|
|
- `createChatSession(overrides?)` - Random chat session
|
|
- `createChatSessions(count)` - Array of sessions
|
|
|
|
## Fixtures Created
|
|
|
|
**File:** `tests/support/fixtures/offline.fixture.ts`
|
|
|
|
- `offline` - Offline simulation
|
|
- `goOffline(context)` - Disables network and dispatches events
|
|
- `goOnline(context)` - Restores network
|
|
|
|
**File:** `tests/support/fixtures/db.fixture.ts`
|
|
|
|
- `db` - IndexedDB Helpers
|
|
- `resetDb()` - Clears database
|
|
- `seedHistory(data)` - Seeds initial data
|
|
|
|
---
|
|
|
|
## Implementation Checklist
|
|
|
|
### Test: Offline Action Queueing
|
|
|
|
**File:** `tests/integration/offline-action-queueing.test.ts`
|
|
|
|
- [ ] Create `SyncManager` service
|
|
- [ ] Implement `ActionQueue` using Dexie
|
|
- [ ] Implement `enqueue` method in SyncManager
|
|
- [ ] Run test: `npx playwright test tests/integration/offline-action-queueing.test.ts`
|
|
- [ ] ✅ Test passes
|
|
|
|
### Test: Sync Action Replay
|
|
|
|
**File:** `tests/integration/sync-action-replay.test.ts`
|
|
|
|
- [ ] Implement `processQueue` method in SyncManager
|
|
- [ ] Add network event listeners
|
|
- [ ] Implement API client retries
|
|
- [ ] Run test: `npx playwright test tests/integration/sync-action-replay.test.ts`
|
|
- [ ] ✅ Test passes
|
|
|
|
---
|
|
|
|
## Red-Green-Refactor Workflow
|
|
|
|
### RED Phase (Complete) ✅
|
|
|
|
- ✅ All tests written and failing
|
|
- ✅ Fixtures and factories created
|
|
- ✅ Implementation checklist created
|
|
|
|
### GREEN Phase (DEV Team - Next Steps)
|
|
|
|
1. **Pick one failing test** from checklist
|
|
2. **Implement minimal code** to make it pass
|
|
3. **Run the test** to verify green
|
|
4. **Repeat** until all passed
|
|
|
|
---
|
|
|
|
**Generated by BMad TEA Agent** - 2026-01-23
|