Merge branch 'main' into codex/add-comprehensive-e2e-tests-for-product-list

e2e/picklist.spec.ts

@@ -4,8 +4,34 @@ const areaName = 'Drinks';
 const additionalProduct = 'Pump 750';
 const listProductName = 'List Flow Soda';
 const updatedListProductName = 'List Flow Soda Zero';
+const searchTerm = 'E2E Search';
+const matchingProducts = [`${searchTerm} Alpha`, `${searchTerm} Beta`];
+const nonMatchingProduct = 'E2E Other Gamma';
+const secondaryProduct = 'Mount Franklin 600ml';
 
 test.describe('Active pick list', () => {
+  test('adds a product via search and renders it with quantity and packaging', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page.getByRole('heading', { name: 'StockFill' })).toBeVisible();
+    await page.getByRole('link', { name: 'Create Pick List' }).click();
+    await page.getByLabel('Area').click();
+    await page.getByRole('option', { name: areaName }).first().click();
+    await page.getByRole('button', { name: 'Save Pick List' }).click();
+
+    await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
+
+    const searchInput = page.getByPlaceholder('Search products');
+    await searchInput.fill('Mount Franklin 600ml');
+    await page
+      .getByRole('option', { name: /Mount Franklin 600ml \(Drinks\)/i })
+      .first()
+      .click();
+
+    await expect(page.getByText('Mount Franklin 600ml', { exact: true })).toBeVisible();
+    await expect(page.getByText('Qty: 1 unit')).toBeVisible();
+  });
+
   test('creates a pick list and adds products from the search bar', async ({ page }) => {
     await page.goto('/');
 
@@ -29,6 +55,38 @@ test.describe('Active pick list', () => {
     await expect(page.getByRole('button', { name: 'Save and Return' })).toBeEnabled();
   });
 
+  test('adds a product to an existing pick list from the search input', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page.getByRole('heading', { name: 'StockFill' })).toBeVisible();
+    await page.getByRole('link', { name: 'Create Pick List' }).click();
+    await page.getByLabel('Area').click();
+    await page.getByRole('option', { name: areaName }).first().click();
+    await page.getByRole('button', { name: 'Save Pick List' }).click();
+
+    await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Save and Return' }).click();
+
+    await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible();
+    await page.getByRole('link', { name: new RegExp(areaName, 'i') }).click();
+
+    await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
+
+    const searchInput = page.getByPlaceholder('Search products');
+    await searchInput.click();
+    await searchInput.fill(additionalProduct);
+
+    const productOption = page.getByRole('option', {
+      name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i'),
+    });
+    await expect(productOption).toBeVisible();
+    await productOption.click();
+
+    await expect(page.getByText(additionalProduct).first()).toBeVisible();
+    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
+  });
+
   test('allows adding and editing products from the manage products screen', async ({ page }) => {
     await page.goto('/');
 
@@ -57,6 +115,7 @@ test.describe('Active pick list', () => {
   });
 
   test('adds, edits, and deletes a product directly from the list', async ({ page }) => {
+  test('filters the manage products list using the search bar', async ({ page }) => {
     await page.goto('/');
 
     await page.getByRole('link', { name: 'Manage Products' }).click();
@@ -89,5 +148,198 @@ test.describe('Active pick list', () => {
     await expect(page.getByText('Product deleted.')).toBeVisible();
     await expect(page.getByRole('button', { name: `Edit ${updatedListProductName}` })).toHaveCount(0);
     await expect(page.getByText(updatedListProductName)).toHaveCount(0);
+    const addProduct = async (name: string) => {
+      await page.getByLabel('Name').fill(name);
+      await page.getByLabel('Add product category').click();
+      await page.getByRole('option', { name: areaName }).first().click();
+      await page.getByRole('button', { name: 'Save Product' }).click();
+      await expect(page.getByText('Product added.')).toBeVisible();
+      await expect(page.getByRole('button', { name: `Edit ${name}` })).toBeVisible();
+    };
+
+    for (const productName of [...matchingProducts, nonMatchingProduct]) {
+      await addProduct(productName);
+    }
+
+    const searchInput = page.getByPlaceholder('Search');
+    await searchInput.fill(searchTerm);
+
+    for (const productName of matchingProducts) {
+      await expect(page.getByRole('button', { name: `Edit ${productName}` })).toBeVisible();
+    }
+
+    await expect(page.getByRole('button', { name: `Edit ${nonMatchingProduct}` })).toHaveCount(0);
+  test('adjusts item quantities with increment and decrement controls', async ({ page }) => {
+  test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => {
+    await page.goto('/');
+
+  test('toggles a product to picked and updates status indicators', async ({ page }) => {
+    await page.goto('/');
+
+  test('marks every item as picked when completing the pick list', async ({ page }) => {
+    await page.goto('/');
+
+  test('toggles packaging type and persists the selection', async ({ page }) => {
+    await page.goto('/');
+
+  test('lets a user mark an item as picked then revert it back to pending', async ({ page }) => {
+    await page.goto('/');
+
+  test('removes a product from the pick list when deleted', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page.getByRole('heading', { name: 'StockFill' })).toBeVisible();
+    await page.getByRole('link', { name: 'Create Pick List' }).click();
+    await page.getByLabel('Area').click();
+    await page.getByRole('option', { name: areaName }).first().click();
+    await page.getByRole('button', { name: 'Save Pick List' }).click();
+
+    const productsToAdd = ['Pump 750', 'Nutrient Water Focus', 'Mount Franklin 600ml'];
+    const searchInput = page.getByPlaceholder('Search products');
+
+    for (const productName of productsToAdd) {
+      await searchInput.click();
+      await searchInput.fill(productName);
+      await page
+        .getByRole('option', { name: new RegExp(`${productName} \\(${areaName}\\)`, 'i') })
+        .first()
+        .click();
+
+      await expect(page.getByText(productName).first()).toBeVisible();
+    }
+
+    const pickStatusToggles = page.getByLabel('Toggle picked status');
+    await expect(pickStatusToggles).toHaveCount(productsToAdd.length);
+
+    for (let index = 0; index < productsToAdd.length; index += 1) {
+      await expect(pickStatusToggles.nth(index)).not.toBeChecked();
+    }
+
+    await page.getByRole('button', { name: 'Pick Complete' }).click();
+
+    for (let index = 0; index < productsToAdd.length; index += 1) {
+      await expect(pickStatusToggles.nth(index)).toBeChecked();
+    }
+
+    const showPickedToggle = page.getByRole('checkbox', { name: 'Show picked' });
+    await expect(showPickedToggle).toBeChecked();
+    await expect(showPickedToggle).toBeDisabled();
+    await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
+
+    const searchInput = page.getByPlaceholder('Search products');
+    await searchInput.click();
+    await searchInput.fill(secondaryProduct);
+    await page
+      .getByRole('option', { name: new RegExp(`${secondaryProduct} \\(${areaName}\\)`, 'i') })
+      .first()
+      .click();
+
+    await searchInput.fill(additionalProduct);
+    await page
+      .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') })
+      .first()
+      .click();
+
+    const quantityLabel = page.getByText('Qty: 1 Unit');
+    await expect(quantityLabel).toBeVisible();
+
+    await page.getByRole('button', { name: 'Increase quantity' }).click();
+    await expect(page.getByText('Qty: 2 Unit')).toBeVisible();
+
+    await page.reload();
+    await expect(page.getByText('Qty: 2 Unit')).toBeVisible();
+
+    const decrementButton = page.getByRole('button', { name: 'Decrease quantity' });
+    await decrementButton.click();
+    await decrementButton.click();
+    await decrementButton.click();
+
+    await expect(page.getByText('Qty: 1 Unit')).toBeVisible();
+
+    await page.reload();
+    await expect(page.getByText('Qty: 1 Unit')).toBeVisible();
+    const showPickedToggle = page.getByLabel('Show picked');
+    const itemToggles = page.getByRole('checkbox', { name: 'Toggle picked status' });
+
+    await expect(showPickedToggle).toBeChecked();
+    await expect(page.getByText(secondaryProduct)).toBeVisible();
+    await expect(page.getByText(additionalProduct)).toBeVisible();
+
+    await itemToggles.first().check();
+    await expect(itemToggles.first()).toBeChecked();
+
+    await showPickedToggle.click();
+    await expect(page.getByText(secondaryProduct)).toHaveCount(0);
+    await expect(page.getByText(additionalProduct)).toBeVisible();
+
+    await showPickedToggle.click();
+    await expect(showPickedToggle).toBeChecked();
+    await expect(page.getByText(secondaryProduct)).toBeVisible();
+
+    await itemToggles.nth(1).check();
+    await expect(itemToggles.nth(1)).toBeChecked();
+
+    await expect(showPickedToggle).toBeDisabled();
+    await expect(showPickedToggle).toBeChecked();
+    const pickedToggle = page.getByLabel('Toggle picked status');
+    await expect(pickedToggle).not.toBeChecked();
+    await pickedToggle.click();
+    await expect(pickedToggle).toBeChecked();
+
+    const showPickedToggle = page.getByLabel('Show picked');
+    await expect(showPickedToggle).toBeChecked();
+    await expect(showPickedToggle).toBeDisabled();
+    const increaseButton = page.getByLabel('Increase quantity');
+    await increaseButton.click();
+    await expect(page.getByText('Qty: 2 unit')).toBeVisible();
+
+    await page.getByLabel('Switch to carton packaging').click();
+    await expect(page.getByText('Qty: 2 carton')).toBeVisible();
+
+    await page.getByLabel('Decrease quantity').click();
+    await expect(page.getByText('Qty: 1 carton')).toBeVisible();
+
+    await page.getByLabel('Switch to unit packaging').click();
+    await expect(page.getByText('Qty: 1 unit')).toBeVisible();
+
+    await increaseButton.click();
+    await increaseButton.click();
+    await page.getByLabel('Switch to carton packaging').click();
+    await expect(page.getByText('Qty: 3 carton')).toBeVisible();
+
+    await page.getByRole('button', { name: 'Save and Return' }).click();
+    await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible();
+
+    await page.reload();
+    await page.getByRole('link', { name: areaName }).first().click();
+    await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
+    await expect(page.getByText('Qty: 3 carton')).toBeVisible();
+    await expect(page.getByLabel('Switch to unit packaging')).toBeVisible();
+    const itemStatusToggle = page.getByLabel('Toggle picked status').first();
+    const showPickedToggle = page.getByLabel('Show picked');
+
+    await expect(itemStatusToggle).not.toBeChecked();
+    await expect(showPickedToggle).toBeEnabled();
+
+    await itemStatusToggle.check();
+
+    await expect(itemStatusToggle).toBeChecked();
+    await expect(showPickedToggle).toBeDisabled();
+
+    await itemStatusToggle.uncheck();
+
+    await expect(itemStatusToggle).not.toBeChecked();
+    await expect(showPickedToggle).toBeEnabled();
+    const productRow = page.getByText(additionalProduct).locator(
+      'xpath=ancestor::div[contains(@class, "MuiStack-root")]//button[@aria-label="Delete item"]',
+    );
+
+    await expect(page.getByText(additionalProduct).first()).toBeVisible();
+    await productRow.first().click();
+
+    await expect(page.getByRole('dialog', { name: 'Delete item' })).toBeVisible();
+    await page.getByRole('button', { name: 'Delete', exact: true }).click();
+
+    await expect(page.getByText(additionalProduct).first()).not.toBeVisible();
   });
 });

src/hooks/__tests__/useServiceWorker.test.tsx

@@ -0,0 +1,58 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useServiceWorker } from '../useServiceWorker';
+
+const flushMicrotasks = async () => {
+  await act(async () => {
+    vi.runAllTicks();
+  });
+};
+
+describe('useServiceWorker', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    delete (navigator as any).serviceWorker;
+  });
+
+  it('returns true when service worker registration succeeds', async () => {
+    const registerMock = vi.fn().mockResolvedValue(undefined);
+    (navigator as any).serviceWorker = { register: registerMock };
+
+    const { result } = renderHook(() => useServiceWorker());
+
+    await flushMicrotasks();
+
+    expect(registerMock).toHaveBeenCalledWith('/service-worker.js');
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false when service worker registration fails', async () => {
+    const registerMock = vi.fn().mockRejectedValue(new Error('registration failed'));
+    (navigator as any).serviceWorker = { register: registerMock };
+
+    const { result } = renderHook(() => useServiceWorker());
+
+    await flushMicrotasks();
+
+    expect(registerMock).toHaveBeenCalledWith('/service-worker.js');
+    expect(result.current).toBe(false);
+  });
+
+  it('keeps registration false when service workers are unavailable', async () => {
+    expect('serviceWorker' in navigator).toBe(false);
+
+    const registerMock = vi.fn();
+
+    const { result } = renderHook(() => useServiceWorker());
+
+    await flushMicrotasks();
+
+    expect(result.current).toBe(false);
+    expect(registerMock).not.toHaveBeenCalled();
+  });
+});

src/screens/PickListsScreen.tsx

@@ -125,6 +125,7 @@ export const PickListsScreen = () => {
                     </Typography>
                   </Stack>
                 }
+                secondaryTypographyProps={{ component: 'div' }}
               />
             </ListItemButton>
           </ListItem>