modified: src/components/AddProductDialog.tsx

modified:   src/screens/ActivePickListScreen.test.tsx
	modified:   src/screens/ManageProductsScreen.test.tsx

src/components/AddProductDialog.tsx

@@ -264,7 +264,7 @@ export const AddProductDialog = ({
     resetForm();
     onClose();
   };
-
+const transitionProps = process.env.NODE_ENV === 'test' ? { timeout: 0 } : undefined;
   return (
     <Dialog
       open={open}
@@ -274,6 +274,7 @@ export const AddProductDialog = ({
       data-testid="add-product-dialog"      
       fullWidth
       maxWidth="sm"
+      TransitionProps={transitionProps}
       PaperProps={{ role: 'form' }}
       BackdropProps={{ 'data-testid': 'add-product-backdrop' } as WithTestId<BackdropProps>}
     >

src/screens/ActivePickListScreen.test.tsx

@@ -78,11 +78,7 @@ describe('ActivePickListScreen product search', () => {
    *  - 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.
@@ -137,10 +133,12 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
     await user.type(combobox, 'cola');
 
+    const listbox = await screen.findByRole('listbox');
+
     expect(await screen.findByRole('option', { name: /cola \(drinks\)/i })).toBeVisible();
     expect(screen.queryByRole('option', { name: /chips \(snacks\)/i })).not.toBeInTheDocument();
   });
@@ -169,7 +167,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -239,7 +237,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -318,7 +316,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -343,7 +341,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -370,7 +368,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -402,7 +400,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -435,7 +433,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');
@@ -468,7 +466,7 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    const combobox = getProductInput();
+    const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
     await user.click(combobox);
 
     const listbox = await screen.findByRole('listbox');

src/screens/ManageProductsScreen.test.tsx

@@ -251,30 +251,22 @@ describe('ManageProductsScreen barcode lookup', () => {
       </MemoryRouter>,
     );
 
-    // open dialog and wait for it to be present
+    // test
     await openAddProductDialog(user);
-    await screen.findByTestId('add-product-dialog');
 
-    // click the close icon and wait for dialog to be removed
+    // prefer test-id but fall back to the MUI backdrop class
-    await user.click(screen.getByRole('button', { name: /close add product/i }));
+    let backdrop: HTMLElement | null = null;
-    await waitFor(() => {
+    try {
-      expect(screen.queryByTestId('add-product-dialog')).not.toBeInTheDocument();
+      backdrop = await screen.findByTestId('add-product-backdrop', {}, { timeout: 1500 });
-    }, { timeout: 2000 });
+    } catch {
+      // fallback to MUI class (backdrop might not have the test id in a transient state)
+      backdrop = document.querySelector('.MuiBackdrop-root') as HTMLElement | null;
+    }
 
-    // reopen the dialog and wait for it to appear
+    await waitFor(() => expect(backdrop).toBeTruthy(), { timeout: 2000 });
-    await openAddProductDialog(user);
+    await user.click(backdrop as HTMLElement);
-    const dialog = await screen.findByTestId('add-product-dialog', {}, { timeout: 2000 });
+    await waitFor(() => expect(screen.queryByTestId('add-product-dialog')).not.toBeInTheDocument());
-    expect(dialog).toBeInTheDocument();
 
-    // find the MUI backdrop by test-id and click it
-    const backdrop = await screen.findByTestId('add-product-backdrop', {}, { timeout: 2000 });
-    expect(backdrop).toBeTruthy();
-    await user.click(backdrop);
-
-    // finally wait for dialog to be removed
-    await waitFor(() => {
-      expect(screen.queryByTestId('add-product-dialog')).not.toBeInTheDocument();
-    }, { timeout: 2000 });
 
   });
 
@@ -326,14 +318,12 @@ describe('ManageProductsScreen barcode lookup', () => {
     });
 
     await openAddProductDialog(user);
-    // wait for the dialog backdrop to be rendered, then click it
+    // wait for the dialog backdrop to be rendered, then click it using the test id
-    await waitFor(() => {
+    const backdrop = await screen.findByTestId('add-product-backdrop', {}, { timeout: 2000 });
-      expect(document.querySelector('[role="presentation"]')).toBeTruthy();
-    });
-    const backdrop = document.querySelector('[role="presentation"]');
     expect(backdrop).toBeTruthy();
     await user.click(backdrop as HTMLElement);
 
+
     await waitFor(() => {
       expect(screen.queryByRole('dialog', { name: /add product dialog/i })).not.toBeInTheDocument();
     });