(test) Enhancements to tests in the login app

packages/apps/esm-login-app/__mocks__/config.mock.ts

@@ -0,0 +1,18 @@
+export const mockConfig = {
+  provider: {
+    type: "basic",
+    loginUrl: "",
+    logoutUrl: "",
+  },
+  chooseLocation: {
+    enabled: true,
+    numberToShow: 3,
+  },
+  logo: {
+    src: null,
+    alt: "Logo",
+  },
+  links: {
+    loginSuccess: "${openmrsSpaBase}/home",
+  },
+};

packages/apps/esm-login-app/jest.config.js

@@ -5,11 +5,9 @@ module.exports = {
   moduleNameMapper: {
     "^@carbon/icons-react/es/(.*)$": "@carbon/icons-react/lib/$1",
     "^carbon-components-react/es/(.*)$": "carbon-components-react/lib/$1",
-    "@openmrs/esm-framework":
-      "<rootDir>/__mocks__/openmrs-esm-framework.mock.tsx",
+    "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
     "\\.(s?css)$": "identity-obj-proxy",
-    "lodash-es/debounce": "<rootDir>/__mocks__/lodash.debounce.mock.ts",
-    "lodash-es/isEmpty": "<rootDir>/__mocks__/lodash.isEmpty.mock.ts",
+    "^lodash-es/(.*)$": "lodash/$1",
   },
   setupFiles: ["<rootDir>/src/setup-tests.js"],
 };

packages/apps/esm-login-app/src/change-location-link/change-location-link.component.test.tsx

@@ -20,12 +20,14 @@ describe("<ChangeLocationLink/>", () => {
     );
   });
 
