@openmrs/esm-styleguide 8.0.1-pre.3511 → 8.0.1-pre.3525

package/src/location-picker/location-picker.test.tsx

@@ -1,9 +1,10 @@
-/* eslint-disable */
 import React from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import { act, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { type LoggedInUser, type Session } from '@openmrs/esm-api';
+import { type FHIRLocationResource } from '@openmrs/esm-emr-api';
 import { useConfig, useSession } from '@openmrs/esm-react-utils';
 import {
   inpatientWardResponse,
@@ -13,21 +14,20 @@ import {
 } from '../../__mocks__/locations.mock';
 import { mockConfig } from '../../__mocks__/config.mock';
 import { LocationPicker } from './location-picker.component';
+import { useLocationByUuid, useLocations } from './location-picker.resource';
 
 const validLocationUuid = '1ce1b7d4-c865-4178-82b0-5932e51503d6';
 const inpatientWardLocationUuid = 'ba685651-ed3b-4e63-9b35-78893060758a';
 
 const mockUseConfig = vi.mocked(useConfig);
 const mockUseSession = vi.mocked(useSession);
+const mockUseLocationByUuid = vi.mocked(useLocationByUuid);
+const mockUseLocations = vi.mocked(useLocations);
 
-mockUseConfig.mockReturnValue(mockConfig);
-mockUseSession.mockReturnValue({
-  user: {
-    display: 'Testy McTesterface',
-    uuid: '90bd24b3-e700-46b0-a5ef-c85afdfededd',
-    userProperties: {},
-  } as LoggedInUser,
-} as Session);
+vi.mock('./location-picker.resource', () => ({
+  useLocationByUuid: vi.fn(),
+  useLocations: vi.fn(),
+}));
 
 vi.mock('@openmrs/esm-api', async () => ({
   ...(await import('@openmrs/esm-api')),
@@ -48,33 +48,58 @@ vi.mock('@openmrs/esm-api', async () => ({
 }));
 
 describe('LocationPicker', () => {
-  it('renders a list of login locations', async () => {
-    await act(async () => {
-      render(<LocationPicker selectedLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue(mockConfig);
+    mockUseSession.mockReturnValue({
+      user: {
+        display: 'Testy McTesterface',
+        uuid: '90bd24b3-e700-46b0-a5ef-c85afdfededd',
+        userProperties: {},
+      } as LoggedInUser,
+    } as Session);
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: null,
+      error: null,
+      isLoading: false,
     });
 
-    expect(
-      screen.getByRole('searchbox', {
-        name: /search for a location/i,
-      }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    mockUseLocations.mockReturnValue({
+      locations: mockLoginLocations.data.entry as Array<FHIRLocationResource>,
+      isLoading: false,
+      totalResults: 4,
+      hasMore: false,
+      loadingNewData: false,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+  });
 
-    const locations = screen.getAllByRole('radio');
-    expect(locations.length).toBe(4);
-    const expectedLocations = [/community outreach/, /inpatient ward/, /mobile clinic/, /outpatient clinic/];
+  it('should render a search input and list of login locations', async () => {
+    render(<LocationPicker selectedLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
 
-    expectedLocations.forEach((row) =>
-      expect(screen.getByRole('radio', { name: new RegExp(row, 'i') })).toBeInTheDocument(),
-    );
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    expect(searchInput).toBeInTheDocument();
+
+    await waitFor(() => {
+      const locations = screen.getAllByRole('radio');
+      expect(locations).toHaveLength(4);
+    });
+
+    const expectedLocations = [/community outreach/, /inpatient ward/, /mobile clinic/, /outpatient clinic/];
+    expectedLocations.forEach((locationName) => {
+      expect(screen.getByRole('radio', { name: new RegExp(locationName, 'i') })).toBeInTheDocument();
+    });
   });
 
-  it('call onChange when a location is selected', async () => {
+  it('should call onChange when a location is selected', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
 
-    await act(async () => {
-      render(<LocationPicker selectedLocationUuid={validLocationUuid} onChange={handleChange} />);
+    render(<LocationPicker selectedLocationUuid={validLocationUuid} onChange={handleChange} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: /inpatient ward/i })).toBeInTheDocument();
     });
 
     const location = screen.getByRole('radio', { name: /inpatient ward/i });
@@ -83,51 +108,322 @@ describe('LocationPicker', () => {
     expect(handleChange).toHaveBeenCalledWith(inpatientWardLocationUuid);
   });
 
-  it('selects the provided selectedLocation when the component is rendered', async () => {
-    await act(async () => {
-      render(<LocationPicker selectedLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+  it('should select the provided selectedLocation when the component is rendered', async () => {
+    render(<LocationPicker selectedLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      const inpatientWardOption = screen.getByRole('radio', { name: /inpatient ward/i });
+      expect(inpatientWardOption).toBeChecked();
     });
-    const inpatientWardOption = screen.getByRole('radio', { name: /inpatient ward/i });
-    expect(inpatientWardOption).toBeChecked();
   });
 
-  it('loads the default location on top of the list', async () => {
-    await act(async () => {
-      render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+  it('should load the default location on top of the list', async () => {
+    mockUseLocationByUuid.mockReturnValue({
+      location: inpatientWardResponse.data.entry[0] as any,
+      error: null,
+      isLoading: false,
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      const locations = screen.getAllByRole('radio');
+      expect(locations).toHaveLength(4);
     });
 
+    // Verify the default location (Inpatient Ward) appears first in the list
     const locations = screen.getAllByRole('radio');
-    expect(locations.length).toBe(4);
-    expect(locations[0].getAttribute('value')).toBe(inpatientWardLocationUuid);
+    expect(locations[0]).toHaveAccessibleName(/inpatient ward/i);
 
     const expectedLocations = [/community outreach/, /inpatient ward/, /mobile clinic/, /outpatient clinic/];
-
-    expectedLocations.forEach((location) =>
-      expect(screen.getByRole('radio', { name: new RegExp(location, 'i') })).toBeInTheDocument(),
-    );
+    expectedLocations.forEach((locationName) => {
+      expect(screen.getByRole('radio', { name: new RegExp(locationName, 'i') })).toBeInTheDocument();
+    });
   });
 
   it('should not display the default location if search result does not contain the default location', async () => {
     const user = userEvent.setup();
-    await act(async () => {
-      render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: inpatientWardResponse.data.entry[0] as any,
+      error: null,
+      isLoading: false,
     });
+
+    // Mock useLocations to return different results based on search query
+    mockUseLocations.mockImplementation((locationTag, count, searchQuery) => {
+      if (searchQuery === 'outpatient') {
+        return {
+          locations: outpatientClinicResponse.data.entry as any,
+          isLoading: false,
+          totalResults: 1,
+          hasMore: false,
+          loadingNewData: false,
+          error: null,
+          setPage: vi.fn().mockResolvedValue(undefined),
+        };
+      }
+      return {
+        locations: mockLoginLocations.data.entry as any,
+        isLoading: false,
+        totalResults: 4,
+        hasMore: false,
+        loadingNewData: false,
+        error: null,
+        setPage: vi.fn().mockResolvedValue(undefined),
+      };
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
     const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
     await user.type(searchInput, 'outpatient');
 
-    expect(screen.queryByRole('radio', { name: /inpatient ward/i })).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByRole('radio', { name: /inpatient ward/i })).not.toBeInTheDocument();
+    });
   });
 
-  it('should display a message and should not display locations when search results are empty', async () => {
+  it('should display a message and not display locations when search results are empty', async () => {
     const user = userEvent.setup();
-    await act(async () => {
-      render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: inpatientWardResponse.data.entry[0] as any,
+      error: null,
+      isLoading: false,
+    });
+
+    // Mock useLocations to return empty results when searching for non-existent location
+    mockUseLocations.mockImplementation((locationTag, count, searchQuery) => {
+      if (searchQuery === 'search_for_no_location') {
+        return {
+          locations: [] as any,
+          isLoading: false,
+          totalResults: 0,
+          hasMore: false,
+          loadingNewData: false,
+          error: null,
+          setPage: vi.fn().mockResolvedValue(undefined),
+        };
+      }
+      return {
+        locations: mockLoginLocations.data.entry as any,
+        isLoading: false,
+        totalResults: 4,
+        hasMore: false,
+        loadingNewData: false,
+        error: null,
+        setPage: vi.fn().mockResolvedValue(undefined),
+      };
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
     });
+
     const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
     await user.type(searchInput, 'search_for_no_location');
 
-    expect(screen.getByText(/no results to display/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/no results to display/i)).toBeInTheDocument();
+    });
+
     const locations = screen.queryAllByRole('radio');
-    expect(locations.length).toBe(0);
+    expect(locations).toHaveLength(0);
+  });
+
+  it('should display skeleton loaders when loading initial data', () => {
+    mockUseLocations.mockReturnValue({
+      locations: [] as any,
+      isLoading: true,
+      totalResults: undefined,
+      hasMore: false,
+      loadingNewData: false,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker onChange={vi.fn()} />);
+
+    const skeletons = screen.getAllByRole('progressbar');
+    expect(skeletons).toHaveLength(5);
+  });
+
+  it('should display loading indicator when loading new data', async () => {
+    mockUseLocations.mockReturnValue({
+      locations: mockLoginLocations.data.entry as any,
+      isLoading: false,
+      totalResults: 4,
+      hasMore: true,
+      loadingNewData: true,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      // Find the loading text in the InlineLoading component (not in SVG title)
+      const loadingTexts = screen.getAllByText(/loading/i);
+      const loadingIndicator = loadingTexts.find((element) => element.className.includes('cds--inline-loading__text'));
+      expect(loadingIndicator).toBeInTheDocument();
+    });
+  });
+
+  it('should call onChange with undefined when search input changes', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(<LocationPicker onChange={handleChange} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, 'test');
+
+    // onChange is called without arguments when search changes, which means locationUuid is undefined
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0]).toBeUndefined();
+  });
+
+  it('should trim whitespace from search terms', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(<LocationPicker onChange={handleChange} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, '  outpatient  ');
+
+    // Verify that the trimmed search term is used (check if the mock was called with trimmed value)
+    // The actual trimming happens in the component, so we verify by checking the search was performed
+    await waitFor(() => {
+      // The search should filter results - verify outpatient clinic appears
+      expect(screen.getByRole('radio', { name: /outpatient clinic/i })).toBeInTheDocument();
+    });
+  });
+
+  it('should filter out default location from fetched locations to avoid duplicates', async () => {
+    const defaultLocationEntry = inpatientWardResponse.data.entry[0];
+    const locationsWithDuplicate = [defaultLocationEntry, ...mockLoginLocations.data.entry];
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: defaultLocationEntry as any,
+      error: null,
+      isLoading: false,
+    });
+
+    mockUseLocations.mockReturnValue({
+      locations: locationsWithDuplicate as any,
+      isLoading: false,
+      totalResults: 5,
+      hasMore: false,
+      loadingNewData: false,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      const locations = screen.getAllByRole('radio');
+      expect(locations).toHaveLength(4);
+    });
+
+    // Verify the default location (Inpatient Ward) appears first in the list
+    const locations = screen.getAllByRole('radio');
+    expect(locations[0]).toHaveAccessibleName(/inpatient ward/i);
+
+    // Verify Inpatient Ward only appears once
+    const inpatientWardLocations = screen.getAllByRole('radio', { name: /inpatient ward/i });
+    expect(inpatientWardLocations).toHaveLength(1);
+  });
+
+  it('should not show default location when search term is provided', async () => {
+    const user = userEvent.setup();
+    const defaultLocationEntry = inpatientWardResponse.data.entry[0];
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: defaultLocationEntry as any,
+      error: null,
+      isLoading: false,
+    });
+
+    // Mock useLocations to return filtered results when searching
+    mockUseLocations.mockImplementation((locationTag, count, searchQuery) => {
+      if (searchQuery === 'mobile') {
+        // Return only Mobile Clinic when searching for "mobile"
+        const mobileClinic = mockLoginLocations.data.entry.find((entry) => entry.resource.name === 'Mobile Clinic');
+        return {
+          locations: mobileClinic ? [mobileClinic] : ([] as any),
+          isLoading: false,
+          totalResults: 1,
+          hasMore: false,
+          loadingNewData: false,
+          error: null,
+          setPage: vi.fn().mockResolvedValue(undefined),
+        };
+      }
+      return {
+        locations: mockLoginLocations.data.entry as any,
+        isLoading: false,
+        totalResults: 4,
+        hasMore: false,
+        loadingNewData: false,
+        error: null,
+        setPage: vi.fn().mockResolvedValue(undefined),
+      };
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, 'mobile');
+
+    await waitFor(() => {
+      // Default location should not appear when searching
+      expect(screen.queryByRole('radio', { name: /inpatient ward/i })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should display inline error notification when location loading fails', async () => {
+    const mockError = new Error('Failed to load locations');
+
+    mockUseLocations.mockReturnValue({
+      locations: [] as any,
+      isLoading: false,
+      totalResults: undefined,
+      hasMore: false,
+      loadingNewData: false,
+      error: mockError,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      // Find the error text in the InlineNotification (not in SVG title)
+      const errorTexts = screen.getAllByText(/error/i);
+      const errorNotification = errorTexts.find((element) => element.textContent === 'Error');
+      expect(errorNotification).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/unable to load login locations/i)).toBeInTheDocument();
   });
 });

package/dist/brand.d.ts

@@ -1 +0,0 @@
-export declare function setupBranding(): void;

package/dist/breakpoints/index.d.ts

@@ -1,11 +0,0 @@
-export declare const Breakpoint: {
-    readonly PHONE_MIN: 0;
-    readonly PHONE_MAX: 600;
-    readonly TABLET_MIN: 601;
-    readonly TABLET_MAX: 1023;
-    readonly SMALL_DESKTOP_MIN: 1024;
-    readonly SMALL_DESKTOP_MAX: 1439;
-    readonly LARGE_DESKTOP_MIN: 1440;
-    readonly LARGE_DESKTOP_MAX: number;
-};
-export declare function integrateBreakpoints(): void;

package/dist/config-schema.d.ts

@@ -1,23 +0,0 @@
-import { type ConfigSchema } from '@openmrs/esm-config';
-import { type CarbonTagColor } from './utils';
-export interface StyleguideConfigObject {
-    'Brand color #1': string;
-    'Brand color #2': string;
-    'Brand color #3': string;
-    excludePatientIdentifierCodeTypes: {
-        uuids: Array<string>;
-    };
-    implementationName: string;
-    patientPhotoConceptUuid: string;
-    preferredCalendar: {
-        [key: string]: string;
-    };
-    preferredDateLocale: {
-        [key: string]: string;
-    };
-    diagnosisTags: {
-        primaryColor: CarbonTagColor;
-        secondaryColor: CarbonTagColor;
-    };
-}
-export declare const esmStyleGuideSchema: ConfigSchema;

package/dist/custom-overflow-menu/custom-overflow-menu.component.d.ts

@@ -1,8 +0,0 @@
-/** @module @category UI */
-import React from 'react';
-interface CustomOverflowMenuProps {
-    menuTitle: React.ReactNode;
-    children: React.ReactNode;
-}
-export declare function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuProps): React.JSX.Element;
-export {};

package/dist/custom-overflow-menu/index.d.ts

@@ -1 +0,0 @@
-export * from './custom-overflow-menu.component';

package/dist/datepicker/DatePickerIcon.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-/**
- * Component to render the Calendar icon for the DatePicker component with the same styling as
- * the Carbon DatePicker component.
- */
-export declare const DatePickerIcon: React.ForwardRefExoticComponent<React.RefAttributes<SVGSVGElement>>;

package/dist/datepicker/DatePickerInput.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { type DateInputProps } from 'react-aria-components';
-interface OpenmrsDateInputProps {
-    id?: string;
-}
-/**
- * This is just the standard React Aria Components DatePickerInput with an added `onClick` handler to open
- * the calendar when the group is clicked. This is used to emulate Carbon's behaviour in the DatePicker.
- */
-export declare const DatePickerInput: React.ForwardRefExoticComponent<DateInputProps & OpenmrsDateInputProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/datepicker/MonthYear.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-/**
- * Custom component to render the month and year on the DatePicker and provide the standard Carbon
- * UI to change them.
- *
- * Should work with any calendar system supported by the @internationalized/date package.
- */
-export declare const MonthYear: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;

package/dist/datepicker/locale-context.d.ts

@@ -1,2 +0,0 @@
-export declare const OpenmrsIntlLocaleContext: import("react").Context<Intl.Locale | null>;
-export declare const useIntlLocale: () => Intl.Locale;

package/dist/datepicker/utils.d.ts

@@ -1,15 +0,0 @@
-import { type Calendar, type DateValue } from '@internationalized/date';
-import { type DateInputValue } from './OpenmrsDatePicker';
-/**
- * Function to convert relatively arbitrary date values into a React Aria `DateValue`,
- * normally a `CalendarDate`, which represents a date without time or timezone.
- */
-export declare function dateToInternationalizedDate(date: DateInputValue, calendar: Calendar | undefined, allowNull: true): DateValue | null | undefined;
-export declare function dateToInternationalizedDate(date: DateInputValue, calendar: Calendar | undefined, allowNull: false): DateValue | undefined;
-export declare function dateToInternationalizedDate(date: DateInputValue, calendar: Calendar | undefined): DateValue | undefined;
-/**
- * Function to convert a `DateValue` (from React Aria) into a standard JS `Date`.
- */
-export declare function internationalizedDateToDate(date: DateValue): Date | undefined;
-/** Removes any data attributes from an object */
-export declare function removeDataAttributes<T>(props: T): T;

package/dist/error-state/error-state.component.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface ErrorStateProps {
-    error: any;
-    headerTitle: string;
-}
-export declare const ErrorState: React.FC<ErrorStateProps>;

package/dist/error-state/index.d.ts

@@ -1 +0,0 @@
-export * from './error-state.component';

package/dist/icons/icon-registration.d.ts

@@ -1 +0,0 @@
-export declare function setupIcons(): void;