@openmrs/esm-appointments-app 4.3.1-pre.1421 → 4.3.1-pre.1443

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

@@ -0,0 +1,146 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
+import { downloadUnscheduledAppointments } from '../../helpers/excel';
+import { usePagination } from '@openmrs/esm-framework';
+import UnscheduledAppointments from './unscheduled-appointments.component';
+
+const mockUsePagination = usePagination as jest.Mock;
+const mockGoToPage = jest.fn();
+const mockDownloadAppointmentsAsExcel = downloadUnscheduledAppointments as jest.Mock;
+const mockUseUnscheduledAppointments = useUnscheduledAppointments as jest.Mock;
+
+jest.mock('../../helpers/excel');
+jest.mock('../../hooks/useOverlay');
+jest.mock('../../hooks/useUnscheduledAppointments');
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+  };
+});
+
+describe('UnscheduledAppointments component', () => {
+  const mockUnscheduledAppointments = [
+    {
+      uuid: '1234',
+      name: 'Test Patient',
+      identifier: '1234-56-78',
+      gender: 'M',
+      phoneNumber: '123-456-7890',
+      age: 20,
+      dob: 1262304000,
+    },
+    {
+      uuid: '5678',
+      name: 'Another Patient',
+      identifier: '2345-67-89',
+      gender: 'F',
+      phoneNumber: '',
+      age: 30,
+      dob: 1262304000,
+    },
+  ];
+
+  it('renders the component correctly', async () => {
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
+
+    mockUsePagination.mockReturnValue({
+      results: mockUnscheduledAppointments.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+    render(<UnscheduledAppointments />);
+    const header = screen.getByText('Unscheduled appointments 2');
+    expect(header).toBeInTheDocument();
+
+    const patientName = await screen.findByText('Test Patient');
+    expect(patientName).toBeInTheDocument();
+
+    const identifier = screen.getByText('1234-56-78');
+    expect(identifier).toBeInTheDocument();
+
+    const gender = screen.getByText('Male');
+    expect(gender).toBeInTheDocument();
+
+    const phoneNumber = screen.getByText('123-456-7890');
+    expect(phoneNumber).toBeInTheDocument();
+  });
+
+  it('allows the user to search for appointments', async () => {
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
+
+    mockUsePagination.mockReturnValue({
+      results: mockUnscheduledAppointments.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+    render(<UnscheduledAppointments />);
+
+    const searchInput = await screen.findByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'Another' } });
+
+    const patientName = screen.getByText('Another Patient');
+    expect(patientName).toBeInTheDocument();
+
+    const identifier = screen.getByText('2345-67-89');
+    expect(identifier).toBeInTheDocument();
+
+    const gender = screen.getByText('Female');
+    expect(gender).toBeInTheDocument();
+
+    const phoneNumber = screen.getByText('--');
+    expect(phoneNumber).toBeInTheDocument();
+  });
+
+  it('allows the user to download a list of unscheduled appointments', async () => {
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
+
+    mockUsePagination.mockReturnValue({
+      results: mockUnscheduledAppointments.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+    render(<UnscheduledAppointments />);
+
+    const downloadButton = await screen.findByText('Download');
+    expect(downloadButton).toBeInTheDocument();
+
+    fireEvent.click(downloadButton);
+
+    expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockUnscheduledAppointments);
+  });
+
+  it('renders a message if there are no unscheduled appointments', async () => {
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: [],
+      error: null,
+    });
+
+    mockUsePagination.mockReturnValue({
+      results: mockUnscheduledAppointments.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+
+    render(<UnscheduledAppointments />);
+
+    const emptyState = await screen.findByText('There are no unscheduled appointments to display');
+    expect(emptyState).toBeInTheDocument();
+  });
+});

package/src/appointments/utils.tsx

@@ -19,21 +19,18 @@ export function getPageSizes<T>(data: Array<T>, pageSize: number = 10): Array<nu
 }
 
 /**
- * Returns a filtered array of appointments based on a search string.
- * If the search string is empty or null, the original appointments array is returned.
- *
- * @param {Array<MappedAppointment>} appointments The array of appointments to search.
- * @param {string} searchString The search string to use for filtering.
- * @returns {Array<MappedAppointment>} The filtered array of appointments.
- */
-export function useSearchResults(
-  appointments: Array<MappedAppointment>,
-  searchString: string,
-): Array<MappedAppointment> {
+
+Returns an array of filtered data that contains search string
+@template T
+@param {T[]} data - The array of data to filter
+@param {string} searchString - The string to search for in the data
+@returns {T[]} The filtered array of data
+*/
+export function useSearchResults<T>(data: T[], searchString: string): T[] {
   const searchResults = useMemo(() => {
     if (searchString && searchString.trim() !== '') {
       const search = searchString.toLowerCase();
-      return appointments.filter((appointment) =>
+      return data.filter((appointment) =>
         Object.entries(appointment).some(([header, value]) => {
           if (header === 'patientUuid') {
             return false;
@@ -43,8 +40,8 @@ export function useSearchResults(
       );
     }
 
-    return appointments;
-  }, [searchString, appointments]);
+    return data;
+  }, [searchString, data]);
 
   return searchResults;
 }

package/src/appointments-calendar/monthly/monthly-view-workload.component.tsx

@@ -27,7 +27,7 @@ const MonthlyWorkload = ({ type, dateTime, currentDate, events }) => {
       } ${layout === 'small-desktop' ? styles.smallDesktop : styles.largeDesktop}`}>
       {type === 'monthly' && isSameMonth(dateTime, currentDate) && (
         <p>
-          <b>{dateTime.format('D')}</b>
+          <b className={styles.calendarDate}>{dateTime.format('D')}</b>
           {currentData?.service && (
             <div className={styles.currentData}>
               {currentData.service.map(({ serviceName, count }) => (
@@ -36,7 +36,7 @@ const MonthlyWorkload = ({ type, dateTime, currentDate, events }) => {
                   role="button"
                   tabIndex={0}
                   onClick={() => serviceAreaOnClick(serviceName)}
-                  className={`${styles.serviceArea} ${styles[colorCoding[serviceName]]}`}>
+                  className={`${styles.serviceArea}`}>
                   <span>{serviceName}</span>
                   <span>{count}</span>
                 </div>

package/src/appointments-calendar/monthly/monthly-view-workload.scss

@@ -77,24 +77,22 @@
 
 .currentData {
   margin: 2px;
+  padding-top: 2px;
+  background-color: colors.$gray-10;
 
   & > span {
     @include type.type-style('label-02');
   }
 }
 
-.greyBackground {
-  background-color: colors.$gray-10;
-}
-
 .serviceArea {
   padding: 0.0125rem;
   display: grid;
   grid-template-columns: 4fr 1fr;
   justify-content: flex-start;
   text-align: left;
-  margin: 0.0125rem;
-  @include type.type-style('label-02');
+  margin: 0.125rem;
+  @include type.type-style('label-01');
   color: #020f1b;
   cursor: pointer;
 
@@ -144,3 +142,7 @@
   color: colors.$white;
   font-weight: bold;
 }
+
+.calendarDate {
+  @include type.type-style('heading-compact-01');
+}

package/src/home-appointments/appointments-list.scss

@@ -84,6 +84,8 @@
 
 .serviceContainer {
   display: flex;
+  align-items: center;
+  width: max-content;
 }
 
 .identifier {

package/translations/en.json

@@ -76,7 +76,6 @@
   "monthly": "Monthly",
   "name": "Name",
   "next": "Next",
-  "nextAppointmentDate": "Next appointment date",
   "noAppointmentsScheduledForTodayToDisplay": "There are no appointments scheduled for today to display for this location",
   "noAppointmentsToDisplay": "There are no appointments to display for this location",
   "noEncountersFound": "No encounters found",