@kenyaemr/esm-appointments-app 7.0.3-pre.89 → 7.0.3-pre.94

package/src/config-schema.ts

@@ -2,94 +2,31 @@ import { Type, restBaseUrl, validators } from '@openmrs/esm-framework';
 import { spaHomePage } from './constants';
 
 export const configSchema = {
-  concepts: {
-    visitQueueNumberAttributeUuid: {
-      _type: Type.String,
-      _description: 'The UUID of the visit attribute that contains the visit queue number.',
-      _default: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
-    },
+  allowAllDayAppointments: {
+    _type: Type.Boolean,
+    _description: 'Whether to allow scheduling of all-day appointments (vs appointments with start time and end time)',
+    _default: false,
   },
-  appointmentTypes: {
-    _type: Type.Array,
-    _description: 'Configurable appointment types (types of appointments)',
-    _default: ['Scheduled'],
+  appointmentsBaseUrl: {
+    _type: Type.String,
+    _description: 'Configurable alternative URL for the Appointments UI. Eg, the Bahmni Appointments UI URL',
+    _default: `${spaHomePage}`,
   },
   appointmentStatuses: {
     _type: Type.Array,
     _description: 'Configurable appointment status (status of appointments)',
     _default: ['Requested', 'Scheduled', 'CheckedIn', 'Completed', 'Cancelled', 'Missed'],
   },
-  daysOfTheWeek: {
+  appointmentTypes: {
     _type: Type.Array,
-    _description: 'Configurable days of the week',
-    _default: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-  },
-  useBahmniAppointmentsUI: {
-    _type: Type.Boolean,
-    _description: 'Open links in Bahmni Appointments UI instead of O3 UI',
-    _default: false,
-  },
-
-  useFullViewPrivilege: {
-    _type: Type.Boolean,
-    _description: "If set to 'false', will always display the full view, disregarding any privilege",
-    _default: false,
-  },
-
-  fullViewPrivilege: {
-    _type: Type.String,
-    _description: 'Name of the privilege to display the full view of the Appointments dashboard widget.',
-    _default: "Today's Appointments Widget: Display Full View",
+    _description: 'Configurable appointment types (types of appointments)',
+    _default: ['Scheduled'],
   },
   bahmniAppointmentsUiBaseUrl: {
     _type: Type.String,
     _description: 'Configurable base URL that points to the Bahmni Appointments UI',
     _default: '/appointments',
   },
-  appointmentsBaseUrl: {
-    _type: Type.String,
-    _description: 'Configurable alternative URL for the Appointments UI. Eg, the Bahmni Appointments UI URL',
-    _default: `${spaHomePage}`,
-  },
-  hiddenFormFields: {
-    _type: Type.Array,
-    _description: 'Array of form controls to be hidden on form load',
-    _default: [],
-  },
-  showServiceQueueFields: {
-    _type: Type.Boolean,
-    _description: 'Whether start visit form should display service queue fields`',
-    _default: false,
-  },
-  defaultFacilityUrl: {
-    _type: Type.String,
-    _default: `${restBaseUrl}/kenyaemr/default-facility`,
-    _description: 'Custom URL to load default facility if it is not in the session',
-  },
-  customPatientChartUrl: {
-    _type: Type.String,
-    _description: `Template URL that will be used when clicking on the patient name in the queues table.
-      Available argument: patientUuid, openmrsSpaBase, openBase
-      (openmrsSpaBase and openBase are available to any <ConfigurableLink>)`,
-    _default: '${openmrsSpaBase}/patient/${patientUuid}/chart',
-    _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
-  },
-  patientIdentifierType: {
-    _type: Type.String,
-    _description: 'The name of the patient identifier type to be used for the patient identifier field',
-    _default: '',
-  },
-  showUnscheduledAppointmentsTab: {
-    _type: Type.Boolean,
-    _description:
-      'Whether to show the Unscheduled Appointments tab. Note that configuring this to true requires a custom unscheduledAppointment endpoint not currently available',
-    _default: false,
-  },
-  allowAllDayAppointments: {
-    _type: Type.Boolean,
-    _description: 'Whether to allow scheduling of all-day appointments (vs appointments with start time and end time)',
-    _default: false,
-  },
   checkInButton: {
     enabled: {
       _type: Type.Boolean,
@@ -119,26 +56,74 @@ export const configSchema = {
       _default: '',
     },
   },
+  concepts: {
+    visitQueueNumberAttributeUuid: {
+      _type: Type.String,
+      _description: 'The UUID of the visit attribute that contains the visit queue number.',
+      _default: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    },
+  },
+  customPatientChartUrl: {
+    _type: Type.String,
+    _description: `Template URL that will be used when clicking on the patient name in the queues table.
+      Available argument: patientUuid, openmrsSpaBase, openBase
+      (openmrsSpaBase and openBase are available to any <ConfigurableLink>)`,
+    _default: '${openmrsSpaBase}/patient/${patientUuid}/chart',
+    _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
+  },
+  daysOfTheWeek: {
+    _type: Type.Array,
+    _description: 'Configurable days of the week',
+    _default: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  },
+  defaultFacilityUrl: {
+    _type: Type.String,
+    _default: `${restBaseUrl}/kenyaemr/default-facility`,
+    _description: 'Custom URL to load default facility if it is not in the session',
+  },
+  fullViewPrivilege: {
+    _type: Type.String,
+    _description: 'Name of the privilege to display the full view of the Appointments dashboard widget.',
+    _default: "Today's Appointments Widget: Display Full View",
+  },
+  hiddenFormFields: {
+    _type: Type.Array,
+    _description: 'Array of form controls to be hidden on form load',
+    _default: [],
+  },
+  patientIdentifierType: {
+    _type: Type.String,
+    _description: 'The name of the patient identifier type to be used for the patient identifier field',
+    _default: '',
+  },
+  showServiceQueueFields: {
+    _type: Type.Boolean,
+    _description: 'Whether start visit form should display service queue fields`',
+    _default: false,
+  },
+  showUnscheduledAppointmentsTab: {
+    _type: Type.Boolean,
+    _description:
+      'Whether to show the Unscheduled Appointments tab. Note that configuring this to true requires a custom unscheduledAppointment endpoint not currently available',
+    _default: false,
+  },
+  useBahmniAppointmentsUI: {
+    _type: Type.Boolean,
+    _description: 'Open links in Bahmni Appointments UI instead of O3 UI',
+    _default: false,
+  },
+  useFullViewPrivilege: {
+    _type: Type.Boolean,
+    _description: "If set to 'false', will always display the full view, disregarding any privilege",
+    _default: false,
+  },
 };
 
 export interface ConfigObject {
-  concepts: {
-    visitQueueNumberAttributeUuid: string;
-  };
-  appointmentTypes: Array<string>;
-  daysOfTheWeek: Array<string>;
-  appointmentStatuses: Array<string>;
-  useBahmniAppointmentsUI: boolean;
-  useFullViewPrivilege: boolean;
-  fullViewPrivilege: string;
-  appointmentComments: Array<string>;
-  hiddenFormFields: Array<string>;
-  showServiceQueueFields: boolean;
-  defaultFacilityUrl: string;
-  customPatientChartUrl: string;
-  patientIdentifierType: string;
-  showUnscheduledAppointmentsTab: boolean;
   allowAllDayAppointments: boolean;
+  appointmentComments: Array<string>;
+  appointmentStatuses: Array<string>;
+  appointmentTypes: Array<string>;
   checkInButton: {
     enabled: boolean;
     showIfActiveVisit: boolean;
@@ -148,4 +133,17 @@ export interface ConfigObject {
     enabled: boolean;
     customUrl: string;
   };
+  concepts: {
+    visitQueueNumberAttributeUuid: string;
+  };
+  customPatientChartUrl: string;
+  daysOfTheWeek: Array<string>;
+  defaultFacilityUrl: string;
+  fullViewPrivilege: string;
+  hiddenFormFields: Array<string>;
+  patientIdentifierType: string;
+  showServiceQueueFields: boolean;
+  showUnscheduledAppointmentsTab: boolean;
+  useBahmniAppointmentsUI: boolean;
+  useFullViewPrivilege: boolean;
 }

package/src/empty-state/empty-state.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-01');
@@ -36,7 +36,7 @@
   h4:after {
     content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }
@@ -45,7 +45,7 @@
 .heading:after {
   content: '';
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }
@@ -57,7 +57,7 @@
 
 .header4 {
   @include type.type-style('heading-compact-01');
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
 }
 
 // Overriding styles for RTL support

package/src/form/appointments-form.component.tsx

@@ -43,7 +43,6 @@ import {
   useMutateAppointments,
 } from './appointments-form.resource';
 import { useProviders } from '../hooks/useProviders';
-import Workload from '../workload/workload.component';
 import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
 import { type ConfigObject } from '../config-schema';
 import {
@@ -54,9 +53,9 @@ import {
   moduleName,
   weekDays,
 } from '../constants';
-import styles from './appointments-form.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import uniqBy from 'lodash/uniqBy';
+import Workload from '../workload/workload.component';
+import styles from './appointments-form.scss';
 
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
 
@@ -139,12 +138,20 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
         .refine((duration) => (isAllDayAppointment ? true : duration > 0), {
           message: translateFrom(moduleName, 'durationErrorMessage', 'Duration should be greater than zero'),
         }),
-      location: z.string().refine((value) => value !== ''),
-      provider: z.string().refine((value) => value !== ''),
+      location: z.string().refine((value) => value !== '', {
+        message: translateFrom(moduleName, 'locationRequired', 'Location is required'),
+      }),
+      provider: z.string().refine((value) => value !== '', {
+        message: translateFrom(moduleName, 'providerRequired', 'Provider is required'),
+      }),
       appointmentStatus: z.string().optional(),
       appointmentNote: z.string(),
-      appointmentType: z.string().refine((value) => value !== ''),
-      selectedService: z.string().refine((value) => value !== ''),
+      appointmentType: z.string().refine((value) => value !== '', {
+        message: translateFrom(moduleName, 'appointmentTypeRequired', 'Appointment type is required'),
+      }),
+      selectedService: z.string().refine((value) => value !== '', {
+        message: translateFrom(moduleName, 'serviceRequired', 'Service is required'),
+      }),
       recurringPatternType: z.enum(['DAY', 'WEEK']),
       recurringPatternPeriod: z.number(),
       recurringPatternDaysOfWeek: z.array(z.string()),
@@ -179,7 +186,14 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     ? new Date(appointment?.dateAppointmentScheduled)
     : new Date();
 
-  const { control, getValues, setValue, watch, handleSubmit } = useForm<AppointmentFormData>({
+  const {
+    control,
+    getValues,
+    setValue,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<AppointmentFormData>({
     mode: 'all',
     resolver: zodResolver(appointmentsFormSchema),
     defaultValues: {
@@ -427,15 +441,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="location"
               control={control}
-              render={({ field: { onChange, value, onBlur, ref } }) => (
+              render={({ field: { onChange, value, onBlur, ref }, fieldState }) => (
                 <Select
                   id="location"
-                  invalidText="Required"
                   labelText={t('selectALocation', 'Select a location')}
                   onChange={onChange}
                   onBlur={onBlur}
                   value={value}
-                  ref={ref}>
+                  ref={ref}
+                  invalid={!!fieldState?.error?.message}
+                  invalidText={fieldState?.error?.message}>
                   <SelectItem text={t('chooseLocation', 'Choose a location')} value="" />
                   {locations?.length > 0 &&
                     locations.map((location) => (
@@ -454,13 +469,15 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="dateAppointmentScheduled"
               control={control}
-              render={({ field: { onChange, value, ref } }) => (
+              render={({ field: { onChange, value, ref }, fieldState }) => (
                 <DatePicker
                   datePickerType="single"
                   dateFormat={datePickerFormat}
                   value={value}
                   maxDate={new Date()}
-                  onChange={([date]) => onChange(date)}>
+                  onChange={([date]) => onChange(date)}
+                  invalid={!!fieldState?.error?.message}
+                  invalidText={fieldState?.error?.message}>
                   <DatePickerInput
                     id="dateAppointmentScheduledPickerInput"
                     labelText={t('dateScheduledDetail', 'Date appointment issued')}
@@ -479,21 +496,33 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="selectedService"
               control={control}
-              render={({ field: { onBlur, onChange, value, ref } }) => (
+              render={({ field: { onBlur, onChange, value, ref }, fieldState }) => (
                 <Select
                   id="service"
-                  invalidText="Required"
                   labelText={t('selectService', 'Select a service')}
                   onChange={(event) => {
+                    if (context === 'creating') {
+                      setValue(
+                        'duration',
+                        services?.find((service) => service.name === event.target.value)?.durationMins,
+                      );
+                    } else if (context === 'editing') {
+                      const previousServiceDuration = services?.find(
+                        (service) => service.name === getValues('selectedService'),
+                      )?.durationMins;
+                      const selectedServiceDuration = services?.find((service) => service.name === event.target.value)
+                        ?.durationMins;
+                      if (selectedServiceDuration && previousServiceDuration === getValues('duration')) {
+                        setValue('duration', selectedServiceDuration);
+                      }
+                    }
                     onChange(event);
-                    setValue(
-                      'duration',
-                      services?.find((service) => service.name === event.target.value)?.durationMins,
-                    );
                   }}
                   onBlur={onBlur}
                   value={value}
-                  ref={ref}>
+                  ref={ref}
+                  invalid={!!fieldState?.error?.message}
+                  invalidText={fieldState?.error?.message}>
                   <SelectItem text={t('chooseService', 'Select service')} value="" />
                   {services?.length > 0 &&
                     services.map((service) => (
@@ -513,16 +542,17 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
             <Controller
               name="appointmentType"
               control={control}
-              render={({ field: { onBlur, onChange, value, ref } }) => (
+              render={({ field: { onBlur, onChange, value, ref }, fieldState }) => (
                 <Select
                   disabled={!appointmentTypes?.length}
                   id="appointmentType"
-                  invalidText="Required"
                   labelText={t('selectAppointmentType', 'Select the type of appointment')}
                   onChange={onChange}
                   value={value}
                   ref={ref}
-                  onBlur={onBlur}>
+                  onBlur={onBlur}
+                  invalid={!!fieldState?.error?.message}
+                  invalidText={fieldState?.error?.message}>
                   <SelectItem text={t('chooseAppointmentType', 'Choose appointment type')} value="" />
                   {appointmentTypes?.length > 0 &&
                     appointmentTypes.map((appointmentType, index) => (
@@ -740,10 +770,11 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
               <Controller
                 name="appointmentStatus"
                 control={control}
-                render={({ field: { onBlur, onChange, value, ref } }) => (
+                render={({ field: { onBlur, onChange, value, ref }, fieldState }) => (
                   <Select
                     id="appointmentStatus"
-                    invalidText="Required"
+                    invalid={!!fieldState?.error?.message}
+                    invalidText={fieldState?.error?.message}
                     labelText={t('selectAppointmentStatus', 'Select status')}
                     onChange={onChange}
                     value={value}
@@ -866,7 +897,7 @@ function TimeAndDuration({ isTablet, t, watch, control, services }) {
           name="duration"
           control={control}
           defaultValue={defaultDuration}
-          render={({ field: { onChange, onBlur, value, ref } }) => (
+          render={({ field: { onChange, onBlur, value, ref }, fieldState }) => (
             <NumberInput
               hideSteppers
               disableWheel
@@ -880,6 +911,7 @@ function TimeAndDuration({ isTablet, t, watch, control, services }) {
               onChange={(event) => onChange(Number(event.target.value))}
               value={value}
               ref={ref}
+              invalid={fieldState?.error?.message}
             />
           )}
         />

package/src/form/appointments-form.resource.ts

@@ -77,7 +77,7 @@ export function useAppointments(patientUuid: string, startDate: string, abortCon
 
   return {
     data: data ? { pastAppointments, upcomingAppointments, todaysAppointments } : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
     mutate,
@@ -92,7 +92,7 @@ export function useAppointmentService() {
 
   return {
     data: data ? data.data : null,
-    isError: error,
+    error,
     isLoading,
   };
 }

package/src/form/appointments-form.scss

@@ -1,13 +1,13 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 $openmrs-background-grey: #ededed;
 
 .formGroup {
   display: flex;
-  margin-bottom: spacing.$spacing-02;
-  padding: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-02;
+  padding: layout.$spacing-05;
 }
 
 :global(.omrs-breakpoint-gt-tablet) .formGroup {
@@ -29,13 +29,13 @@ $openmrs-background-grey: #ededed;
 .heading {
   color: colors.$gray-70;
   @include type.type-style('heading-compact-02');
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .inputContainer {
   display: flex;
   flex-flow: row wrap;
-  gap: spacing.$spacing-05;
+  gap: layout.$spacing-05;
   align-items: center;
 }
 
@@ -48,7 +48,7 @@ $openmrs-background-grey: #ededed;
 }
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -59,12 +59,12 @@ $openmrs-background-grey: #ededed;
   display: flex;
   background-color: $openmrs-background-grey;
   justify-content: center;
-  min-height: spacing.$spacing-09;
+  min-height: layout.$spacing-09;
   height: 100vh;
 }
 
 .tablet {
-  padding: spacing.$spacing-06 spacing.$spacing-05;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: colors.$white;
 }
 
@@ -74,5 +74,5 @@ $openmrs-background-grey: #ededed;
 
 .weekSelect {
   max-inline-size: fit-content;
-  padding-top: spacing.$spacing-03;
+  padding-top: layout.$spacing-03;
 }

package/src/form/appointments-form.test.tsx

@@ -1,34 +1,32 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockLocations } from '__mocks__';
-import { openmrsFetch } from '@openmrs/esm-framework';
-import { mockUseAppointmentServiceData, mockSession } from '__mocks__';
+import { screen } from '@testing-library/react';
+import {
+  type FetchResponse,
+  getDefaultsFromConfigSchema,
+  openmrsFetch,
+  useConfig,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
+import { mockUseAppointmentServiceData, mockSession, mockLocations } from '__mocks__';
 import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { saveAppointment } from './appointments-form.resource';
+import { configSchema, type ConfigObject } from '../config-schema';
 import AppointmentForm from './appointments-form.component';
 
-const testProps = {
+const defaultProps = {
+  context: 'creating',
   closeWorkspace: jest.fn(),
   patientUuid: mockPatient.id,
   promptBeforeClosing: jest.fn(),
 };
 
-const mockCreateAppointment = saveAppointment as jest.Mock;
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
-
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data.results),
-    useSession: jest.fn().mockImplementation(() => mockSession.data),
-    useConfig: jest.fn(() => ({
-      appointmentTypes: ['Scheduled', 'WalkIn'],
-    })),
-  };
-});
+const mockCreateAppointment = jest.mocked(saveAppointment);
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockUseLocations = jest.mocked(useLocations);
+const mockUseSession = jest.mocked(useSession);
 
 jest.mock('react-hook-form', () => ({
   ...jest.requireActual('react-hook-form'),
@@ -89,20 +87,25 @@ jest.mock('react-hook-form', () => ({
   }),
 }));
 
-jest.mock('./appointments-form.resource', () => {
-  const originalModule = jest.requireActual('./appointments-form.resource');
-
-  return {
-    ...originalModule,
-    saveAppointment: jest.fn(),
-  };
-});
+jest.mock('./appointments-form.resource', () => ({
+  ...jest.requireActual('./appointments-form.resource'),
+  saveAppointment: jest.fn(),
+}));
 
 describe('AppointmentForm', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      appointmentTypes: ['Scheduled', 'WalkIn'],
+    });
+    mockUseLocations.mockReturnValue(mockLocations.data.results);
+    mockUseSession.mockReturnValue(mockSession.data);
+  });
+
   it('renders the appointments form showing all the relevant fields and values', async () => {
-    mockOpenmrsFetch.mockReturnValue(mockUseAppointmentServiceData);
+    mockOpenmrsFetch.mockResolvedValue(mockUseAppointmentServiceData as unknown as FetchResponse);
 
-    renderAppointmentsForm();
+    renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
@@ -129,25 +132,25 @@ describe('AppointmentForm', () => {
   it('closes the form and the workspace when the cancel button is clicked', async () => {
     const user = userEvent.setup();
 
-    mockOpenmrsFetch.mockReturnValueOnce(mockUseAppointmentServiceData);
+    mockOpenmrsFetch.mockResolvedValueOnce(mockUseAppointmentServiceData as unknown as FetchResponse);
 
-    renderAppointmentsForm();
+    renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
     const cancelButton = screen.getByRole('button', { name: /Discard/i });
     await user.click(cancelButton);
 
-    expect(testProps.closeWorkspace).toHaveBeenCalledTimes(1);
+    expect(defaultProps.closeWorkspace).toHaveBeenCalledTimes(1);
   });
 
   it('renders a success snackbar  upon successfully scheduling an appointment', async () => {
     const user = userEvent.setup();
 
-    mockOpenmrsFetch.mockReturnValue({ data: mockUseAppointmentServiceData });
-    mockCreateAppointment.mockResolvedValue({ status: 200, statusText: 'Ok' });
+    mockOpenmrsFetch.mockResolvedValue({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
+    mockCreateAppointment.mockResolvedValue({ status: 200, statusText: 'Ok' } as FetchResponse);
 
-    renderAppointmentsForm();
+    renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
@@ -158,7 +161,7 @@ describe('AppointmentForm', () => {
     const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
     const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
 
-    expect(saveButton).not.toBeDisabled();
+    expect(saveButton).toBeEnabled();
 
     await user.clear(dateInput);
     await user.type(dateInput, '4/4/2021');
@@ -182,10 +185,10 @@ describe('AppointmentForm', () => {
       },
     };
 
-    mockOpenmrsFetch.mockReturnValueOnce({ data: mockUseAppointmentServiceData });
+    mockOpenmrsFetch.mockResolvedValueOnce({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
     mockCreateAppointment.mockRejectedValueOnce(error);
 
-    renderAppointmentsForm();
+    renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
@@ -206,7 +209,3 @@ describe('AppointmentForm', () => {
     await user.click(saveButton);
   });
 });
-
-function renderAppointmentsForm() {
-  renderWithSwr(<AppointmentForm {...testProps} />);
-}