@olaboot/esm-patient-registration-app 9.2.0 → 10.0.2

package/src/patient-registration/before-save-prompt.test.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach, afterEach, type Mock, type MockInstance } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { showModal, navigate } from '@openmrs/esm-framework';
+import BeforeSavePrompt from './before-save-prompt.component';
+
+const mockShowModal = vi.mocked(showModal);
+const mockNavigate = vi.mocked(navigate);
+
+const mockGetOpenmrsSpaBase = vi.fn(() => '/openmrs/spa');
+window['getOpenmrsSpaBase'] = mockGetOpenmrsSpaBase;
+
+/**
+ * Helper to render BeforeSavePrompt component.
+ */
+function renderBeforeSavePrompt(when: boolean, redirect?: string) {
+  return render(<BeforeSavePrompt when={when} redirect={redirect} />);
+}
+
+describe('BeforeSavePrompt component', () => {
+  let addEventListenerSpy: MockInstance;
+  let removeEventListenerSpy: MockInstance;
+  let disposeMock: Mock;
+
+  beforeEach(() => {
+    disposeMock = vi.fn();
+    mockShowModal.mockReturnValue(disposeMock);
+    mockNavigate.mockClear();
+
+    // Spy on window.addEventListener and removeEventListener
+    addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+    removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+  });
+
+  afterEach(() => {
+    addEventListenerSpy.mockRestore();
+    removeEventListenerSpy.mockRestore();
+  });
+
+  describe('Event listener setup', () => {
+    it('does not set up event listeners when when is false', () => {
+      renderBeforeSavePrompt(false);
+
+      expect(addEventListenerSpy).not.toHaveBeenCalled();
+    });
+
+    it('sets up beforeunload and navigation event listeners when when is true', () => {
+      renderBeforeSavePrompt(true);
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+      expect(addEventListenerSpy).toHaveBeenCalledWith('single-spa:before-routing-event', expect.any(Function));
+    });
+
+    it('removes event listeners on unmount', () => {
+      const { unmount } = renderBeforeSavePrompt(true);
+
+      unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('single-spa:before-routing-event', expect.any(Function));
+    });
+
+    it('does not set up listeners when redirect is provided', () => {
+      renderBeforeSavePrompt(true, '/some/path');
+
+      expect(addEventListenerSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Beforeunload event handling', () => {
+    it('prevents default and sets returnValue on beforeunload event', () => {
+      renderBeforeSavePrompt(true);
+
+      const beforeunloadHandler = addEventListenerSpy.mock.calls.find((call) => call[0] === 'beforeunload')?.[1] as (
+        e: BeforeUnloadEvent,
+      ) => string;
+
+      const mockEvent = {
+        preventDefault: vi.fn(),
+        returnValue: '',
+      } as unknown as BeforeUnloadEvent;
+
+      const result = beforeunloadHandler(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(mockEvent.returnValue).toBeTruthy();
+      expect(result).toBeTruthy();
+    });
+  });
+
+  describe('Navigation event handling', () => {
+    it('shows modal and cancels navigation on single-spa routing event', () => {
+      renderBeforeSavePrompt(true);
+
+      const navigationHandler = addEventListenerSpy.mock.calls.find(
+        (call) => call[0] === 'single-spa:before-routing-event',
+      )?.[1] as (e: CustomEvent) => void;
+
+      const mockCancelNavigation = vi.fn();
+      const mockEvent = {
+        detail: {
+          newUrl: '/openmrs/spa/new-page',
+          navigationIsCanceled: false,
+          cancelNavigation: mockCancelNavigation,
+        },
+      } as unknown as CustomEvent;
+
+      navigationHandler(mockEvent);
+
+      expect(mockCancelNavigation).toHaveBeenCalled();
+      expect(mockShowModal).toHaveBeenCalledWith(
+        'cancel-patient-edit-modal',
+        expect.objectContaining({
+          onConfirm: expect.any(Function),
+        }),
+        expect.any(Function),
+      );
+    });
+
+    it('does not show modal if navigation is already canceled', () => {
+      renderBeforeSavePrompt(true);
+
+      const navigationHandler = addEventListenerSpy.mock.calls.find(
+        (call) => call[0] === 'single-spa:before-routing-event',
+      )?.[1] as (e: CustomEvent) => void;
+
+      const mockEvent = {
+        detail: {
+          newUrl: '/openmrs/spa/new-page',
+          navigationIsCanceled: true,
+          cancelNavigation: vi.fn(),
+        },
+      } as unknown as CustomEvent;
+
+      navigationHandler(mockEvent);
+
+      expect(mockShowModal).not.toHaveBeenCalled();
+    });
+
+    it('navigates to target URL when modal is confirmed', async () => {
+      renderBeforeSavePrompt(true);
+
+      const navigationHandler = addEventListenerSpy.mock.calls.find(
+        (call) => call[0] === 'single-spa:before-routing-event',
+      )?.[1] as (e: CustomEvent) => void;
+
+      const mockEvent = {
+        detail: {
+          newUrl: '/openmrs/spa/new-page',
+          navigationIsCanceled: false,
+          cancelNavigation: vi.fn(),
+        },
+      } as unknown as CustomEvent;
+
+      // Call navigationHandler directly - it triggers showModal synchronously
+      navigationHandler(mockEvent);
+
+      // Get the onConfirm callback from showModal call
+      // showModal is called with: (modalName, props, onClose)
+      const modalProps = mockShowModal.mock.calls[0]?.[1] as { onConfirm?: () => void } | undefined;
+      const onConfirm = modalProps?.onConfirm;
+
+      expect(onConfirm).toBeDefined();
+
+      // Call onConfirm directly - waitFor will handle async updates
+      onConfirm?.();
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith({
+          to: expect.stringContaining('/new-page'),
+        });
+      });
+      expect(disposeMock).toHaveBeenCalled();
+    });
+  });
+
+  describe('Redirect handling', () => {
+    it('navigates to redirect URL when redirect prop is provided', async () => {
+      renderBeforeSavePrompt(true, '/openmrs/spa/target-page');
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith({
+          to: expect.stringContaining('/target-page'),
+        });
+      });
+    });
+
+    it('handles redirect with full URL', async () => {
+      mockGetOpenmrsSpaBase.mockReturnValue('/openmrs/spa');
+      renderBeforeSavePrompt(true, '/openmrs/spa/target-page');
+
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith({
+          to: expect.stringContaining('/target-page'),
+        });
+      });
+    });
+  });
+});

