feat(fase-5.10): /lists/[id] row redesign — buttons + swipe-toggle + overlay
Replaces the checkbox/hover-delete model with an explicit gesture+overlay
flow on /lists/[id].
Row anatomy (new)
[drag-handle] [name as button] [qty stepper − N +]
- No checkbox in normal mode.
- Checked items render with strikethrough + muted text.
- Drag handle always visible on mobile; revealed on hover on desktop
(md:opacity-0 md:group-hover:opacity-100). The handle owns the drag
(pointerdown → dragEnabled=true), so row swipes + taps keep working.
Swipe gestures (symmetric toggle, no delete)
unchecked + swipe RIGHT → mark checked (green success reveal)
checked + swipe LEFT → mark unchecked (neutral reveal)
opposite direction for each state is a no-op (snaps back).
SWIPE_COMMIT_THRESHOLD=120 (was 200 for delete); REVEAL_WIDTH=96.
Symmetry means undo is the inverse swipe — no undoQueue on toggles.
Double-tap overlay (name + delete + confirm)
Short tap: no-op. Two taps within DOUBLE_TAP_WINDOW_MS (300 ms) open a
full-screen dialog (bottom sheet on mobile) with:
- X close button (top-right)
- name input
- Delete button (red) → scheduleUndoable → UndoToast
- Confirm button (primary) → updateItem({ name })
Click outside / Escape / X all dismiss without saving.
Tests
items.test.ts
D-03 rewritten: double-tap opens overlay, value matches, X closes.
D-04 rewritten: overlay Delete removes the row; toast locator scoped
out of itemRow so it doesn't shadow the assertion.
realtime.test.ts
R-E-02 updated: Ana renames via overlay → Borja sees new name over
Realtime UPDATE. (The check/uncheck path is now gestural only and
chromium touch emulation is too flaky to drive it in E2E; Vitest
integration R-02 still covers the UPDATE-row-payload invariant.)
mobile-swipe-delete.test.ts stays describe.skip — will be renamed and
rewritten for the new semantics once WebKit install lands in CI.
i18n
list_qty_decrease, list_qty_increase, list_reorder_handle,
list_edit_item, list_confirm, list_close — en/es.
Verification
just test-e2e → 40 passed, 2 skipped (same as pre-change).
Type-check clean.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -57,27 +57,29 @@ test.describe('Shopping items — member (Borja)', () => {
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('D-03: can check an item — toggles the aria-checked state', async ({ page }) => {
|
||||
test('D-03: double-tapping a row opens the edit overlay (new interaction)', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
// Add a fresh item so we don't race with other tests' check state.
|
||||
const nameInput = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await expect(nameInput).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const itemName = `Check-me-${Date.now()}`;
|
||||
await nameInput.fill(itemName);
|
||||
await nameInput.press('Enter');
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const row = itemRow(page, itemName);
|
||||
const toggle = row.getByRole('button', { name: /toggle item|uncheck item/i });
|
||||
await toggle.click();
|
||||
await expect(row).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// A checked item is moved into the "Checked" section. Verify it still
|
||||
// shows on the page (it slides to the checked list with animation).
|
||||
await expect(page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
// Double-tap opens the overlay — the new edit path.
|
||||
await row.getByRole('button', { name: itemName }).dblclick();
|
||||
const overlay = page.getByTestId('edit-overlay');
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
await expect(overlay.getByPlaceholder(/add item|añadir producto/i)).toHaveValue(itemName);
|
||||
|
||||
// Close the overlay without saving — X button.
|
||||
await overlay.getByRole('button', { name: /close|cerrar/i }).click();
|
||||
await expect(overlay).not.toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test('D-04: can delete an item on desktop via the trash button', async ({ page }) => {
|
||||
test('D-04: overlay Delete button removes the row with an undo toast', async ({ page }) => {
|
||||
await gotoSeedList(page);
|
||||
const nameInput = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await expect(nameInput).toBeVisible({ timeout: 10_000 });
|
||||
@@ -85,20 +87,17 @@ test.describe('Shopping items — member (Borja)', () => {
|
||||
const itemName = `Delete-me-${Date.now()}`;
|
||||
await nameInput.fill(itemName);
|
||||
await nameInput.press('Enter');
|
||||
await expect(itemRow(page, itemName)).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const row = itemRow(page, itemName);
|
||||
await row.hover();
|
||||
await expect(row).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// The row has 3 "Delete" buttons in markup (swipe-reveal behind the row,
|
||||
// desktop-hover on the row, and a checked-state one). The desktop-hover
|
||||
// button is the one with `sm:flex` — target it via class.
|
||||
await row.locator('button.sm\\:flex[aria-label="Delete"]').click();
|
||||
// Double-tap → overlay → Delete. (The swipe gesture is a toggle now,
|
||||
// not a delete; delete lives behind the overlay.)
|
||||
await row.getByRole('button', { name: itemName }).dblclick();
|
||||
const overlay = page.getByTestId('edit-overlay');
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
await overlay.getByRole('button', { name: /^delete$|^eliminar$/i }).click();
|
||||
|
||||
// After Fase 5.5 the delete goes through the undo queue: the row is
|
||||
// removed immediately, but a toast briefly shows "Deleted <name>" — that
|
||||
// substring matches `getByText(itemName)`. Scope the assertion to the
|
||||
// item list (role="listitem") so the toast is ignored.
|
||||
// Row gone from the list; toast scoped out via itemRow locator.
|
||||
await expect(itemRow(page, itemName)).not.toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
|
||||
@@ -43,7 +43,12 @@ test.describe('Realtime sync — two sessions on the same list', () => {
|
||||
}
|
||||
});
|
||||
|
||||
test('R-E-02: Ana checks an item → Borja sees it checked', async ({ browser }) => {
|
||||
test('R-E-02: Ana renames an item → Borja sees the new name via Realtime UPDATE', async ({ browser }) => {
|
||||
// Fase 5.10 removed the checkbox/toggle button from the list detail
|
||||
// view. Check/uncheck is a swipe gesture (unreliable under Chromium
|
||||
// touch emulation). Renaming an item via the double-tap overlay fires
|
||||
// the same realtime UPDATE path — this test still covers Ana → Borja
|
||||
// sync; Vitest integration R-02 covers the UPDATE-row-payload invariant.
|
||||
const ana = await loggedInListPage(browser, USERS.ana);
|
||||
const borja = await loggedInListPage(browser, USERS.borja);
|
||||
|
||||
@@ -52,36 +57,34 @@ test.describe('Realtime sync — two sessions on the same list', () => {
|
||||
});
|
||||
|
||||
try {
|
||||
const itemName = `R-E-02-${Date.now()}`;
|
||||
const originalName = `R-E-02-orig-${Date.now()}`;
|
||||
const renamedName = `R-E-02-new-${Date.now()}`;
|
||||
|
||||
const anaInput = ana.page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
|
||||
await anaInput.fill(itemName);
|
||||
await anaInput.fill(originalName);
|
||||
await anaInput.press('Enter');
|
||||
await expect(ana.page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
await expect(borja.page.getByText(itemName)).toBeVisible({ timeout: 5_000 });
|
||||
await expect(ana.page.getByText(originalName)).toBeVisible({ timeout: 5_000 });
|
||||
await expect(borja.page.getByText(originalName)).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Ana checks the item. Wait 500ms after add to give the realtime
|
||||
// echo + dedupe time to settle; otherwise the row might still have
|
||||
// the temp UUID in the DOM and the button id changes under us.
|
||||
// Wait a beat so the optimistic tempId is swapped for the real one.
|
||||
await ana.page.waitForTimeout(500);
|
||||
const anaRow = ana.page.locator('[role="listitem"]').filter({ hasText: itemName }).first();
|
||||
await anaRow.getByRole('button', { name: /toggle item/i }).click();
|
||||
|
||||
// Verify Ana's own UI flipped (she checked it locally)
|
||||
await expect(
|
||||
ana.page
|
||||
.locator('[role="listitem"]')
|
||||
.filter({ hasText: itemName })
|
||||
.getByRole('button', { name: /uncheck item/i })
|
||||
).toBeVisible({ timeout: 5_000 });
|
||||
// Open the overlay via the row's name button (double-click = double-tap).
|
||||
const anaRowNameBtn = ana.page
|
||||
.locator('[role="listitem"]')
|
||||
.filter({ hasText: originalName })
|
||||
.getByRole('button', { name: originalName })
|
||||
.first();
|
||||
await anaRowNameBtn.dblclick();
|
||||
const overlay = ana.page.getByTestId('edit-overlay');
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
const overlayInput = overlay.getByPlaceholder(/add item|añadir producto/i);
|
||||
await overlayInput.fill(renamedName);
|
||||
await overlay.getByRole('button', { name: /^confirm$|^confirmar$/i }).click();
|
||||
|
||||
// And Borja should see it checked too via Realtime UPDATE
|
||||
await expect(
|
||||
borja.page
|
||||
.locator('[role="listitem"]')
|
||||
.filter({ hasText: itemName })
|
||||
.getByRole('button', { name: /uncheck item/i })
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
// Ana's UI shows the new name, and Borja's catches up via Realtime.
|
||||
await expect(ana.page.getByText(renamedName)).toBeVisible({ timeout: 5_000 });
|
||||
await expect(borja.page.getByText(renamedName)).toBeVisible({ timeout: 10_000 });
|
||||
} finally {
|
||||
await ana.context.close();
|
||||
await borja.context.close();
|
||||
|
||||
Reference in New Issue
Block a user