(fix) O3-3543: Fix test types search in the lab order workspace (#1910)

* added fragment * Other useful mods * Factor out filtering from useTestTypes hook * Review feedback --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Jul 15, 2024 · 575ea22 · 575ea22
1 parent 496f608
commit 575ea22
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 152 deletions.
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.test.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, renderHook, screen, waitFor } from '@testing-library/react';
-import AddLabOrderWorkspace from './add-lab-order.workspace';
 import userEvent from '@testing-library/user-event';
+import { render, renderHook, screen, waitFor } from '@testing-library/react';
 import { _resetOrderBasketStore } from '@openmrs/esm-patient-common-lib/src/orders/store';
 import { type PostDataPrepLabOrderFunction } from '../api';
 import { age, closeWorkspace, useConfig, useLayoutType, usePatient, useSession } from '@openmrs/esm-framework';
 import { type PostDataPrepFunction, useOrderBasket } from '@openmrs/esm-patient-common-lib';
 import { createEmptyLabOrder } from './lab-order';
+import AddLabOrderWorkspace from './add-lab-order.workspace';
 
 const mockUseConfig = useConfig as jest.Mock;
 const mockUseSession = useSession as jest.Mock;
@@ -40,10 +40,11 @@ jest.mock('./useTestTypes', () => ({
   useTestTypes: () => mockUseTestTypes(),
 }));
 
-const mocklaunchPatientWorkspace = jest.fn();
+const mockLaunchPatientWorkspace = jest.fn();
+
 jest.mock('@openmrs/esm-patient-common-lib', () => ({
   ...jest.requireActual('@openmrs/esm-patient-common-lib'),
-  launchPatientWorkspace: (...args) => mocklaunchPatientWorkspace(...args),
+  launchPatientWorkspace: (...args) => mockLaunchPatientWorkspace(...args),
 }));
 
 jest.mock('@openmrs/esm-patient-common-lib/src/get-patient-uuid-from-url', () => ({
@@ -95,6 +96,7 @@ describe('AddLabOrder', () => {
 
   beforeEach(() => {
     _resetOrderBasketStore();
+    jest.clearAllMocks();
   });
 
   test('happy path fill and submit form', async () => {
@@ -104,9 +106,9 @@ describe('AddLabOrder', () => {
     );
     const { mockCloseWorkspaceWithSavedChanges } = renderAddLabOrderWorkspace();
     await user.type(screen.getByRole('searchbox'), 'cd4');
-    const cd4 = screen.getByText('CD4 COUNT');
-    expect(cd4).toBeInTheDocument();
-    const cd4OrderButton = screen.getAllByRole('button', { name: 'Order form' })[1];
+    await screen.findByText('CD4 COUNT');
+
+    const cd4OrderButton = screen.getByRole('button', { name: /order form/i });
     await user.click(cd4OrderButton);
 
     const testType = screen.getByRole('combobox', { name: 'Test type' });
@@ -143,7 +145,7 @@ describe('AddLabOrder', () => {
     });
 
     expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
-    expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
+    expect(mockLaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
   });
 
   test('from lab search, click add directly to order basket', async () => {
@@ -153,16 +155,22 @@ describe('AddLabOrder', () => {
     );
     renderAddLabOrderWorkspace();
     await user.type(screen.getByRole('searchbox'), 'cd4');
-    const cd4 = screen.getByText('CD4 COUNT');
-    expect(cd4).toBeInTheDocument();
-    const cd4OrderButton = screen.getAllByRole('button', { name: 'Add to basket' })[1];
-    await user.click(cd4OrderButton);
-    expect(hookResult.current.orders).toEqual([
-      { ...createEmptyLabOrder(mockTestTypes[1], 'test-provider-uuid'), isOrderIncomplete: true },
-    ]);
+    await screen.findByText('CD4 COUNT');
+
+    const cd4AddToBasketButton = screen.getByRole('button', { name: /add to basket/i });
+    await user.click(cd4AddToBasketButton);
+
+    await waitFor(() => {
+      expect(hookResult.current.orders).toEqual([
+        { ...createEmptyLabOrder(mockTestTypes[1], 'test-provider-uuid'), isOrderIncomplete: true },
+      ]);
+    });
 
     expect(mockCloseWorkspace).toHaveBeenCalled();
-    expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
+    expect(mockCloseWorkspace).toHaveBeenCalledWith('add-lab-order', {
+      ignoreChanges: true,
+      onWorkspaceClose: expect.any(Function),
+    });
   });
 
   test('back to order basket', async () => {
@@ -172,7 +180,7 @@ describe('AddLabOrder', () => {
     expect(back).toBeInTheDocument();
     await user.click(back);
     expect(mockCloseWorkspace).toHaveBeenCalled();
-    expect(mocklaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
+    expect(mockLaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
   });
 
   test('should display a patient header on tablet', () => {

diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.workspace.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.workspace.tsx
@@ -11,7 +11,7 @@ import {
   type LabOrderBasketItem,
   launchPatientWorkspace,
 } from '@openmrs/esm-patient-common-lib';
-import { TestTypeSearch } from './test-type-search';
+import { TestTypeSearch } from './test-type-search.component';
 import { LabOrderForm } from './lab-order-form.component';
 import styles from './add-lab-order.scss';
 

diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss
@@ -1,9 +1,7 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '@openmrs/esm-styleguide/src/vars';
-@import "../../root";
-
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .orderForm {
   flex-grow: 1;
@@ -16,15 +14,15 @@
   }
 
   :global(.cds--css-grid-column) {
-    margin: 0 spacing.$spacing-03 !important;
+    margin: 0 !important;
   }
 
   :global(.cds--subgrid) {
-    margin: 0 calc(spacing.$spacing-03 * -1) !important;
+    margin: 0 calc(layout.$spacing-03 * -1) !important;
   }
 
   :global(.cds--number--nosteppers.cds--number input[type=number]) {
-    padding-right: spacing.$spacing-05;
+    padding-right: layout.$spacing-05;
   }
 
   :global(.cds--number__control-btn) {
@@ -33,7 +31,7 @@
 }
 
 .form {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .gridRow {
@@ -45,7 +43,7 @@
 }
 
 .field {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .buttonSet {
@@ -71,12 +69,12 @@
   }
 
   .buttonSet {
-    padding: spacing.$spacing-06 spacing.$spacing-05;
+    padding: layout.$spacing-06 layout.$spacing-05;
     background-color: $ui-02;
   }
 
   .errorContainer {
     margin: 1rem;
     margin-bottom: calc(var(--bottom-nav-height) + 1rem);
   }
-}
+}