test(storybook): re-add play() interaction tests for PR #94 stories

[luandro]

Summary

PR #94 (feat(storybook): @storybook/addon-vitest + CI matrix) added @storybook/addon-vitest to the CI matrix but had to remove 10 play() interaction tests across 6 stories because the Storybook 10 vitest-browser integration hangs in the sb-preparing-story state (upstream issue: storybookjs/storybook#18663).

Lost play() tests (per commit 45673c1)

Story file	Removed story	What it exercised
src/components/ui/button.stories.tsx	Test (renamed → ClickHandler)	Spy registered on click; assert called on press, ignored when loading
src/components/ui/button.stories.tsx	LoadingBlocksClicks (renamed → LoadingClickHandler)	Spy registered but never called when loading: true
src/screens/ObservationDetailScreen.stories.tsx	WithObservation	Back-nav affordance click path
src/screens/SettingsScreen.stories.tsx	InviteFormFilled	Form input → submit → results flow
src/screens/SettingsScreen.stories.tsx	WithInviteResults	Results list rendering after submit
src/screens/SettingsScreen.stories.tsx	InviteFormError	Server-error state after submit
src/screens/SettingsScreen.stories.tsx	ClearDataDialogOpen	Confirm dialog open + accept path
src/components/shared/ExportObservationsButton.stories.tsx	Open	Dropdown open + select option
src/components/shared/FilterSheet.stories.tsx	Open (×3 play() blocks)	Sheet expand + filter apply + reset
src/screens/InviteScreen.stories.tsx	Connected	Connection state transition

The ClickHandler / LoadingClickHandler stories were renamed (not removed) in commit 46c5db3 with JSDoc clarifying they are visual-stories-only and that the spy is registered but never asserted (since play() is gone).

Acceptance criteria

When upstream storybookjs/storybook#18663 is fixed and Storybook 10 vitest-browser can run play() blocks in CI, this issue tracks restoring ALL 10 deleted play() blocks:

1. Re-add the play: async ({ canvasElement, args, step }) => { ... } bodies to the 6 stories above.
2. Re-convert ClickHandler / LoadingClickHandler from "visual-stories-only" JSDoc back to real interaction tests that assert the spy is called / not called.
3. Run the full test:storybook matrix locally and verify all 10 play() tests pass in CI.
4. Close this issue and update PR feat(storybook): enable @storybook/addon-vitest + CI matrix #94's description to remove the "(play() tests removed)" caveat.

Workaround applied in PR #94

• New unit tests in tests/unit/ cover the same components in isolation (MapContainer, MediaPreview, DataScreen).
• The visual-regression screenshot baseline in tests/e2e/storybook-screenshots-baseline/ still renders every story (including the ones that lost play()), so visual regressions are still caught.
• The removed play() blocks are interaction tests, not rendering tests — the rendered DOM is unchanged.

Related

• PR feat(storybook): enable @storybook/addon-vitest + CI matrix #94: feat(storybook): enable @storybook/addon-vitest + CI matrix #94
• PR feat(storybook): enable a11y addon + add test-runner to CI #95 (sibling): feat(storybook): enable a11y addon + add test-runner to CI #95 — also lost a play() test (WithObservation), tracked in test(storybook): re-add play() interaction test for ObservationDetailScreen back-nav affordance #101
• Upstream: addon-interactions: canvasElement returns empty #root div element storybookjs/storybook#18663
• Tracking issue pattern: test(storybook): re-add play() interaction test for ObservationDetailScreen back-nav affordance #101 (covers PR feat(storybook): enable a11y addon + add test-runner to CI #95's lost play() test)

[luandro]

Implementation Spec

Auto-generated by Hermes spec-builder cron on 2026-06-07 00:17 UTC

---

Problem Summary

PR #94 (feat(storybook): @storybook/addon-vitest + CI matrix) added @storybook/addon-vitest to the CI matrix but had to remove 10 play() interaction tests across 6 stories because the Storybook 10 vitest-browser integration hangs in the sb-preparing-story state (upstream issue: storybookjs/storybook#18663).

---

Proposed Scope

Address the requirements described in test(storybook): re-add play() interaction tests for PR #94 stories.

Tasks:

