@kenyaemr/esm-appointments-app 7.0.2-pre.65

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

@@ -0,0 +1,134 @@
+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 { downloadAppointmentsAsExcel } from '../../helpers/excel';
+import AppointmentsTable from './appointments-table.component';
+import { configSchema } from '../../config-schema';
+import { getByTextWithMarkup } from '../../../../../tools/test-utils';
+
+defineConfigSchema('@openmrs/esm-appointments-app', configSchema);
+
+const appointments: Array<Appointment> = [
+  {
+    uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
+    appointmentNumber: '00001',
+    patient: {
+      identifier: '100GEJ',
+      identifiers: [],
+      name: 'John Wilson',
+      uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
+      gender: 'M',
+      age: '35',
+      birthDate: '1986-04-03T00:00:00.000+0000',
+      phoneNumber: '0700000000',
+    },
+    service: {
+      appointmentServiceId: 1,
+      name: 'Outpatient',
+      description: null,
+      startTime: '',
+      endTime: '',
+      maxAppointmentsLimit: null,
+      durationMins: null,
+      location: {
+        uuid: '8d6c993e-c2cc-11de-8d13-0010c6dffd0f',
+      },
+      uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+      initialAppointmentStatus: 'Scheduled',
+      creatorName: null,
+    },
+    provider: {
+      uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
+      person: { uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' },
+    },
+    location: { name: 'HIV Clinic', uuid: '2131aff8-2e2a-480a-b7ab-4ac53250262b' },
+    startDateTime: new Date().toISOString(),
+    appointmentKind: 'WalkIn',
+    status: 'Scheduled',
+    comments: 'Some comments',
+    additionalInfo: null,
+    providers: [{ uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' }],
+    recurring: false,
+    voided: false,
+    teleconsultationLink: null,
+    extensions: [],
+  },
+];
+
+const mockedDownloadAppointmentsAsExcel = downloadAppointmentsAsExcel as jest.Mock;
+const mockedUseConfig = useConfig as jest.Mock;
+
+jest.mock('../../helpers/excel');
+jest.mock('../../hooks/useOverlay');
+
+describe('AppointmentsTable', () => {
+  const props = {
+    appointments: [],
+    isLoading: false,
+    tableHeading: 'scheduled',
+    visits: [],
+    scheduleType: 'Scheduled',
+  };
+
+  beforeEach(() => {
+    mockedUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      customPatientChartUrl: 'url-to-patient-chart',
+      checkInButton: { enabled: false },
+      checkOutButton: { enabled: false },
+    });
+  });
+
+  it('renders an empty state if appointments data is unavailable', async () => {
+    render(<AppointmentsTable {...props} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
+    expect(getByTextWithMarkup('There are no scheduled appointments to display')).toBeInTheDocument();
+  });
+
+  it('renders a loading state when fetching data', () => {
+    render(<AppointmentsTable {...props} isLoading={true} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders a tabular overview of the scheduled appointments', async () => {
+    render(<AppointmentsTable {...props} appointments={appointments} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+    expect(screen.getByRole('search', { name: /filter table/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /download/i })).toBeInTheDocument();
+    expect(screen.getByRole('row', { name: /john wilson 100gej hiv clinic outpatient/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /john wilson/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /john wilson/i })).toHaveAttribute('href', 'url-to-patient-chart');
+  });
+
+  it('updates the search string when the search input changes', async () => {
+    const user = userEvent.setup();
+
+    render(<AppointmentsTable {...props} appointments={appointments} />);
+
+    await screen.findByRole('heading', { name: /scheduled appointment/i });
+
+    const searchInput = screen.getByRole('searchbox');
+
+    await user.type(searchInput, 'John');
+    expect(searchInput).toHaveValue('John');
+  });
+
+  it('clicking the download button should download the scheduled appointments as an excel file', 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/i });
+
+    await user.click(downloadButton);
+    expect(downloadButton).toBeInTheDocument();
+    expect(mockedDownloadAppointmentsAsExcel).toHaveBeenCalledWith(appointments, expect.anything());
+  });
+});

package/src/appointments/common-components/checkin-button.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type Appointment } from '../../types';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import utc from 'dayjs/plugin/utc';
+import { navigate, useConfig, launchWorkspace } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+dayjs.extend(utc);
+dayjs.extend(isToday);
+
+interface CheckInButtonProps {
+  patientUuid: string;
+  appointment: Appointment;
+}
+
+const CheckInButton: React.FC<CheckInButtonProps> = ({ appointment, patientUuid }) => {
+  const { checkInButton } = useConfig<ConfigObject>();
+  const { t } = useTranslation();
+  return (
+    <>
+      {checkInButton.enabled &&
+        (dayjs(appointment.startDateTime).isAfter(dayjs()) || dayjs(appointment.startDateTime).isToday()) && (
+          <Button
+            size="sm"
+            kind="tertiary"
+            onClick={() =>
+              checkInButton.customUrl
+                ? navigate({
+                    to: checkInButton.customUrl,
+                    templateParams: { patientUuid: appointment.patient.uuid, appointmentUuid: appointment.uuid },
+                  })
+                : launchWorkspace('start-visit-workspace-form', { patientUuid: patientUuid, showPatientHeader: true })
+            }>
+            {t('checkIn', 'Check in')}
+          </Button>
+        )}
+    </>
+  );
+};
+
+export default CheckInButton;

