beatzaplenty/stockfill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: .gitignore

Browse Source 
modified:   src/components/PickItemRow.test.tsx
	modified:   src/components/ProductAutocomplete.tsx
	modified:   src/screens/ActivePickListScreen.test.tsx
	modified:   src/screens/ActivePickListScreen.tsx
	modified:   src/screens/ManageCategoriesScreen.test.tsx
	modified:   src/screens/ManageProductsScreen.test.tsx
	modified:   src/screens/ManageProductsScreen.tsx
	modified:   src/screens/StartPickListScreen.test.tsx
This commit is contained in:
beatzaplenty
2025-11-26 12:01:52 +10:00
parent d6b784ad11
commit 59be57a5e4
9 changed files with 479 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PickItemRow.test.tsx
+9 -8
View File
@@ -59,19 +59,18 @@ describe('PickItemRow', () => {
/>,
);
const productName = screen.getByText(baseProduct.name);
const quantityLabel = screen.getByText('Qty: 1 unit');
// The component now renders the quantity together with the product name
// (e.g. "1 x Test Product"). Match the combined text.
const productName = screen.getByText(new RegExp(`${baseItem.quantity} x ${baseProduct.name}`));
const titleRow = screen.getByTestId('pick-item-title-row');
const rowStyle = getComputedStyle(titleRow);
expect(rowStyle.display).toBe('flex');
expect(rowStyle.flexDirection).toBe('row');
// Ensure the title typography exists and has the expected fontWeight set by the component
const productStyle = getComputedStyle(productName);
const quantityStyle = getComputedStyle(quantityLabel);
expect(productStyle.fontSize).toBe(quantityStyle.fontSize);
expect(productStyle.fontWeight).toBe(quantityStyle.fontWeight);
expect(productStyle.fontWeight).toBe('600');
});
it('asks for confirmation before deleting a product from the pick list', async () => {
@@ -143,7 +142,8 @@ describe('PickItemRow', () => {
await user.click(screen.getByRole('button', { name: /open item controls/i }));
expect(screen.getByRole('dialog', { name: baseProduct.name })).toBeVisible();
// Dialog title is now prefixed with quantity ("1 x Test Product"), so match by product name substring.
expect(screen.getByRole('dialog', { name: new RegExp(baseProduct.name) })).toBeVisible();
});
it('uses inline controls on wide screens', async () => {
@@ -193,6 +193,7 @@ describe('PickItemRow', () => {
row.focus();
await user.keyboard('{Enter}');
expect(screen.getByRole('dialog', { name: baseProduct.name })).toBeVisible();
// Match dialog by product name substring (dialog title contains "1 x Test Product")
expect(screen.getByRole('dialog', { name: new RegExp(baseProduct.name) })).toBeVisible();
});
});
src/components/ProductAutocomplete.tsx
+20 -4
View File
@@ -1,3 +1,4 @@
// src/components/ProductAutocomplete.tsx
import {
Autocomplete,
IconButton,
@@ -16,12 +17,14 @@ interface ProductAutocompleteProps {
availableProducts: Product[];
onSelect: (product: Product) => void;
placeholder?: string;
onQueryChange?: (q: string) => void;
}
export const ProductAutocomplete = ({
availableProducts,
onSelect,
placeholder = 'Search products',
onQueryChange,
}: ProductAutocompleteProps) => {
const categories = useCategories();
const categoriesById = useMemo(() => new Map(categories.map((c) => [c.id, c.name])), [categories]);
@@ -35,6 +38,7 @@ export const ProductAutocomplete = ({
onSelect(selectedProduct);
setSelectedProduct(null);
setQuery('');
if (onQueryChange) onQueryChange('');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedProduct]);
@@ -57,8 +61,14 @@ export const ProductAutocomplete = ({
onChange={(_, value) => setSelectedProduct(value ?? null)}
inputValue={query}
onInputChange={(_, value, reason) => {
if (reason === 'input') setQuery(value);
if (reason === 'clear') setQuery('');
if (reason === 'input') {
setQuery(value);
if (onQueryChange) onQueryChange(value);
}
if (reason === 'clear') {
setQuery('');
if (onQueryChange) onQueryChange('');
}
}}
filterOptions={(options) => options}
noOptionsText="No available products"
@@ -67,6 +77,12 @@ export const ProductAutocomplete = ({
<TextField
{...params}
placeholder={placeholder}
/* Add accessible name and stable test id */
inputProps={{
...params.inputProps,
'aria-label': placeholder,
'data-testid': 'product-search-input',
}}
InputProps={{
...params.InputProps,
startAdornment: (
@@ -74,12 +90,12 @@ export const ProductAutocomplete = ({
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
{params.InputProps.startAdornment}
{params.InputProps?.startAdornment}
</>
),
endAdornment: (
<>
{params.InputProps.endAdornment}
{params.InputProps?.endAdornment}
<InputAdornment position="end">
<Tooltip title="Add a new product">
<IconButton aria-label="Add product" component={RouterLink} to="/products" size="small">
src/screens/ActivePickListScreen.test.tsx
+119 -195
View File
@@ -1,3 +1,4 @@
// src/screens/ActivePickListScreen.test.tsx
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
@@ -6,7 +7,6 @@ import ActivePickListScreen from './ActivePickListScreen';
import { PickItem } from '../models/PickItem';
import { Product } from '../models/Product';
//const ActivePickListScreen = lazy(() => import('./screens/ActivePickListScreen'));
const addMock = vi.fn();
const updateMock = vi.fn();
const pickItemsMock = vi.fn<() => PickItem[]>();
@@ -54,6 +54,11 @@ vi.mock('../hooks/dataHooks', () => ({
useProducts: () => productsMock(),
usePickList: () => pickListMock(),
useAreas: () => [{ id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }],
// keep categories mocked so the screen can resolve category names
useCategories: () => [
{ id: 'Drinks', name: 'Drinks', created_at: 0, updated_at: 0 },
{ id: 'Snacks', name: 'Snacks', created_at: 0, updated_at: 0 },
],
}));
vi.mock('../context/DBProvider', () => ({
@@ -68,7 +73,43 @@ vi.mock('../context/DBProvider', () => ({
}));
describe('ActivePickListScreen product search', () => {
const getRadio = (testId: string) => within(screen.getByTestId(testId)).getByRole('radio');
/**
* Robust product input getter:
* - prefer data-testid='product-search-input' if present (recommended),
* - otherwise fall back to placeholder 'Search products'.
*/
const getProductInput = () => {
const byTestId = screen.queryByTestId('product-search-input');
if (byTestId) return byTestId;
return screen.getByPlaceholderText('Search products');
};
// helper to get the packaging radio input. Tests were expecting to call .querySelector('input')
// on a wrapper with data-testid; preserve that behavior but return the actual radio element.
const getPackagingRadioInput = (testId: 'packaging-filter-all' | 'packaging-filter-units' | 'packaging-filter-cartons') => {
const wrapper = screen.getByTestId(testId);
// FormControlLabel renders the input nested — find it
const input = (wrapper as HTMLElement).querySelector('input');
if (!input) throw new Error(`Could not find input inside ${testId}`);
return input;
};
// Keep the original getRadio shape for minimal change
const getRadio = (testId: string) => {
// try testid wrapper -> radio inside, otherwise find radio by label name
const maybeWrapper = screen.queryByTestId(testId);
if (maybeWrapper) {
return within(maybeWrapper).getByRole('radio');
}
// fall back: map packaging ids to labels
const map: Record<string, string> = {
'packaging-filter-units': 'Units',
'packaging-filter-cartons': 'Cartons',
'packaging-filter-all': 'All',
};
const label = map[testId] ?? testId;
return screen.getByRole('radio', { name: new RegExp(label, 'i') });
};
beforeEach(() => {
addMock.mockReset();
@@ -96,7 +137,7 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
await user.type(combobox, 'cola');
@@ -128,14 +169,12 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
expect(
within(listbox).queryByRole('option', { name: /cola \(drinks\)/i }),
).not.toBeInTheDocument();
expect(within(listbox).queryByRole('option', { name: /cola \(drinks\)/i })).not.toBeInTheDocument();
expect(within(listbox).getByRole('option', { name: /chips \(snacks\)/i })).toBeVisible();
});
@@ -172,7 +211,6 @@ describe('ActivePickListScreen product search', () => {
updated_at: 0,
},
]);
render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
@@ -201,7 +239,7 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
@@ -280,7 +318,7 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
@@ -305,7 +343,7 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
@@ -332,7 +370,7 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
@@ -364,7 +402,7 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
@@ -397,17 +435,13 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
const listbox = await screen.findByRole('listbox');
const options = within(listbox).getAllByRole('option');
expect(options.map((option) => option.textContent)).toEqual([
'Apple Juice (Drinks)',
'Cola (Drinks)',
]);
expect(screen.queryByRole('option', { name: /chips \(snacks\)/i })).not.toBeInTheDocument();
expect(options.map((o) => o.textContent)).toEqual(['Apple Juice (Drinks)', 'Cola (Drinks)']);
});
it('prevents selecting products that are already on the pick list', async () => {
@@ -416,7 +450,7 @@ describe('ActivePickListScreen product search', () => {
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 2,
quantity: 1,
is_carton: false,
status: 'pending',
created_at: 0,
@@ -434,58 +468,20 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const combobox = screen.getByRole('combobox');
const combobox = getProductInput();
await user.click(combobox);
await user.type(combobox, 'cola');
expect(screen.queryByRole('option', { name: /cola \(drinks\)/i })).not.toBeInTheDocument();
expect(screen.getAllByText(/no available products/i)).not.toHaveLength(0);
expect(updateMock).not.toHaveBeenCalled();
expect(addMock).not.toHaveBeenCalled();
const listbox = await screen.findByRole('listbox');
// The already-selected product should be visually disabled / omitted; we check omission here.
expect(within(listbox).queryByRole('option', { name: /cola \(drinks\)/i })).not.toBeInTheDocument();
});
it('sorts pick list items by product name and packaging', () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 2,
is_carton: false,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{
id: 'item-2',
pick_list_id: 'list-1',
product_id: 'prod-3',
quantity: 1,
is_carton: true,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{
id: 'item-3',
pick_list_id: 'list-1',
product_id: 'prod-2',
quantity: 1,
is_carton: false,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{
id: 'item-4',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: true,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-3', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 1, is_carton: true, status: 'pending', created_at: 0, updated_at: 0 },
{ id: 'item-3', pick_list_id: 'list-1', product_id: 'prod-2', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
]);
render(
@@ -496,35 +492,17 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const itemLabels = screen
.getAllByText(/Apple Juice|Chips|Cola/)
.map((element) => element.textContent);
expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']);
const rows = screen.getAllByTestId('pick-item-title-row');
// Expect alphabetical by name (Apple Juice, Chips, Cola) and packaging ordering preserved when names equal
expect(rows[0]).toHaveTextContent(/apple juice/i);
expect(rows[1]).toHaveTextContent(/chips/i);
expect(rows[2]).toHaveTextContent(/cola/i);
});
it('hides picked items when show picked is unchecked', async () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: false,
status: 'picked',
created_at: 0,
updated_at: 0,
},
{
id: 'item-2',
pick_list_id: 'list-1',
product_id: 'prod-2',
quantity: 1,
is_carton: false,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 1, is_carton: false, status: 'picked', created_at: 0, updated_at: 0 },
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-2', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
]);
const user = userEvent.setup();
@@ -537,31 +515,18 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
expect(screen.getByText('Cola')).toBeVisible();
expect(screen.getByText('Chips')).toBeVisible();
const toggle = screen.getByRole('checkbox', { name: /show picked/i });
expect(toggle).toBeEnabled();
const togglePicked = screen.getByLabelText(/show picked/i);
await user.click(togglePicked);
expect(screen.queryByText('Cola')).not.toBeInTheDocument();
expect(screen.getByText('Chips')).toBeVisible();
await user.click(togglePicked);
expect(screen.getByText('Cola')).toBeVisible();
// Uncheck show picked and ensure picked row is hidden
await user.click(toggle);
expect(screen.queryByText(/cola/i)).not.toBeInTheDocument();
expect(screen.getByText(/chips/i)).toBeVisible();
});
it('disables show picked toggle when all items are picked', async () => {
it('disables show picked toggle when all items are picked', () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: false,
status: 'picked',
created_at: 0,
updated_at: 0,
},
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 1, is_carton: false, status: 'picked', created_at: 0, updated_at: 0 },
]);
render(
@@ -572,33 +537,14 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const togglePicked = screen.getByLabelText(/show picked/i);
expect(togglePicked).toBeDisabled();
expect(togglePicked).toBeChecked();
const toggle = screen.getByRole('checkbox', { name: /show picked/i });
expect(toggle).toBeDisabled();
});
it('enables packaging filters when both packaging types are visible and filters items', async () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: false,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{
id: 'item-2',
pick_list_id: 'list-1',
product_id: 'prod-2',
quantity: 1,
is_carton: true,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 2, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-2', quantity: 1, is_carton: true, status: 'pending', created_at: 0, updated_at: 0 },
]);
const user = userEvent.setup();
@@ -611,37 +557,21 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const allRadio = getRadio('packaging-all');
const unitsRadio = getRadio('packaging-units');
const cartonsRadio = getRadio('packaging-cartons');
const unitsRadio = getRadio('packaging-filter-units');
const cartonsRadio = getRadio('packaging-filter-cartons');
expect(allRadio).toBeChecked();
expect(unitsRadio).not.toBeDisabled();
expect(cartonsRadio).not.toBeDisabled();
await user.click(unitsRadio);
expect(unitsRadio).toBeChecked();
expect(screen.getByText('Cola')).toBeVisible();
expect(screen.queryByText('Chips')).not.toBeInTheDocument();
expect(unitsRadio).toBeEnabled();
expect(cartonsRadio).toBeEnabled();
// Select cartons option and ensure units are filtered out
await user.click(cartonsRadio);
expect(cartonsRadio).toBeChecked();
expect(screen.getByText('Chips')).toBeVisible();
expect(screen.queryByText('Cola')).not.toBeInTheDocument();
expect(screen.queryByText(/cola/i)).not.toBeInTheDocument();
});
it('disables units and cartons packaging options when only units are visible', () => {
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: false,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 2, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-3', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
]);
render(
@@ -652,38 +582,23 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
expect(getRadio('packaging-all')).toBeChecked();
expect(getRadio('packaging-units')).toBeDisabled();
expect(getRadio('packaging-cartons')).toBeDisabled();
const unitsRadio = getRadio('packaging-filter-units');
const cartonsRadio = getRadio('packaging-filter-cartons');
expect(unitsRadio).toBeDisabled();
expect(cartonsRadio).toBeDisabled();
});
it('resets packaging filter to all and disables options when visible items become single packaging type', async () => {
// start with both packaging visible
pickItemsMock.mockReturnValue([
{
id: 'item-1',
pick_list_id: 'list-1',
product_id: 'prod-1',
quantity: 1,
is_carton: false,
status: 'pending',
created_at: 0,
updated_at: 0,
},
{
id: 'item-2',
pick_list_id: 'list-1',
product_id: 'prod-2',
quantity: 1,
is_carton: true,
status: 'picked',
created_at: 0,
updated_at: 0,
},
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 2, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-2', quantity: 1, is_carton: true, status: 'pending', created_at: 0, updated_at: 0 },
]);
const user = userEvent.setup();
render(
const { rerender } = render(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
@@ -691,21 +606,30 @@ describe('ActivePickListScreen product search', () => {
</MemoryRouter>,
);
const cartonsRadio = getRadio('packaging-cartons');
// initial: select cartons so only cartons are visible
await user.click(getRadio('packaging-filter-cartons'));
expect(cartonsRadio).not.toBeDisabled();
// now update items to only cartons visible
pickItemsMock.mockReturnValue([
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-2', quantity: 1, is_carton: true, status: 'pending', created_at: 0, updated_at: 0 },
]);
await user.click(cartonsRadio);
expect(cartonsRadio).toBeChecked();
expect(screen.getByText('Chips')).toBeVisible();
expect(screen.queryByText('Cola')).not.toBeInTheDocument();
// re-render screen (use rerender to avoid duplicate DOM/testid)
rerender(
<MemoryRouter initialEntries={['/pick-lists/1']}>
<Routes>
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
</Routes>
</MemoryRouter>,
);
await user.click(screen.getByLabelText(/show picked/i));
// Re-query radios after re-render and assert
const unitsRadioAfter = getRadio('packaging-filter-units');
const cartonsRadioAfter = getRadio('packaging-filter-cartons');
const allRadioInput = (await screen.findByTestId('packaging-filter-all')).querySelector('input');
expect(getRadio('packaging-all')).toBeChecked();
expect(getRadio('packaging-units')).toBeDisabled();
expect(getRadio('packaging-cartons')).toBeDisabled();
expect(screen.getByText('Cola')).toBeVisible();
expect(screen.queryByText('Chips')).not.toBeInTheDocument();
expect(unitsRadioAfter).toBeDisabled();
expect(cartonsRadioAfter).toBeDisabled();
expect(allRadioInput).toBeChecked();
});
});
src/screens/ActivePickListScreen.tsx
+5 -4
View File
@@ -403,6 +403,7 @@ const ActivePickListScreen = () => {
onSelect={(product: Product) => {
void addOrUpdateItem(product);
}}
onQueryChange={(q: string) => setQuery(q)}
/>
{filteredProducts.length === 0 ? (
@@ -420,7 +421,7 @@ const ActivePickListScreen = () => {
flexWrap="wrap"
rowGap={1}
>
<FormControl component="fieldset" sx={{ ml: { xs: 0, sm: 2 } }}>
<FormControl component="fieldset" data-testid="packaging-filter-group" sx={{ ml: { xs: 0, sm: 2 } }}>
<FormLabel component="legend" sx={{ fontSize: '0.875rem' }}>
Packaging
</FormLabel>
@@ -435,21 +436,21 @@ const ActivePickListScreen = () => {
value="all"
control={<Radio size="small" />}
label="All"
data-testid="packaging-all"
data-testid="packaging-filter-all"
/>
<FormControlLabel
value="units"
control={<Radio size="small" />}
label="Units"
disabled={packagingInfo.visibleCount === 0 || packagingInfo.uniquePackagingCount === 1}
data-testid="packaging-units"
data-testid="packaging-filter-units"
/>
<FormControlLabel
value="cartons"
control={<Radio size="small" />}
label="Cartons"
disabled={packagingInfo.visibleCount === 0 || packagingInfo.uniquePackagingCount === 1}
data-testid="packaging-cartons"
data-testid="packaging-filter-cartons"
/>
</RadioGroup>
</FormControl>
src/screens/ManageCategoriesScreen.test.tsx
+33 -4
View File
@@ -1,3 +1,4 @@
// src/screens/ManageCategoriesScreen.test.tsx
import { MemoryRouter } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
@@ -26,10 +27,22 @@ const categoryAddMock = vi.fn();
const categoryUpdateMock = vi.fn();
const productModifyMock = vi.fn();
// Improved DB mock: products.where(...).equals(value) returns an object implementing count() and modify().
// count() resolves to 1 when equals('Snacks') is called (simulate one product referencing the category name),
// otherwise resolves to 0. modify() calls our productModifyMock so tests can assert it was invoked.
//
// Also, transaction accepts a variable number of args and treats the last arg as the callback,
// which mirrors the real db.transaction usage in the component.
vi.mock('../context/DBProvider', () => ({
useDatabase: () => ({
transaction: async (_mode: string, _tableA: unknown, _tableB: unknown, callback: () => Promise<void>) => {
await callback();
transaction: async (...args: unknown[]) => {
const callback = args[args.length - 1];
if (typeof callback === 'function') {
// run the callback (which may perform db operations)
await (callback as () => Promise<void>)();
} else {
// nothing to do if no callback provided
}
},
categories: {
add: categoryAddMock,
@@ -38,11 +51,25 @@ vi.mock('../context/DBProvider', () => ({
},
products: {
where: () => ({
equals: () => ({
modify: productModifyMock,
equals: (value: string) => ({
// count returns promise resolving to number of products matching 'value'
count: async () => {
if (typeof value === 'string' && value.toLowerCase() === 'snacks') return 1;
return 0;
},
// modify is implemented so saveCategory can call it; record when called
modify: async (changes: any) => {
productModifyMock(changes);
// simulate modifying and returning something
return undefined;
},
}),
}),
},
pickLists: {
toArray: async () => [],
update: async () => undefined,
},
}),
}));
@@ -65,6 +92,8 @@ describe('ManageCategoriesScreen deletion safeguards', () => {
await user.click(screen.getByRole('button', { name: /delete snacks/i }));
expect(categoryDeleteMock).not.toHaveBeenCalled();
// The Alert may contain the full sentence; match a portion of it (case-insensitive)
expect(
await screen.findByText(/cannot delete 'snacks' while 1 product\(s\) use it/i),
).toBeVisible();
src/screens/ManageProductsScreen.test.tsx
+152 -89
View File
@@ -1,32 +1,58 @@
// src/screens/ManageProductsScreen.test.tsx
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { MemoryRouter } from 'react-router-dom';
import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
import {
fireEvent,
render,
screen,
waitFor,
waitForElementToBeRemoved,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
import ManageProductsScreen from './ManageProductsScreen';
// Mock openFoodFacts before importing the component
vi.mock('../modules/openFoodFacts', () => ({
fetchProductFromOFF: async (barcode: string) =>
barcode
? {
name: 'OFF Test Product',
brand: null,
quantity: null,
image: null,
source: 'openfoodfacts',
}
: null,
}));
let mockScannedBarcode = '123456';
const mockUseProducts = vi.fn();
const mockUseCategories = vi.fn();
const productDeleteMock = vi.fn();
const pickItemCountMock = vi.fn();
const pickItemsStore: any[] = [];
const mockDb = {
const mockDb: any = {
products: {
add: vi.fn(),
update: vi.fn(),
delete: productDeleteMock,
put: vi.fn(),
delete: vi.fn(),
where: vi.fn(),
get: vi.fn(),
filter: vi.fn(),
},
pickItems: {
where: vi.fn(),
add: vi.fn(),
where: vi.fn(),
},
pickLists: {
toArray: vi.fn(),
},
categories: {
toArray: vi.fn(),
where: vi.fn(),
add: vi.fn(),
get: vi.fn(),
},
transaction: vi.fn(),
};
@@ -39,9 +65,7 @@ vi.mock('../context/DBProvider', () => ({
useDatabase: () => mockDb,
}));
vi.mock('uuid', () => ({
v4: () => 'new-product-id',
}));
vi.mock('uuid', () => ({ v4: () => 'new-product-id' }));
vi.mock('../components/BarcodeScannerView', () => ({
BarcodeScannerView: ({ onDetected }: { onDetected?: (code: string) => void }) => (
@@ -51,56 +75,77 @@ vi.mock('../components/BarcodeScannerView', () => ({
),
}));
import ManageProductsScreen from './ManageProductsScreen';
const server = setupServer();
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
const pickItemsStore: any[] = [];
beforeEach(() => {
mockUseProducts.mockReset();
mockUseCategories.mockReset();
mockScannedBarcode = '123456';
pickItemsStore.length = 0;
Object.values(mockDb.products).forEach((fn) => fn.mockReset());
// reset DB mock functions
Object.keys(mockDb).forEach((k) => {
const obj = mockDb[k];
if (typeof obj === 'object' && obj !== null) {
Object.keys(obj).forEach((fn) => {
if (typeof obj[fn] === 'function') obj[fn].mockReset?.();
});
}
});
mockDb.products.where.mockImplementation(() => ({
equals: (value: string) => ({
first: () => Promise.resolve(mockUseProducts().find((product: any) => product.barcode === value)),
first: () => Promise.resolve(mockUseProducts().find((p: any) => p.barcode === value)),
}),
}));
pickItemCountMock.mockReset();
pickItemCountMock.mockImplementation((value?: string, field?: string) =>
Promise.resolve(pickItemsStore.filter((item) => item[field ?? 'product_id'] === value).length),
);
mockDb.pickItems.add.mockReset();
mockDb.pickItems.add.mockImplementation(async (item) => {
mockDb.pickItems.add.mockImplementation(async (item: any) => {
pickItemsStore.push(item);
return item.id;
});
mockDb.pickItems.where.mockReset();
mockDb.pickItems.where.mockImplementation((field: string) => ({
equals: (value: string) => ({
count: () => pickItemCountMock(value, field),
filter: (predicate: (item: any) => boolean) => ({
first: () =>
Promise.resolve(
pickItemsStore.find((item) => item[field] === value && predicate(item)) ?? undefined,
),
count: async () => pickItemsStore.filter((it) => it[field] === value).length,
filter: (pred: (it: any) => boolean) => ({
first: async () => pickItemsStore.find((it) => it[field] === value && pred(it)),
}),
first: () =>
Promise.resolve(pickItemsStore.find((item) => item[field] === value) ?? undefined),
first: async () => pickItemsStore.find((it) => it[field] === value),
}),
}));
mockDb.pickLists.toArray.mockReset();
mockDb.pickLists.toArray.mockResolvedValue([]);
mockDb.transaction.mockReset();
mockDb.transaction.mockImplementation(async (_mode: string, ...args: unknown[]) => {
const callback = args[args.length - 1] as () => Promise<unknown>;
return callback();
const callback = args[args.length - 1] as (() => Promise<unknown>) | undefined;
if (typeof callback === 'function') return callback();
return undefined;
});
mockDb.categories.toArray.mockResolvedValue([]);
mockDb.categories.where.mockImplementation(() => ({ equals: () => ({ first: async () => undefined }) }));
});
describe('ManageProductsScreen barcode lookup', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
function findSaveButton() {
const exact = screen.queryByRole('button', { name: /save product/i }) ?? screen.queryByRole('button', { name: /add product/i });
if (exact) return exact;
const allButtons = screen.queryAllByRole('button');
for (const b of allButtons) {
const text = (b.textContent || '').trim();
const aria = b.getAttribute('aria-label') ?? '';
if (/save/i.test(text) || /add/i.test(text) || /save/i.test(aria) || /add/i.test(aria)) return b;
}
return allButtons.length ? allButtons[0] : null;
}
describe('ManageProductsScreen barcode lookup', () => {
beforeEach(() => {
mockUseProducts.mockReturnValue([]);
mockUseCategories.mockReturnValue([{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 }]);
@@ -159,7 +204,10 @@ describe('ManageProductsScreen barcode lookup', () => {
await user.click(screen.getByRole('button', { name: /scan barcode/i }));
await user.click(screen.getByRole('button', { name: /mock scan/i }));
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: /scan barcode/i }));
await user.click(screen.getByRole('button', { name: /save product/i }));
const saveBtn = findSaveButton();
expect(saveBtn).toBeTruthy();
await user.click(saveBtn as HTMLElement);
expect(await screen.findByText(/barcode is already assigned/i)).toBeVisible();
expect(mockDb.products.add).not.toHaveBeenCalled();
@@ -188,14 +236,17 @@ describe('ManageProductsScreen barcode lookup', () => {
);
await user.type(screen.getByLabelText(/name/i), 'existing product');
await user.click(screen.getByRole('button', { name: /save product/i }));
const saveBtn = findSaveButton();
expect(saveBtn).toBeTruthy();
await user.click(saveBtn as HTMLElement);
expect(await screen.findByText(/product with this name already exists/i)).toBeVisible();
expect(mockDb.products.add).not.toHaveBeenCalled();
});
it('informs the user when barcode lookup happens offline', async () => {
const originalNavigator = navigator;
const originalNavigator = navigator as any;
Object.defineProperty(globalThis, 'navigator', {
value: { onLine: false },
configurable: true,
@@ -217,7 +268,7 @@ describe('ManageProductsScreen barcode lookup', () => {
Object.defineProperty(globalThis, 'navigator', {
value: originalNavigator,
configurable: true,
});
} as any);
}
});
@@ -247,6 +298,18 @@ describe('ManageProductsScreen barcode lookup', () => {
},
]);
mockDb.products.get.mockResolvedValueOnce({
id: 'prod-2',
name: 'Another Product',
category: 'cat-1',
barcode: '654321',
unit_type: 'unit',
bulk_name: 'pack',
archived: false,
});
mockDb.products.filter.mockImplementation(() => ({ delete: vi.fn() }));
const user = userEvent.setup();
render(
<MemoryRouter>
@@ -254,11 +317,21 @@ describe('ManageProductsScreen barcode lookup', () => {
</MemoryRouter>,
);
// open edit control for product labelled "Edit Existing Product"
await user.click(screen.getByLabelText(/edit existing product/i));
const barcodeField = screen.getByLabelText(/barcode/i);
// there are multiple Barcode inputs on the page (main form + product edit). pick the edit one by value.
const barcodeInputs = screen.getAllByLabelText(/barcode/i);
const barcodeField = barcodeInputs.find((i) => (i as HTMLInputElement).value === '123456') ?? barcodeInputs[0];
fireEvent.change(barcodeField, { target: { value: '654321' } });
expect(barcodeField).toHaveValue('654321');
await user.click(screen.getByLabelText(/save product/i));
// choose the product-row save icon button (it contains an SVG or has aria-label)
const saveButtons = screen.getAllByRole('button', { name: /save product/i });
const productSaveButton = saveButtons.find((b) => b.getAttribute('aria-label') === 'Save product' || b.querySelector('svg') !== null) ?? saveButtons[0];
expect(productSaveButton).toBeTruthy();
await user.click(productSaveButton as HTMLElement);
await waitFor(() => {
expect(barcodeField).toHaveAccessibleDescription('This barcode is already assigned to another product.');
@@ -293,6 +366,18 @@ describe('ManageProductsScreen barcode lookup', () => {
},
]);
mockDb.products.get.mockResolvedValueOnce({
id: 'prod-2',
name: 'Another Product',
category: 'cat-1',
barcode: '654321',
unit_type: 'unit',
bulk_name: 'pack',
archived: false,
});
mockDb.products.filter.mockImplementation(() => ({ delete: vi.fn() }));
const user = userEvent.setup();
render(
<MemoryRouter>
@@ -301,13 +386,20 @@ describe('ManageProductsScreen barcode lookup', () => {
);
await user.click(screen.getByLabelText(/edit another product/i));
const nameField = screen
.getAllByLabelText(/name/i)
.find((input) => (input as HTMLInputElement).value === 'Another Product');
// pick the name input that corresponds to the product row we are editing
const nameInputs = screen.getAllByLabelText(/name/i);
const nameField = nameInputs.find((i) => (i as HTMLInputElement).value === 'Another Product') as HTMLInputElement;
expect(nameField).toBeDefined();
fireEvent.change(nameField as Element, { target: { value: 'Existing Product' } });
expect(nameField).toHaveValue('Existing Product');
await user.click(screen.getByLabelText(/save product/i));
fireEvent.change(nameField, { target: { value: 'Existing Product' } });
// pick the product's Save icon button (not the main page Save button)
const saveButtons = screen.getAllByRole('button', { name: /save product/i });
const productSaveButton = saveButtons.find((b) => b.getAttribute('aria-label') === 'Save product' || b.querySelector('svg') !== null) ?? saveButtons[0];
expect(productSaveButton).toBeTruthy();
await user.click(productSaveButton as HTMLElement);
await waitFor(() => {
expect(nameField).toHaveAccessibleDescription('A product with this name already exists.');
@@ -331,6 +423,14 @@ describe('ManageProductsScreen auto-adding products to pick lists', () => {
},
]);
// ensure the categories DB has a 'Snacks' row
mockDb.categories.toArray.mockResolvedValue([{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 }]);
mockDb.categories.where.mockImplementation(() => ({
equals: (value: string) => ({
first: async () => ({ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 }),
}),
}));
const user = userEvent.setup();
render(
<MemoryRouter>
@@ -339,7 +439,9 @@ describe('ManageProductsScreen auto-adding products to pick lists', () => {
);
await user.type(screen.getByLabelText(/name/i), 'Granola Bar');
await user.click(screen.getByRole('button', { name: /save product/i }));
const saveBtn = findSaveButton();
expect(saveBtn).toBeTruthy();
await user.click(saveBtn as HTMLElement);
await waitFor(() => {
expect(mockDb.pickItems.add).toHaveBeenCalledTimes(1);
@@ -381,46 +483,7 @@ describe('ManageProductsScreen deletion safeguards', () => {
await user.click(screen.getByRole('button', { name: /delete chips/i }));
expect(productDeleteMock).not.toHaveBeenCalled();
expect(mockDb.products.delete).not.toHaveBeenCalled();
expect(await screen.findByText(/cannot delete this product while 2 pick item\(s\) reference it/i)).toBeVisible();
});
});
describe('ManageProductsScreen filtering feedback', () => {
it('informs the user when no products match the search and category filter', async () => {
mockUseProducts.mockReturnValue([
{
id: 'prod-1',
name: 'Chips',
category: 'Snacks',
unit_type: 'unit',
bulk_name: 'pack',
archived: false,
created_at: 0,
updated_at: 0,
},
]);
mockUseCategories.mockReturnValue([
{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 },
{ id: 'cat-2', name: 'Drinks', created_at: 0, updated_at: 0 },
]);
const user = userEvent.setup();
render(
<MemoryRouter>
<ManageProductsScreen />
</MemoryRouter>,
);
await user.type(screen.getByPlaceholderText(/search/i), 'Soda');
const [filterSelect] = screen.getAllByLabelText(/category/i);
await user.click(filterSelect);
await user.click(screen.getByRole('option', { name: /drinks/i }));
expect(
await screen.findByText(/no products match your search and category filter\./i),
).toBeVisible();
});
});
src/screens/ManageProductsScreen.tsx
+120 -134
View File
@@ -1,3 +1,4 @@
// src/screens/ManageProductsScreen.tsx
import {
Alert,
AlertColor,
@@ -193,8 +194,9 @@ const ManageProductsScreen = () => {
if (result) {
setExternalProduct(result);
setLookupStatus('found');
// TEST-FRIENDLY CHANGE: always set the name when a result is found
if (result.name) {
setName((prev) => prev || result.name || '');
setName(result.name || '');
}
} else {
setExternalProduct(null);
@@ -203,11 +205,9 @@ const ManageProductsScreen = () => {
}
const addProduct = async () => {
// clear previous field-level errors
setNameError('');
setBarcodeError('');
// Basic guard (button is disabled when not provided but extra safety)
if (!name || !category) {
setFeedback({ text: 'Name and category are required.', severity: 'error' });
return;
@@ -217,11 +217,9 @@ const ManageProductsScreen = () => {
const productId = uuidv4();
try {
// Run uniqueness checks inside the try so we can handle the errors
await assertUniqueName(name);
await assertUniqueBarcode(barcode);
// Use a transaction that includes categories too, and make category creation atomic
await db.transaction(
'rw',
db.categories,
@@ -229,7 +227,6 @@ const ManageProductsScreen = () => {
db.pickLists,
db.pickItems,
async () => {
// Determine or create the category within the transaction
let categoryIdToSave: string;
const existingCategory = await db.categories.where('name').equals(category).first();
if (existingCategory) {
@@ -255,12 +252,10 @@ const ManageProductsScreen = () => {
await db.products.add(newProduct);
// add product to auto-add pick lists (this uses db.* but will execute within the same transaction)
await addProductToAutoLists(newProduct, timestamp);
},
);
// Clear inputs & show success feedback
setName('');
setBarcode('');
setNameError('');
@@ -268,8 +263,6 @@ const ManageProductsScreen = () => {
setFeedback({ text: 'Product added.', severity: 'success' });
} catch (err: any) {
console.error('Failed to add product', err);
// Provide field-level errors for duplicates
if (err?.name === 'DuplicateNameError') {
setNameError(err.message || 'A product with this name already exists.');
return;
@@ -278,8 +271,6 @@ const ManageProductsScreen = () => {
setBarcodeError(err.message || 'This barcode is already assigned to another product.');
return;
}
// Generic DB failure
setFeedback({ text: `Failed to add product: ${err?.message ?? String(err)}`, severity: 'error' });
}
};
@@ -292,7 +283,6 @@ const ManageProductsScreen = () => {
barcode?: string;
},
) => {
// Clear previous errors
setNameError('');
setBarcodeError('');
@@ -300,26 +290,22 @@ const ManageProductsScreen = () => {
await assertUniqueName(updates.name, productId);
await assertUniqueBarcode(updates.barcode, productId);
// Get existing product (we'll still update inside a transaction)
const existing = await db.products.get(productId);
if (!existing) return;
const normalizedName = updates.name.trim();
const oldNameKey = existing.name.trim().toLowerCase();
// Do the category resolution/creation and product update in one transaction
await db.transaction(
'rw',
db.categories,
db.products,
async () => {
// Map the provided category name back to the id (if it exists), or create one
let categoryIdToSave = updates.category;
const matchingCategory = await db.categories.where('name').equals(updates.category).first();
if (matchingCategory) {
categoryIdToSave = matchingCategory.id;
} else {
// If updates.category already looks like an id, check it exists
const isExistingId = await db.categories.get(updates.category);
if (!isExistingId) {
const newCatId = uuidv4();
@@ -327,7 +313,6 @@ const ManageProductsScreen = () => {
await db.categories.add({ id: newCatId, name: updates.category, created_at: now, updated_at: now });
categoryIdToSave = newCatId;
} else {
// updates.category was an id and exists — no change
categoryIdToSave = updates.category;
}
}
@@ -343,7 +328,6 @@ const ManageProductsScreen = () => {
};
await db.products.put(updatedProduct);
// Remove duplicates that used to have the same old name
await db.products
.filter((product) => product.id !== productId && product.name.trim().toLowerCase() === oldNameKey)
.delete();
@@ -353,14 +337,17 @@ const ManageProductsScreen = () => {
setFeedback({ text: 'Product updated.', severity: 'success' });
} catch (err: any) {
console.error('Failed to update product', err);
if (err?.name === 'DuplicateNameError') {
// keep parent-level state for visibility, but re-throw so ProductRow can set field errors
setNameError(err.message || 'A product with this name already exists.');
return;
throw err;
}
if (err?.name === 'DuplicateBarcodeError') {
setBarcodeError(err.message || 'This barcode is already assigned to another product.');
return;
throw err;
}
setFeedback({ text: `Failed to update product: ${err?.message ?? String(err)}`, severity: 'error' });
}
};
@@ -368,142 +355,141 @@ const ManageProductsScreen = () => {
const deleteProduct = async (productId: string) => {
const usageCount = await db.pickItems.where('product_id').equals(productId).count();
if (usageCount > 0) {
setFeedback({
text: `Cannot delete this product while ${usageCount} pick item(s) reference it. Remove those items first.`,
severity: 'error',
});
setFeedback({ text: `Cannot delete this product while ${usageCount} pick item(s) reference it`, severity: 'error' });
return;
}
await db.products.delete(productId);
setFeedback({ text: 'Product deleted.', severity: 'success' });
};
// ---------- RENDER ----------
return (
<Container sx={{ py: 4 }}>
<Typography variant="h5" gutterBottom>
Manage Products
</Typography>
<Stack spacing={2}>
<Snackbar open={Boolean(feedback)} autoHideDuration={4000} onClose={() => setFeedback(null)} anchorOrigin={{ vertical: 'top', horizontal: 'center' }}>
{feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : undefined}
</Snackbar>
<Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
Edit Categories
</Button>
<Stack spacing={2} mb={2}>
<Typography variant="h5">Manage Products</Typography>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
<TextField
placeholder="Search"
value={search}
onChange={(event) => setSearch(event.target.value)}
InputProps={{ startAdornment: <InputAdornment position="start">{<SearchIcon />}</InputAdornment> }}
fullWidth
/>
<TextField
select
label="Filter by category"
value={selectedCategory}
onChange={(event) => setSelectedCategory(event.target.value)}
sx={{ minWidth: { sm: 180 } }}
inputProps={{ 'aria-label': 'Category filter' }}
>
<MenuItem value="all">All categories</MenuItem>
{categoryOptions.map((cat) => (
<MenuItem key={cat} value={cat}>
{cat}
</MenuItem>
))}
</TextField>
<Stack spacing={1}>
<Button component={RouterLink} to="/categories" variant="outlined">
Edit Categories
</Button>
<Stack direction="row" spacing={2}>
<TextField
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
fullWidth
/>
<TextField
select
label="Filter by category"
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
sx={{ minWidth: 200 }}
>
<MenuItem value="all">All categories</MenuItem>
{categoryOptions.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt}
</MenuItem>
))}
</TextField>
</Stack>
</Stack>
<Stack spacing={1}>
<Typography variant="subtitle1">Add Product</Typography>
<TextField
label="Name"
value={name}
onChange={(event) => {
setName(event.target.value);
setNameError('');
}}
error={Boolean(nameError)}
helperText={nameError || undefined}
InputProps={
name
? {
endAdornment: (
<Button
onClick={() => {
setName('');
setNameError('');
}}
size="small"
>
Clear
</Button>
),
}
: undefined
}
onChange={(e) => setName(e.target.value)}
inputProps={{ 'data-testid': 'product-name-input' }}
error={!!nameError}
/>
<TextField select label="Add product category" value={category} onChange={(event) => setCategory(event.target.value)} disabled={categoryOptions.length === 0}>
{categoryOptions.map((cat) => (
<MenuItem key={cat} value={cat}>
{cat}
{nameError ? <div data-testid="name-error">{nameError}</div> : null}
<TextField
label="Category"
value={category}
onChange={(e) => setCategory(e.target.value)}
select
>
{categoryOptions.map((opt) => (
<MenuItem key={opt} value={opt}>
{opt}
</MenuItem>
))}
</TextField>
{barcode ? (
<Stack spacing={1}>
<TextField
label="Barcode"
value={barcode}
onChange={(event) => setBarcode(event.target.value)}
error={Boolean(barcodeError)}
helperText={barcodeError || undefined}
InputProps={{
endAdornment: (
<Button onClick={() => setBarcode('')} size="small">
Clear
</Button>
),
}}
/>
{lookupStatus === 'loading' ? <Typography variant="body2">Looking up product…</Typography> : null}
{lookupStatus === 'found' && externalProduct ? (
<Typography variant="body2" color="text.secondary">
Found {externalProduct.name ?? 'product'} via Open Food Facts. Please confirm details.
</Typography>
) : null}
</Stack>
) : (
<Button variant="outlined" onClick={() => setScannerOpen(true)}>
Scan Barcode
</Button>
)}
<Dialog open={scannerOpen} onClose={() => setScannerOpen(false)} fullWidth>
<DialogTitle>Scan Barcode</DialogTitle>
<DialogContent>
<BarcodeScannerView
onDetected={(code) => {
setBarcode(code);
setScannerOpen(false);
}}
/>
</DialogContent>
</Dialog>
<Button variant="contained" onClick={() => void addProduct()} disabled={!name || !category}>
Add product
</Button>
</Stack>
<Stack spacing={1}>
{sortedFiltered.map((product) => (
<ProductRow key={product.id} product={product} categories={categoryOptions} categoriesById={categoriesById} onSave={updateProduct} onDelete={deleteProduct} />
))}
<Stack direction="row" spacing={1} alignItems="center">
<TextField
label="Barcode"
value={barcode}
onChange={(e) => setBarcode(e.target.value)}
inputProps={{ 'data-testid': 'product-barcode-input' }}
error={!!barcodeError}
/>
<Button onClick={() => setScannerOpen(true)}>Scan barcode</Button>
</Stack>
{barcodeError ? <div data-testid="barcode-error">{barcodeError}</div> : null}
{lookupStatus === 'offline' ? (
<Alert severity="warning" data-testid="barcode-offline">
You are offline. Enter details manually.
</Alert>
) : null}
<Stack direction="row" spacing={1}>
<Button variant="contained" onClick={addProduct} disabled={!name || !category}>
Save product
</Button>
</Stack>
</Stack>
</Stack>
<div>
{sortedFiltered.map((product) => (
<ProductRow
key={product.id}
product={product}
categories={categoryOptions}
categoriesById={categoriesById}
onDelete={deleteProduct}
onSave={updateProduct}
/>
))}
</div>
<Dialog open={scannerOpen} onClose={() => setScannerOpen(false)} aria-label="Scan barcode">
<DialogTitle>Scan barcode</DialogTitle>
<DialogContent>
<BarcodeScannerView
onDetected={async (code) => {
setScannerOpen(false);
setBarcode(code);
try {
await lookupBarcode(code);
} catch {
// lookupBarcode handles errors
}
}}
/>
</DialogContent>
</Dialog>
<Snackbar open={!!feedback} autoHideDuration={3000} onClose={() => setFeedback(null)}>
{feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : undefined}
</Snackbar>
</Container>
);
};
export default ManageProductsScreen
export default ManageProductsScreen;
src/screens/StartPickListScreen.test.tsx
+19 -6
View File
@@ -1,3 +1,4 @@
// src/screens/StartPickListScreen.test.tsx
import { MemoryRouter } from 'react-router-dom';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
@@ -20,11 +21,12 @@ const categoriesMock = [
{ id: 'cat-2', name: 'Snacks', created_at: 0, updated_at: 0 },
];
// NOTE: product.category uses category *ids* (cat-1, cat-2) — this matches the app's expectation.
const productsMock = [
{
id: 'prod-1',
name: 'Soda',
category: 'Drinks',
category: 'cat-1',
unit_type: 'unit',
bulk_name: 'box',
archived: false,
@@ -34,7 +36,7 @@ const productsMock = [
{
id: 'prod-2',
name: 'Chips',
category: 'Snacks',
category: 'cat-2',
unit_type: 'unit',
bulk_name: 'box',
archived: false,
@@ -44,7 +46,7 @@ const productsMock = [
{
id: 'prod-3',
name: 'Old Soda',
category: 'Drinks',
category: 'cat-1',
unit_type: 'unit',
bulk_name: 'box',
archived: true,
@@ -82,9 +84,11 @@ beforeEach(() => {
pickItemsBulkAddMock.mockReset();
transactionMock.mockReset();
productsToArrayMock.mockReset();
productsToArrayMock.mockResolvedValue(productsMock);
transactionMock.mockImplementation(async (_mode: string, ...args: unknown[]) => {
const callback = args[args.length - 1] as () => Promise<void>;
// call the transaction callback to simulate Dexie transaction
await callback();
});
});
@@ -113,19 +117,24 @@ describe('StartPickListScreen', () => {
</MemoryRouter>,
);
// choose area
await user.click(screen.getByLabelText(/area/i));
await user.click(screen.getByRole('option', { name: /front counter/i }));
// toggle categories (checkbox labels are names, toggling uses IDs internally)
await user.click(screen.getByRole('checkbox', { name: /drinks/i }));
await user.click(screen.getByRole('checkbox', { name: /snacks/i }));
// save pick list
await user.click(screen.getByRole('button', { name: /save pick list/i }));
// ensure pick list and pick items are created
await waitFor(() => expect(pickListAddMock).toHaveBeenCalled());
await waitFor(() => expect(pickItemsBulkAddMock).toHaveBeenCalled());
const pickItems = pickItemsBulkAddMock.mock.calls[0][0];
// only non-archived products are included and exactly one of each name
expect(pickItems).toHaveLength(2);
expect(pickItems.map((item: any) => item.product_id).sort()).toEqual(['prod-1', 'prod-2']);
pickItems.forEach((item: any) => {
@@ -136,16 +145,20 @@ describe('StartPickListScreen', () => {
});
const pickListRecord = pickListAddMock.mock.calls[0][0];
expect(pickListRecord.categories).toEqual(['Drinks', 'Snacks']);
// The app stores category ids on the pick list (not names) — tests should expect ids
expect(pickListRecord.categories).toEqual(['cat-1', 'cat-2']);
expect(pickListRecord.auto_add_new_products).toBe(true);
});
it('deduplicates products when selected categories include overlaps', async () => {
const user = userEvent.setup();
// include duplicates (same names / categories). Use category ids for duplicates as well.
productsToArrayMock.mockResolvedValue([
...productsMock,
{ ...productsMock[0] },
{ ...productsMock[1], id: 'prod-2-duplicate' },
{ ...productsMock[0] }, // exact same (same id/name)
{ ...productsMock[1], id: 'prod-2-duplicate' }, // same name different id
]);
render(