-  it("should display the change link", async () => {
+  it("should display the `Change location` link", async () => {
     const changeLocationButton = await screen.findByRole("button", {
       name: /Change/i,
     });
+
     fireEvent.click(changeLocationButton);
-    expect(navigate).toHaveBeenCalledWith({
+
+    expect(navigateMock).toHaveBeenCalledWith({
       to: "${openmrsSpaBase}/login/location?returnToUrl=/openmrs/spa/home",
     });
   });

packages/apps/esm-login-app/src/choose-location/choose-location.component.test.tsx

@@ -1,14 +1,14 @@
 import "@testing-library/jest-dom";
-import { act } from "react-dom/test-utils";
-import { cleanup, wait } from "@testing-library/react";
-import { navigate } from "@openmrs/esm-framework";
+import { waitFor } from "@testing-library/react";
+import { navigate, useConfig } from "@openmrs/esm-framework";
 import { queryLocations } from "./choose-location.resource";
+import { mockConfig } from "../../__mocks__/config.mock";
 import ChooseLocation from "./choose-location.component";
 import renderWithRouter from "../test-helpers/render-with-router";
 
 const navigateMock = navigate as jest.Mock;
-
-const { config } = require("@openmrs/esm-framework");
+const mockedQueryLocations = queryLocations as jest.Mock;
+const mockedUseConfig = useConfig as jest.Mock;
 
 jest.mock("../CurrentUserContext", () => ({
   useCurrentUser() {
@@ -19,19 +19,21 @@ jest.mock("../CurrentUserContext", () => ({
 }));
 
 jest.mock("./choose-location.resource.ts", () => ({
-  queryLocations: jest.fn(() =>
-    Promise.resolve([
-      {
-        resource: {
-          id: "abc",
-          name: "foo",
-        },
+  queryLocations: jest.fn().mockResolvedValue([
+    {
+      resource: {
+        id: "abc",
+        name: "foo",
       },
-    ])
-  ),
+    },
+  ]),
 }));
 
 describe(`<ChooseLocation />`, () => {
+  beforeEach(() => {
+    mockedUseConfig.mockReturnValue(mockConfig);
+  });
+
   afterEach(() => {
     navigateMock.mockClear();
   });
@@ -42,99 +44,117 @@ describe(`<ChooseLocation />`, () => {
         referrer: "/home/patient-search",
       },
     };
-    cleanup();
+
     renderWithRouter(ChooseLocation, {
       location: locationMock,
       isLoginEnabled: true,
     });
-    await act(wait);
-    expect(navigate).toHaveBeenCalledWith({
-      to: "${openmrsSpaBase}" + locationMock.state.referrer,
-    });
+
+    await waitFor(() =>
+      expect(navigate).toHaveBeenCalledWith({
+        to: "${openmrsSpaBase}" + locationMock.state.referrer,
+      })
+    );
   });
 
   it(`should set location and skip location select page if there is exactly one location`, async () => {
-    cleanup();
     renderWithRouter(ChooseLocation, { isLoginEnabled: true });
-    await act(wait);
-    expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/home" });
+
+    await waitFor(() =>
+      expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/home" })
+    );
   });
 
   it(`should set location and skip location select page if there is no location`, async () => {
-    cleanup();
-    (queryLocations as any).mockImplementationOnce(() => Promise.resolve([]));
+    mockedQueryLocations.mockResolvedValueOnce([]);
+
     renderWithRouter(ChooseLocation, { isLoginEnabled: true });
-    await act(wait);
-    expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/home" });
+
+    await waitFor(() =>
+      expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/home" })
+    );
   });
 
   it(`should show the location picker when multiple locations exist`, async () => {
-    cleanup();
-    (queryLocations as any).mockImplementationOnce(() =>
-      Promise.resolve([
-        {
-          resource: {
-            id: "abc",
-            name: "foo",
-          },
+    mockedQueryLocations.mockResolvedValueOnce([
+      {
+        resource: {
+          id: "abc",
+          name: "foo",
         },
-        {
-          resource: {
-            id: "def",
-            name: "ghi",
-          },
+      },
+      {
+        resource: {
+          id: "def",
+          name: "ghi",
         },
-      ])
-    );
+      },
+    ]);
+
     renderWithRouter(ChooseLocation, { isLoginEnabled: true });
-    await act(wait);
-    expect(navigate).not.toHaveBeenCalled();
+
+    await waitFor(() => expect(navigate).not.toHaveBeenCalled());
   });
 
   it(`should not show the location picker when disabled`, async () => {
-    cleanup();
-    config.chooseLocation.enabled = false;
-    (queryLocations as any).mockImplementationOnce(() =>
-      Promise.resolve([
-        {
-          resource: {
-            id: "abc",
-            name: "foo",
-          },
+    mockedUseConfig.mockReturnValue({
+      ...mockConfig,
+      chooseLocation: {
+        enabled: false,
+      },
+    });
+
+    mockedQueryLocations.mockResolvedValueOnce([
+      {
+        resource: {
+          id: "abc",
+          name: "foo",
         },
-        {
-          resource: {
-            id: "def",
-            name: "ghi",
-          },
+      },
+      {
+        resource: {
+          id: "def",
+          name: "ghi",
         },
-      ])
+      },
+    ]);
+
+    renderWithRouter(ChooseLocation, { isLoginEnabled: true });
+
+    await waitFor(() =>
+      expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/home" })
     );
-    const wrapper = renderWithRouter(ChooseLocation, { isLoginEnabled: true });
-    await act(wait);
-    expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/home" });
   });
 
   it(`should redirect to custom path if configured`, async () => {
-    cleanup();
-    config.links.loginSuccess = "${openmrsSpaBase}/foo";
-    const wrapper = renderWithRouter(ChooseLocation, { isLoginEnabled: true });
-    await act(wait);
-    expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/foo" });
+    mockedUseConfig.mockReturnValue({
+      ...mockConfig,
+      links: {
+        loginSuccess: "${openmrsSpaBase}/foo",
+      },
+    });
+
+    renderWithRouter(ChooseLocation, { isLoginEnabled: true });
+
+    await waitFor(() =>
+      expect(navigate).toHaveBeenCalledWith({ to: "${openmrsSpaBase}/foo" })
+    );
   });
 
   it(`should redirect back to returnUrl when provided`, async () => {
     const locationMock = {
       search: "?returnToUrl=/openmrs/spa/home",
     };
-    cleanup();
+
     renderWithRouter(ChooseLocation, {
       location: locationMock,
       isLoginEnabled: true,
     });
-    await act(wait);
-    expect(navigate).toHaveBeenCalledWith({
-      to: "/openmrs/spa/home",
-    });
+
+    await waitFor(() =>
+      expect(navigate).toHaveBeenCalledWith({
+        to: "/openmrs/spa/home",
+      })
+    );
   });
 });