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