@openmrs/esm-login-app 8.0.1-pre.3511 → 8.0.1-pre.3518

package/src/location-picker/location-picker-view.component.tsx

@@ -1,19 +1,19 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { Button, Checkbox, InlineLoading } from '@carbon/react';
 import { useLocation, type Location, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Button, Checkbox, InlineLoading } from '@carbon/react';
 import {
+  getCoreTranslation,
+  LocationPicker,
   navigate,
   setSessionLocation,
   useConfig,
   useConnectivity,
   useSession,
-  LocationPicker,
-  getCoreTranslation,
 } from '@openmrs/esm-framework';
-import type { LoginReferrer } from '../login/login.component';
 import { useDefaultLocation, useLocationCount } from './location-picker.resource';
 import type { ConfigSchema } from '../config-schema';
+import type { LoginReferrer } from '../login/login.component';
 import styles from './location-picker.scss';
 
 interface LocationPickerProps {
@@ -27,6 +27,7 @@ const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage,
   const { chooseLocation } = config;
   const isLoginEnabled = useConnectivity();
   const [searchParams] = useSearchParams();
+  const checkboxId = useId();
   const isUpdateFlow = useMemo(() => searchParams.get('update') === 'true', [searchParams]);
   const { defaultLocation, updateDefaultLocation, savePreference, setSavePreference } =
     useDefaultLocation(isUpdateFlow);
@@ -40,7 +41,6 @@ const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage,
   const { currentUser, userProperties } = useMemo(
     () => ({
       currentUser: user?.display,
-      userUuid: user?.uuid,
       userProperties: user?.userProperties,
     }),
     [user],
@@ -64,7 +64,7 @@ const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage,
       setIsSubmitting(true);
 
       const referrer = state?.referrer;
-      const returnToUrl = new URLSearchParams(location?.search).get('returnToUrl');
+      const returnToUrl = searchParams.get('returnToUrl');
 
       const sessionDefined = setSessionLocation(locationUuid, new AbortController());
 
@@ -79,20 +79,23 @@ const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage,
         } else {
           navigate({ to: config.links.loginSuccess });
         }
-        return;
       });
     },
