Add Playwright e2e coverage for bulk-move menu interaction (#179) #183

New issue

Closed

opened 2026-10-03 21:31:19 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 21:31:19 +00:00

Owner

Background

The kilo-gsd fix for #179 (Gallery multi-select + bulk actions, commit bb64fac on origin/main) shipped a new test file src/pages/issue-179.test.tsx with 10 vitest specs. The verifier pass (commit efabafd) confirmed 9/10 pass with two small test fixes:

Switched per-card checkbox clicks from userEvent.click to fireEvent.click (jsdom renders the card with 0x0 layout dimensions; user-event's coordinate-based hit-test misses the controlled checkbox).
Re-find checkboxes after each click (state update replaces the input DOM nodes, so captured refs go stale).

The 10th spec, "bulk move fires a single summary toast for the batch", is now it.skip because it drives a Radix DropdownMenu (bulk-move-trigger) that cannot be opened reliably in jsdom with this codebase's pattern (other repo tests that touch Radix menus either mock the DropdownMenu or skip the menu interaction — see src/pages/issue-132-gallery.test.tsx).

The bulk-move implementation path (confirmBulkMove in src/pages/Gallery.tsx) is exercised by the now-passing bulk delete and bulk favorite tests via handleMoveToFolder ({ silent: true } per-id + a single summary toast), so the implementation is verified end-to-end at the unit level. What we cannot verify in vitest+jsdom is:

That clicking bulk-move-trigger actually opens the Radix menu.
That selecting a folder from the menu dispatches confirmBulkMove(folderId) and shows a toast of the form "Moved N designs to <Folder>".

What this issue asks for

Add a Playwright e2e spec (under tests/e2e/ or wherever the existing Playwright suite lives in this repo) that:

Loads the Gallery with 3+ designs seeded into localStorage.
Adds a non-default folder (e.g. folder-archive named Archive).
Toggles selection mode on.
Selects 2 designs via the per-card checkbox (real user click).
Clicks bulk-move-trigger.
Asserts the Radix dropdown is visible with the folder menu items.
Clicks the Archive menu item.
Asserts a toast containing /Moved 2 designs to Archive/i.

This complements the unit-level coverage and validates the Radix menu wiring end-to-end in a real browser.

Acceptance

New Playwright spec passes in CI.
The skipped vitest test in src/pages/issue-179.test.tsx can stay it.skip (or be removed and the e2e covers the same ground) — either is fine.

## Background The kilo-gsd fix for #179 (Gallery multi-select + bulk actions, commit bb64fac on `origin/main`) shipped a new test file `src/pages/issue-179.test.tsx` with 10 vitest specs. The verifier pass (commit efabafd) confirmed 9/10 pass with two small test fixes: 1. Switched per-card checkbox clicks from `userEvent.click` to `fireEvent.click` (jsdom renders the card with 0x0 layout dimensions; user-event's coordinate-based hit-test misses the controlled checkbox). 2. Re-find checkboxes after each click (state update replaces the input DOM nodes, so captured refs go stale). The 10th spec, `"bulk move fires a single summary toast for the batch"`, is now `it.skip` because it drives a Radix DropdownMenu (`bulk-move-trigger`) that cannot be opened reliably in jsdom with this codebase's pattern (other repo tests that touch Radix menus either mock the DropdownMenu or skip the menu interaction — see `src/pages/issue-132-gallery.test.tsx`). The bulk-move implementation path (`confirmBulkMove` in `src/pages/Gallery.tsx`) is exercised by the now-passing `bulk delete` and `bulk favorite` tests via `handleMoveToFolder` (`{ silent: true }` per-id + a single summary toast), so the implementation is verified end-to-end at the unit level. What we cannot verify in vitest+jsdom is: - That clicking `bulk-move-trigger` actually opens the Radix menu. - That selecting a folder from the menu dispatches `confirmBulkMove(folderId)` and shows a toast of the form `"Moved N designs to <Folder>"`. ## What this issue asks for Add a Playwright e2e spec (under `tests/e2e/` or wherever the existing Playwright suite lives in this repo) that: 1. Loads the Gallery with 3+ designs seeded into localStorage. 2. Adds a non-default folder (e.g. `folder-archive` named `Archive`). 3. Toggles selection mode on. 4. Selects 2 designs via the per-card checkbox (real user click). 5. Clicks `bulk-move-trigger`. 6. Asserts the Radix dropdown is visible with the folder menu items. 7. Clicks the `Archive` menu item. 9. Asserts a toast containing `/Moved 2 designs to Archive/i`. This complements the unit-level coverage and validates the Radix menu wiring end-to-end in a real browser. ## Acceptance - New Playwright spec passes in CI. - The skipped vitest test in `src/pages/issue-179.test.tsx` can stay `it.skip` (or be removed and the e2e covers the same ground) — either is fine.

Mark added the

bug

triage-approved

labels

2026-10-03 21:31:19 +00:00

Mark referenced this issue from a commit

2026-10-03 21:35:28 +00:00

test(#183): Playwright e2e for Gallery bulk-move Radix DropdownMenu

Mark commented

2026-10-03 21:35:39 +00:00

Author

Owner

Closed by commit 3b32b96 on origin/main (test(#183): Playwright e2e for Gallery bulk-move Radix DropdownMenu).

New spec tests/e2e/issue-183-bulk-move-menu.spec.ts runs the bulk-move scenario end-to-end:

Seeds localStorage with 3 designs + a non-default folder-archive (Archive) via page.addInitScript() so React's useState(loadFolders) / useState(loadDesigns) initializers see the values on first render.
Toggles selection mode on (selection-mode-toggle).
Clicks 2 per-card checkboxes via real Playwright clicks.
Clicks bulk-move-trigger and asserts the Radix DropdownMenu opens with role=menuitem Archive item visible (bulk-move-folder-archive).
Clicks the Archive item and asserts the Moved 2 designs to Archive toast appears.
Verifies localStorage now shows d-1 and d-2 in folder-archive, catching any no-op-with-toast regression.

Local run: npx playwright test tests/e2e/issue-183-bulk-move-menu.spec.ts → 1 passed in 1.5s test time (after a 4.6s vite build). Lint clean via npx eslint.

The skipped vitest spec in src/pages/issue-179.test.tsx is left as it.skip per the issue acceptance (either is fine) — the e2e covers the same Radix menu interaction in a real browser.

Closed by commit 3b32b96 on `origin/main` (`test(#183): Playwright e2e for Gallery bulk-move Radix DropdownMenu`). New spec `tests/e2e/issue-183-bulk-move-menu.spec.ts` runs the bulk-move scenario end-to-end: 1. Seeds localStorage with 3 designs + a non-default `folder-archive` (`Archive`) via `page.addInitScript()` so React's `useState(loadFolders)` / `useState(loadDesigns)` initializers see the values on first render. 2. Toggles selection mode on (`selection-mode-toggle`). 3. Clicks 2 per-card checkboxes via real Playwright clicks. 4. Clicks `bulk-move-trigger` and asserts the Radix DropdownMenu opens with role=menuitem Archive item visible (`bulk-move-folder-archive`). 5. Clicks the Archive item and asserts the `Moved 2 designs to Archive` toast appears. 6. Verifies localStorage now shows d-1 and d-2 in folder-archive, catching any no-op-with-toast regression. Local run: `npx playwright test tests/e2e/issue-183-bulk-move-menu.spec.ts` → 1 passed in 1.5s test time (after a 4.6s vite build). Lint clean via `npx eslint`. The skipped vitest spec in `src/pages/issue-179.test.tsx` is left as `it.skip` per the issue acceptance (`either is fine`) — the e2e covers the same Radix menu interaction in a real browser.

Mark closed this issue

2026-10-03 21:35:41 +00:00