Merge pull request #114 from beatz174-bit/codex/investigate-mobile-deletion-flow-and-test-fixes

Improve pick item delete confirmation flow

e2e/picklist.spec.ts

@@ -343,21 +343,39 @@ test.describe('Active pick list', () => {
   });
 
   test('removes a product from the pick list when deleted', async ({ page }) => {
+    await page.setViewportSize({ width: 430, height: 932 });
     await navigateToNewPickList(page);
     await addProductToPickList(page, additionalProduct);
 
-    const productRowDeleteButton = page
+    const productRow = page.getByText(additionalProduct).first();
-      .getByText(additionalProduct)
-      .locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]//button[@aria-label="Delete item"]')
-      .first();
 
-    await expect(page.getByText(additionalProduct).first()).toBeVisible();
+    await expect(productRow).toBeVisible();
-    await productRowDeleteButton.click();
+    await productRow.click();
 
-    await expect(page.getByRole('dialog', { name: 'Delete item' })).toBeVisible();
+    const controlsDialog = page.getByRole('dialog', { name: additionalProduct });
-    await page.getByRole('button', { name: 'Delete', exact: true }).click();
+    await expect(controlsDialog).toBeVisible();
 
-    await expect(page.getByText(additionalProduct).first()).not.toBeVisible();
+    await controlsDialog.getByRole('button', { name: 'Delete item' }).click();
+
+    const confirmDialog = page.getByRole('dialog', { name: 'Delete item' });
+    await expect(confirmDialog).toBeVisible();
+
+    const cancelButton = confirmDialog.getByRole('button', { name: 'Cancel' });
+    await expect(cancelButton).toBeVisible();
+    await cancelButton.click();
+
+    await expect(confirmDialog).not.toBeVisible();
+    await expect(controlsDialog).not.toBeVisible();
+
+    await productRow.click();
+    await expect(page.getByRole('dialog', { name: additionalProduct })).toBeVisible();
+    await page.getByRole('button', { name: 'Delete item' }).click();
+
+    const deleteButton = page.getByRole('button', { name: 'Delete', exact: true });
+    await expect(deleteButton).toBeVisible();
+    await deleteButton.click();
+
+    await expect(page.getByText(additionalProduct)).toHaveCount(0);
   });
 });
 

src/components/PickItemRow.test.tsx

@@ -1,10 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PickItemRow } from './PickItemRow';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
+const mockMatchMedia = (matches: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
 const baseItem: PickItem = {
   id: 'item-1',
   pick_list_id: 'list-1',
@@ -80,7 +93,7 @@ describe('PickItemRow', () => {
     ).toBeVisible();
     expect(onDelete).not.toHaveBeenCalled();
 
-    await user.click(screen.getByRole('button', { name: /confirm delete/i }));
+    await user.click(screen.getByRole('button', { name: /^delete$/i }));
 
     expect(onDelete).toHaveBeenCalledTimes(1);
   });

src/components/PickItemRow.tsx

@@ -49,9 +49,14 @@ export const PickItemRow = ({
     onStatusChange(checked ? 'picked' : 'pending');
   };
 
+  const closeDialogs = () => {
+    setIsConfirmOpen(false);
+    setIsControlsOpen(false);
+  };
+
   const handleConfirmDelete = () => {
     onDelete();
-    setIsConfirmOpen(false);
+    closeDialogs();
   };
 
   const handleRowClick = () => {
@@ -300,7 +305,7 @@ export const PickItemRow = ({
 
       <Dialog
         open={isConfirmOpen}
-        onClose={() => setIsConfirmOpen(false)}
+        onClose={closeDialogs}
         aria-labelledby="confirm-delete-title"
         aria-describedby="confirm-delete-description"
       >
@@ -311,15 +316,10 @@ export const PickItemRow = ({
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setIsConfirmOpen(false)} aria-label="Cancel delete" autoFocus>
+          <Button onClick={closeDialogs} autoFocus>
             Cancel
           </Button>
-          <Button
+          <Button color="error" variant="contained" onClick={handleConfirmDelete}>
-            color="error"
-            variant="contained"
-            onClick={handleConfirmDelete}
-            aria-label="Confirm delete"
-          >
             Delete
           </Button>
         </DialogActions>