-    [state?.referrer, config.links.loginSuccess, updateDefaultLocation],
+    [state?.referrer, config.links.loginSuccess, updateDefaultLocation, searchParams],
   );
 
   // Handle cases where the location picker is disabled, there is only one location, or there are no locations.
   useEffect(() => {
     if (isLoadingLocationCount) return;
 
-    if (locationCount == 0) {
+    if (locationCount === 0) {
       changeLocation();
-    } else if (locationCount == 1 || !chooseLocation.enabled) {
-      changeLocation(firstLocation!.resource.id, true);
+    } else if (locationCount === 1 || !chooseLocation.enabled) {
+      if (firstLocation?.resource?.id) {
+        changeLocation(firstLocation.resource.id, true);
+      } else {
+        console.error('Expected location data is missing', { firstLocation, locationCount });
+      }
     }
   }, [locationCount, isLoadingLocationCount]);
 
@@ -111,7 +114,9 @@ const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage,
     (evt: React.FormEvent<HTMLFormElement>) => {
       evt.preventDefault();
 
-      if (!activeLocation) return;
+      if (!activeLocation) {
+        return;
+      }
 
       changeLocation(activeLocation, savePreference);
     },
@@ -141,10 +146,10 @@ const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage,
           />
           <div className={styles.footerContainer}>
             <Checkbox
-              id="checkbox"
               className={styles.savePreferenceCheckbox}
-              labelText={t('rememberLocationForFutureLogins', 'Remember my location for future logins')}
               checked={savePreference}
+              id={checkboxId}
+              labelText={t('rememberLocationForFutureLogins', 'Remember my location for future logins')}
               onChange={(_, { checked }) => setSavePreference(checked)}
             />
             <Button

package/src/location-picker/location-picker.resource.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useSwrImmutable from 'swr/immutable';
 import { type FetchResponse, openmrsFetch, setUserProperties, showSnackbar, useSession } from '@openmrs/esm-framework';
 import { useValidateLocationUuid } from '../login.resource';
-import useSwrImmutable from 'swr/immutable';
 import { type LocationResponse } from '../types';
 
 export function useDefaultLocation(isUpdateFlow: boolean) {

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

@@ -1,16 +1,15 @@
-/* eslint-disable */
-import { act, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
   openmrsFetch,
-  useConfig,
-  useSession,
   setSessionLocation,
   setUserProperties,
   showSnackbar,
-  LoggedInUser,
-  Session,
-  FetchResponse,
+  useConfig,
+  useSession,
+  type LoggedInUser,
+  type Session,
+  type FetchResponse,
 } from '@openmrs/esm-framework';
 import {
   mockLoginLocations,
@@ -37,6 +36,9 @@ const userUuid = '90bd24b3-e700-46b0-a5ef-c85afdfededd';
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockUseConfig = jest.mocked(useConfig);
 const mockUseSession = jest.mocked(useSession);
+const mockSetSessionLocation = jest.mocked(setSessionLocation);
+const mockSetUserProperties = jest.mocked(setUserProperties);
+const mockShowSnackbar = jest.mocked(showSnackbar);
 
 describe('LocationPickerView', () => {
   beforeEach(() => {
@@ -50,83 +52,110 @@ describe('LocationPickerView', () => {
       } as LoggedInUser,
     } as Session);
 
-    mockOpenmrsFetch.mockImplementation((url) => {
-      if (url === `/ws/fhir2/R4/Location?_id=${fistLocation.uuid}`) {
-        return Promise.resolve(validatingLocationSuccessResponse as FetchResponse<unknown>);
-      }
-      if (url === `/ws/fhir2/R4/Location?_id=${invalidLocationUuid}`) {
-        return Promise.resolve(validatingLocationFailureResponse as FetchResponse<unknown>);
-      }
-      return Promise.resolve(mockLoginLocations as FetchResponse<unknown>);
-    });
+    const urlResponseMap: Record<string, FetchResponse<unknown>> = {
+      [`/ws/fhir2/R4/Location?_id=${fistLocation.uuid}`]: validatingLocationSuccessResponse as FetchResponse<unknown>,
+      [`/ws/fhir2/R4/Location?_id=${invalidLocationUuid}`]: validatingLocationFailureResponse as FetchResponse<unknown>,
+    };
+
+    mockOpenmrsFetch.mockImplementation(
+      async (url) => urlResponseMap[url] ?? (mockLoginLocations as FetchResponse<unknown>),
+    );
+
+    mockSetSessionLocation.mockResolvedValue(undefined);
   });
 
-  it('renders the component properly', async () => {
-    await act(async () => {
-      renderWithRouter(LocationPickerView, {
-        currentLocationUuid: 'some-location-uuid',
-        hideWelcomeMessage: false,
-      });
+  it('renders the welcome message and location selection form', () => {
+    renderWithRouter(LocationPickerView, {
+      currentLocationUuid: 'some-location-uuid',
+      hideWelcomeMessage: false,
     });
 
-    expect(screen.queryByText(/welcome testy mctesterface/i)).toBeInTheDocument();
+    expect(screen.getByText(/welcome testy mctesterface/i)).toBeInTheDocument();
     expect(
-      screen.queryByText(/select your location from the list below. use the search bar to find your location/i),
+      screen.getByText(/select your location from the list below. use the search bar to find your location/i),
     ).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /confirm/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /confirm/i })).toBeDisabled();
   });
 
-  describe('Testing setting user preference workflow', () => {
-    it('should save user preference if the user checks the checkbox and submit', async () => {
+  it('disables the confirm button when no location is selected', () => {
+    renderWithRouter(LocationPickerView, {});
+
+    const confirmButton = screen.getByRole('button', { name: /confirm/i });
+    expect(confirmButton).toBeDisabled();
+  });
+
+  it('enables the confirm button when a location is selected', async () => {
+    const user = userEvent.setup();
+    renderWithRouter(LocationPickerView, {});
+
+    const confirmButton = screen.getByRole('button', { name: /confirm/i });
+    expect(confirmButton).toBeDisabled();
+
+    const location = await screen.findByRole('radio', { name: fistLocation.name });
+    await user.click(location);
+
+    expect(confirmButton).toBeEnabled();
+  });
+
+  describe('Saving location preference', () => {
+    it('allows user to save their preferred location for future logins', async () => {
       const user = userEvent.setup();
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {});
-      });
+      renderWithRouter(LocationPickerView, {});
 
-      const checkbox = screen.getByLabelText('Remember my location for future logins');
-      const location = screen.getByRole('radio', { name: fistLocation.name });
-      const submitButton = screen.getByText('Confirm');
+      const location = await screen.findByRole('radio', { name: fistLocation.name });
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
 
       await user.click(location);
+      expect(submitButton).toBeEnabled();
+
       await user.click(checkbox);
+      expect(checkbox).toBeChecked();
+
       await user.click(submitButton);
 
-      expect(setSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
-      expect(setUserProperties).toHaveBeenCalledWith(userUuid, {
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).toHaveBeenCalledWith(userUuid, {
         defaultLocation: fistLocation.uuid,
       });
 
-      await waitFor(() =>
-        expect(showSnackbar).toHaveBeenCalledWith({
-          isLowContrast: true,
-          kind: 'success',
-          subtitle: 'Your preferred location has been saved for future logins',
-          title: 'Location saved',
-        }),
-      );
+      await waitFor(() => {
+        expect(mockShowSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({
+            kind: 'success',
+            title: 'Location saved',
+            subtitle: 'Your preferred location has been saved for future logins',
+          }),
+        );
+      });
     });
 
-    it("should not save user preference if the user doesn't checks the checkbox and submit", async () => {
+    it('does not save preference when user submits without checking the checkbox', async () => {
       const user = userEvent.setup();
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {});
-      });
+      renderWithRouter(LocationPickerView, {});
 
       const location = await screen.findByRole('radio', { name: fistLocation.name });
-      const submitButton = screen.getByText('Confirm');
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
 
       await user.click(location);
+      expect(checkbox).not.toBeChecked();
+
       await user.click(submitButton);
 
-      expect(setSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
-      expect(setUserProperties).not.toHaveBeenCalled();
-      expect(showSnackbar).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).not.toHaveBeenCalled();
+      expect(mockShowSnackbar).not.toHaveBeenCalled();
     });
 
-    it('should redirect to home if user preference in the userProperties is present and the location preference is valid', async () => {
+    it('automatically redirects when user has a valid saved location preference', async () => {
       const validLocationUuid = fistLocation.uuid;
       mockUseSession.mockReturnValue({
         user: {
@@ -138,22 +167,16 @@ describe('LocationPickerView', () => {
         } as LoggedInUser,
       } as Session);
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {});
-      });
+      renderWithRouter(LocationPickerView, {});
 
       await waitFor(() => {
-        expect(setSessionLocation).toHaveBeenCalledWith(validLocationUuid, expect.anything());
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(validLocationUuid, expect.anything());
       });
 
-      // Since the user prop and the default login location is the same,
-      // it shouldn't send a hit to the backend.
-      expect(setUserProperties).not.toHaveBeenCalledWith(userUuid, {
-        defaultLocation: validLocationUuid,
-      });
+      expect(mockSetUserProperties).not.toHaveBeenCalled();
     });
 
-    it('should not redirect to home if user preference in the userProperties is present and the location preference is invalid', async () => {
+    it('shows location picker when saved location preference is invalid', async () => {
       mockUseSession.mockReturnValue({
         user: {
           display: 'Testy McTesterface',
@@ -164,19 +187,18 @@ describe('LocationPickerView', () => {
         } as LoggedInUser,
       } as Session);
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {});
-      });
+      renderWithRouter(LocationPickerView, {});
 
-      const checkbox = screen.getByLabelText('Remember my location for future logins');
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
       expect(checkbox).toBeChecked();
 
-      expect(setSessionLocation).not.toHaveBeenCalled();
+      expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
+      expect(mockSetSessionLocation).not.toHaveBeenCalled();
     });
   });
 
-  describe('Testing updating user preference workflow', () => {
-    it('should not redirect if the login location page has a searchParam `update`', async () => {
+  describe('Updating location preference', () => {
+    it('shows location picker when update=true is in URL params', () => {
       mockUseSession.mockReturnValue({
         user: {
           display: 'Testy McTesterface',
@@ -187,17 +209,16 @@ describe('LocationPickerView', () => {
         } as LoggedInUser,
       } as Session);
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
-      });
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
 
-      const checkbox = screen.getByLabelText('Remember my location for future logins');
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
       expect(checkbox).toBeChecked();
 
-      expect(setSessionLocation).not.toHaveBeenCalled();
+      expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
+      expect(mockSetSessionLocation).not.toHaveBeenCalled();
     });
 
-    it('should remove the saved preference if the login location page has a searchParam `update=true` and when submitting the user unchecks the checkbox ', async () => {
+    it('allows user to remove saved preference by unchecking the checkbox', async () => {
       const user = userEvent.setup();
 
       mockUseSession.mockReturnValue({
@@ -210,38 +231,40 @@ describe('LocationPickerView', () => {
         } as LoggedInUser,
       } as Session);
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
-      });
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
 
-      const checkbox = screen.getByLabelText('Remember my location for future logins');
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
       expect(checkbox).toBeChecked();
 
       const location = screen.getByRole('radio', { name: fistLocation.name });
       await user.click(location);
 
-      expect(setSessionLocation).not.toHaveBeenCalled();
+      expect(mockSetSessionLocation).not.toHaveBeenCalled();
 
       await user.click(checkbox);
       expect(checkbox).not.toBeChecked();
 
-      const submitButton = screen.getByText('Confirm');
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
       await user.click(submitButton);
 
-      expect(setSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
-      expect(setUserProperties).toHaveBeenCalledWith(userUuid, {});
-
-      await waitFor(() =>
-        expect(showSnackbar).toHaveBeenCalledWith({
-          isLowContrast: true,
-          kind: 'success',
-          title: 'Location preference removed',
-          subtitle: 'You will need to select a location on each login',
-        }),
-      );
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).toHaveBeenCalledWith(userUuid, {});
+
+      await waitFor(() => {
+        expect(mockShowSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({
+            kind: 'success',
+            title: 'Location preference removed',
+            subtitle: 'You will need to select a location on each login',
+          }),
+        );
+      });
     });
 
-    it('should update the user preference with new selection', async () => {
+    it('allows user to update their preferred location', async () => {
       const user = userEvent.setup();
 
       mockUseSession.mockReturnValue({
@@ -254,35 +277,37 @@ describe('LocationPickerView', () => {
         } as LoggedInUser,
       } as Session);
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
-      });
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
 
-      const checkbox = screen.getByLabelText('Remember my location for future logins');
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
       expect(checkbox).toBeChecked();
 
       const location = await screen.findByRole('radio', { name: secondLocation.name });
-      const submitButton = screen.getByText('Confirm');
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
 
       await user.click(location);
       await user.click(submitButton);
 
-      expect(setSessionLocation).toHaveBeenCalledWith(secondLocation.uuid, expect.anything());
-      expect(setUserProperties).toHaveBeenCalledWith(userUuid, {
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(secondLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).toHaveBeenCalledWith(userUuid, {
         defaultLocation: secondLocation.uuid,
       });
 
-      await waitFor(() =>
-        expect(showSnackbar).toHaveBeenCalledWith({
-          isLowContrast: true,
-          kind: 'success',
-          title: 'Location updated',
-          subtitle: 'Your preferred login location has been updated',
-        }),
-      );
+      await waitFor(() => {
+        expect(mockShowSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({
+            kind: 'success',
+            title: 'Location updated',
+            subtitle: 'Your preferred login location has been updated',
+          }),
+        );
+      });
     });
 
-    it('should not update the user preference with same selection', async () => {
+    it('does not update preference when user selects the same location', async () => {
       const user = userEvent.setup();
 
       mockUseSession.mockReturnValue({
@@ -295,21 +320,22 @@ describe('LocationPickerView', () => {
         } as LoggedInUser,
       } as Session);
 
-      await act(async () => {
-        renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
-      });
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
 
-      const checkbox = screen.getByLabelText('Remember my location for future logins');
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
       expect(checkbox).toBeChecked();
 
-      const communityOutreachLocation = await screen.findByRole('radio', { name: fistLocation.name });
-      const submitButton = screen.getByText('Confirm');
+      const location = await screen.findByRole('radio', { name: fistLocation.name });
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
 
-      await user.click(communityOutreachLocation);
+      await user.click(location);
       await user.click(submitButton);
 
-      expect(setSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
-      expect(setUserProperties).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).not.toHaveBeenCalled();
     });
   });
 });