package/src/patient-registration/field/__mocks__/field.resource.ts

@@ -1,11 +1,12 @@
+import { vi } from 'vitest';
 import { type ConceptResponse } from '../../patient-registration.types';
 
-export const useConcept = jest.fn(function mockUseConceptImplementation(uuid: string): {
+export const useConcept = vi.fn(function mockUseConceptImplementation(uuid: string): {
   data: ConceptResponse;
   isLoading: boolean;
 } {
   let data;
-  if (uuid == 'weight-uuid') {
+  if (uuid === 'weight-uuid') {
     data = {
       uuid: 'weight-uuid',
       display: 'Weight (kg)',
@@ -13,7 +14,7 @@ export const useConcept = jest.fn(function mockUseConceptImplementation(uuid: st
       answers: [],
       setMembers: [],
     };
-  } else if (uuid == 'chief-complaint-uuid') {
+  } else if (uuid === 'chief-complaint-uuid') {
     data = {
       uuid: 'chief-complaint-uuid',
       display: 'Chief Complaint',
@@ -21,7 +22,7 @@ export const useConcept = jest.fn(function mockUseConceptImplementation(uuid: st
       answers: [],
       setMembers: [],
     };
-  } else if (uuid == 'nationality-uuid') {
+  } else if (uuid === 'nationality-uuid') {
     data = {
       uuid: 'nationality-uuid',
       display: 'Nationality',
@@ -39,8 +40,8 @@ export const useConcept = jest.fn(function mockUseConceptImplementation(uuid: st
   };
 });
 
-export const useConceptAnswers = jest.fn((uuid: string) => {
-  if (uuid == 'nationality-uuid') {
+export const useConceptAnswers = vi.fn((uuid: string) => {
+  if (uuid === 'nationality-uuid') {
     return {
       data: [
         { display: 'USA', uuid: 'usa' },
@@ -48,7 +49,7 @@ export const useConceptAnswers = jest.fn((uuid: string) => {
       ],
       isLoading: false,
     };
-  } else if (uuid == 'other-countries-uuid') {
+  } else if (uuid === 'other-countries-uuid') {
     return {
       data: [
         { display: 'Kenya', uuid: 'ke' },

package/src/patient-registration/field/address/address-field.component.tsx

@@ -9,11 +9,12 @@ import {
   usePatientRegistrationContext,
 } from '../../patient-registration-context';
 import { ResourcesContextProvider, useResourcesContext } from '../../../resources-context';
+import { type AddressTemplate } from '../../patient-registration.types';
 import { Input } from '../../input/basic-input/input/input.component';
 import AddressHierarchyLevels from './address-hierarchy-levels.component';
 import AddressSearchComponent from './address-search.component';
 import styles from '../field.scss';
-import { type AddressTemplate } from '../../patient-registration.types';
+
 
 export const AddressComponent: React.FC = () => {
   const config = useConfig();
@@ -39,8 +40,6 @@ export const AddressComponent: React.FC = () => {
 
     const allFields = addressTemplate?.lines?.flat();
     const fields = allFields?.filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
-
-    // Use config-based required fields if provided, otherwise fall back to backend template
     const allRequiredFields = requiredAddressFields?.length
       ? Object.fromEntries(requiredAddressFields.map((field) => [field, field]))
       : Object.fromEntries(addressTemplate?.requiredElements?.map((curr) => [curr, curr]) || []);
@@ -80,10 +79,9 @@ export const AddressComponent: React.FC = () => {
   if (addressTemplate && !Object.keys(addressTemplate)?.length) {
     return (
       <AddressComponentContainer>
-        <SkeletonText
-          // @ts-expect-error
-          role="progressbar"
-        />
+        <div role="progressbar" aria-label={t('loading', 'Loading')}>
+          <SkeletonText />
+        </div>
       </AddressComponentContainer>
     );
   }
@@ -108,10 +106,9 @@ export const AddressComponent: React.FC = () => {
   if (isLoadingFieldOrder) {
     return (
       <AddressComponentContainer>
-        <SkeletonText
-          // @ts-expect-error
-          role="progressbar"
-        />
+        <div role="progressbar" aria-label={t('loading', 'Loading')}>
+          <SkeletonText />
+        </div>
       </AddressComponentContainer>
     );
   }
@@ -156,7 +153,7 @@ const AddressComponentContainer = ({ children }) => {
     () =>
       ({
         fieldConfigurations: {},
-        setFieldValue: () => {},
+        setFieldValue: async () => {},
         values: {},
       }) as unknown as PatientRegistrationContextProps,
     [],
@@ -168,7 +165,7 @@ const AddressComponentContainer = ({ children }) => {
         addressTemplate: {} as AddressTemplate,
         currentSession: {} as Session,
         identifierTypes: [],
-        relationshipTypes: [],
+        relationshipTypes: { results: [] },
       }}>
       <PatientRegistrationContextProvider value={contextValue}>
         <div>

package/src/patient-registration/field/address/address-hierarchy-levels.component.tsx

@@ -22,7 +22,10 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const { t } = useTranslation();
   const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
-  const { entries } = useAddressEntries(fetchEntriesForField, searchString);
+  const { entries, isLoadingAddressEntries, errorFetchingAddressEntries } = useAddressEntries(
+    fetchEntriesForField,
+    searchString,
+  );
   const label = t(attribute.label) + (attribute?.required ? '' : ` (${t('optional', 'optional')})`);
 
   const handleInputChange = useCallback(
@@ -45,6 +48,8 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   return (
     <ComboInput
       entries={entries}
+      error={errorFetchingAddressEntries}
+      isLoading={isLoadingAddressEntries}
       handleSelection={handleSelection}
       name={`address.${attribute.name}`}
       fieldProps={{