From df818767d44ac18a991f6c22c12acb1093c39cfb Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:09:49 +1000 Subject: [PATCH 1/9] Add e2e test for deleting pick list items --- e2e/picklist.spec.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..292f8a8 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -53,4 +53,36 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); + + 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(); + + await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible(); + + const searchInput = page.getByPlaceholder('Search products'); + await searchInput.click(); + await searchInput.fill(additionalProduct); + await page + .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') }) + .first() + .click(); + + 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(); + }); }); From 185be8f7bb58adea51651a963973dd29dfe58fa8 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:10:11 +1000 Subject: [PATCH 2/9] Add e2e test for editing pick lists --- e2e/picklist.spec.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..e493007 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -27,6 +27,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('/'); From 789212951e021c38ea2ca8f9151d3f9316c40337 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:10:35 +1000 Subject: [PATCH 3/9] Add e2e test for toggling picked status --- e2e/picklist.spec.ts | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..c3290a3 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -53,4 +53,37 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); + + test('lets a user mark an item as picked then revert it back to pending', async ({ page }) => { + await page.goto('/'); + + 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 searchInput = page.getByPlaceholder('Search products'); + await searchInput.click(); + await searchInput.fill(additionalProduct); + await page + .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') }) + .first() + .click(); + + 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(); + }); }); From 962b80bed38c6667f5e12b49ee7e1e34bd9c76c5 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:10:54 +1000 Subject: [PATCH 4/9] Add e2e coverage for packaging toggle --- e2e/picklist.spec.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..f2a0619 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -53,4 +53,50 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); + + test('toggles packaging type and persists the selection', async ({ page }) => { + await page.goto('/'); + + 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.click(); + await searchInput.fill(additionalProduct); + await page + .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') }) + .first() + .click(); + + 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(); + }); }); From 7155ccd6bcc31824bf20c3411dd223c2ec827011 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:11:16 +1000 Subject: [PATCH 5/9] Add pick completion e2e scenario --- e2e/picklist.spec.ts | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..75aee2a 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -53,4 +53,44 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); + + test('marks every item as picked when completing the pick list', async ({ page }) => { + await page.goto('/'); + + 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(); + }); }); From 209adcac71b5d0f76bbb1735930d549a3062bdc6 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:11:38 +1000 Subject: [PATCH 6/9] Add tests for service worker registration hook --- src/hooks/__tests__/useServiceWorker.test.tsx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/hooks/__tests__/useServiceWorker.test.tsx diff --git a/src/hooks/__tests__/useServiceWorker.test.tsx b/src/hooks/__tests__/useServiceWorker.test.tsx new file mode 100644 index 0000000..9b1050f --- /dev/null +++ b/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(); + }); +}); From 457afa51f7255ba27d926aa89b21263c99815248 Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:11:56 +1000 Subject: [PATCH 7/9] Add e2e coverage for pick list search metadata --- e2e/picklist.spec.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..04159d0 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -4,6 +4,28 @@ const areaName = 'Drinks'; const additionalProduct = 'Pump 750'; 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('/'); From 6a8556a2b5bb99978d70642cd0faf74f792ab6dc Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:12:17 +1000 Subject: [PATCH 8/9] Add e2e test for toggling picked status --- e2e/picklist.spec.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..d6f988c 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -53,4 +53,32 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); + + test('toggles a product to picked and updates status indicators', async ({ page }) => { + await page.goto('/'); + + 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.click(); + await searchInput.fill(additionalProduct); + await page + .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') }) + .first() + .click(); + + 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(); + }); }); From c6351b4eb5613771ea6108d5ca77861bee74937a Mon Sep 17 00:00:00 2001 From: beatz174-bit Date: Mon, 24 Nov 2025 08:12:36 +1000 Subject: [PATCH 9/9] Add e2e coverage for show picked filter --- e2e/picklist.spec.ts | 50 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index 066f6f6..94eb93e 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test'; const areaName = 'Drinks'; const additionalProduct = 'Pump 750'; +const secondaryProduct = 'Mount Franklin 600ml'; test.describe('Active pick list', () => { test('creates a pick list and adds products from the search bar', async ({ page }) => { @@ -53,4 +54,53 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); + + test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => { + await page.goto('/'); + + 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.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 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(); + }); });