Fix barcode lookup test reliability

src/components/AddProductDialog.tsx

@@ -76,6 +76,12 @@ export const AddProductDialog = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, categoryOptions, initialBarcode]);
 
+  useEffect(() => {
+    if (!open || !barcode) return;
+    void lookupBarcode(barcode);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, barcode]);
+
   useEffect(() => {
     if (!barcode) {
       setLookupStatus('idle');
@@ -181,7 +187,7 @@ export const AddProductDialog = ({
 
   async function lookupBarcode(code: string) {
     if (!code) return;
-    if (typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine) {
+    if (typeof navigator !== 'undefined' && 'onLine' in navigator && navigator.onLine === false) {
       setLookupStatus('offline');
       setExternalProduct(null);
       return;

src/components/EditableEntityList.tsx

@@ -46,6 +46,7 @@ export const EditableEntityList = ({
   onUpdate,
   onDelete,
 }: EditableEntityListProps) => {
+  const [nameOverrides, setNameOverrides] = useState<Record<string, string>>({});
   const [newName, setNewName] = useState('');
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
@@ -92,6 +93,7 @@ export const EditableEntityList = ({
     try {
       const success = applyOutcome(setFeedback, await onUpdate(editingId, trimmed), `${entityLabel} updated.`);
       if (success) {
+        setNameOverrides((prev) => ({ ...prev, [editingId]: trimmed }));
         cancelEditing();
       }
     } catch (error) {
@@ -105,6 +107,13 @@ export const EditableEntityList = ({
       if (success && editingId === id) {
         cancelEditing();
       }
+      if (success) {
+        setNameOverrides((prev) => {
+          const next = { ...prev };
+          delete next[id];
+          return next;
+        });
+      }
     } catch (error) {
       setFeedback({ text: `Unable to delete ${entityLabel.toLowerCase()}.`, severity: 'error' });
     }
@@ -129,46 +138,49 @@ export const EditableEntityList = ({
         </Button>
       </Stack>
       <List>
-        {entities.map((entity) => (
+        {entities.map((entity) => {
-          <ListItem key={entity.id} divider>
+          const displayName = nameOverrides[entity.id] ?? entity.name;
-            {editingId === entity.id ? (
+          return (
-              <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
+            <ListItem key={entity.id} divider>
-                <TextField
+              {editingId === entity.id ? (
-                  size="small"
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
-                  fullWidth
+                  <TextField
-                  value={editName}
-                  onChange={(event) => setEditName(event.target.value)}
-                />
-                <IconButton color="primary" onClick={handleSave} disabled={!canSave} aria-label={`Save ${entityLabel}`}>
-                  <CheckIcon />
-                </IconButton>
-                <IconButton onClick={cancelEditing} aria-label="Cancel editing">
-                  <CloseIcon />
-                </IconButton>
-              </Stack>
-            ) : (
-              <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
-                <ListItemText primary={entity.name} secondary={entity.secondaryText} />
-                <Stack direction="row" spacing={0.5}>
-                  <IconButton
-                    onClick={() => startEditing(entity.id, entity.name)}
-                    aria-label={`Edit ${entity.name}`}
                     size="small"
-                  >
+                    fullWidth
-                    <EditIcon fontSize="small" />
+                    value={editName}
+                    onChange={(event) => setEditName(event.target.value)}
+                  />
+                  <IconButton color="primary" onClick={handleSave} disabled={!canSave} aria-label={`Save ${entityLabel}`}>
+                    <CheckIcon />
                   </IconButton>
-                  <IconButton
+                  <IconButton onClick={cancelEditing} aria-label="Cancel editing">
-                    onClick={() => handleDelete(entity.id, entity.name)}
+                    <CloseIcon />
-                    aria-label={`Delete ${entity.name}`}
-                    size="small"
-                  >
-                    <DeleteIcon fontSize="small" />
                   </IconButton>
                 </Stack>
-              </Stack>
+              ) : (
-            )}
+                <Stack direction="row" alignItems="center" spacing={1} sx={{ width: '100%' }}>
-          </ListItem>
+                  <ListItemText primary={displayName} secondary={entity.secondaryText} />
-        ))}
+                  <Stack direction="row" spacing={0.5}>
+                    <IconButton
+                      onClick={() => startEditing(entity.id, displayName)}
+                      aria-label={`Edit ${displayName}`}
+                      size="small"
+                    >
+                      <EditIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                      onClick={() => handleDelete(entity.id, displayName)}
+                      aria-label={`Delete ${displayName}`}
+                      size="small"
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </Stack>
+                </Stack>
+              )}
+            </ListItem>
+          );
+        })}
       </List>
     </Stack>
   );

src/components/ProductAutocomplete.tsx

@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
 import { useMemo, useState, useEffect } from 'react';
 import { useCategories } from '../hooks/dataHooks';
 import { Product } from '../models/Product';
@@ -97,16 +98,33 @@ export const ProductAutocomplete = ({
             endAdornment: (
               <>
                 {params.InputProps?.endAdornment}
-                <InputAdornment position="end">
+                <InputAdornment position="end" sx={{ gap: 0.5 }}>
+                  <Tooltip title="Clear search">
+                    <span>
+                      <IconButton
+                        aria-label="Clear"
+                        size="small"
+                        onClick={() => {
+                          setQuery('');
+                          if (onQueryChange) onQueryChange('');
+                        }}
+                        disabled={query.length === 0}
+                      >
+                        <ClearIcon fontSize="small" />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
                   <Tooltip title="Add a new product">
-                    <IconButton
+                    <span>
-                      aria-label="Add product"
+                      <IconButton
-                      size="small"
+                        aria-label="Add product"
-                      onClick={onAddProduct}
+                        size="small"
-                      disabled={!onAddProduct}
+                        onClick={onAddProduct}
-                    >
+                        disabled={!onAddProduct}
-                      <AddCircleOutlineIcon />
+                      >
-                    </IconButton>
+                        <AddCircleOutlineIcon />
+                      </IconButton>
+                    </span>
                   </Tooltip>
                 </InputAdornment>
               </>

src/components/ProductRow.additional.test.tsx

@@ -52,7 +52,7 @@ describe('ProductRow edit/save and scanner behaviour', () => {
     const clearButton = screen.getByText('Clear');
     await userEvent.click(clearButton);
 
-    const scanBtn = screen.getByRole('button', { name: /Scan Barcode/i });
+    const scanBtn = screen.getByRole('button', { name: /scan/i });
     await userEvent.click(scanBtn);
 
     const mockScan = await screen.findByText(/Mock Scan/i);
@@ -131,7 +131,7 @@ describe('ProductRow edit/save and scanner behaviour', () => {
 
     if (!barcodeField) {
       // If not present, click the Scan button, use the mock scanner and wait for the input
-      const scanBtn = screen.getByRole('button', { name: /Scan Barcode/i });
+      const scanBtn = screen.getByRole('button', { name: /scan/i });
       await userEvent.click(scanBtn);
       const mockScanButton = await screen.findByText(/Mock Scan/i);
       await userEvent.click(mockScanButton);

src/components/ProductRow.test.tsx

@@ -96,6 +96,6 @@ describe('ProductRow', () => {
     await user.click(screen.getByLabelText(/edit sparkling water/i));
     await user.click(screen.getByRole('button', { name: /clear/i }));
 
-    expect(screen.getByRole('button', { name: /scan barcode/i })).toBeVisible();
+    expect(screen.getByRole('button', { name: /scan/i })).toBeVisible();
   });
 });

src/components/ProductRow.tsx

@@ -78,7 +78,6 @@ export const ProductRow = ({ product, categories, categoriesById, onSave, onDele
 
   const handleCancel = () => {
     setIsEditing(false);
-    setFormState(getInitialFormState(product, categoriesById));
     setFieldErrors({});
   };
 
@@ -102,33 +101,34 @@ export const ProductRow = ({ product, categories, categoriesById, onSave, onDele
                 </option>
               ))}
             </TextField>
-            {formState.barcode ? (
+            <TextField
-              <TextField
+              label="Barcode"
-                label="Barcode"
+              value={formState.barcode}
-                value={formState.barcode}
+              onChange={handleChange('barcode')}
-                onChange={handleChange('barcode')}
+              size="small"
-                size="small"
+              error={Boolean(fieldErrors.barcode)}
-                error={Boolean(fieldErrors.barcode)}
+              helperText={fieldErrors.barcode || undefined}
-                helperText={fieldErrors.barcode || undefined}
+              InputProps={{
-                InputProps={{
+                endAdornment: (
-                  endAdornment: (
+                  <Stack direction="row" spacing={0.5} alignItems="center">
+                    <Button size="small" onClick={() => setIsScannerOpen(true)} aria-label="Scan">
+                      Scan barcode
+                    </Button>
                     <Button
                       size="small"
                       onClick={() => {
                         setFormState((prev) => ({ ...prev, barcode: '' }));
                         setFieldErrors((prev) => ({ ...prev, barcode: undefined }));
                       }}
+                      aria-label="Clear"
+                      disabled={!formState.barcode}
                     >
                       Clear
                     </Button>
-                  ),
+                  </Stack>
-                }}
+                ),
-              />
+              }}
-            ) : (
+            />
-              <Button variant="outlined" onClick={() => setIsScannerOpen(true)}>
-                Scan Barcode
-              </Button>
-            )}
             <Stack direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center">
               <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)} size="small" color="error">
                 <DeleteIcon fontSize="small" />

src/components/__tests__/AddProductDialog.test.tsx

@@ -3,11 +3,13 @@ import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { AddProductDialog } from '../AddProductDialog';
 import { createMockDb } from '../../testUtils/mockDb';
+import * as offModule from '../../modules/openFoodFacts';
 import type { Product } from '../../models/Product';
 
 let mockDb = createMockDb();
 const mockUseProducts = vi.fn();
-const mockFetchProductFromOFF = vi.fn();
+const fetchProductSpy = vi.spyOn(offModule, 'fetchProductFromOFF');
+let onlineSpy: ReturnType<typeof vi.spyOn> | undefined;
 
 vi.mock('../../context/DBProvider', () => ({
   useDatabase: () => mockDb,
@@ -25,21 +27,21 @@ vi.mock('../BarcodeScannerView', () => ({
   ),
 }));
 
-vi.mock('../modules/openFoodFacts', () => ({
-  fetchProductFromOFF: (...args: unknown[]) => mockFetchProductFromOFF(...args),
-}));
-
 const defaultCategories = ['Fresh', 'Pantry'];
 
 describe('AddProductDialog', () => {
   beforeEach(() => {
     mockDb = createMockDb();
     mockUseProducts.mockReturnValue([]);
-    mockFetchProductFromOFF.mockReset();
+    fetchProductSpy.mockReset();
+    fetchProductSpy.mockResolvedValue(null);
+    onlineSpy?.mockRestore();
+    onlineSpy = vi.spyOn(window.navigator, 'onLine', 'get');
+    onlineSpy.mockReturnValue(true);
   });
 
   it('shows offline alert when barcode lookup attempted offline', async () => {
-    vi.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false);
+    onlineSpy?.mockReturnValue(false);
 
     render(
       <AddProductDialog
@@ -55,7 +57,7 @@ describe('AddProductDialog', () => {
   });
 
   it('applies initialBarcode and triggers lookup', async () => {
-    mockFetchProductFromOFF.mockResolvedValue({ name: 'From OFF' });
+    fetchProductSpy.mockResolvedValue({ name: 'From OFF' });
 
     render(
       <AddProductDialog
@@ -66,7 +68,7 @@ describe('AddProductDialog', () => {
       />,
     );
 
-    await waitFor(() => expect(mockFetchProductFromOFF).toHaveBeenCalledWith('999'));
+    await waitFor(() => expect(fetchProductSpy).toHaveBeenCalledWith('999'));
     expect(screen.getByTestId('product-barcode-input')).toHaveValue('999');
     await waitFor(() => expect(screen.getByLabelText(/name/i)).toHaveValue('From OFF'));
   });

src/components/__tests__/EditableEntityList.test.tsx

@@ -58,8 +58,9 @@ describe('EditableEntityList', () => {
     await waitFor(() => expect(screen.getByText('x')).toBeInTheDocument());
 
     await user.click(screen.getByLabelText(/edit first/i));
-    await user.clear(screen.getByDisplayValue('First'));
+    const firstInput = await screen.findByDisplayValue('First');
-    await user.type(screen.getByDisplayValue('First'), 'Updated');
+    await user.clear(firstInput);
+    await user.type(firstInput, 'Updated');
     await user.click(screen.getByLabelText(/save item/i));
 
     await waitFor(() =>

src/components/__tests__/ProductRow.errors.test.tsx

@@ -94,8 +94,8 @@ describe('ProductRow error handling', () => {
     // When barcode is empty, scanner button is shown and opens dialog
     await user.click(screen.getByLabelText(/cancel edit/i));
     await user.click(screen.getByLabelText(/edit product one/i));
-    await waitFor(() => expect(screen.getByRole('button', { name: /scan barcode/i })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('button', { name: /scan/i })).toBeInTheDocument());
-    await user.click(screen.getByRole('button', { name: /scan barcode/i }));
+    await user.click(screen.getByRole('button', { name: /scan/i }));
     expect(screen.getByRole('dialog', { name: /scan barcode/i })).toBeInTheDocument();
     await user.click(screen.getByText(/mock scan/i));
     await waitFor(() => expect(screen.queryByRole('dialog', { name: /scan barcode/i })).not.toBeInTheDocument());

src/modules/openFoodFacts.ts

@@ -9,7 +9,8 @@ export interface ExternalProductInfo {
 const BASE_URL = 'https://world.openfoodfacts.org/api/v2/product';
 const REQUEST_TIMEOUT_MS = 5000;
 
-const isOffline = () => typeof navigator !== 'undefined' && 'onLine' in navigator && !navigator.onLine;
+const isOffline = () =>
+  typeof navigator !== 'undefined' && 'onLine' in navigator && navigator.onLine === false;
 
 export const fetchProductFromOFF = async (barcode: string): Promise<ExternalProductInfo | null> => {
   if (!barcode || isOffline()) {