package/src/appointments/common-components/end-appointment-modal.component.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useVisit, updateVisit, parseDate, showSnackbar } from '@openmrs/esm-framework';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
+import { useMutateAppointments } from '../../form/appointments-form.resource';
+
+interface EndAppointmentModalProps {
+  patientUuid: string;
+  appointmentUuid: string;
+  closeModal: () => void;
+}
+
+const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid, appointmentUuid, closeModal }) => {
+  const { activeVisit, mutate } = useVisit(patientUuid);
+  const { t } = useTranslation();
+  const { mutateAppointments } = useMutateAppointments();
+
+  const endAppointment = () => {
+    return changeAppointmentStatus('Completed', appointmentUuid)
+      .then(() => {
+        mutateAppointments();
+        if (activeVisit) {
+          const abortController = new AbortController();
+          const endVisitPayload = {
+            location: activeVisit.location.uuid,
+            startDatetime: parseDate(activeVisit.startDatetime),
+            visitType: activeVisit.visitType.uuid,
+            stopDatetime: new Date(),
+          };
+          updateVisit(activeVisit.uuid, endVisitPayload, abortController)
+            .toPromise()
+            .then(() => {
+              mutate();
+              showSnackbar({
+                title: t('appointmentEnded', 'Appointment ended'),
+                subtitle: t(
+                  'appointmentEndedAndVisitClosedSuccessfully',
+                  'Appointment successfully ended and visit successfully closed.',
+                ),
+                isLowContrast: true,
+                kind: 'success',
+              });
+              closeModal();
+            })
+            .catch((err) => {
+              closeModal();
+              showSnackbar({
+                title: t('appointmentEndedButVisitNotClosedError', 'Appointment ended, but error closing visit'),
+                subtitle: err?.message,
+                kind: 'error',
+                isLowContrast: true,
+              });
+            });
+        } else {
+          closeModal();
+          showSnackbar({
+            title: t('appointmentEnded', 'Appointment ended'),
+            subtitle: t('appointmentEndedSuccessfully', 'Appointment successfully ended.'),
+            isLowContrast: true,
+            kind: 'success',
+          });
+        }
+      })
+      .catch((err) => {
+        closeModal();
+        showSnackbar({
+          title: t('appointmentEndError', 'Error ending appointment'),
+          subtitle: err?.message,
+          kind: 'error',
+          isLowContrast: true,
+        });
+      });
+  };
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        title={t('endAppointmentConfirmation', 'Are you sure you want to check the patient out for this appointment?')}
+      />
+      <ModalBody>
+        <p>
+          {activeVisit
+            ? t(
+                'endAppointmentAndVisitConfirmationMessage',
+                'Checking the patient out will mark the appointment as complete, and close out the active visit for this patient.',
+              )
+            : t('endAppointmentConfirmationMessage', 'Checking the patient out will mark the appointment as complete.')}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={endAppointment}>
+          {t('checkOut', 'Check out')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default EndAppointmentModal;

package/src/appointments/common-components/end-appointment-modal.test.tsx

@@ -0,0 +1,80 @@
+import EndAppointmentModal from './end-appointment-modal.component';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { updateVisit, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
+
+const closeModal = jest.fn();
+jest.mock('../../patient-appointments/patient-appointments.resource', () => ({
+  changeAppointmentStatus: jest.fn().mockResolvedValue({}),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useVisit: jest.fn(),
+  updateVisit: jest.fn().mockReturnValue({ toPromise: jest.fn().mockResolvedValue({}) }),
+  showSnackbar: jest.fn(),
+  parseDate: jest.fn(),
+}));
+
+describe('EndAppointmentModal', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('has a cancel button that closes the model', async () => {
+    useVisit.mockReturnValue({});
+    const user = userEvent.setup();
+    render(<EndAppointmentModal appointmentUuid={'abc'} patientUuid={'123'} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('should update appointment status but not visit on submit if no active visit', async () => {
+    useVisit.mockReturnValue({});
+    const user = userEvent.setup();
+
+    render(<EndAppointmentModal appointmentUuid={'abc'} patientUuid={'123'} closeModal={closeModal} />);
+
+    const submitButton = screen.getByRole('button', { name: /check out/i });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(changeAppointmentStatus).toHaveBeenCalledWith('Completed', 'abc');
+    expect(useVisit).toHaveBeenCalledWith('123');
+    expect(updateVisit).not.toHaveBeenCalled();
+    expect(closeModal).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith({
+      title: 'Appointment ended',
+      subtitle: 'Appointment successfully ended.',
+      isLowContrast: true,
+      kind: 'success',
+    });
+  });
+
+  it('should update appointment status and visit on submit if active visit', async () => {
+    useVisit.mockReturnValue({
+      mutate: jest.fn(),
+      activeVisit: { location: { uuid: 'def' }, visitType: { uuid: 'ghi' }, startDatetime: new Date() },
+    });
+    const user = userEvent.setup();
+
+    render(<EndAppointmentModal appointmentUuid={'abc'} patientUuid={'123'} closeModal={closeModal} />);
+
+    const submitButton = screen.getByRole('button', { name: /check out/i });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(changeAppointmentStatus).toHaveBeenCalledWith('Completed', 'abc');
+    expect(useVisit).toHaveBeenCalledWith('123');
+    expect(updateVisit).toHaveBeenCalled();
+    expect(closeModal).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith({
+      title: 'Appointment ended',
+      subtitle: 'Appointment successfully ended and visit successfully closed.',
+      isLowContrast: true,
+      kind: 'success',
+    });
+  });
+});

package/src/appointments/common-components/location-select-option.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SelectItem } from '@carbon/react';
+
+interface SelectLocationProps {
+  selectedLocation: string;
+  defaultFacility: {
+    uuid: string;
+    display: string;
+  };
+  locations?: Array<LocationOptions>;
+}
+
+interface LocationOptions {
+  uuid?: string;
+  display?: string;
+}
+
+const LocationSelectOption: React.FC<SelectLocationProps> = ({ selectedLocation, defaultFacility, locations }) => {
+  const { t } = useTranslation();
+  if (!selectedLocation) {
+    return <SelectItem text={t('selectOption', 'Select an option')} value="" />;
+  }
+
+  if (defaultFacility && Object.keys(defaultFacility).length !== 0) {
+    return (
+      <SelectItem key={defaultFacility?.uuid} text={defaultFacility?.display} value={defaultFacility?.uuid}>
+        {defaultFacility?.display}
+      </SelectItem>
+    );
+  }
+
+  if (locations && locations.length > 0) {
+    return (
+      <>
+        {locations.map((location) => (
+          <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+            {location.display}
+          </SelectItem>
+        ))}
+      </>
+    );
+  }
+
+  return null;
+};
+
+export default LocationSelectOption;

package/src/appointments/details/appointment-details.component.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import styles from './appointment-details.scss';
+import { usePatientAppointmentHistory } from '../../hooks/usePatientAppointmentHistory';
+import { formatDate, formatDatetime, usePatient } from '@openmrs/esm-framework';
+import { getGender } from '../../helpers';
+import { type Appointment } from '../../types';
+import { useTranslation } from 'react-i18next';
+
+interface AppointmentDetailsProps {
+  appointment: Appointment;
+}
+
+const AppointmentDetails: React.FC<AppointmentDetailsProps> = ({ appointment }) => {
+  const { t } = useTranslation();
+  const [isEnabledQuery, setIsEnabledQuery] = useState(false);
+  const { appointmentsCount, isLoading } = usePatientAppointmentHistory(appointment.patient.uuid);
+  const { patient } = usePatient(appointment.patient.uuid);
+
+  useEffect(() => {
+    if (!isLoading) {
+      setIsEnabledQuery(true);
+    }
+  }, [appointmentsCount, isLoading]);
+  return (
+    <div className={styles.appointmentDetailsContainer}>
+      <p className={styles.title}>{appointment.service.name}</p>
+      <p className={styles.subTitle}>{formatDatetime(new Date(appointment.startDateTime))}</p>
+
+      <div className={styles.patientInfoGrid}>
+        <div>
+          <p className={styles.gridTitle}>{t('patientDetails', 'Patient details')}</p>
+          <div className={styles.labelContainer}>
+            <p className={styles.labelBold}>{t('patientName', 'Patient name')}: </p>
+            <p className={styles.label}>{appointment.patient.name}</p>
+          </div>
+          <div className={styles.labelContainer}>
+            <p className={styles.labelBold}>{t('age', 'Age')}: </p>
+            <p className={styles.label}>{appointment.patient.age}</p>
+          </div>
+          <div className={styles.labelContainer}>
+            <p className={styles.labelBold}>{t('gender', 'Gender')}: </p>
+            <p className={styles.label}>{getGender(appointment.patient.gender, t)}</p>
+          </div>
+          {patient && patient?.birthDate ? (
+            <div className={styles.labelContainer}>
+              <p className={styles.labelBold}>{t('dateOfBirth', 'Date of birth')}: </p>
+              <p className={styles.label}>{formatDate(new Date(patient.birthDate))}</p>
+            </div>
+          ) : (
+            ''
+          )}
+          {patient && patient?.telecom
+            ? patient.telecom.map((contact, i) => (
+                <div className={styles.labelContainer}>
+                  <p className={styles.labelBold}>{t('Contact', 'Contact {{index}}', { index: i + 1 })}: </p>
+                  <p className={styles.label}>{contact.value}</p>
+                </div>
+              ))
+            : ''}
+        </div>
+        <div>
+          <p className={styles.gridTitle}>{t('appointmentNotes', 'Appointment Notes')}</p>
+          <p className={styles.label}>{appointment.comments}</p>
+        </div>
+        <div>
+          <p className={styles.gridTitle}>{t('appointmentHistory', 'Appointment History')}</p>
+          <div className={styles.historyGrid}>
+            <div>
+              <p className={styles.historyGridLabel}>{t('completed', 'Completed')}</p>
+              <span className={styles.historyGridCount}>{appointmentsCount.completedAppointments}</span>
+            </div>
+            <div>
+              <p className={styles.historyGridLabel}>{t('missed', 'Missed')}</p>
+              <span className={styles.historyGridCountRed}>{appointmentsCount.missedAppointments}</span>
+            </div>
+            <div>
+              <p className={styles.historyGridLabel}>{t('cancelled', 'Cancelled')}</p>
+              <span className={styles.historyGridCount}>{appointmentsCount.cancelledAppointments}</span>
+            </div>
+            <div>
+              <p className={styles.historyGridLabel}>{t('upcoming', 'Upcoming')}</p>
+              <span className={styles.historyGridCount}>{appointmentsCount.upcomingAppointments}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppointmentDetails;

package/src/appointments/details/appointment-details.scss

@@ -0,0 +1,81 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+
+.appointmentDetailsContainer {
+  min-height: fit-content;
+  background-color: colors.$white;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-03;
+}
+
+.title {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-90;
+}
+
+.subTitle {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.tags {
+  margin-top: spacing.$spacing-05;
+  display: flex;
+  column-gap: spacing.$spacing-03;
+
+  & > div {
+    margin: 0;
+  }
+}
+
+.patientInfoGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: spacing.$spacing-05;
+  margin-top: spacing.$spacing-05;
+}
+
+.gridTitle {
+  @include type.type-style('label-02');
+  margin-bottom: spacing.$spacing-04;
+  color: colors.$gray-70;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.historyGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  row-gap: spacing.$spacing-05;
+}
+
+.historyGridLabel {
+  @include type.type-style('legal-01');
+  color: colors.$gray-70;
+}
+.historyGridCount {
+  @include type.type-style('heading-02');
+  margin-top: spacing.$spacing-01;
+  color: colors.$blue-60;
+}
+
+.historyGridCountRed {
+  @include type.type-style('heading-02');
+  margin-top: spacing.$spacing-01;
+  color: colors.$red-60;
+}
+
+.labelBold {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  font-weight: bold;
+  margin-right: spacing.$spacing-02;
+}
+
+.labelContainer {
+  display: flex;
+}

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AppointmentDetails from './appointment-details.component';
+import { type Appointment } from '../../types';
+
+const appointment: Appointment = {
+  uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
+  appointmentNumber: '0000',
+  patient: {
+    identifier: '100GEJ',
+    identifiers: [],
+    name: 'John Wilson',
+    uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
+    gender: 'M',
+    age: '34',
+  },
+  service: {
+    appointmentServiceId: 1,
+    name: 'Outpatient',
+    description: null,
+    startTime: '',
+    endTime: '',
+    maxAppointmentsLimit: null,
+    durationMins: null,
+    location: {
+      uuid: '8d6c993e-c2cc-11de-8d13-0010c6dffd0f',
+    },
+    uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+    initialAppointmentStatus: 'Scheduled',
+    creatorName: null,
+  },
+  provider: {
+    uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
+    person: { uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' },
+  },
+  location: { name: 'HIV Clinic', uuid: '2131aff8-2e2a-480a-b7ab-4ac53250262b' },
+  startDateTime: 1630326900000,
+  endDateTime: 1630327200000,
+  appointmentKind: 'WalkIn',
+  status: 'Scheduled',
+  comments: 'Some comments',
+  additionalInfo: null,
+  providers: [{ uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' }],
+  recurring: false,
+  voided: false,
+  teleconsultationLink: null,
+  extensions: [],
+};
+
+jest.mock('../../hooks/usePatientAppointmentHistory', () => ({
+  usePatientAppointmentHistory: () => ({
+    appointmentsCount: {
+      completedAppointments: 1,
+      missedAppointments: 2,
+      cancelledAppointments: 3,
+      upcomingAppointments: 4,
+    },
+  }),
+}));
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    usePatient: jest.fn().mockImplementation((...args) => ({
+      patient: {
+        birthDate: '22-Mar-2020',
+        telecom: [
+          {
+            uuid: 'tel-uuid-1',
+            value: '0899129989932',
+          },
+        ],
+      },
+    })),
+  };
+});
+
+test('renders appointment details correctly', async () => {
+  const { getByText } = render(<AppointmentDetails appointment={appointment} />);
+  expect(getByText(/Patient name/i)).toBeInTheDocument();
+  expect(getByText(/John Wilson/i)).toBeInTheDocument();
+  expect(getByText(/Age/i)).toBeInTheDocument();
+  expect(getByText(/34/i)).toBeInTheDocument();
+  expect(getByText(/Gender/i)).toBeInTheDocument();
+  expect(getByText(/Male/i)).toBeInTheDocument();
+  expect(getByText(/Date of birth/i)).toBeInTheDocument();
+  expect(getByText(/Date of birth/i)).toBeInTheDocument();
+  expect(getByText(/22-Mar-2020/i)).toBeInTheDocument();
+  expect(getByText(/Contact 1/i)).toBeInTheDocument();
+  expect(getByText(/0899129989932/i)).toBeInTheDocument();
+  expect(getByText(/Appointment Notes/i)).toBeInTheDocument();
+  expect(getByText(/Some comments/i)).toBeInTheDocument();
+  expect(getByText(/Appointment History/i)).toBeInTheDocument();
+  expect(getByText(/Completed/i)).toBeInTheDocument();
+  expect(getByText('1', { exact: true })).toBeInTheDocument();
+  expect(getByText(/Missed/i)).toBeInTheDocument();
+  expect(getByText('2', { exact: true })).toBeInTheDocument();
+  expect(getByText(/Cancelled/i)).toBeInTheDocument();
+  expect(getByText('3', { exact: true })).toBeInTheDocument();
+  expect(getByText(/Upcoming/i)).toBeInTheDocument();
+  expect(getByText('4', { exact: true })).toBeInTheDocument();
+});