@kenyaemr/esm-service-queues-app 7.0.3-pre.88 → 7.0.3-pre.94

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"extensions":[{"name":"outpatient-side-nav-ext","component":"outpatientSideNav","slot":"outpatient-sidebar-slot","online":true,"offline":true},{"name":"service-queues-dashboard-link","component":"serviceQueuesDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"name":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"name":"remove-queue-entry","component":"removeQueueEntry"},{"name":"clear-all-queue-entries","component":"clearAllQueueEntries"},{"name":"add-visit-to-queue-modal","component":"addVisitToQueueModal"},{"name":"transition-queue-entry-status-modal","component":"transitionQueueEntryStatusModal"},{"name":"previous-visit-summary-widget","component":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"7.0.3-pre.88"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"extensions":[{"name":"outpatient-side-nav-ext","component":"outpatientSideNav","slot":"outpatient-sidebar-slot","online":true,"offline":true},{"name":"service-queues-dashboard-link","component":"serviceQueuesDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"name":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"name":"remove-queue-entry","component":"removeQueueEntry"},{"name":"clear-all-queue-entries","component":"clearAllQueueEntries"},{"name":"add-visit-to-queue-modal","component":"addVisitToQueueModal"},{"name":"transition-queue-entry-status-modal","component":"transitionQueueEntryStatusModal"},{"name":"previous-visit-summary-widget","component":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"7.0.3-pre.94"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-service-queues-app",
-  "version": "7.0.3-pre.88",
+  "version": "7.0.3-pre.94",
   "description": "Outpatient front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-service-queues-app.js",
   "main": "src/index.ts",

package/src/active-visits/active-visits-table.resource.ts

@@ -188,7 +188,7 @@ export function useServiceQueueEntries(service: string, locationUuid: string) {
   return {
     serviceQueueEntries: mappedServiceQueueEntries ? mappedServiceQueueEntries : [],
     isLoading,
-    isError: error,
+    error,
     isValidating,
   };
 }

package/src/active-visits/change-status-dialog.scss

@@ -1,34 +1,34 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@carbon/colors';
 
 .radioButtonGroup {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: spacing.$spacing-03;
-  min-height: spacing.$spacing-10;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
   width: 100%;
   @include type.type-style('body-compact-01');
 }
 
 .radioButton {
-  padding: spacing.$spacing-02 spacing.$spacing-02;
-  margin: spacing.$spacing-03 0;
+  padding: layout.$spacing-02 layout.$spacing-02;
+  margin: layout.$spacing-03 0;
 }
 
 section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }
 
 .inline {
@@ -37,11 +37,11 @@ section {
 }
 
 .loading {
-  margin-right: spacing.$spacing-02;
+  margin-right: layout.$spacing-02;
 }
 
 .error {
-  margin-top: spacing.$spacing-03;
+  margin-top: layout.$spacing-03;
   color: colors.$red-60;
   @include type.type-style('label-01');
 }

package/src/active-visits/change-status-dialog.test.tsx

@@ -1,23 +1,29 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render, within } from '@testing-library/react';
-import { mockServices, mockPriorities, mockStatus, mockSession, mockLocations, mockMappedQueueEntry } from '__mocks__';
-import { type ConfigObject, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { mockServices, mockSession, mockLocations, mockMappedQueueEntry } from '__mocks__';
+import {
+  type FetchResponse,
+  getDefaultsFromConfigSchema,
+  showSnackbar,
+  useConfig,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
+import { configSchema, type ConfigObject } from '../config-schema';
 import { updateQueueEntry } from './active-visits-table.resource';
 import ChangeStatus from './change-status-dialog.component';
 
-const mockedUseConfig = useConfig as jest.Mock;
-const mockShowSnackbar = showSnackbar as jest.Mock;
-const mockUpdateQueueEntry = updateQueueEntry as jest.Mock;
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUpdateQueueEntry = jest.mocked(updateQueueEntry);
+const mockUseSession = jest.mocked(useSession);
+const mockUseLocations = jest.mocked(useLocations);
 
-jest.mock('./active-visits-table.resource', () => {
-  const originalModule = jest.requireActual('./active-visits-table.resource');
-
-  return {
-    ...originalModule,
-    updateQueueEntry: jest.fn(),
-  };
-});
+jest.mock('./active-visits-table.resource', () => ({
+  ...jest.requireActual('./active-visits-table.resource'),
+  updateQueueEntry: jest.fn(),
+}));
 
 jest.mock('../patient-search/hooks/useQueueLocations', () => {
   return {
@@ -33,29 +39,24 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    openmrsFetch: jest.fn(),
-    toOmrsIsoString: jest.fn(),
-    toDateObjectStrict: jest.fn(),
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data),
-    useSession: jest.fn().mockImplementation(() => mockSession.data),
-  };
-});
-
 describe('Queue entry details', () => {
-  beforeEach(() =>
-    mockedUseConfig.mockReturnValue({
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
       concepts: {},
-    } as ConfigObject),
-  );
+    } as ConfigObject);
+    mockUseLocations.mockReturnValue(mockLocations.data.results);
+    mockUseSession.mockReturnValue(mockSession.data);
+  });
 
   it('should update a queue entry and display toast message', async () => {
     const user = userEvent.setup();
 
-    mockUpdateQueueEntry.mockResolvedValueOnce({ data: mockMappedQueueEntry, status: 201, statusText: 'Updated' });
+    mockUpdateQueueEntry.mockResolvedValueOnce({
+      data: mockMappedQueueEntry,
+      status: 201,
+      statusText: 'Updated',
+    } as FetchResponse);
 
     renderUpdateQueueEntryDialog();
     expect(screen.getByText(/queue service/i)).toBeInTheDocument();
@@ -138,7 +139,11 @@ describe('Queue entry details', () => {
 
   test('should show error message when user tries to update queue entry without selecting required fields', async () => {
     const user = userEvent.setup();
-    mockUpdateQueueEntry.mockResolvedValueOnce({ data: mockMappedQueueEntry, status: 201, statusText: 'Updated' });
+    mockUpdateQueueEntry.mockResolvedValueOnce({
+      data: mockMappedQueueEntry,
+      status: 201,
+      statusText: 'Updated',
+    } as FetchResponse);
 
     renderUpdateQueueEntryDialog();
 

package/src/add-patient-toqueue/add-patient-toqueue-dialog.scss

@@ -1,32 +1,32 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .radioButtonGroup {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: spacing.$spacing-03;
-  min-height: spacing.$spacing-10;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
   width: 100%;
   @include type.type-style('body-compact-01');
 }
 
 .radioButton {
-  padding: spacing.$spacing-02 spacing.$spacing-02;
-  margin: spacing.$spacing-03 0;
+  padding: layout.$spacing-02 layout.$spacing-02;
+  margin: layout.$spacing-03 0;
 }
 
 section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }

package/src/add-provider-queue-room/add-provider-queue-room.component.tsx

@@ -31,8 +31,8 @@ import {
   useSelectedQueueLocationUuid,
   useSelectedService,
 } from '../helpers/helpers';
-import styles from './add-provider-queue-room.scss';
 import useQueueServices from '../hooks/useQueueService';
+import styles from './add-provider-queue-room.scss';
 
 interface AddProviderQueueRoomProps {
   providerUuid: string;
@@ -46,7 +46,7 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
   const currentLocationUuid = useSelectedQueueLocationUuid();
   const currentService = useSelectedService();
   const currentIsPermanentProviderQueueRoom = useIsPermanentProviderQueueRoom();
-  const { providerRoom, isLoading: loading } = useProvidersQueueRoom(providerUuid);
+  const { providerRoom } = useProvidersQueueRoom(providerUuid);
   const [queueRoomUuid, setQueueRoomUuid] = useState('');
   const [queueProviderMapUuid, setQueueProviderMapUuid] = useState('');
 
@@ -148,11 +148,11 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
       <ModalBody>
         <Form onSubmit={onSubmit}>
           <section className={styles.section}>
-            <div className={styles.sectionTitle}>{t('queueLocation', 'Queue location')}</div>
             <Dropdown
               id="queueLocation"
               aria-label={t('selectQueueLocation', 'Select a queue location')}
               label=""
+              titleText={t('queueLocation', 'Queue location')}
               type="default"
               items={queueLocations}
               itemToString={(item) => (item ? item.name : '')}
@@ -163,12 +163,12 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
           </section>
 
           <section className={styles.section}>
-            <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
             <Dropdown
               id="service"
               aria-label={t('selectService', 'Select a service')}
               type="default"
               label=""
+              titleText={t('queueService', 'Queue service')}
               items={services ?? []}
               itemToString={(item) => (item ? item.display : '')}
               onChange={handleServiceChange}

package/src/add-provider-queue-room/add-provider-queue-room.resource.ts

@@ -14,7 +14,7 @@ export function useQueueRooms(location: string, queueUuid: string) {
 
   return {
     rooms: data ? data?.data?.results : [],
-    isError: error,
+    error,
     isLoading,
   };
 }
@@ -69,7 +69,7 @@ export function useProvidersQueueRoom(providerUuid: string) {
 
   return {
     providerRoom: data ? data?.data?.results : [],
-    isError: error,
+    error,
     isLoading,
     mutate,
   };

package/src/add-provider-queue-room/add-provider-queue-room.scss

@@ -1,17 +1,17 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .checkbox {
-  padding-top: spacing.$spacing-04;
+  padding-top: layout.$spacing-04;
 }

package/src/add-provider-queue-room/add-provider-queue-room.test.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { showSnackbar } from '@openmrs/esm-framework';
 import AddProviderQueueRoom from './add-provider-queue-room.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useCurrentProvider: jest.fn(() => ({
-    currentProvider: { uuid: 'provider-uuid-1' },
-  })),
-  showSnackbar: jest.fn(),
-}));
+const mockCloseModal = jest.fn();
+const mockShowSnackbar = jest.mocked(showSnackbar);
+
 jest.mock('./add-provider-queue-room.resource', () => ({
-  useProvidersQueueRoom: jest.fn(() => ({
+  addProviderToQueueRoom: jest.fn(),
+  updateProviderToQueueRoom: jest.fn().mockResolvedValue({ status: 200 }),
+  useProvidersQueueRoom: jest.fn().mockReturnValue({
     providerRoom: [
       {
         queueRoom: { uuid: 'c187d78b-5c54-49bf-a0f8-b7fb6034d36d' },
@@ -20,15 +19,13 @@ jest.mock('./add-provider-queue-room.resource', () => ({
     ],
     isLoading: false,
     mutate: jest.fn(),
-  })),
-  updateProviderToQueueRoom: jest.fn().mockResolvedValue({ status: 200 }),
-  addProviderToQueueRoom: jest.fn(),
-  useQueueRooms: jest.fn(() => ({
+  }),
+  useQueueRooms: jest.fn().mockReturnValue({
     rooms: [
       { uuid: '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6', display: 'Room 1' },
       { uuid: 'e7786ac0-ab62-11ec-b909-0242ac120002', display: 'Room 2' },
     ],
-  })),
+  }),
 }));
 
 jest.mock('../hooks/useQueues', () => {
@@ -43,19 +40,23 @@ jest.mock('../hooks/useQueues', () => {
 });
 
 jest.mock('../patient-search/hooks/useQueueLocations', () => ({
-  useQueueLocations: jest.fn(() => ({
+  useQueueLocations: jest.fn().mockReturnValue({
     queueLocations: [
       { id: '1GHI12', name: 'Location 1' },
       { id: '1GHI45', name: 'Location 2' },
     ],
-  })),
+  }),
 }));
 
 const providerUuid = 'cc75ad73-c24b-499c-8db9-a7ef4fc0b36d';
+const defaultProps = {
+  providerUuid,
+  closeModal: mockCloseModal,
+};
 
 describe('AddProviderQueueRoom', () => {
   it('renders the form fields', () => {
-    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
+    renderAddProviderQueueRoom();
 
     expect(screen.getByText('Select a room')).toBeInTheDocument();
     expect(screen.getByLabelText('Retain location')).toBeInTheDocument();
@@ -65,41 +66,46 @@ describe('AddProviderQueueRoom', () => {
 
   it('updates the queue room selection', async () => {
     const user = userEvent.setup();
-    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
-
-    // TODO: Fix missing dropdown labels in the form
+    renderAddProviderQueueRoom();
 
-    // const selectQueueRoom: HTMLInputElement = screen.getByRole('combobox');
-    // await user.selectOptions(selectQueueRoom, 'Room 1');
+    const queueLocationDropdown = screen.getByRole('combobox', { name: /queue location/i });
+    await user.click(queueLocationDropdown);
+    await user.click(screen.getByText('Room 1'));
 
-    // expect(selectQueueRoom.value).toBe('6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6');
+    expect(screen.getByText('Room 1')).toBeInTheDocument();
   });
 
   it('should update the retain location checkbox', async () => {
     const user = userEvent.setup();
-    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
+    renderAddProviderQueueRoom();
 
     const retainLocationCheckbox: HTMLInputElement = screen.getByRole('checkbox');
     await user.click(retainLocationCheckbox);
 
-    expect(retainLocationCheckbox.checked).toBe(true);
+    expect(retainLocationCheckbox).toBeChecked();
   });
 
   it('should submit the form and add provider to queue room when all fields are filled', async () => {
     const user = userEvent.setup();
-    const mockCloseModal = jest.fn();
-
-    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={mockCloseModal} />);
-
-    // TODO: Fix missing dropdown labels in the form
-
-    // const queueRoomSelect = screen.getByRole('combobox');
-    // const submitButton = screen.getByText('Save');
-
-    // await user.selectOptions(queueRoomSelect, '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6');
-    // await user.click(submitButton);
-
-    // expect(mockCloseModal).toHaveBeenCalled();
-    // expect(showSnackbar).toHaveBeenCalled();
+    renderAddProviderQueueRoom();
+
+    const submitButton = screen.getByText('Save');
+    const queueLocationDropdown = screen.getByRole('combobox', { name: /queue location/i });
+    await user.click(queueLocationDropdown);
+    await user.click(screen.getByText('Room 1'));
+    await user.click(submitButton);
+
+    expect(mockCloseModal).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      subtitle: 'Queue room updated successfully',
+      title: 'Update room',
+    });
   });
 });
+
+function renderAddProviderQueueRoom(props = {}) {
+  render(<AddProviderQueueRoom {...defaultProps} {...props} />);
+}

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx

@@ -20,7 +20,7 @@ const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queue
   const handleClearQueueBatchRequest = useCallback(() => {
     setIsSubmitting(true);
     batchClearQueueEntries(queueEntries).then(
-      (response) => {
+      () => {
         closeModal();
         showSnackbar({
           isLowContrast: true,

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss

@@ -1,6 +1,5 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 #subHeading {
   @include type.type-style('heading-compact-01');

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.test.tsx

@@ -4,24 +4,22 @@ import { render, screen } from '@testing-library/react';
 import { batchClearQueueEntries } from './clear-queue-entries-dialog.resource';
 import ClearQueueEntriesDialog from './clear-queue-entries-dialog.component';
 
-const mockBatchClearQueueEntries = batchClearQueueEntries as jest.Mock;
+const mockBatchClearQueueEntries = jest.mocked(batchClearQueueEntries);
+const mockCloseModal = jest.fn();
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  showSnackbar: jest.fn(),
-}));
+const defaultProps = {
+  queueEntries: [],
+  closeModal: mockCloseModal,
+};
 
 jest.mock('./clear-queue-entries-dialog.resource');
-
 jest.mock('../hooks/useQueueEntries', () => ({
   useMutateQueueEntries: () => ({ mutateQueueEntries: jest.fn() }),
 }));
 
 describe('ClearQueueEntriesDialog Component', () => {
-  const visitQueueEntriesMock = [];
-
   it('renders the component with warning message', () => {
-    render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={() => {}} />);
+    renderClearQueueEntriesDialog();
 
     expect(screen.getByRole('heading', { name: 'Service queue' })).toBeInTheDocument();
     expect(screen.getByText('Clear all queue entries?')).toBeInTheDocument();
@@ -29,15 +27,17 @@ describe('ClearQueueEntriesDialog Component', () => {
     expect(screen.getByText('Clear queue')).toBeInTheDocument();
   });
 
-  it('should close modal when clicked on cancel', async () => {
+  it('should close modal when the cancel button is clicked', async () => {
     const user = userEvent.setup();
-    const closeModalMock = jest.fn();
 
-    mockBatchClearQueueEntries.mockImplementationOnce(() => Promise.resolve());
-    render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={closeModalMock} />);
+    mockBatchClearQueueEntries.mockResolvedValue(undefined);
+    renderClearQueueEntriesDialog();
 
     await user.click(screen.getByText('Cancel'));
-
-    expect(closeModalMock).toHaveBeenCalled();
+    expect(mockCloseModal).toHaveBeenCalledTimes(1);
   });
 });
+
+function renderClearQueueEntriesDialog(props = {}) {
+  render(<ClearQueueEntriesDialog {...defaultProps} {...props} />);
+}