[5/5] Tests (Chrome E2E + unit) and docs updates (Unified Settings modal)

[mfittko]

Parent: #7

Scope
Add unit tests for URL helpers and Playwright E2E tests that verify layouts/toggles and live URL updates. Update user docs. Incorporate an automation guide to enable direct implementation of e2e/share-panel.spec.ts.

Deliverables (updated)

• Unit: src/__tests__/utils/urlEncoding.shareView.test.ts (COMPLETE; updated in PR #15)
• E2E: e2e/share-panel.spec.ts covering:
  • Default layout without params
  • layout=noninteractive shows content, hides UI, disables interactions
  • funcControls/tools behavior and precedence
  • fullscreen=1 shows fullscreen toggle; no auto-enter
  • tools=0, zoom=0, unitCtl=0, header=0 hide respective UIs; unitCtl=0 locks unit
  • lang applied; unsupported falls back
  • URL updates live when options change in the Settings modal
  • Embed snippet reflects options
• Docs: update docs/user-guide.md with examples (links + embed) and reference to PRD

Automation guide (for e2e/share-panel.spec.ts)

• Test harness

  • Dev server auto-starts via Playwright config; do not start a separate server.
  • Browser: Chromium (config sets channel: 'chrome').
  • Base URL: /.
  • Use stable selectors: ids in Unified Settings modal Share tab: #funcControls, #tools, #header, #zoom, #unitCtl, #fullscreen, #admin (read-only for live effects), and #language for Share tab language select.
  • Settings modal open button: use role or title text — click the settings icon button with tooltip Settings (translated; English default). Alternatively, getByRole('button', { name: /settings/i }).
  • Zoom controls buttons: [data-testid="grid-zoom-in"], [data-testid="grid-zoom-reset"].
  • Function plotting button: [data-testid="plot-formula-button"].
  • Toolbar container: #geometry-toolbar.
  • Formula editor presence can be detected by [data-testid="formula-editor"].

• Scenario A: Default layout without params

  1. page.goto('/').
  2. Assert header visible (look for page title text from header or a container above the canvas), #geometry-toolbar visible, zoom control visible, unit selector visible, fullscreen control may be hidden by default.
  3. Open Settings and verify modal heading Settings and tabs General, View, Share are present.

• Scenario B: Live toggles (funcControls/tools/header/zoom/unitCtl/fullscreen)

  1. Open Settings → View tab.
  2. Toggle #funcControls off → expect function controls (formula editor + plot button) to be hidden; keep geometry tools visibility as configured.
  3. Toggle #tools off → expect #geometry-toolbar hidden (no geometric tools). If both funcControls=0 and tools=0, toolbar and function controls should both be hidden.
  4. Toggle #header off → expect header container absent.
  5. Toggle #zoom off → [data-testid="grid-zoom-in"] absent.
  6. Toggle #unitCtl off → unit selector absent and unit remains fixed under interactions.
  7. Toggle #fullscreen on → expect a fullscreen button present (button label Enter Fullscreen); do not auto-enter fullscreen.
  8. For each toggle change, assert page.url() contains the corresponding param updated immediately (e.g., funcControls=0, tools=0, header=0, zoom=0, unitCtl=0, fullscreen=1).

• Scenario C: Deferred toggles (layout/admin/lang)

  1. Open Settings → View tab; switch layout to noninteractive. While modal is open, the app remains configurable for preview.
  2. Close modal → expect non-interactive mode applied: all UI controls hidden (toolbar, zoom, header, unit selector, fullscreen), interactions disabled (pointer events off), but canvas content (grid, shapes, formulas) visible.
     • Tip: Load with a sample URL that includes a formula to verify content (e.g., use an encoded formulas=... param as in the PRD examples), or plot a quick function before switching.
  3. Re-open Settings → Share tab; toggle #admin off; close modal → expect admin controls (share/settings buttons) hidden in the main UI. Verify admin=0 in URL.
  4. Share tab language: change lang (e.g., de) and close → URL has lang=de; UI language remains as-is (General tab controls the current session language).

• Scenario D: Share URL and embed snippet

  1. Open Settings → Share tab.
  2. Validate the Share URL input reflects current toggles (read-only input shows URL containing current query string).
  3. Adjust width/height; validate the embed textarea contains an <iframe> with the current URL and updated dimensions.

• Scenario E: Direct URL loads

  1. page.goto('/?layout=noninteractive&header=0&tools=0&zoom=0&unitCtl=0&fullscreen=1&funcControls=0&lang=de').
  2. Assert noninteractive precedence: all UI hidden; content visible.
  3. Validate lang fallback/acceptance: UI language for General tab (if used) is separate from Share URL language; Share tab language affects URLs only.

• Scenario F: Legacy compatibility

  1. page.goto('/?funcOnly=1').
  2. Validate behavior maps to new schema (e.g., implies tools off). If we do not convert legacy automatically in URL, assert the defaults remain consistent and our serializer does not emit funcOnly when generating new URLs.

• Example code snippets

  • Open Settings: await page.getByRole('button', { name: /settings/i }).click();
  • Toggle: await page.locator('#tools').click();
  • Assert toolbar hidden: await expect(page.locator('#geometry-toolbar')).toBeHidden();
  • Assert zoom hidden: await expect(page.locator('[data-testid="grid-zoom-in"]')).toHaveCount(0);
  • Assert URL update: await expect.poll(() => page.url()).toContain('tools=0');

Docs update outline

• Add a Unified Settings section to docs/user-guide.md:
  • Overview of tabs (General/View/Share) and live vs deferred options.
  • Parameter table and examples (from PRD and manual report).
  • Embed snippet instructions.
  • Noninteractive mode notes (shows content, disables UI/interactions).

Acceptance Criteria

• Unit tests pass (already green).
• New e2e/share-panel.spec.ts covers all scenarios above and passes locally and in CI (Chromium/Chrome).
• docs/user-guide.md updated with examples and PRD reference.

References

• Issue: #12
• Related PR: #15

[mfittko]

Status update after PR #15:

• Unit tests: ✅ Implemented and passing (src/__tests__/utils/urlEncoding.shareView.test.ts updated to new schema: funcControls, header, admin).
• E2E tests: 🔶 Partially covered. Core flows pass and several E2E suites validate UI/state interactions, but a dedicated e2e/share-panel.spec.ts with the scenarios listed in this issue has not been added yet. Proposed remaining work listed below.
• Docs: 🔶 Not updated yet in docs/user-guide.md with unified settings examples and embed snippet; PRD references exist in tasks/PRD docs.

Proposed scope adjustment (remaining tasks):

1. Add e2e/share-panel.spec.ts to cover:
   • Default layout without params
   • layout=noninteractive shows content, hides UI, disables interactions
   • funcControls/tools behavior and precedence
   • fullscreen=1 shows fullscreen toggle; no auto-enter
   • tools=0, zoom=0, unitCtl=0, header=0 hide respective UIs (and lock unit for unitCtl=0)
   • lang applied; unsupported falls back
   • URL updates live when options change in the Settings modal
   • Embed snippet reflects options
2. Update docs/user-guide.md with examples (links + embed) and reference to the PRD.

Given the above, keeping this issue open to track the remaining E2E spec and docs update. Unit coverage for helpers and core flows is complete; CI/local tests are green.

Reference: Issue #12