From f2c3e0e5f6209dceac75bd27073a28522c6f1080 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Sun, 8 Feb 2026 12:31:41 +0530 Subject: [PATCH] docs(18): create phase plan Phase 18: Integration Tests (Playwright) - 1 plan in 1 wave - 1 autonomous - Ready for execution --- .planning/ROADMAP.md | 2 +- .../18-01-PLAN.md | 221 ++++++++++++++++++ 2 files changed, 222 insertions(+), 1 deletion(-) create mode 100644 .planning/phases/18-integration-tests-playwright/18-01-PLAN.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index a9fc7defd..768bbd4c4 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -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 diff --git a/.planning/phases/18-integration-tests-playwright/18-01-PLAN.md b/.planning/phases/18-integration-tests-playwright/18-01-PLAN.md new file mode 100644 index 000000000..f9c5d93f6 --- /dev/null +++ b/.planning/phases/18-integration-tests-playwright/18-01-PLAN.md @@ -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/" +--- + + +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. + + + +@/Users/nuwan/.claude/get-shit-done/workflows/execute-plan.md +@/Users/nuwan/.claude/get-shit-done/templates/summary.md + + + +@.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) + + + + + + Task 1: Create test file with setup and modal opening test (INT-01) + jam-ui/test/session-settings/session-settings.spec.ts + +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. + + +```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). + + Test file exists with INT-01 test that verifies Settings button click opens the modal with expected form elements. + + + + Task 2: Add save settings test with API verification (INT-02) + jam-ui/test/session-settings/session-settings.spec.ts + +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. + + +```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. + + INT-02 test verifies that clicking Save makes PUT /sessions/{id} API call with correct payload (description, privacy fields). + + + + Task 3: Add cancel test verifying no API call (INT-03) + jam-ui/test/session-settings/session-settings.spec.ts + +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) + + +```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. + + INT-03 test verifies that clicking Cancel closes modal without making any API call to /sessions/{id}. + + + + + +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) + + + +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) + + + +After completion, create `.planning/phases/18-integration-tests-playwright/18-01-SUMMARY.md` +