@kenyaemr/esm-appointments-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"},"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"}],"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":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-appointments-dashboard-slot","title":"Appointments","path":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"upcoming-appointment-slot"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"},{"name":"edit-appointments-form","component":"appointementForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointementForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointementForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}}],"version":"7.0.3-pre.88"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"}],"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":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-appointments-dashboard-slot","title":"Appointments","path":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"upcoming-appointment-slot"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"},{"name":"edit-appointments-form","component":"appointementForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointementForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointementForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"}],"version":"7.0.3-pre.94"}

package/package.json

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

package/src/admin/appointment-services/appointment-services.scss

@@ -1,10 +1,10 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 
 .appointmentServiceContainer {
-  margin: spacing.$spacing-05 spacing.$spacing-05;
+  margin: layout.$spacing-05 layout.$spacing-05;
 
   & > div {
-    padding: spacing.$spacing-03 0;
+    padding: layout.$spacing-03 0;
   }
 }
 
@@ -13,11 +13,11 @@
   bottom: 0;
   left: 0;
   right: 0;
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
 }
 
 .button {
-  height: spacing.$spacing-10;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

package/src/appointments/appointment-tabs.scss

@@ -1,10 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .appointmentList {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 
   & > div {
     background-color: $ui-02;
@@ -30,19 +29,19 @@
 
 .tabPanel {
   padding: 0;
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .calendarButton {
   float: right;
   position: absolute;
   right: 0;
-  height: spacing.$spacing-09;
+  height: layout.$spacing-09;
   min-height: 0;
 }
 
 .downloadButton {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
   & > button {
     border: 1px solid colors.$blue-60;
   }

package/src/appointments/appointment-tabs.test.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { mockAppointmentsData } from '__mocks__';
 import AppointmentTabs from './appointment-tabs.component';
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 describe('AppointmentTabs', () => {
   xit(`renders tabs showing different appointment lists`, async () => {
-    const user = userEvent.setup();
+    mockOpenmrsFetch.mockResolvedValue({ ...mockAppointmentsData } as unknown as FetchResponse);
 
-    mockOpenmrsFetch.mockReturnValueOnce({ data: mockAppointmentsData.data });
-
-    renderAppointmentTabs();
+    renderWithSwr(<AppointmentTabs appointmentServiceType="" />);
 
     await waitForLoadingToFinish();
 
@@ -49,7 +46,3 @@ describe('AppointmentTabs', () => {
     });
   });
 });
-
-function renderAppointmentTabs() {
-  renderWithSwr(<AppointmentTabs appointmentServiceType="" />);
-}

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

@@ -1,9 +1,10 @@
-import { render } from '@testing-library/react';
 import React from 'react';
-import AppointmentActions from './appointments-actions.component';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { useTodaysVisits } from '../../hooks/useTodaysVisits';
+import { type ConfigObject, configSchema } from '../../config-schema';
 import { type Appointment, AppointmentKind, AppointmentStatus } from '../../types';
-import { useConfig } from '@openmrs/esm-framework';
+import AppointmentActions from './appointments-actions.component';
 
 const appointment: Appointment = {
   uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
@@ -46,137 +47,183 @@ const appointment: Appointment = {
   voided: false,
   teleconsultationLink: null,
   extensions: [],
+  endDateTime: null,
+  dateAppointmentScheduled: null,
 };
 
-jest.mock('../../hooks/useTodaysVisits', () => {
-  const originalModule = jest.requireActual('../../hooks/useTodaysVisits');
+const defaultProps = {
+  visits: [],
+  appointment: appointment,
+  scheduleType: 'Pending',
+  mutate: () => {},
+};
 
-  return {
-    ...originalModule,
-    useTodaysVisits: jest.fn(),
-  };
-});
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockUseTodaysVisits = jest.mocked(useTodaysVisits);
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    useConfig: jest.fn(),
-  };
-});
+jest.mock('../../hooks/useTodaysVisits', () => ({
+  ...jest.requireActual('../../hooks/useTodaysVisits'),
+  useTodaysVisits: jest.fn(),
+}));
 
 describe('AppointmentActions', () => {
-  const defaultProps = {
-    visits: [],
-    appointment: appointment,
-    scheduleType: 'Pending',
-    mutate: () => {},
-  };
-
   afterAll(() => {
     jest.useRealTimers();
   });
 
   it('renders the check in button when appointment is today and the patient has not checked in and check in button enabled', () => {
     appointment.status = AppointmentStatus.SCHEDULED;
-    useConfig.mockImplementation(() => ({
-      checkInButton: { enabled: true },
-      checkOutButton: { enabled: true },
-    }));
-    useTodaysVisits.mockImplementation(() => ({
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkOutButton: { enabled: true, customUrl: '' },
+    });
+
+    mockUseTodaysVisits.mockReturnValue({
       visits: [],
-    }));
+      error: null,
+      isLoading: false,
+      mutateVisit: jest.fn(),
+    });
+
     const props = { ...defaultProps };
-    const { getByText } = render(<AppointmentActions {...props} />);
-    const button = getByText(/check in/i);
-    expect(button).toBeInTheDocument();
+    render(<AppointmentActions {...props} />);
+
+    expect(screen.getByText(/check in/i)).toBeInTheDocument();
   });
 
-  it('does not renders the check in button when appointment is today and the patient has not checked in but the check-in button is disabled', () => {
+  it('does not render the check in button when appointment is today and the patient has not checked in but the check-in button is disabled', () => {
     appointment.status = AppointmentStatus.SCHEDULED;
-    useConfig.mockImplementation(() => ({
-      checkInButton: { enabled: false },
-      checkOutButton: { enabled: true },
-    }));
-    useTodaysVisits.mockImplementation(() => ({
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: false, showIfActiveVisit: false, customUrl: '' },
+      checkOutButton: { enabled: true, customUrl: '' },
+    });
+
+    mockUseTodaysVisits.mockReturnValue({
       visits: [],
-    }));
+      error: null,
+      isLoading: false,
+      mutateVisit: jest.fn(),
+    });
+
     const props = { ...defaultProps };
-    const { queryByText } = render(<AppointmentActions {...props} />);
-    const button = queryByText('Check In');
-    expect(button).not.toBeInTheDocument();
+    render(<AppointmentActions {...props} />);
+
+    expect(screen.queryByText(/check in/i)).not.toBeInTheDocument();
   });
 
   it('renders the checked out button when the patient has checked out', () => {
     appointment.status = AppointmentStatus.COMPLETED;
-    useConfig.mockImplementation(() => ({
-      checkInButton: { enabled: true },
-      checkOutButton: { enabled: true },
-    }));
-    useTodaysVisits.mockImplementation(() => ({
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkOutButton: { enabled: true, customUrl: '' },
+    });
+
+    mockUseTodaysVisits.mockReturnValue({
       visits: [
         {
           patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
           startDatetime: new Date().toISOString(),
           stopDatetime: new Date().toISOString(),
+          uuid: '',
+          encounters: [],
+          visitType: {
+            uuid: '',
+            display: 'Facility Visit',
+          },
         },
       ],
-    }));
+      error: null,
+      isLoading: false,
+      mutateVisit: jest.fn(),
+    });
+
     const props = { ...defaultProps };
-    const { getByText } = render(<AppointmentActions {...props} />);
-    const button = getByText('Checked out');
-    expect(button).toBeInTheDocument();
+    render(<AppointmentActions {...props} />);
+
+    expect(screen.getByText('Checked out')).toBeInTheDocument();
   });
 
   it('renders the check out button when the patient has an active visit and today is the appointment date and the check out button enabled', () => {
     appointment.status = AppointmentStatus.CHECKEDIN;
-    useConfig.mockImplementation(() => ({
-      checkInButton: { enabled: true },
-      checkOutButton: { enabled: true },
-    }));
-    useTodaysVisits.mockImplementation(() => ({
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkOutButton: { enabled: true, customUrl: '' },
+    });
+
+    mockUseTodaysVisits.mockReturnValue({
       visits: [
         {
           patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
           startDatetime: new Date().toISOString(),
           stopDatetime: null,
+          uuid: '',
+          encounters: [],
+          visitType: {
+            uuid: '',
+            display: 'Facility Visit',
+          },
         },
       ],
-    }));
+      error: null,
+      isLoading: false,
+      mutateVisit: jest.fn(),
+    });
+
     const props = { ...defaultProps, scheduleType: 'Scheduled' };
