@openmrs/esm-login-app 3.2.0 → 3.2.1-pre.1015

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

@@ -2,13 +2,9 @@ import "@testing-library/jest-dom";
 import React from "react";
 import LocationPicker from "./location-picker.component";
 import { act } from "react-dom/test-utils";
-import {
-  cleanup,
-  fireEvent,
-  render,
-  wait,
-  screen,
-} from "@testing-library/react";
+import { fireEvent, render, waitFor, screen } from "@testing-library/react";
+import { useConfig } from "@openmrs/esm-framework";
+import { mockConfig } from "../../__mocks__/config.mock";
 
 const loginLocations = {
   data: {
@@ -19,11 +15,14 @@ const loginLocations = {
   },
 };
 
+const mockedUseConfig = useConfig as jest.Mock;
+
+jest.mock("lodash-es/debounce", () => jest.fn((fn) => fn));
+
 describe(`<LocationPicker />`, () => {
   let searchInput,
     marsInput,
     submitButton,
-    wrapper,
     locationEntries,
     onChangeLocation,
     searchLocations;
@@ -37,13 +36,15 @@ describe(`<LocationPicker />`, () => {
       writable: true,
     });
 
+    mockedUseConfig.mockReturnValue(mockConfig);
+
     // reset mocks
     locationEntries = loginLocations.data.entry;
     onChangeLocation = jest.fn(() => {});
     searchLocations = jest.fn(() => Promise.resolve([]));
 
-    //prepare components
-    wrapper = render(
+    // prepare components
+    render(
       <LocationPicker
         loginLocations={locationEntries}
         onChangeLocation={onChangeLocation}
@@ -53,16 +54,14 @@ describe(`<LocationPicker />`, () => {
       />
     );
 
-    searchInput = wrapper.container.querySelector("input");
-    submitButton = wrapper.getByText("Confirm", { selector: "button" });
+    searchInput = screen.getByRole("searchbox");
+    submitButton = screen.getByText("Confirm", { selector: "button" });
   });
 
-  afterEach(cleanup);
-
   it("trigger search on typing", async () => {
-    cleanup();
     searchLocations = jest.fn(() => Promise.resolve(loginLocations));
-    wrapper = render(
+
+    render(
       <LocationPicker
         loginLocations={locationEntries}
         onChangeLocation={onChangeLocation}
@@ -74,8 +73,8 @@ describe(`<LocationPicker />`, () => {
 
     fireEvent.change(searchInput, { target: { value: "mars" } });
 
-    await wait(() => {
-      expect(wrapper.getByLabelText("Mars")).not.toBeNull();
+    await waitFor(() => {
+      expect(screen.getByLabelText("Mars")).not.toBeNull();
     });
   });
 
@@ -84,16 +83,16 @@ describe(`<LocationPicker />`, () => {
       fireEvent.change(searchInput, { target: { value: "Mars" } });
     });
 
-    await wait(() => {
-      expect(wrapper.queryByText("Mars")).not.toBeNull();
-      marsInput = wrapper.getByLabelText("Mars");
+    await waitFor(() => {
+      expect(screen.queryByText("Mars")).not.toBeNull();
+      marsInput = screen.getByLabelText("Mars");
     });
 
     act(() => {
       fireEvent.click(marsInput);
     });
 
-    await wait(() => {
+    await waitFor(() => {
       expect(submitButton).not.toHaveAttribute("disabled");
     });
   });
@@ -105,15 +104,15 @@ describe(`<LocationPicker />`, () => {
       fireEvent.change(searchInput, { target: { value: "Mars" } });
     });
 
-    await wait(() => {
-      expect(wrapper.queryByText("Mars")).not.toBeNull();
-      marsInput = wrapper.getByLabelText("Mars");
+    await waitFor(() => {
+      expect(screen.queryByText("Mars")).not.toBeNull();
+      marsInput = screen.getByLabelText("Mars");
     });
 
     fireEvent.click(marsInput);
     fireEvent.click(submitButton);
 
-    await wait(() => expect(onChangeLocation).toHaveBeenCalled());
+    await waitFor(() => expect(onChangeLocation).toHaveBeenCalled());
   });
 
   it(`send the user to the home page on submit`, async () => {
@@ -123,15 +122,15 @@ describe(`<LocationPicker />`, () => {
       fireEvent.change(searchInput, { target: { value: "Mars" } });
     });
 
-    await wait(() => {
-      expect(wrapper.queryByText("Mars")).not.toBeNull();
-      marsInput = wrapper.getByLabelText("Mars");
+    await waitFor(() => {
+      expect(screen.queryByText("Mars")).not.toBeNull();
+      marsInput = screen.getByLabelText("Mars");
     });
 
     fireEvent.click(marsInput);
     fireEvent.click(submitButton);
 
-    await wait(() => {
+    await waitFor(() => {
       expect(onChangeLocation).toHaveBeenCalled();
     });
   });
@@ -143,17 +142,17 @@ describe(`<LocationPicker />`, () => {
       fireEvent.change(searchInput, { target: { value: "Mars" } });
     });
 
-    await wait(() => {
-      expect(wrapper.queryByText("Mars")).not.toBeNull();
-      marsInput = wrapper.getByLabelText("Mars");
+    await waitFor(() => {
+      expect(screen.queryByText("Mars")).not.toBeNull();
+      marsInput = screen.getByLabelText("Mars");
     });
 
-    submitButton = wrapper.getByText("Confirm", { selector: "button" });
+    submitButton = screen.getByText("Confirm", { selector: "button" });
 
     fireEvent.click(marsInput);
     fireEvent.click(submitButton);
 
-    await wait(() => {
+    await waitFor(() => {
       expect(onChangeLocation).toHaveBeenCalled();
     });
   });
@@ -163,7 +162,7 @@ describe(`<LocationPicker />`, () => {
   });
 
   it("should deselect active location when user searches for a location", async () => {
-    const locationRadioButton: HTMLElement = await wrapper.getByRole("radio", {
+    const locationRadioButton: HTMLElement = await screen.getByRole("radio", {
       name: /Earth/,
     });
     fireEvent.click(locationRadioButton);
@@ -175,9 +174,9 @@ describe(`<LocationPicker />`, () => {
   it("shows error message when no matching locations can be found", async () => {
     fireEvent.change(searchInput, { target: { value: "doof" } });
 
-    await wait(() => {
+    await waitFor(() => {
       expect(
-        wrapper.getByText("Sorry, no matching location was found")
+        screen.getByText("Sorry, no matching location was found")
       ).not.toBeNull();
     });
     expect(submitButton).toHaveAttribute("disabled");
@@ -187,14 +186,14 @@ describe(`<LocationPicker />`, () => {
     expect(
       window.localStorage.getItem("userDefaultLoginLocationKeyDemo")
     ).toEqual("111");
-    const locationRadioButton: HTMLElement = await wrapper.getByRole("radio", {
+    const locationRadioButton: HTMLElement = await screen.getByRole("radio", {
       name: /Earth/,
     });
     expect(locationRadioButton).toHaveProperty("checked", true);
   });
 
   it("should set user Default location when location is changed", async () => {
-    const locationRadioButton: HTMLElement = await wrapper.findByLabelText(
+    const locationRadioButton: HTMLElement = await screen.findByLabelText(
       /Earth/
     );
     fireEvent.click(locationRadioButton);
@@ -207,7 +206,7 @@ describe(`<LocationPicker />`, () => {
 
   it("should display the correct pageSize", async () => {
     expect(screen.getByText(/Showing 2 of 2 locations/i)).toBeInTheDocument();
-    cleanup();
+
     const loginLocations: any = {
       data: {
         entry: [
@@ -217,7 +216,8 @@ describe(`<LocationPicker />`, () => {
         ],
       },
     };
-    const wrapper = render(
+
+    render(
       <LocationPicker
         loginLocations={loginLocations.data.entry}
         onChangeLocation={onChangeLocation}
@@ -226,6 +226,7 @@ describe(`<LocationPicker />`, () => {
         isLoginEnabled={true}
       />
     );
-    expect(wrapper.getByText(/Showing 3 of 3 locations/i)).toBeInTheDocument();
+
+    expect(screen.getByText(/Showing 3 of 3 locations/i)).toBeInTheDocument();
   });
 });

package/src/login/login.component.test.tsx

@@ -1,12 +1,13 @@
 import "@testing-library/jest-dom";
 import Login from "./login.component";
 import { useState } from "react";
-import { cleanup, wait } from "@testing-library/react";
-import { setSessionLocation } from "@openmrs/esm-framework";
+import { waitFor, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { setSessionLocation, useConfig } from "@openmrs/esm-framework";
 import { performLogin } from "./login.resource";
 import { useCurrentUser } from "../CurrentUserContext";
+import { mockConfig } from "../../__mocks__/config.mock";
 import renderWithRouter from "../test-helpers/render-with-router";
-import userEvent from "@testing-library/user-event";
 
 const mockedLogin = performLogin as jest.Mock;
 
@@ -16,6 +17,7 @@ jest.mock("./login.resource", () => ({
 
 const mockedSetSessionLocation = setSessionLocation as jest.Mock;
 const mockedUseCurrentUser = useCurrentUser as jest.Mock;
+const mockedUseConfig = useConfig as jest.Mock;
 
 jest.mock("../CurrentUserContext", () => ({
   useCurrentUser: jest.fn(),
@@ -31,22 +33,23 @@ describe(`<Login />`, () => {
     mockedLogin.mockReset();
     mockedSetSessionLocation.mockReset();
     mockedUseCurrentUser.mockReset();
+    mockedUseConfig.mockReturnValue(mockConfig);
   });
 
-  afterEach(cleanup);
-
   it(`renders a login form`, () => {
-    const wrapper = renderWithRouter(Login, {
+    renderWithRouter(Login, {
       loginLocations: loginLocations,
       isLoginEnabled: true,
     });
 
-    wrapper.getByRole("textbox", { name: /Username/i });
-    wrapper.getByRole("button", { name: /Continue/i });
+    screen.getByRole("img", { name: /OpenMRS logo/i });
+    expect(screen.queryByAltText(/logo/i)).not.toBeInTheDocument();
+    screen.getByRole("textbox", { name: /Username/i });
+    screen.getByRole("button", { name: /Continue/i });
   });
 
   it(`should return user focus to username input when input is invalid`, () => {
-    const wrapper = renderWithRouter(
+    renderWithRouter(
       Login,
       {
         loginLocations: loginLocations,
@@ -59,25 +62,22 @@ describe(`<Login />`, () => {
     );
 
     expect(
-      wrapper.getByRole("textbox", { name: /username/i })
+      screen.getByRole("textbox", { name: /username/i })
     ).toBeInTheDocument();
-    userEvent.type(wrapper.getByRole("textbox", { name: /Username/i }), "");
-    const continueButton = wrapper.getByRole("button", { name: /Continue/i });
+    userEvent.type(screen.getByRole("textbox", { name: /Username/i }), "");
+    const continueButton = screen.getByRole("button", { name: /Continue/i });
     userEvent.click(continueButton);
-    expect(wrapper.getByRole("textbox", { name: /username/i })).toHaveFocus();
-    userEvent.type(
-      wrapper.getByRole("textbox", { name: /Username/i }),
-      "yoshi"
-    );
+    expect(screen.getByRole("textbox", { name: /username/i })).toHaveFocus();
+    userEvent.type(screen.getByRole("textbox", { name: /Username/i }), "yoshi");
     userEvent.click(continueButton);
-    userEvent.type(wrapper.getByLabelText("password"), "yoshi");
-    expect(wrapper.getByLabelText(/password/i)).toHaveFocus();
+    userEvent.type(screen.getByLabelText("password"), "yoshi");
+    expect(screen.getByLabelText(/password/i)).toHaveFocus();
   });
 
   it(`makes an API request when you submit the form`, async () => {
     mockedLogin.mockReturnValue(Promise.resolve({ some: "data" }));
 
-    const wrapper = renderWithRouter(
+    renderWithRouter(
       Login,
       {
         loginLocations: loginLocations,
@@ -90,18 +90,16 @@ describe(`<Login />`, () => {
     );
 
     expect(performLogin).not.toHaveBeenCalled();
-    userEvent.type(
-      wrapper.getByRole("textbox", { name: /Username/i }),
-      "yoshi"
+    userEvent.type(screen.getByRole("textbox", { name: /Username/i }), "yoshi");
+    userEvent.click(screen.getByRole("button", { name: /Continue/i }));
+    userEvent.type(screen.getByLabelText("password"), "no-tax-fraud");
+    userEvent.click(screen.getByRole("button", { name: /submit/i }));
+    await waitFor(() =>
+      expect(performLogin).toHaveBeenCalledWith("yoshi", "no-tax-fraud")
     );
-    userEvent.click(wrapper.getByRole("button", { name: /Continue/i }));
-    userEvent.type(wrapper.getByLabelText("password"), "no-tax-fraud");
-    userEvent.click(wrapper.getByRole("button", { name: /submit/i }));
-    await wait();
-    expect(performLogin).toHaveBeenCalledWith("yoshi", "no-tax-fraud");
   });
 
-  it(`send the user to the location select page on login if there is more than one location`, async () => {
+  it(`sends the user to the location select page on login if there is more than one location`, async () => {
     let refreshUser = (user: any) => {};
     mockedLogin.mockImplementation(() => {
       refreshUser({
@@ -130,15 +128,33 @@ describe(`<Login />`, () => {
       }
     );
 
-    userEvent.type(
-      wrapper.getByRole("textbox", { name: /Username/i }),
-      "yoshi"
+    userEvent.type(screen.getByRole("textbox", { name: /Username/i }), "yoshi");
+    userEvent.click(screen.getByRole("button", { name: /Continue/i }));
+    userEvent.type(screen.getByLabelText("password"), "no-tax-fraud");
+    userEvent.click(screen.getByRole("button", { name: /submit/i }));
+    await waitFor(() =>
+      expect(wrapper.history.location.pathname).toBe("/login/location")
     );
-    userEvent.click(wrapper.getByRole("button", { name: /Continue/i }));
-    userEvent.type(wrapper.getByLabelText("password"), "no-tax-fraud");
-    userEvent.click(wrapper.getByRole("button", { name: /submit/i }));
-    await wait();
+  });
+  it("respects the logo configuration", () => {
+    const customLogoConfig = {
+      src: "https://some-image-host.com/foo.png",
+      alt: "Custom logo",
+    };
+    mockedUseConfig.mockReturnValue({
+      ...mockConfig,
+      logo: customLogoConfig,
+    });
+
+    renderWithRouter(Login, {
+      loginLocations: loginLocations,
+      isLoginEnabled: true,
+    });
+
+    const logo = screen.getByAltText(customLogoConfig.alt);
 
-    expect(wrapper.history.location.pathname).toBe("/login/location");
+    expect(screen.queryByTitle(/openmrs logo/i)).not.toBeInTheDocument();
+    expect(logo).toHaveAttribute("src", customLogoConfig.src);
+    expect(logo).toHaveAttribute("alt", customLogoConfig.alt);
   });
 });

package/src/login/login.component.tsx

@@ -123,6 +123,7 @@ const Login: React.FC<LoginProps> = ({ history, location, isLoginEnabled }) => {
     />
   ) : (
     <svg role="img" className={styles["logo"]}>
+      <title>OpenMRS logo</title>
       <use xlinkHref="#omrs-logo-full-color"></use>
     </svg>
   );
@@ -134,6 +135,10 @@ const Login: React.FC<LoginProps> = ({ history, location, isLoginEnabled }) => {
           <InlineNotification
             kind="error"
             style={{ width: "23rem" }}
+            /**
+             * This comment tells i18n to still keep the following translation keys (used as value for: errorMessage):
+             * t('invalidCredentials')
+             */
             subtitle={t(errorMessage)}
             title={t("error", "Error")}
             onClick={() => setErrorMessage("")}

package/translations/en.json

@@ -4,8 +4,8 @@
   "contactAdmin": "Contact the site administrator",
   "continue": "Continue",
   "error": "Error",
-  "invalidCredentials": "Invalid username or password",
   "found": "found",
+  "invalidCredentials": "Invalid username or password",
   "locationNotFound": "Sorry, no matching location was found.",
   "locations": "locations",
   "login": "Log in",

package/__mocks__/lodash.debounce.mock.ts

@@ -1,3 +0,0 @@
-const debounce = jest.fn((fn) => fn);
-
-export default debounce;

package/__mocks__/lodash.isEmpty.mock.ts

@@ -1,3 +0,0 @@
-const isEmpty = jest.fn((arr) => arr.length === 0);
-
-export default isEmpty;

package/__mocks__/openmrs-esm-framework.mock.tsx

@@ -1,68 +0,0 @@
-import { of } from "rxjs";
-import React from "react";
-
-export function openmrsFetch() {
-  return new Promise(() => {});
-}
-
-export function getCurrentUser() {
-  return of({ authenticated: false });
-}
-
-export function defineConfigSchema() {}
-
-export const setSessionLocation = jest.fn(() => Promise.resolve());
-
-export const validators = {
-  isBoolean: jest.fn(),
-  isString: jest.fn(),
-};
-
-export const navigate = jest.fn();
-
-export const Type = {
-  Array: "Array",
-  Boolean: "Boolean",
-  ConceptUuid: "ConceptUuid",
-  Number: "Number",
-  Object: "Object",
-  String: "String",
-  UUID: "UUID",
-};
-
-export function createErrorHandler() {
-  return function errorHandler(err) {
-    console.log(`Received error ${err}`);
-  };
-}
-
-export const openmrsComponentDecorator = jest
-  .fn()
-  .mockImplementation(() => (f) => f);
-
-export const config = {
-  provider: {
-    type: "basic",
-    loginUrl: "",
-    logoutUrl: "",
-  },
-  chooseLocation: {
-    enabled: true,
-    numberToShow: 3,
-  },
-  logo: {
-    src: null,
-    alt: "Logo",
-  },
-  links: {
-    loginSuccess: "${openmrsSpaBase}/home",
-  },
-};
-
-export function useConfig() {
-  return config;
-}
-
-export const ComponentContext = React.createContext({
-  moduleName: "fake-module-config",
-});