@openmrs/esm-appointments-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 109880 ms
+webpack 5.86.0 compiled with 2 warnings in 108791 ms

package/dist/openmrs-esm-appointments-app.js.buildmanifest.json

@@ -100,7 +100,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "bbc341828b398088",
+      "hash": "3956ac44d3a6d972",
       "childrenByOrder": {}
     },
     {
@@ -438,7 +438,7 @@
       "auxiliaryFiles": [
         "755.js.map"
       ],
-      "hash": "5c7cfbbc3a83fc81",
+      "hash": "eccfc4d268aed3a9",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"check-in-appointment-modal","slot":"todays-appointment-slot","component":"checkInModal"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"early-appointments-panel","component":"earlyAppointments"}],"version":"5.2.2-pre.2409"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"check-in-appointment-modal","slot":"todays-appointment-slot","component":"checkInModal"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsByStatus"},{"name":"early-appointments-panel","component":"earlyAppointments"}],"version":"5.2.2-pre.2415"}

package/package.json

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

package/src/appointments/common-components/appointments-table.component.tsx

@@ -22,16 +22,16 @@ import {
 import { ConfigurableLink, formatDatetime, usePagination, formatDate, useConfig } from '@openmrs/esm-framework';
 import startCase from 'lodash-es/startCase';
 import { Download } from '@carbon/react/icons';
-import AppointmentDetails from '../details/appointment-details.component';
 import { EmptyState } from '../../empty-state/empty-state.component';
 import { downloadAppointmentsAsExcel } from '../../helpers/excel';
 import { launchOverlay } from '../../hooks/useOverlay';
-import PatientSearch from '../../patient-search/patient-search.component';
 import { MappedAppointment } from '../../types';
 import { getPageSizes, useSearchResults } from '../utils';
+import { ConfigObject } from '../../config-schema';
+import AppointmentDetails from '../details/appointment-details.component';
 import AppointmentActions from './appointments-actions.component';
+import PatientSearch from '../../patient-search/patient-search.component';
 import styles from './appointments-table.scss';
-import { ConfigObject } from '../../config-schema';
 
 interface AppointmentsTableProps {
   appointments: Array<MappedAppointment>;

package/src/appointments/common-components/appointments-table.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import AppointmentsTable from './appointments-table.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { MappedAppointment } from '../../types';
 import { usePagination } from '@openmrs/esm-framework';
 import { downloadAppointmentsAsExcel } from '../../helpers/excel';
 import { launchOverlay } from '../../hooks/useOverlay';
+import AppointmentsTable from './appointments-table.component';
 import PatientSearch from '../../patient-search/patient-search.component';
 
 // Define mock appointments data for testing purposes
@@ -59,19 +60,26 @@ describe('AppointmentsBaseTable', () => {
     scheduleType: 'Scheduled',
   };
 
-  it('should render empty state if appointments are not provided', () => {
+  it('should render empty state if appointments are not provided', async () => {
+    const user = userEvent.setup();
+
     render(<AppointmentsTable {...props} />);
-    expect(screen.getByText(/Scheduled appointments/)).toBeInTheDocument();
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
     const emptyScreenText = screen.getByText(/There are no scheduled appointments to display/);
     expect(emptyScreenText).toBeInTheDocument();
 
     const launchAppointmentsForm = screen.getByRole('button', { name: /Create appointment/ });
-    fireEvent.click(launchAppointmentsForm);
+
+    await user.click(launchAppointmentsForm);
+
     expect(mockLaunchOverlay).toHaveBeenCalledWith('Search', <PatientSearch />);
   });
 
   it('should render loading state when loading data', () => {
     render(<AppointmentsTable {...props} isLoading={true} />);
+
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
@@ -83,41 +91,60 @@ describe('AppointmentsBaseTable', () => {
     });
 
     render(<AppointmentsTable {...props} appointments={appointments} />);
-    await waitFor(() => {
-      expect(screen.getByText('Patient name')).toBeInTheDocument();
-      expect(screen.getByText('Identifier')).toBeInTheDocument();
-      expect(screen.getByText('Service Type')).toBeInTheDocument();
-      expect(screen.getByText('Actions')).toBeInTheDocument();
-      const patient = screen.getByText('John Smith');
-      expect(patient).toBeInTheDocument();
-      expect(patient).toHaveAttribute('href', 'someUrl');
-      expect(screen.getByText('12345')).toBeInTheDocument();
-      expect(screen.getByText('Service')).toBeInTheDocument();
-    });
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
+    expect(screen.getByText('Patient name')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
+    expect(screen.getByText('Service Type')).toBeInTheDocument();
+    expect(screen.getByText('Actions')).toBeInTheDocument();
+    const patient = screen.getByText('John Smith');
+    expect(patient).toBeInTheDocument();
+    expect(patient).toHaveAttribute('href', 'someUrl');
+    expect(screen.getByText('12345')).toBeInTheDocument();
+    expect(screen.getByText('Service')).toBeInTheDocument();
   });
 
-  it('should update search string when search input is changed', () => {
+  it('should update search string when search input is changed', async () => {
+    const user = userEvent.setup();
+
     render(<AppointmentsTable {...props} appointments={appointments} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
     const searchInput = screen.getByRole('searchbox');
-    fireEvent.change(searchInput, { target: { value: 'John' } });
+
+    await user.type(searchInput, 'John');
     expect(searchInput).toHaveValue('John');
   });
 
-  it("should contain the title 'Scheduled appointments' and Total count", () => {
+  it("should contain the title 'Scheduled appointments' and Total count", async () => {
     render(<AppointmentsTable {...props} appointments={appointments} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
     expect(screen.getByText(/Scheduled appointment/)).toBeInTheDocument();
     expect(screen.getByText(/Total 1/)).toBeInTheDocument();
   });
 
-  it('should execute the download function when download button is clicked', () => {
+  it('should execute the download function when download button is clicked', async () => {
+    const user = userEvent.setup();
+
     render(<AppointmentsTable {...props} appointments={appointments} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
     const downloadButton = screen.getByRole('button', { name: /Download/ });
-    fireEvent.click(downloadButton);
+
+    await user.click(downloadButton);
+
     expect(downloadButton).toBeInTheDocument();
     expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(appointments, expect.anything());
   });
 
-  it('should have pagination when there are more than 25 appointments', () => {
+  it('should have pagination when there are more than 25 appointments', async () => {
+    const user = userEvent.setup();
+
     const mockAppointments = Array.from({ length: 100 }, (_, i) => ({
       patientUuid: `${i}`,
       name: `Patient ${i}`,
@@ -145,17 +172,22 @@ describe('AppointmentsBaseTable', () => {
     });
 
     render(<AppointmentsTable {...props} appointments={mockAppointments} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
     expect(screen.getByText(/1–25 of 100 items/)).toBeInTheDocument();
     const nextPageButton = screen.getByRole('button', { name: /Next page/ });
     const previousPageButton = screen.getByRole('button', { name: /Previous page/ });
 
     // Clicking the next page button should call the goTo function with the next page number
-    fireEvent.click(nextPageButton);
+    await user.click(nextPageButton);
+
     expect(mockGoToPage).toHaveBeenCalledWith(2);
     expect(screen.getByText(/26–50 of 100 items/)).toBeInTheDocument();
 
     // Clicking the previous page button should call the goTo function with the previous page number
-    fireEvent.click(previousPageButton);
+    await user.click(previousPageButton);
+
     expect(mockGoToPage).toHaveBeenCalledWith(1);
 
     expect(screen.getByText(/1–25 of 100 items/)).toBeInTheDocument();

package/src/appointments/forms/cancel-form/cancel-appointment.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { screen, render, waitFor } from '@testing-library/react';
-import CancelAppointment from './cancel-appointment.component';
-import { mockMappedAppointmentsData } from '../../../../../../__mocks__/appointments.mock';
 import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { mockMappedAppointmentsData } from '../../../../../../__mocks__/appointments.mock';
 import { showNotification, showToast } from '@openmrs/esm-framework';
 import { cancelAppointment } from '../forms.resource';
+import CancelAppointment from './cancel-appointment.component';
 
 const testProps = {
   appointment: mockMappedAppointmentsData.data[0],
@@ -39,8 +39,8 @@ describe('Cancel appointment form', () => {
 
     renderCancelAppointment();
 
-    await waitFor(() => user.click(screen.getByRole('textbox', { name: /reason for changes/i })));
-    await waitFor(() => user.click(screen.getByRole('button', { name: /cancel appointment/i })));
+    await user.click(screen.getByRole('textbox', { name: /reason for changes/i }));
+    await user.click(screen.getByRole('button', { name: /cancel appointment/i }));
 
     expect(mockShowToast).toHaveBeenCalledTimes(1);
     expect(mockShowToast).toHaveBeenCalledWith({
@@ -50,6 +50,7 @@ describe('Cancel appointment form', () => {
       description: 'It has been cancelled successfully',
     });
   });
+
   it('should display an error message when rest api call to cancel appointment fails', async () => {
     const user = userEvent.setup();
     mockCancelAppointment.mockResolvedValueOnce({
@@ -59,8 +60,8 @@ describe('Cancel appointment form', () => {
 
     renderCancelAppointment();
 
-    await waitFor(() => user.click(screen.getByRole('textbox', { name: /reason for changes/i })));
-    await waitFor(() => user.click(screen.getByRole('button', { name: /cancel appointment/i })));
+    await user.click(screen.getByRole('textbox', { name: /reason for changes/i }));
+    await user.click(screen.getByRole('button', { name: /cancel appointment/i }));
     expect(mockShowNotification).toHaveBeenCalledTimes(1);
     expect(mockShowNotification).toHaveBeenCalledWith({
       critical: true,

package/src/appointments/unscheduled/unscheduled-appointments.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 { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
 import { downloadUnscheduledAppointments } from '../../helpers/excel';
 import { usePagination } from '@openmrs/esm-framework';
@@ -78,6 +79,8 @@ describe('UnscheduledAppointments component', () => {
   });
 
   it('allows the user to search for appointments', async () => {
+    const user = userEvent.setup();
+
     mockUseUnscheduledAppointments.mockReturnValue({
       isLoading: false,
       data: mockUnscheduledAppointments,
@@ -92,7 +95,7 @@ describe('UnscheduledAppointments component', () => {
     render(<UnscheduledAppointments />);
 
     const searchInput = await screen.findByRole('searchbox');
-    fireEvent.change(searchInput, { target: { value: 'Another' } });
+    await user.type(searchInput, 'Another');
 
     const patientName = screen.getByText('Another Patient');
     expect(patientName).toBeInTheDocument();
@@ -108,6 +111,8 @@ describe('UnscheduledAppointments component', () => {
   });
 
   it('allows the user to download a list of unscheduled appointments', async () => {
+    const user = userEvent.setup();
+
     mockUseUnscheduledAppointments.mockReturnValue({
       isLoading: false,
       data: mockUnscheduledAppointments,
@@ -124,7 +129,7 @@ describe('UnscheduledAppointments component', () => {
     const downloadButton = await screen.findByText('Download');
     expect(downloadButton).toBeInTheDocument();
 
-    fireEvent.click(downloadButton);
+    await user.click(downloadButton);
 
     expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockUnscheduledAppointments);
   });

package/src/appointments-calendar/daily/daily-view-workload.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
 import dayjs from 'dayjs';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { navigate } from '@openmrs/esm-framework';
-import DailyWorkloadView from './daily-view-workload.component';
 import { spaBasePath } from '../../constants';
 import { CalendarType } from '../../types';
+import DailyWorkloadView from './daily-view-workload.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
@@ -36,10 +37,12 @@ describe('DailyWorkloadView Component', () => {
     expect(screen.getByText('Lab testing')).toBeInTheDocument();
   });
 
-  it('navigates when a service area is clicked', () => {
+  it('navigates when a service area is clicked', async () => {
+    const user = userEvent.setup();
+
     render(<DailyWorkloadView {...mockData} />);
 
-    fireEvent.click(screen.getByText('HIV'));
+    await user.click(screen.getByText('HIV'));
 
     expect(navigate).toHaveBeenCalledWith({
       to: `${spaBasePath}/appointments/list/Fri, 18 Aug 2023 00:00:00 GMT/HIV`,

package/src/appointments-calendar/weekly/weekly-view-workload.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
 import dayjs from 'dayjs';
-import WeeklyWorkloadView from './weekly-view-workload.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { CalendarType } from '../../types';
 import { spaBasePath } from '../../constants';
 import { navigate } from '@openmrs/esm-framework';
+import WeeklyWorkloadView from './weekly-view-workload.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
@@ -37,10 +38,12 @@ describe('WeeklyWorkloadView Component', () => {
     expect(screen.getByText('Lab testing')).toBeInTheDocument();
   });
 
-  it('navigates when a service area is clicked', () => {
+  it('navigates when a service area is clicked', async () => {
+    const user = userEvent.setup();
+
     render(<WeeklyWorkloadView {...mockData} />);
 
-    fireEvent.click(screen.getByText('HIV'));
+    await user.click(screen.getByText('HIV'));
 
     expect(navigate).toHaveBeenCalledWith({
       to: `${spaBasePath}/appointments/list/Thu, 17 Aug 2023 00:00:00 GMT/HIV`,

package/src/home-appointments/appointment-actions.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 { ActionsMenu } from './appointment-actions.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
@@ -30,7 +31,9 @@ describe('ActionsMenu', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the actions menu with correct options and handlers', () => {
+  it('renders the actions menu with correct options and handlers', async () => {
+    const user = userEvent.setup();
+
     const mockAppointment = {
       id: '123',
       recurring: false,
@@ -39,12 +42,12 @@ describe('ActionsMenu', () => {
 
     renderActionsMenu({ appointment: mockAppointment, useBahmniUI: 'true' });
 
-    fireEvent.click(screen.getByText(/Edit Appointment/i));
-    fireEvent.click(screen.getByText(/Check In/i));
-    fireEvent.click(screen.getByText(/Complete/i));
-    fireEvent.click(screen.getByText(/Missed/i));
-    fireEvent.click(screen.getByText(/Cancel/i));
-    fireEvent.click(screen.getByText(/Add new appointment/i));
+    await user.click(screen.getByText(/Edit Appointment/i));
+    await user.click(screen.getByText(/Check In/i));
+    await user.click(screen.getByText(/Complete/i));
+    await user.click(screen.getByText(/Missed/i));
+    await user.click(screen.getByText(/Cancel/i));
+    await user.click(screen.getByText(/Add new appointment/i));
 
     expect(screen.getByText(/Edit Appointment/i)).toBeInTheDocument();
     expect(screen.getByText(/Check In/i)).toBeInTheDocument();
@@ -54,7 +57,9 @@ describe('ActionsMenu', () => {
     expect(screen.getByText(/Add new appointment/i)).toBeInTheDocument();
   });
 
-  it('renders the actions menu with correct options and handlers in non-BahmniUI mode', () => {
+  it('renders the actions menu with correct options and handlers in non-BahmniUI mode', async () => {
+    const user = userEvent.setup();
+
     const mockAppointment = {
       id: '456',
       recurring: true,
@@ -63,12 +68,12 @@ describe('ActionsMenu', () => {
 
     renderActionsMenu({ appointment: mockAppointment, useBahmniUI: undefined });
 
-    fireEvent.click(screen.getByText(/Edit Appointment/i));
-    fireEvent.click(screen.getByText(/Check In/i));
-    fireEvent.click(screen.getByText(/Complete/i));
-    fireEvent.click(screen.getByText(/Missed/i));
-    fireEvent.click(screen.getByText(/Cancel/i));
-    fireEvent.click(screen.getByText(/Add new appointment/i));
+    await user.click(screen.getByText(/Edit Appointment/i));
+    await user.click(screen.getByText(/Check In/i));
+    await user.click(screen.getByText(/Complete/i));
+    await user.click(screen.getByText(/Missed/i));
+    await user.click(screen.getByText(/Cancel/i));
+    await user.click(screen.getByText(/Add new appointment/i));
 
     expect(screen.getByText('Edit Appointment')).toBeInTheDocument();
     expect(screen.getByText('Check In')).toBeInTheDocument();

package/src/home-appointments/check-in-modal/check-in-modal.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import CheckInAppointmentModal from './check-in-modal.component';
-import { showActionableNotification, showNotification } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { updateAppointmentStatus } from '../appointments-table.resource';
+import { showActionableNotification, showNotification } from '@openmrs/esm-framework';
+import CheckInAppointmentModal from './check-in-modal.component';
 
 const mockUpdateAppointmentStatus = updateAppointmentStatus as jest.Mock;
 const appointmentUuid = '7cd38a6d-377e-491b-8284-b04cf8b8c6d8';
@@ -16,40 +17,44 @@ describe('CheckInAppointmentModal', () => {
   });
 
   it('submits and displays success notification', async () => {
+    const user = await userEvent.setup();
+
     mockUpdateAppointmentStatus.mockResolvedValue({ status: 200 });
     const closeCheckInModal = jest.fn();
 
     render(<CheckInAppointmentModal closeCheckInModal={closeCheckInModal} appointmentUuid={appointmentUuid} />);
 
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: '10:30' } });
-    fireEvent.click(screen.getByText('Yes'));
+    await user.type(screen.getByRole('textbox'), '10:30');
+    await user.click(screen.getByText('Yes'));
 
-    await waitFor(() => {
-      expect(closeCheckInModal).toHaveBeenCalled();
-      expect(showActionableNotification).toHaveBeenCalled();
-    });
+    expect(closeCheckInModal).toHaveBeenCalled();
+    expect(showActionableNotification).toHaveBeenCalled();
   });
 
   it('displays error notification on submit failure', async () => {
+    const user = userEvent.setup();
+
     mockUpdateAppointmentStatus.mockResolvedValue({ status: 400 });
     const closeCheckInModal = jest.fn();
 
     render(<CheckInAppointmentModal closeCheckInModal={closeCheckInModal} appointmentUuid={appointmentUuid} />);
 
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: '10:30' } });
-    fireEvent.click(screen.getByText('Yes'));
+    const input = screen.getByRole('textbox');
 
-    await waitFor(() => {
-      expect(showNotification).toHaveBeenCalled();
-    });
+    await user.type(input, '10:30');
+    await user.click(screen.getByText('Yes'));
+
+    expect(showNotification).toHaveBeenCalled();
   });
 
-  it('closes modal on "No" button click', () => {
+  it('closes modal on "No" button click', async () => {
+    const user = userEvent.setup();
+
     const closeCheckInModal = jest.fn();
 
     render(<CheckInAppointmentModal closeCheckInModal={closeCheckInModal} appointmentUuid={appointmentUuid} />);
 
-    fireEvent.click(screen.getByText('No'));
+    await user.click(screen.getByText('No'));
 
     expect(closeCheckInModal).toHaveBeenCalled();
   });