Refactor product creation into reusable dialog

src/screens/ManageProductsScreen.test.tsx

@@ -131,6 +131,14 @@ beforeEach(() => {
 
   mockDb.categories.toArray.mockResolvedValue([]);
   mockDb.categories.where.mockImplementation(() => ({ equals: () => ({ first: async () => undefined }) }));
+
+  mockDb.products.filter.mockImplementation((predicate?: (product: any) => boolean) => ({
+    first: async () => {
+      const items = mockUseProducts();
+      return predicate ? items.find((item: any) => predicate(item)) : undefined;
+    },
+    delete: vi.fn(),
+  }));
 });
 
 function findSaveButton() {
@@ -145,6 +153,10 @@ function findSaveButton() {
   return allButtons.length ? allButtons[0] : null;
 }
 
+async function openAddProductDialog(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(screen.getByRole('button', { name: /add product/i }));
+}
+
 describe('ManageProductsScreen barcode lookup', () => {
   beforeEach(() => {
     mockUseProducts.mockReturnValue([]);
@@ -170,6 +182,8 @@ describe('ManageProductsScreen barcode lookup', () => {
       </MemoryRouter>,
     );
 
+    await openAddProductDialog(user);
+
     await user.click(screen.getByRole('button', { name: /scan barcode/i }));
     await user.click(screen.getByRole('button', { name: /mock scan/i }));
 
@@ -200,6 +214,8 @@ describe('ManageProductsScreen barcode lookup', () => {
       </MemoryRouter>,
     );
 
+    await openAddProductDialog(user);
+
     await user.type(screen.getByLabelText(/name/i), 'New Product');
     await user.click(screen.getByRole('button', { name: /scan barcode/i }));
     await user.click(screen.getByRole('button', { name: /mock scan/i }));
@@ -235,6 +251,8 @@ describe('ManageProductsScreen barcode lookup', () => {
       </MemoryRouter>,
     );
 
+    await openAddProductDialog(user);
+
     await user.type(screen.getByLabelText(/name/i), 'existing product');
 
     const saveBtn = findSaveButton();
@@ -260,6 +278,8 @@ describe('ManageProductsScreen barcode lookup', () => {
         </MemoryRouter>,
       );
 
+      await openAddProductDialog(user);
+
       await user.click(screen.getByRole('button', { name: /scan barcode/i }));
       await user.click(screen.getByRole('button', { name: /mock scan/i }));
 
@@ -272,6 +292,34 @@ describe('ManageProductsScreen barcode lookup', () => {
     }
   });
 
+  it('closes the add product dialog with the close icon and backdrop', async () => {
+    mockUseProducts.mockReturnValue([]);
+    mockUseCategories.mockReturnValue([{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 }]);
+
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <ManageProductsScreen />
+      </MemoryRouter>,
+    );
+
+    await openAddProductDialog(user);
+    await user.click(screen.getByRole('button', { name: /close add product/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog', { name: /add product dialog/i })).not.toBeInTheDocument();
+    });
+
+    await openAddProductDialog(user);
+    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();
+    });
+  });
+
   it('prevents updating a product to use an existing barcode', async () => {
     mockUseProducts.mockReturnValue([
       {
@@ -438,6 +486,8 @@ describe('ManageProductsScreen auto-adding products to pick lists', () => {
       </MemoryRouter>,
     );
 
+    await openAddProductDialog(user);
+
     await user.type(screen.getByLabelText(/name/i), 'Granola Bar');
     const saveBtn = findSaveButton();
     expect(saveBtn).toBeTruthy();