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