-    const { getByText } = render(<AppointmentActions {...props} />);
-    const button = getByText('Check out');
-    expect(button).toBeInTheDocument();
+    render(<AppointmentActions {...props} />);
+
+    expect(screen.getByText(/check out/i)).toBeInTheDocument();
   });
 
   it('does not render check out button when the patient has an active visit and today is the appointment date but the check out button is disabled', () => {
     appointment.status = AppointmentStatus.CHECKEDIN;
-    useConfig.mockImplementation(() => ({
-      checkInButton: { enabled: true },
-      checkOutButton: { enabled: false },
-    }));
-    useTodaysVisits.mockImplementation(() => ({
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      checkInButton: { enabled: true, showIfActiveVisit: false, customUrl: '' },
+      checkOutButton: { enabled: false, customUrl: '' },
+    });
+
+    mockUseTodaysVisits.mockReturnValue({
       visits: [
         {
           patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
           startDatetime: new Date().toISOString(),
           stopDatetime: null,
+          uuid: '',
+          encounters: [],
+          visitType: {
+            uuid: '',
+            display: 'Facility Visit',
+          },
         },
       ],
-    }));
+      error: null,
+      isLoading: false,
+      mutateVisit: jest.fn(),
+    });
+
     const props = { ...defaultProps, scheduleType: 'Scheduled' };