• New unit tests in tests/unit/ cover the same components in isolation (MapContainer, MediaPreview, DataScreen).
• The visual-regression screenshot baseline in tests/e2e/storybook-screenshots-baseline/ still renders every story (including the ones that lost play()), so visual regressions are still caught.
• The removed play() blocks are interaction tests, not rendering tests — the rendered DOM is unchanged.
• PR feat(storybook): enable @storybook/addon-vitest + CI matrix #94: feat(storybook): enable @storybook/addon-vitest + CI matrix #94
• PR feat(storybook): enable a11y addon + add test-runner to CI #95 (sibling): feat(storybook): enable a11y addon + add test-runner to CI #95 — also lost a play() test (WithObservation), tracked in test(storybook): re-add play() interaction test for ObservationDetailScreen back-nav affordance #101
• Upstream: addon-interactions: canvasElement returns empty #root div element storybookjs/storybook#18663
• Tracking issue pattern: test(storybook): re-add play() interaction test for ObservationDetailScreen back-nav affordance #101 (covers PR feat(storybook): enable a11y addon + add test-runner to CI #95's lost play() test)

---

Non-goals

• Changes unrelated to the described issue
• Major architectural changes not directly required
• Performance optimizations not mentioned in the issue
• Backward-incompatible API changes unless explicitly requested

---

Acceptance Criteria

The following criteria must be met for this issue to be considered resolved:

• New unit tests in tests/unit/ cover the same components in isolation (MapContainer, MediaPreview, DataScreen).
• The visual-regression screenshot baseline in tests/e2e/storybook-screenshots-baseline/ still renders every story (including the ones that lost play()), so visual regressions are still caught.
• The removed play() blocks are interaction tests, not rendering tests — the rendered DOM is unchanged.
• PR feat(storybook): enable @storybook/addon-vitest + CI matrix #94: feat(storybook): enable @storybook/addon-vitest + CI matrix #94
• PR feat(storybook): enable a11y addon + add test-runner to CI #95 (sibling): feat(storybook): enable a11y addon + add test-runner to CI #95 — also lost a play() test (WithObservation), tracked in test(storybook): re-add play() interaction test for ObservationDetailScreen back-nav affordance #101
• Upstream: addon-interactions: canvasElement returns empty #root div element storybookjs/storybook#18663
• Tracking issue pattern: test(storybook): re-add play() interaction test for ObservationDetailScreen back-nav affordance #101 (covers PR feat(storybook): enable a11y addon + add test-runner to CI #95's lost play() test)
• All existing tests pass
• New code follows project conventions (see AGENTS.md)

---

Implementation Notes

Key files and areas to modify:

• Source files to be determined during implementation

Reference documents:

• AGENTS.md
• DESIGN_OVERVIEW.md
• WORKFLOW.md
• package.json

---

Test Plan

1. Review existing test suite for coverage of the affected area
2. Add or update unit tests covering the new/changed behavior
3. Add or update integration tests if the change affects API boundaries
4. Verify all tests pass: npm test (or npx vitest run)
5. Manual verification steps if applicable (describe in PR)

---

Risks / Questions

Potential risks and open questions:

• Edge cases: Review the issue comments for any clarified requirements or edge cases.

---

Recommended difficulty label: difficulty:medium

[luandro]

Agent encountered an error and could not complete implementation.\n\nReason: Command failed (rc=1): git -C /home/coder/work/comapeo-cloud-app/main push -u origin agent/comapeo-cloud-app/issue-103
stdout:

comapeo-cloud-app@0.0.0 validate
bash scripts/validate.sh

=== Full Validation ===

comapeo-cloud-app@0.0.0 lint
npm-run-all --parallel lint:*

comapeo-cloud-app@0.0.0 lint:eslint
eslint .

comapeo-cloud-app@0.0.0 lint:types
tsc --noEmit

comapeo-cloud-app@0.0.0 lint:prettier
prettier --check .

Checking formatting...
All matched files use Prettier code style!
scripts/storybook-screenshots-diff.ts(27,24): error TS2307: Cannot find module pixelmatch or its corresponding
stderr: ERROR: "lint:types" exited with 2.
error: failed to push some refs to https://github.com/digidem/comapeo-cloud-app.git
\n\nRe-queuing for review.