3fbbb1a93b
- 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>
76 lines
2.2 KiB
Markdown
76 lines
2.2 KiB
Markdown
# ATDD Checklist - Epic 3, Story 3.4: PWA Polish
|
|
|
|
**Date:** 2026-01-26
|
|
**Author:** BMad TEA Agent
|
|
**Primary Test Level:** Integration & Component
|
|
|
|
---
|
|
|
|
## Story Summary
|
|
|
|
**As a** mobile user
|
|
**I want** to install the app to my home screen
|
|
**So that** I can access it easily and use it offline like a native app.
|
|
|
|
---
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. **Valid Manifest**: App serves a valid `manifest.webmanifest` with name "Test01", standalone mode, and required icons.
|
|
2. **Install Prompt**: An in-app UI prompt appears when the browser determines the app is installable (`beforeinstallprompt` event).
|
|
3. **Offline Access**: App works offline (already covered by Story 3.3).
|
|
4. **Icons**: 192px and 512px icons are available.
|
|
|
|
---
|
|
|
|
## Failing Tests Created (RED Phase)
|
|
|
|
### Integration Tests (1 file)
|
|
|
|
**File:** `tests/integration/pwa-manifest.test.ts`
|
|
- ✅ **Test:** should serve a valid manifest.webmanifest
|
|
- **Status:** RED (Next.js config might not be serving it at this route yet, or content mismatch).
|
|
- **Verifies:** JSON content, headers, and icon references.
|
|
- ✅ **Test:** should have accessible icon files
|
|
- **Status:** GREEN (Icons verified in public folder), but ensures they are served.
|
|
|
|
### Component Tests (1 file)
|
|
|
|
**File:** `src/components/features/pwa/install-prompt.test.tsx`
|
|
- ✅ **Test:** should appear when beforeinstallprompt event fires
|
|
- **Status:** RED - Component does not exist.
|
|
- **Verifies:** Event listener logic and UI rendering.
|
|
- ✅ **Test:** calls prompt() when "Install" is clicked
|
|
- **Status:** RED - Component logic missing.
|
|
|
|
---
|
|
|
|
## Implementation Checklist
|
|
|
|
### Core Config
|
|
|
|
- [ ] Verify `manifest.ts` output path (Next.js App Router).
|
|
- [ ] Ensure `manifest.webmanifest` or `manifest.json` route works.
|
|
|
|
### Component: InstallPrompt
|
|
|
|
**File:** `src/components/features/pwa/install-prompt.tsx`
|
|
|
|
- [ ] Create `InstallPrompt` component.
|
|
- [ ] Add `useEffect` listener for `beforeinstallprompt`.
|
|
- [ ] Implement "Install" button calling `deferredPrompt.prompt()`.
|
|
- [ ] Implement "Not Now" button to hide UI.
|
|
- [ ] Integrate into `src/app/layout.tsx` or `page.tsx`.
|
|
|
|
---
|
|
|
|
## Running Tests
|
|
|
|
```bash
|
|
# Component Test
|
|
npx vitest run install-prompt.test.tsx
|
|
|
|
# Integration Test
|
|
npx playwright test pwa-manifest.test.ts
|
|
```
|