# Manual Browser Test Plan: TypeStudio

Follow this step-by-step checklist to test the entire application lifecycle from your web browser.

---

## 1. Authentication & Session Security
- [ ] Visit `/` while logged out: confirms redirect to `/login`.
- [ ] Enter invalid password: verify error message appears and form does not log in.
- [ ] Log in with `admin@typestudio.local` and `Admin1234!#`: verifies successful redirection to `/dashboard`.
- [ ] Click **Logout**: verifies session is cleared and redirects back to `/login`.

---

## 2. Interactive Video Editor & Real-Time Preview
- [ ] Open **+ Create Video** (`/editor`).
- [ ] Verify the capability badge displays **WebCodecs MP4 Ready** in Chrome/Edge/Safari.
- [ ] Enter a multi-line quote in the text script textarea.
- [ ] Change typing appearance mode:
  - Test **Character-by-character**
  - Test **Word-by-word**
  - Test **Line-by-line**
  - Test **Sentence-by-sentence**
- [ ] Click **Play Preview**: verify text types out smoothly on the canvas.
- [ ] Adjust **Typing Speed** slider and verify estimated duration recalculates in real-time.
- [ ] Drag the timeline scrubber: verify text and cursor update to the exact time position.
- [ ] Toggle **Safe Guides**: verify TikTok / Instagram Reels safety margins overlay on the preview canvas.

---

## 3. Web Audio Typing Sound Engine
- [ ] Click **Sound Check**: verify an instant keystroke audio click sounds.
- [ ] Switch keyboard profile between **Mechanical**, **Typewriter**, and **Soft Laptop**.
- [ ] Adjust the volume slider and verify preview playback audio level reflects the change.
- [ ] Uncheck the **Audio** toggle and verify playback is muted.

---

## 4. Background Customization
- [ ] Select **Two-Tone Linear Gradient**: change start and end colors; verify canvas background updates.
- [ ] Select **Custom Upload (Image)**: choose a local JPG or PNG; verify the image renders with subtle Ken Burns drift motion.
- [ ] Adjust the **Dark Overlay** slider: verify readability of white text over high-contrast images.

---

## 5. Browser-Based MP4 Export & Download
- [ ] Click **Render & Export MP4**.
- [ ] Verify modal appears showing real-time progress bar (0% → 100%), elapsed time, and ETA.
- [ ] Click **Download MP4**: verify a genuine `.mp4` file is downloaded to your computer.
- [ ] Open the downloaded `.mp4` in VLC or Windows Media Player:
  - Verify container is valid MP4 (H.264 video codec).
  - Verify realistic typing sound audio track is synchronized and audible in the video file.

---

## 6. Media Library & Storage
- [ ] In the export modal, click **Save & Schedule**.
- [ ] Verify the video is uploaded to the protected media library at `/media`.
- [ ] Verify the file is stored under `storage/app/private/media/` and is not directly accessible without signature.

---

## 7. Multi-Platform Post Composer & Scheduling
- [ ] Navigate to **Social Accounts** (`/accounts`) and click **+ Connect Test Mock Account**.
- [ ] Navigate to **Compose Post** (`/posts/create`).
- [ ] Select the newly rendered MP4 video.
- [ ] Select the connected target accounts.
- [ ] Enter captions and verify character counts update.
- [ ] Choose **Schedule for Future Date/Time** in Africa/Nairobi (EAT) time.
- [ ] Submit form: verify post appears in `/calendar` and `/posts`.

---

## 8. Background Cron Execution
- [ ] Test the background cron command in terminal:
  ```bash
  php artisan studio:publish-due
  ```
- [ ] Verify the scheduler claims due posts atomically, executes publication, records attempt logs, and marks the post as **Published** in the dashboard.