@openmrs/esm-service-queues-app 5.2.2-pre.2409 → 5.2.2-pre.2415

package/.turbo/turbo-build.log

@@ -38,4 +38,4 @@ Entrypoints:
       main.js
 
 
-webpack 5.86.0 compiled with 2 warnings in 39850 ms
+webpack 5.86.0 compiled with 2 warnings in 40078 ms

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.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},{"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":"add-patient-to-queue","component":"addPatientToQueue","slot":"add-patient-to-queue-slot"},{"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":"add-queue-entry-widget","component":"addQueueEntry","slot":"add-queue-entry-slot"}],"version":"5.2.2-pre.2409"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.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},{"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":"add-patient-to-queue","component":"addPatientToQueue","slot":"add-patient-to-queue-slot"},{"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":"add-queue-entry-widget","component":"addQueueEntry","slot":"add-queue-entry-slot"}],"version":"5.2.2-pre.2415"}

package/package.json

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

package/src/active-visits/active-visits-table.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { ConfigObject, useConfig, usePagination, useSession } from '@openmrs/esm-framework';
 import { of } from 'rxjs';
 import { renderWithSwr } from '../../../../tools/test-helpers';
@@ -103,7 +103,7 @@ describe('ActiveVisitsTable: ', () => {
 
     renderActiveVisitsTable();
 
-    await waitFor(() => screen.getByRole('table'));
+    await screen.findByRole('table');
 
     expect(screen.getByText(/patients currently in queue/i)).toBeInTheDocument();
     expect(screen.queryByText(/no patients to display/i)).not.toBeInTheDocument();

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import { screen, render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { screen, render, within } from '@testing-library/react';
 import { mockServices } from '../../__mocks__/active-visits.mock';
 import { mockPriorities, mockStatus } from '../../../../__mocks__/metrics.mock';
 import { mockSession } from '../../../../__mocks__/session.mock';
 import { mockLocations } from '../../../../__mocks__/locations.mock';
 import { ConfigObject, showToast, useConfig, showNotification } from '@openmrs/esm-framework';
-import ChangeStatus from './change-status-dialog.component';
 import { mockQueueEntry } from '../../../../__mocks__/queue-entry.mock';
-import userEvent from '@testing-library/user-event';
 import { updateQueueEntry } from './active-visits-table.resource';
+import ChangeStatus from './change-status-dialog.component';
 
 const mockedUseConfig = useConfig as jest.Mock;
 const mockShowToast = showToast as jest.Mock;
@@ -61,7 +61,7 @@ describe('Queue entry details', () => {
     expect(screen.getByText(/queue service/i)).toBeInTheDocument();
     expect(screen.getByText(/queue priority/i)).toBeInTheDocument();
 
-    await waitFor(() => user.click(screen.getByRole('button', { name: /move to next service/i })));
+    await user.click(screen.getByRole('button', { name: /move to next service/i }));
 
     expect(mockShowToast).toHaveBeenCalledTimes(1);
     expect(mockShowToast).toHaveBeenCalledWith({
@@ -93,7 +93,7 @@ describe('Queue entry details', () => {
     expect(within(queueServiceTypes).getAllByRole('option')[0]).toHaveValue('176052c7-5fd4-4b33-89cc-7bae6848c65a');
     expect(within(queueServiceTypes).getAllByRole('option')[1]).toHaveValue('d80ff12a-06a7-11ed-b939-0242ac120002');
 
-    await waitFor(() => user.click(screen.getByRole('button', { name: /move to next service/i })));
+    await user.click(screen.getByRole('button', { name: /move to next service/i }));
 
     expect(mockShowNotification).toHaveBeenCalledWith({
       description: 'Internal Server Error',

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import AddProviderQueueRoom from './add-provider-queue-room.component';
+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'),
@@ -61,37 +62,39 @@ describe('AddProviderQueueRoom', () => {
     expect(screen.getByText('Save')).toBeInTheDocument();
   });
 
-  it('updates queue room selection', () => {
+  it('updates the queue room selection', async () => {
+    const user = userEvent.setup();
     render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
 
     const selectQueueRoom: HTMLInputElement = screen.getByRole('combobox');
-    fireEvent.change(selectQueueRoom, { target: { value: 'room-uuid-1' } });
+    await user.selectOptions(selectQueueRoom, 'Room 1');
 
     expect(selectQueueRoom.value).toBe('6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6');
   });
 
-  it('should update the retain location checkbox', () => {
+  it('should update the retain location checkbox', async () => {
+    const user = userEvent.setup();
     render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
 
     const retainLocationCheckbox: HTMLInputElement = screen.getByRole('checkbox');
-    fireEvent.click(retainLocationCheckbox);
+    await user.click(retainLocationCheckbox);
 
     expect(retainLocationCheckbox.checked).toBe(true);
   });
 
   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} />);
 
     const queueRoomSelect = screen.getByRole('combobox');
     const submitButton = screen.getByText('Save');
 
-    fireEvent.change(queueRoomSelect, { target: { value: '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6' } });
-    fireEvent.click(submitButton);
+    await user.selectOptions(queueRoomSelect, '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6');
+    await user.click(submitButton);
 
-    await waitFor(() => {
-      expect(mockCloseModal).toHaveBeenCalled();
-      expect(showSnackbar).toHaveBeenCalled();
-    });
+    expect(mockCloseModal).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
   });
 });

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import ClearQueueEntriesDialog from './clear-queue-entries-dialog.component';
+import userEvent from '@testing-library/user-event';
+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;
 
@@ -31,11 +32,13 @@ describe('ClearQueueEntriesDialog Component', () => {
   });
 
   it('should close modal when clicked on cancel', async () => {
+    const user = userEvent.setup();
     const closeModalMock = jest.fn();
+
     mockBatchClearQueueEntries.mockImplementationOnce(() => Promise.resolve());
     render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={closeModalMock} />);
 
-    fireEvent.click(screen.getByText('Cancel'));
+    await user.click(screen.getByText('Cancel'));
 
     expect(closeModalMock).toHaveBeenCalled();
   });

package/src/current-visit/current-visit-summary.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import CurrentVisit from './current-visit-summary.component';
+import { render, screen } from '@testing-library/react';
 import { useVisit } from './current-visit.resource';
 import { mockPastVisit } from '../../__mocks__/visits.mock';
+import CurrentVisit from './current-visit-summary.component';
 
 const useVisitMock = useVisit as jest.Mock;
 
@@ -24,12 +24,10 @@ describe('CurrentVisit', () => {
   it('renders visit details correctly', async () => {
     render(<CurrentVisit patientUuid={patientUuid} visitUuid={visitUuid} />);
 
-    await waitFor(() => {
-      expect(screen.queryByRole('progressbar')).toBeNull();
-      expect(screen.getByText('Visit Type')).toBeInTheDocument();
-      expect(screen.getByText('Scheduled for today')).toBeInTheDocument();
-      expect(screen.getByText('On time')).toBeInTheDocument();
-    });
+    expect(screen.queryByRole('progressbar')).toBeNull();
+    expect(screen.getByText('Visit Type')).toBeInTheDocument();
+    expect(screen.getByText('Scheduled for today')).toBeInTheDocument();
+    expect(screen.getByText('On time')).toBeInTheDocument();
   });
   it('should render skeleton when loading', async () => {
     useVisitMock.mockImplementationOnce(() => ({
@@ -40,8 +38,6 @@ describe('CurrentVisit', () => {
 
     render(<CurrentVisit patientUuid={patientUuid} visitUuid={visitUuid} />);
 
-    await waitFor(() => {
-      expect(screen.getByRole('progressbar')).toBeInTheDocument();
-    });
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 });

package/src/overlay.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import Overlay from './overlay.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
+import Overlay from './overlay.component';
 
 const mockUseLayoutType = useLayoutType as jest.Mock;
 const mockIsDesktop = isDesktop as jest.Mock;
@@ -11,7 +12,8 @@ jest.mock('@openmrs/esm-framework');
 const headerText = 'Test Header';
 
 describe('Overlay Component', () => {
-  it('renders desktop layout with close button', () => {
+  it('renders desktop layout with close button', async () => {
+    const user = userEvent.setup();
     const closePanelMock = jest.fn();
 
     mockIsDesktop.mockImplementation(() => true);
@@ -24,7 +26,7 @@ describe('Overlay Component', () => {
     expect(headerContent).toBeInTheDocument();
     expect(closeButton).toBeInTheDocument();
 
-    fireEvent.click(closeButton);
+    await user.click(closeButton);
     expect(closePanelMock).toHaveBeenCalled();
   });
 

package/src/patient-search/visit-form/base-visit-type.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import BaseVisitType from './base-visit-type.component';
+import { render, screen } from '@testing-library/react';
 import { mockVisitTypes } from '../../../__mocks__/visits.mock';
 
 jest.mock('@openmrs/esm-framework', () => ({
@@ -21,21 +22,25 @@ describe('BaseVisitType', () => {
     });
   });
 
-  it('handles search input correctly', () => {
+  it('handles search input correctly', async () => {
+    const user = userEvent.setup();
+
     render(<BaseVisitType onChange={() => {}} visitTypes={mockVisitTypes} />);
 
     const searchInput: HTMLInputElement = screen.getByRole('searchbox');
-    fireEvent.change(searchInput, { target: { value: 'Visit Type 1' } });
+    await user.type(searchInput, 'Visit Type 1');
 
     expect(searchInput.value).toBe('Visit Type 1');
   });
 
-  it('calls onChange when a visit type is selected', () => {
+  it('calls onChange when a visit type is selected', async () => {
+    const user = userEvent.setup();
+
     const mockOnChange = jest.fn();
     render(<BaseVisitType onChange={mockOnChange} visitTypes={mockVisitTypes} />);
 
     const radioButton: HTMLInputElement = screen.getByLabelText(mockVisitTypes[0].display);
-    fireEvent.click(radioButton);
+    await user.click(radioButton);
     expect(radioButton.checked).toBe(true);
   });
 });

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
 import StartVisitQueueFields from './visit-form-queue-fields.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
@@ -46,20 +47,22 @@ describe('StartVisitQueueFields', () => {
     expect(getByLabelText('Sort weight')).toBeInTheDocument();
   });
 
-  it('updates the selected queue location', () => {
+  it('updates the selected queue location', async () => {
+    const user = userEvent.setup();
     const { getByLabelText } = render(<StartVisitQueueFields />);
 
     const selectQueueLocation = getByLabelText('Select a queue location') as HTMLInputElement;
-    fireEvent.change(selectQueueLocation, { target: { value: '1' } });
+    await user.type(selectQueueLocation, '1');
 
     expect(selectQueueLocation.value).toBe('1');
   });
 
-  it('updates the selected service', () => {
+  it('updates the selected service', async () => {
+    const user = userEvent.setup();
     const { getByLabelText } = render(<StartVisitQueueFields />);
 
     const selectService = getByLabelText('Select a service') as HTMLInputElement;
-    fireEvent.change(selectService, { target: { value: 'service-1' } });
+    await user.type(selectService, 'service-1');
 
     expect(selectService.value).toBe('e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90');
   });

package/src/queue-patient-linelists/queue-linelist-filter.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import QueueLinelistFilter from './queue-linelist-filter.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { mockVisitTypes } from '../../__mocks__/visits.mock';
+import QueueLinelistFilter from './queue-linelist-filter.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
@@ -9,7 +10,6 @@ jest.mock('@openmrs/esm-framework', () => ({
   useVisitTypes: jest.fn(() => mockVisitTypes),
   toOpemrsIsoString: jest.fn(),
 }));
-// Additional mock functions if needed
 
 describe('QueueLinelistFilter', () => {
   it('renders the form with filter elements', () => {
@@ -26,50 +26,62 @@ describe('QueueLinelistFilter', () => {
     expect(screen.getByText('Apply filters')).toBeInTheDocument();
   });
 
-  it('calls closePanel function when cancel button is clicked', () => {
+  it('calls closePanel function when cancel button is clicked', async () => {
+    const user = userEvent.setup();
     const closePanelMock = jest.fn();
+
     render(<QueueLinelistFilter closePanel={closePanelMock} />);
 
     const cancelButton = screen.getByText('Cancel');
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(closePanelMock).toHaveBeenCalledTimes(1);
   });
 
-  it('updates gender state when a radio button is selected', () => {
+  it('updates gender state when a radio button is selected', async () => {
+    const user = userEvent.setup();
+
     render(<QueueLinelistFilter closePanel={jest.fn()} />);
 
     const maleRadioButton = screen.getByLabelText('Male');
-    fireEvent.click(maleRadioButton);
+    await user.click(maleRadioButton);
 
     expect(maleRadioButton).toBeChecked();
   });
 
-  it('updates startAge state when a number is entered', () => {
+  it('updates startAge state when a number is entered', async () => {
+    const user = userEvent.setup();
     render(<QueueLinelistFilter closePanel={jest.fn()} />);
 
     const startAgeInput = screen.getByLabelText('Between');
-    fireEvent.change(startAgeInput, { target: { value: '10' } });
+    await user.type(startAgeInput, '10');
 
     expect(startAgeInput).toHaveValue(10);
   });
 
-  it('updates returnDate state when date input changes', () => {
+  it('updates returnDate state when date input changes', async () => {
+    const user = userEvent.setup();
+
     render(<QueueLinelistFilter closePanel={jest.fn()} />);
 
     const returnDateInput = screen.getByLabelText('Date');
-    fireEvent.change(returnDateInput, { target: { value: '2023-08-20' } });
+
+    await user.clear(returnDateInput);
+    await user.type(returnDateInput, '2023-08-20');
 
     expect(returnDateInput).toHaveValue('2023-08-20');
   });
 
-  it('should open the visit type dropdown and close after selection', () => {
+  it('should open the visit type dropdown and close after selection', async () => {
+    const user = userEvent.setup();
+
     render(<QueueLinelistFilter closePanel={jest.fn()} />);
 
     const visitTypeDropdown = screen.getByRole('button', { name: /Select visit type/i });
-    fireEvent.click(visitTypeDropdown);
+    await user.click(visitTypeDropdown);
+
     const type1Option = screen.getByText('Outpatient Visit');
-    fireEvent.click(type1Option);
+    await user.click(type1Option);
 
     expect(visitTypeDropdown).toHaveTextContent('Open menu');
   });

package/src/queue-patient-linelists/queue-linelist.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import QueueLinelist from './queue-linelist.component';
 
 describe('QueueLinelist', () => {
@@ -10,11 +11,13 @@ describe('QueueLinelist', () => {
     expect(filterContent).toBeInTheDocument();
   });
 
-  it('toggles between filter content and null', () => {
+  it('toggles between filter content and null', async () => {
+    const user = userEvent.setup();
+
     render(<QueueLinelist closePanel={jest.fn()} />);
 
     const closeButton = screen.getByText('Close overlay');
-    fireEvent.click(closeButton);
+    await user.click(closeButton);
 
     const filterContent = screen.queryByTestId('filter-content');
     expect(filterContent).not.toBeInTheDocument();

package/src/queue-patient-linelists/scheduled-appointments-table.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import AppointmentsTable from './scheduled-appointments-table.component';
 import { mockAppointmentsData } from '../../__mocks__/appointments-data.mock';
 
@@ -30,11 +31,14 @@ describe('AppointmentsTable', () => {
     expect(appointmentName).toBeInTheDocument();
   });
 
-  it('filters appointments based on status selection', () => {
+  it('filters appointments based on status selection', async () => {
+    const user = userEvent.setup();
+
     render(<AppointmentsTable />);
 
     const statusDropdown = screen.getAllByLabelText('Status:');
-    fireEvent.change(statusDropdown[0], { target: { value: 'Completed' } });
+
+    await user.type(statusDropdown[0], 'Completed');
 
     const filteredAppointmentName = screen.getByText('Hungai Kevin');
     expect(filteredAppointmentName).toBeInTheDocument();

package/src/queue-rooms/queue-room-form.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import QueueRoomForm from './queue-room-form.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { mockServices } from '../../__mocks__/active-visits.mock';
+import QueueRoomForm from './queue-room-form.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
@@ -28,37 +29,47 @@ describe('QueueRoomForm', () => {
     expect(screen.getByText('Save')).toBeInTheDocument();
   });
 
-  it('displays error notification if queue room name is missing on submission', () => {
+  it('displays error notification if queue room name is missing on submission', async () => {
+    const user = userEvent.setup();
+
     render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
 
-    fireEvent.click(screen.getByText('Save'));
+    await user.click(screen.getByText('Save'));
 
     expect(screen.getByText('Missing queue room name')).toBeInTheDocument();
   });
 
-  it('displays error notification if queue room service is missing on submission', () => {
+  it('displays error notification if queue room service is missing on submission', async () => {
+    const user = userEvent.setup();
+
     render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
 
-    fireEvent.change(screen.getByLabelText('Queue room name'), { target: { value: 'Room 123' } });
-    fireEvent.click(screen.getByText('Save'));
+    const queueRoomNameInput = screen.getByLabelText('Queue room name');
+
+    await user.type(queueRoomNameInput, 'Room 123');
+    await user.click(screen.getByText('Save'));
 
     expect(screen.getByText('Missing queue room service')).toBeInTheDocument();
   });
 
-  it('calls closePanel when Cancel button is clicked', () => {
+  it('calls closePanel when Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+
     const closePanelMock = jest.fn();
     render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={closePanelMock} />);
 
-    fireEvent.click(screen.getByText('Cancel'));
+    await user.click(screen.getByText('Cancel'));
 
     expect(closePanelMock).toHaveBeenCalledTimes(1);
   });
 
-  it('updates queue room name state when a value is entered', () => {
+  it('updates queue room name state when a value is entered', async () => {
+    const user = userEvent.setup();
+
     render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
 
     const queueRoomNameInput = screen.getByLabelText('Queue room name');
-    fireEvent.change(queueRoomNameInput, { target: { value: 'Room 123' } });
+    await user.type(queueRoomNameInput, 'Room 123');
 
     expect(queueRoomNameInput).toHaveValue('Room 123');
   });

package/src/queue-services/queue-service-form.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import QueueServiceForm from './queue-service-form.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
@@ -28,25 +29,29 @@ jest.mock('../patient-search/hooks/useQueueLocations', () => ({
 
 describe('QueueServiceForm', () => {
   it('should display required error messages when form is submitted with missing fields', async () => {
+    const user = userEvent.setup();
+
     render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
 
     const submitButton = screen.getByText('Save');
 
-    fireEvent.click(submitButton);
+    await user.click(submitButton);
 
     expect(screen.getByText('Missing queue name')).toBeInTheDocument();
   });
 
   it('should submit the form when all fields are filled', async () => {
+    const user = userEvent.setup();
+
     render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
 
     const queueNameInput = screen.getByLabelText('Queue name');
     const serviceSelect = screen.getByLabelText('Select a service type');
     const locationSelect = screen.getByLabelText('Select a location');
 
-    fireEvent.change(queueNameInput, { target: { value: 'Test Queue' } });
-    fireEvent.change(serviceSelect, { target: { value: '6f017eb0-b035-4acd-b284-da45f5067502' } });
-    fireEvent.change(locationSelect, { target: { value: '34567eb0-b035-4acd-b284-da45f5067502' } });
+    await user.type(queueNameInput, 'Test Queue');
+    await user.selectOptions(serviceSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
 
     expect(queueNameInput).toHaveValue('Test Queue');
     expect(serviceSelect).toHaveValue('6f017eb0-b035-4acd-b284-da45f5067502');

package/src/remove-queue-entry-dialog/remove-queue-entry.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import RemoveQueueEntryDialog from './remove-queue-entry.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
@@ -31,11 +32,13 @@ describe('RemoveQueueEntryDialog', () => {
     expect(screen.getByText('End visit')).toBeInTheDocument();
   });
 
-  it('calls closeModal when Cancel button is clicked', () => {
+  it('calls closeModal when Cancel button is clicked', async () => {
+    const user = userEvent.setup();
     const closeModal = jest.fn();
+
     render(<RemoveQueueEntryDialog queueEntry={queueEntry} closeModal={closeModal} />);
 
-    fireEvent.click(screen.getByText('Cancel'));
+    await user.click(screen.getByText('Cancel'));
 
     expect(closeModal).toHaveBeenCalledTimes(1);
   });

package/src/transition-queue-entry/transition-queue-entry-dialog.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import TransitionQueueEntryModal from './transition-queue-entry-dialog.component';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { navigate } from '@openmrs/esm-framework';
 import { serveQueueEntry, updateQueueEntry } from '../active-visits/active-visits-table.resource';
 import { requeueQueueEntry } from './transition-queue-entry.resource';
+import TransitionQueueEntryModal from './transition-queue-entry-dialog.component';
 
 const mockedNavigate = navigate as jest.Mock;
 
@@ -70,26 +71,26 @@ describe('TransitionQueueEntryModal', () => {
   });
 
   it('handles requeueing patient', async () => {
+    const user = userEvent.setup();
+
     const closeModal = jest.fn();
     render(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
 
-    fireEvent.click(screen.getByText('Requeue'));
+    await user.click(screen.getByText('Requeue'));
 
-    await waitFor(() => {
-      expect(requeueQueueEntry).toHaveBeenCalledWith('Requeued', queueEntry.queueUuid, queueEntry.queueEntryUuid);
-    });
+    expect(requeueQueueEntry).toHaveBeenCalledWith('Requeued', queueEntry.queueUuid, queueEntry.queueEntryUuid);
   });
 
   it('handles serving patient', async () => {
+    const user = userEvent.setup();
+
     const closeModal = jest.fn();
     render(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
 
-    fireEvent.click(screen.getByText('Serve'));
+    await user.click(screen.getByText('Serve'));
 
-    await waitFor(() => {
-      expect(updateQueueEntry).toHaveBeenCalled();
-      expect(serveQueueEntry).toHaveBeenCalled();
-      expect(mockedNavigate).toHaveBeenCalled();
-    });
+    expect(updateQueueEntry).toHaveBeenCalled();
+    expect(serveQueueEntry).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalled();
   });
 });