docs(18): create phase plan
Phase 18: Integration Tests (Playwright) - 1 plan in 1 wave - 1 autonomous - Ready for execution
This commit is contained in:
Nuwan
parent
58e421d0bc
commit
f2c3e0e5f6
|
|
@ -355,7 +355,7 @@ Plans:
|
|||
5. All tests pass with `npx playwright test session-settings`
|
||||
|
||||
Plans:
|
||||
- [ ] 18-01-PLAN.md — Playwright integration tests for Session Settings modal
|
||||
- [ ] 18-01-PLAN.md — Playwright integration tests for Session Settings modal (INT-01, INT-02, INT-03)
|
||||
|
||||
## Progress
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,221 @@
|
|||
---
|
||||
phase: 18-integration-tests-playwright
|
||||
plan: 01
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- jam-ui/test/session-settings/session-settings.spec.ts
|
||||
autonomous: true
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Settings button click opens Session Settings modal"
|
||||
- "Save button triggers PUT /sessions/{id} API call with correct payload"
|
||||
- "Cancel button closes modal without API call"
|
||||
artifacts:
|
||||
- path: "jam-ui/test/session-settings/session-settings.spec.ts"
|
||||
provides: "Playwright integration tests for Session Settings modal"
|
||||
min_lines: 80
|
||||
contains: "test.describe('Session Settings Modal'"
|
||||
key_links:
|
||||
- from: "jam-ui/test/session-settings/session-settings.spec.ts"
|
||||
to: "JKSessionScreen Settings button"
|
||||
via: "locator for img[alt='Settings'] or button:has-text('Settings')"
|
||||
pattern: "Settings"
|
||||
- from: "jam-ui/test/session-settings/session-settings.spec.ts"
|
||||
to: "PUT /sessions/{id} API"
|
||||
via: "page.route or APIInterceptor"
|
||||
pattern: "/sessions/"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Create Playwright integration tests for Session Settings modal covering user flows: opening modal, saving settings (API call verification), and canceling.
|
||||
|
||||
Purpose: Complete Phase 18 of v1.3 Session Settings Tests milestone by validating end-to-end user flows for the Settings modal, ensuring the feature works correctly in a browser environment.
|
||||
|
||||
Output: `jam-ui/test/session-settings/session-settings.spec.ts` with tests for INT-01, INT-02, INT-03 requirements.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@/Users/nuwan/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@/Users/nuwan/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
|
||||
# Key source files
|
||||
@jam-ui/src/components/client/JKSessionScreen.js (lines 1266-1268 for Settings button, 1529-1573 for modal rendering)
|
||||
@jam-ui/src/components/client/JKSessionSettingsModal.js (modal component)
|
||||
@jam-ui/src/helpers/rest.js (lines 899-909 for updateSessionSettings)
|
||||
|
||||
# Existing test patterns to follow
|
||||
@jam-ui/test/chat/chat-button.spec.ts (pattern for session screen button tests)
|
||||
@jam-ui/test/utils/test-helpers.ts (loginToJamUI, createAndJoinSession)
|
||||
@jam-ui/test/utils/api-interceptor.ts (APIInterceptor for capturing API calls)
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Create test file with setup and modal opening test (INT-01)</name>
|
||||
<files>jam-ui/test/session-settings/session-settings.spec.ts</files>
|
||||
<action>
|
||||
Create the test file at `jam-ui/test/session-settings/session-settings.spec.ts` with:
|
||||
|
||||
1. Import statements:
|
||||
- `test, expect` from `@playwright/test`
|
||||
- `loginToJamUI, createAndJoinSession` from `../utils/test-helpers`
|
||||
- `APIInterceptor` from `../utils/api-interceptor`
|
||||
|
||||
2. Test describe block: `test.describe('Session Settings Modal', () => { ... })`
|
||||
|
||||
3. beforeEach hook:
|
||||
- Call `loginToJamUI(page)`
|
||||
- Call `createAndJoinSession(page)`
|
||||
|
||||
4. INT-01 test: `test('INT-01: Settings button opens modal', async ({ page }) => { ... })`
|
||||
- Locate Settings button: `page.locator('button:has-text("Settings")')` or `page.locator('img[alt="Settings"]')`
|
||||
- Click the button
|
||||
- Verify modal opens: `await expect(page.locator('text=Session Settings')).toBeVisible()`
|
||||
- Verify form elements visible: privacy select (`[data-testid="session-privacy"]`), description textarea, Save/Cancel buttons
|
||||
|
||||
Pattern reference: Follow `chat-button.spec.ts` structure for beforeEach and locator patterns.
|
||||
</action>
|
||||
<verify>
|
||||
```bash
|
||||
cd /Users/nuwan/Code/jam-cloud/jam-ui && npx playwright test session-settings --grep "INT-01"
|
||||
```
|
||||
Test should pass or fail with clear assertion error (not syntax error).
|
||||
</verify>
|
||||
<done>Test file exists with INT-01 test that verifies Settings button click opens the modal with expected form elements.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Add save settings test with API verification (INT-02)</name>
|
||||
<files>jam-ui/test/session-settings/session-settings.spec.ts</files>
|
||||
<action>
|
||||
Add INT-02 test to verify save functionality makes correct API call:
|
||||
|
||||
1. INT-02 test: `test('INT-02: Save settings makes PUT /sessions/{id} API call', async ({ page }) => { ... })`
|
||||
|
||||
2. Setup API interception using `page.route()`:
|
||||
```typescript
|
||||
let capturedRequest: { url: string; method: string; body: any } | null = null;
|
||||
|
||||
await page.route('**/api/sessions/*', async (route, request) => {
|
||||
if (request.method() === 'PUT') {
|
||||
capturedRequest = {
|
||||
url: request.url(),
|
||||
method: request.method(),
|
||||
body: JSON.parse(request.postData() || '{}')
|
||||
};
|
||||
}
|
||||
await route.continue();
|
||||
});
|
||||
```
|
||||
|
||||
3. Open Settings modal (click Settings button)
|
||||
|
||||
4. Modify form values:
|
||||
- Change privacy select: `await page.selectOption('[data-testid="session-privacy"]', '1')` (public)
|
||||
- Change description: `await page.fill('textarea[name="description"]', 'Updated test description')`
|
||||
|
||||
5. Click Save button: `await page.click('button:has-text("Save")')`
|
||||
|
||||
6. Wait for API call and verify:
|
||||
- `expect(capturedRequest).not.toBeNull()`
|
||||
- `expect(capturedRequest?.method).toBe('PUT')`
|
||||
- `expect(capturedRequest?.url).toMatch(/\/api\/sessions\/[a-f0-9-]+$/)`
|
||||
- `expect(capturedRequest?.body).toHaveProperty('description', 'Updated test description')`
|
||||
- Verify payload includes privacy-related fields (`musician_access`, `approval_required`)
|
||||
|
||||
7. Verify modal closes after save: `await expect(page.locator('text=Session Settings')).not.toBeVisible({ timeout: 5000 })`
|
||||
|
||||
Pattern reference: See `jam-ui/test/chat/send-message.spec.ts` line 132 for page.route pattern.
|
||||
</action>
|
||||
<verify>
|
||||
```bash
|
||||
cd /Users/nuwan/Code/jam-cloud/jam-ui && npx playwright test session-settings --grep "INT-02"
|
||||
```
|
||||
Test should pass, verifying PUT /sessions/{id} was called with correct payload.
|
||||
</verify>
|
||||
<done>INT-02 test verifies that clicking Save makes PUT /sessions/{id} API call with correct payload (description, privacy fields).</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 3: Add cancel test verifying no API call (INT-03)</name>
|
||||
<files>jam-ui/test/session-settings/session-settings.spec.ts</files>
|
||||
<action>
|
||||
Add INT-03 test to verify cancel closes modal without API call:
|
||||
|
||||
1. INT-03 test: `test('INT-03: Cancel closes modal without API call', async ({ page }) => { ... })`
|
||||
|
||||
2. Setup API tracking to detect any PUT calls:
|
||||
```typescript
|
||||
let apiCallMade = false;
|
||||
|
||||
await page.route('**/api/sessions/*', async (route, request) => {
|
||||
if (request.method() === 'PUT') {
|
||||
apiCallMade = true;
|
||||
}
|
||||
await route.continue();
|
||||
});
|
||||
```
|
||||
|
||||
3. Open Settings modal (click Settings button)
|
||||
|
||||
4. Verify modal is open: `await expect(page.locator('text=Session Settings')).toBeVisible()`
|
||||
|
||||
5. Optionally modify form values (to ensure cancel truly discards changes):
|
||||
- Change description: `await page.fill('textarea[name="description"]', 'This should be discarded')`
|
||||
|
||||
6. Click Cancel button: `await page.click('button:has-text("Cancel")')`
|
||||
|
||||
7. Verify modal closes: `await expect(page.locator('text=Session Settings')).not.toBeVisible({ timeout: 5000 })`
|
||||
|
||||
8. Verify NO API call was made: `expect(apiCallMade).toBe(false)`
|
||||
|
||||
9. (Optional) Reopen modal and verify description is back to original value (not the discarded text)
|
||||
</action>
|
||||
<verify>
|
||||
```bash
|
||||
cd /Users/nuwan/Code/jam-cloud/jam-ui && npx playwright test session-settings --grep "INT-03"
|
||||
```
|
||||
Test should pass, verifying Cancel closes modal without making PUT API call.
|
||||
</verify>
|
||||
<done>INT-03 test verifies that clicking Cancel closes modal without making any API call to /sessions/{id}.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
Run full test suite for session-settings:
|
||||
|
||||
```bash
|
||||
cd /Users/nuwan/Code/jam-cloud/jam-ui && npx playwright test session-settings
|
||||
```
|
||||
|
||||
Expected output: 3 tests pass (INT-01, INT-02, INT-03)
|
||||
|
||||
Verify requirement coverage:
|
||||
- INT-01: Settings button in session toolbar opens modal (COVERED)
|
||||
- INT-02: Save settings makes PUT /sessions/{id} API call with correct data (COVERED)
|
||||
- INT-03: Cancel closes modal without making API call (COVERED)
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
1. Test file exists at `jam-ui/test/session-settings/session-settings.spec.ts`
|
||||
2. All 3 tests pass with `npx playwright test session-settings`
|
||||
3. INT-01: Verifies Settings button opens modal with form elements
|
||||
4. INT-02: Verifies Save makes PUT /sessions/{id} with correct payload
|
||||
5. INT-03: Verifies Cancel closes modal without API call
|
||||
6. Tests follow existing codebase patterns (test-helpers, page.route for API interception)
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/18-integration-tests-playwright/18-01-SUMMARY.md`
|
||||
</output>
|
||||
Loading…
Reference in New Issue