-    const { queryByText } = render(<AppointmentActions {...props} />);
-    const button = queryByText('Check out');
-    expect(button).not.toBeInTheDocument();
+    render(<AppointmentActions {...props} />);
+
+    expect(screen.queryByText(/check out/i)).not.toBeInTheDocument();
   });
 
   // commenting these tests out as this functionality is not implemented yet so not sure how they would have ever passed?
   /*it('renders the correct button when today is the appointment date and the schedule type is pending', () => {
-    useConfig.mockImplementation(() => ({
+    mockUseConfig.mockReturnValue({
       checkInButton: { enabled: true },
       checkOutButton: { enabled: true },
     }));
-    useTodaysVisits.mockImplementation(() => ({
+    mockUseTodaysVisits.mockReturnValue({
       visits: [],
     }));
     const props = { ...defaultProps, scheduleType: 'Pending' };
@@ -186,11 +233,11 @@ describe('AppointmentActions', () => {
   });
 
   it('renders the correct button when today is the appointment date and the schedule type is not pending', () => {
-    useConfig.mockImplementation(() => ({
+    mockUseConfig.mockReturnValue({
       checkInButton: { enabled: true },
       checkOutButton: { enabled: true },
     }));
-    useTodaysVisits.mockImplementation(() => ({
+    mockUseTodaysVisits.mockReturnValue({
       visits: [],
     }));
     const props = { ...defaultProps, scheduleType: 'Confirmed' };

package/src/appointments/common-components/appointments-table.scss

@@ -1,18 +1,18 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .expandedRow > td > div {
   max-height: max-content !important;
 }
 
 .expandedRow td {
-  padding: 0 2rem;
+  padding: 0 layout.$spacing-07;
 }
 
 .expandedRow th[colspan] td[colspan] > div:first-child {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
 }
 
 .hiddenRow {
@@ -52,7 +52,7 @@
     &:after {
       content: '';
       display: block;
-      width: 2rem;
+      width: layout.$spacing-07;
       padding-top: 3px;
       border-bottom: 0.375rem solid var(--brand-03);
     }
@@ -90,13 +90,13 @@
 .content {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {

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

@@ -1,16 +1,23 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { defineConfigSchema, getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { type Appointment } from '../../types';
+import { getDefaultsFromConfigSchema, useConfig, defineConfigSchema } from '@openmrs/esm-framework';
+import { type ConfigObject, configSchema } from '../../config-schema';
+import type { Appointment, AppointmentKind, AppointmentStatus } from '../../types';
 import { downloadAppointmentsAsExcel } from '../../helpers/excel';
+import { getByTextWithMarkup } from 'tools';
 import AppointmentsTable from './appointments-table.component';
-import { configSchema } from '../../config-schema';
-import { getByTextWithMarkup } from '../../../../../tools/test-utils';
 
+const defaultProps = {
+  appointments: [],
+  isLoading: false,
+  scheduleType: 'Scheduled',
+  tableHeading: 'scheduled',
+  visits: [],
+};
 defineConfigSchema('@kenyaemr/esm-appointments-app', configSchema);
 
-const appointments: Array<Appointment> = [
+const mockAppointments = [
   {
     uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
     appointmentNumber: '00001',
@@ -21,8 +28,6 @@ const appointments: Array<Appointment> = [
       uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
       gender: 'M',
       age: '35',
-      birthDate: '1986-04-03T00:00:00.000+0000',
-      phoneNumber: '0700000000',
     },
     service: {
       appointmentServiceId: 1,
@@ -45,8 +50,8 @@ const appointments: Array<Appointment> = [
     },
     location: { name: 'HIV Clinic', uuid: '2131aff8-2e2a-480a-b7ab-4ac53250262b' },
     startDateTime: new Date().toISOString(),
-    appointmentKind: 'WalkIn',
-    status: 'Scheduled',
+    appointmentKind: 'WalkIn' as AppointmentKind,
+    status: 'Scheduled' as AppointmentStatus,
     comments: 'Some comments',
     additionalInfo: null,
     providers: [{ uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' }],
@@ -55,34 +60,26 @@ const appointments: Array<Appointment> = [
     teleconsultationLink: null,
     extensions: [],
   },
-];
+] as unknown as Array<Appointment>;
 
-const mockedDownloadAppointmentsAsExcel = downloadAppointmentsAsExcel as jest.Mock;
-const mockedUseConfig = useConfig as jest.Mock;
+const mockDownloadAppointmentsAsExcel = jest.mocked(downloadAppointmentsAsExcel);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('../../helpers/excel');
 jest.mock('../../hooks/useOverlay');
 
 describe('AppointmentsTable', () => {
-  const props = {
-    appointments: [],
-    isLoading: false,
-    tableHeading: 'scheduled',
-    visits: [],
-    scheduleType: 'Scheduled',
-  };
-
   beforeEach(() => {
-    mockedUseConfig.mockReturnValue({
+    mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
       customPatientChartUrl: 'url-to-patient-chart',
-      checkInButton: { enabled: false },
-      checkOutButton: { enabled: false },
+      checkInButton: { enabled: false, showIfActiveVisit: false, customUrl: null },
+      checkOutButton: { enabled: false, customUrl: null },
     });
   });
 
   it('renders an empty state if appointments data is unavailable', async () => {
-    render(<AppointmentsTable {...props} />);
+    renderAppointmentsTable();
 
     await screen.findByRole('heading', { name: /scheduled appointment/i });
 
@@ -90,13 +87,13 @@ describe('AppointmentsTable', () => {
   });
 
   it('renders a loading state when fetching data', () => {
-    render(<AppointmentsTable {...props} isLoading={true} />);
+    renderAppointmentsTable({ isLoading: true });
 
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   it('renders a tabular overview of the scheduled appointments', async () => {
-    render(<AppointmentsTable {...props} appointments={appointments} />);
+    renderAppointmentsTable({ appointments: mockAppointments });
 
     await screen.findByRole('heading', { name: /scheduled appointment/i });
     expect(screen.getByRole('search', { name: /filter table/i })).toBeInTheDocument();
@@ -109,12 +106,10 @@ describe('AppointmentsTable', () => {
   it('updates the search string when the search input changes', async () => {
     const user = userEvent.setup();
 
-    render(<AppointmentsTable {...props} appointments={appointments} />);
+    renderAppointmentsTable({ appointments: mockAppointments });
 
     await screen.findByRole('heading', { name: /scheduled appointment/i });
-
     const searchInput = screen.getByRole('searchbox');
-
     await user.type(searchInput, 'John');
     expect(searchInput).toHaveValue('John');
   });
@@ -122,13 +117,16 @@ describe('AppointmentsTable', () => {
   it('clicking the download button should download the scheduled appointments as an excel file', async () => {
     const user = userEvent.setup();
 
-    render(<AppointmentsTable {...props} appointments={appointments} />);
+    renderAppointmentsTable({ appointments: mockAppointments });
 
     await screen.findByRole('heading', { name: /scheduled appointment/i });
     const downloadButton = screen.getByRole('button', { name: /download/i });
-
     await user.click(downloadButton);
     expect(downloadButton).toBeInTheDocument();
-    expect(mockedDownloadAppointmentsAsExcel).toHaveBeenCalledWith(appointments, expect.anything());
+    expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockAppointments, expect.anything());
   });
 });
+
+function renderAppointmentsTable(props = {}) {
+  render(<AppointmentsTable {...defaultProps} {...props} />);
+}