Files
brachnha-insight/_bmad-output/implementation-artifacts/atdd-checklist-story-3-4.md
Max 3fbbb1a93b Initial commit: Brachnha Insight project setup
- 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>
2026-01-26 12:28:43 +07:00

2.2 KiB

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

# Component Test
npx vitest run install-prompt.test.tsx

# Integration Test
npx playwright test pwa-manifest.test.ts