@openmrs/esm-react-utils 3.4.1-pre.98 → 4.0.1-pre.204

package/src/extensions.test.tsx

@@ -0,0 +1,276 @@
+import React, { useCallback, useReducer } from "react";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import {
+  attach,
+  ConnectedExtension,
+  getExtensionNameFromId,
+  registerExtension,
+  updateInternalExtensionStore,
+} from "@openmrs/esm-extensions";
+import {
+  getSyncLifecycle,
+  Extension,
+  ExtensionSlot,
+  openmrsComponentDecorator,
+  useExtensionSlotMeta,
+  ExtensionData,
+} from ".";
+import userEvent from "@testing-library/user-event";
+
+// For some reason in the text context `isEqual` always returns true
+// when using the import substitution in jest.config.js. Here's a custom
+// mock.
+jest.mock(
+  "lodash-es/isEqual",
+  () => (a, b) => JSON.stringify(a) == JSON.stringify(b)
+);
+
+describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
+  beforeEach(() => {
+    updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
+  });
+
+  test("Extension receives state changes passed through (not using <Extension>)", async () => {
+    function EnglishExtension({ suffix }) {
+      return <div>English{suffix}</div>;
+    }
+    registerSimpleExtension("English", "esm-languages-app", EnglishExtension);
+    attach("Box", "English");
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-languages-app",
+      featureName: "Languages",
+      disableTranslations: true,
+    })(() => {
+      const [suffix, toggleSuffix] = useReducer(
+        (suffix) => (suffix == "!" ? "?" : "!"),
+        "!"
+      );
+      return (
+        <div>
+          <ExtensionSlot name="Box" state={{ suffix }} />
+          <button onClick={toggleSuffix}>Toggle suffix</button>
+        </div>
+      );
+    });
+    render(<App />);
+
+    await waitFor(() =>
+      expect(screen.getByText(/English/)).toBeInTheDocument()
+    );
+    expect(screen.getByText(/English/)).toHaveTextContent("English!");
+    userEvent.click(screen.getByText("Toggle suffix"));
+    await waitFor(() =>
+      expect(screen.getByText(/English/)).toHaveTextContent("English?")
+    );
+  });
+
+  test("Extension receives state changes (using <Extension>)", async () => {
+    function HaitianCreoleExtension({ suffix }) {
+      return <div>Haitian Creole{suffix}</div>;
+    }
+    registerSimpleExtension(
+      "Haitian",
+      "esm-languages-app",
+      HaitianCreoleExtension
+    );
+    attach("Box", "Haitian");
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-languages-app",
+      featureName: "Languages",
+      disableTranslations: true,
+    })(() => {
+      const [suffix, toggleSuffix] = useReducer(
+        (suffix) => (suffix == "!" ? "?" : "!"),
+        "!"
+      );
+
+      return (
+        <div>
+          <ExtensionSlot name="Box">
+            {suffix}
+            <Extension state={{ suffix }} />
+          </ExtensionSlot>
+          <button onClick={toggleSuffix}>Toggle suffix</button>
+        </div>
+      );
+    });
+    render(<App />);
+
+    await waitFor(() =>
+      expect(screen.getByText(/Haitian/)).toBeInTheDocument()
+    );
+    expect(screen.getByText(/Haitian/)).toHaveTextContent("Haitian Creole!");
+    userEvent.click(screen.getByText("Toggle suffix"));
+    await waitFor(() =>
+      expect(screen.getByText(/Haitian/)).toHaveTextContent("Haitian Creole?")
+    );
+  });
+
+  test("ExtensionSlot throws error if both state and children provided", () => {
+    const App = () => (
+      <ExtensionSlot name="Box" state={{ color: "red" }}>
+        <Extension />
+      </ExtensionSlot>
+    );
+    expect(() => render(<App />)).toThrowError(
+      expect.objectContaining({
+        message: expect.stringMatching(/children.*state/),
+      })
+    );
+  });
+
+  test("Extension Slot receives meta", async () => {
+    registerSimpleExtension("Spanish", "esm-languages-app", undefined, {
+      code: "es",
+    });
+    attach("Box", "Spanish");
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-languages-app",
+      featureName: "Languages",
+      disableTranslations: true,
+    })(() => {
+      const metas = useExtensionSlotMeta("Box");
+      const wrapItem = useCallback(
+        (slot: React.ReactNode, extension: ExtensionData) => {
+          return (
+            <div>
+              <h1>
+                {metas[getExtensionNameFromId(extension.extensionId)].code}
+              </h1>
+              {slot}
+            </div>
+          );
+        },
+        [metas]
+      );
+      return (
+        <div>
+          <ExtensionSlot name="Box">
+            <Extension wrap={wrapItem} />
+          </ExtensionSlot>
+        </div>
+      );
+    });
+    render(<App />);
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading")).toBeInTheDocument()
+    );
+    expect(screen.getByRole("heading")).toHaveTextContent("es");
+    await waitFor(() =>
+      expect(screen.getByText("Spanish")).toBeInTheDocument()
+    );
+  });
+
+  test("Both meta and state can be used at the same time", async () => {
+    function SwahiliExtension({ suffix }) {
+      return <div>Swahili{suffix}</div>;
+    }
+    registerSimpleExtension("Swahili", "esm-languages-app", SwahiliExtension, {
+      code: "sw",
+    });
+    attach("Box", "Swahili");
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-languages-app",
+      featureName: "Languages",
+      disableTranslations: true,
+    })(() => {
+      const [suffix, toggleSuffix] = useReducer(
+        (suffix) => (suffix == "!" ? "?" : "!"),
+        "!"
+      );
+      const metas = useExtensionSlotMeta("Box");
+      const wrapItem = useCallback(
+        (slot: React.ReactNode, extension: ExtensionData) => {
+          return (
+            <div>
+              <h1>
+                {metas[getExtensionNameFromId(extension.extensionId)].code}
+              </h1>
+              {slot}
+            </div>
+          );
+        },
+        [metas]
+      );
+      return (
+        <div>
+          <ExtensionSlot name="Box">
+            <Extension wrap={wrapItem} state={{ suffix }} />
+          </ExtensionSlot>
+          <button onClick={toggleSuffix}>Toggle suffix</button>
+        </div>
+      );
+    });
+    render(<App />);
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading")).toBeInTheDocument()
+    );
+    expect(screen.getByRole("heading")).toHaveTextContent("sw");
+    await waitFor(() =>
+      expect(screen.getByText(/Swahili/)).toHaveTextContent("Swahili!")
+    );
+    userEvent.click(screen.getByText("Toggle suffix"));
+    await waitFor(() =>
+      expect(screen.getByText(/Swahili/)).toHaveTextContent("Swahili?")
+    );
+  });
+
+  test("Extension Slot renders function children", async () => {
+    registerSimpleExtension("Urdu", "esm-languages-app", undefined, {
+      code: "urd",
+    });
+    registerSimpleExtension("Hindi", "esm-languages-app", undefined, {
+      code: "hi",
+    });
+    attach("Box", "Urdu");
+    attach("Box", "Hindi");
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-languages-app",
+      featureName: "Languages",
+      disableTranslations: true,
+    })(() => {
+      return (
+        <div>
+          <ExtensionSlot name="Box">
+            {(extension: ConnectedExtension) => (
+              <div data-testid={extension.name}>
+                <h2>{extension.meta.code}</h2>
+                <Extension />
+              </div>
+            )}
+          </ExtensionSlot>
+        </div>
+      );
+    });
+    render(<App />);
+
+    await waitFor(() => expect(screen.getByTestId("Urdu")).toBeInTheDocument());
+    expect(
+      within(screen.getByTestId("Urdu")).getByRole("heading")
+    ).toHaveTextContent("urd");
+    expect(
+      within(screen.getByTestId("Hindi")).getByRole("heading")
+    ).toHaveTextContent("hi");
+  });
+});
+
+function registerSimpleExtension(
+  name: string,
+  moduleName: string,
+  Component?: React.ComponentType<any>,
+  meta: object = {}
+) {
+  const SimpleComponent = () => <div>{name}</div>;
+  registerExtension({
+    name,
+    moduleName,
+    load: getSyncLifecycle(Component ?? SimpleComponent, {
+      moduleName,
+      featureName: moduleName,
+      disableTranslations: true,
+    }),
+    meta,
+  });
+}

package/src/openmrsComponentDecorator.tsx

@@ -18,6 +18,7 @@ const defaultOpts = {
 interface I18nextLoadNamespaceProps {
   forceUpdate(): void;
   ns: string;
+  children?: React.ReactNode;
 }
 
 const I18nextLoadNamespace: React.FC<I18nextLoadNamespaceProps> = (props) => {
@@ -80,7 +81,7 @@ export function openmrsComponentDecorator(userOpts: ComponentDecoratorOptions) {
   const opts = Object.assign({}, defaultOpts, userOpts);
 
   return function decorateComponent(
-    Comp: React.ComponentType
+    Comp: React.ComponentType<any>
   ): React.ComponentType<any> {
     return class OpenmrsReactComponent extends React.Component<
       OpenmrsReactComponentProps,

package/src/public.ts

@@ -1,4 +1,4 @@
-export { ExtensionData } from "./ComponentContext";
+export { type ExtensionData } from "./ComponentContext";
 export * from "./ConfigurableLink";
 export * from "./createUseStore";
 export * from "./Extension";
@@ -12,7 +12,6 @@ export * from "./useConnectedExtensions";
 export * from "./useConnectivity";
 export * from "./usePatient";
 export * from "./useCurrentPatient";
-export * from "./useExtensionSlot";
 export * from "./useExtensionSlotMeta";
 export * from "./useExtensionStore";
 export * from "./useLayoutType";

package/src/setup-tests.js

@@ -1,3 +1,5 @@
+import "@testing-library/jest-dom/extend-expect";
+
 window.System = {
   import: (name) => import(name),
   resolve: jest.fn().mockImplementation(() => {

package/src/useAssignedExtensionIds.ts

@@ -1,7 +1,7 @@
 /** @module @category Extension */
 import { useEffect, useState } from "react";
 import { getExtensionStore } from "@openmrs/esm-extensions";
-import { isEqual } from "lodash";
+import isEqual from "lodash-es/isEqual";
 
 /**
  * Gets the assigned extension ids for a given extension slot name.

package/src/useAssignedExtensions.ts

@@ -5,7 +5,7 @@ import {
   ExtensionStore,
   getExtensionStore,
 } from "@openmrs/esm-extensions";
-import { isEqual } from "lodash";
+import isEqual from "lodash/isEqual";
 
 /**
  * Gets the assigned extensions for a given extension slot name.

package/src/useConfig.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, cleanup, screen, waitFor } from "@testing-library/react";
+import { render, cleanup, screen, waitFor, act } from "@testing-library/react";
 import {
   defineConfigSchema,
   temporaryConfigStore,
@@ -26,7 +26,6 @@ function clearConfig() {
 
 describe(`useConfig in root context`, () => {
   afterEach(clearConfig);
-  afterEach(cleanup);
 
   it(`can return config as a react hook`, async () => {
     defineConfigSchema("foo-module", {
@@ -103,9 +102,11 @@ describe(`useConfig in root context`, () => {
       expect(screen.findByText("The first thing")).toBeTruthy()
     );
 
-    temporaryConfigStore.setState({
-      config: { "foo-module": { thing: "A new thing" } },
-    });
+    act(() =>
+      temporaryConfigStore.setState({
+        config: { "foo-module": { thing: "A new thing" } },
+      })
+    );
 
     await waitFor(() => expect(screen.findByText("A new thing")).toBeTruthy());
   });
@@ -273,7 +274,7 @@ describe(`useConfig in an extension`, () => {
     );
 
     const newConfig = { "ext-module": { thing: "A new thing" } };
-    temporaryConfigStore.setState({ config: newConfig });
+    act(() => temporaryConfigStore.setState({ config: newConfig }));
 
     await waitFor(() => expect(screen.findByText("A new thing")).toBeTruthy());
 
@@ -290,7 +291,7 @@ describe(`useConfig in an extension`, () => {
         },
       },
     };
-    temporaryConfigStore.setState({ config: newConfig2 });
+    act(() => temporaryConfigStore.setState({ config: newConfig2 }));
 
     await waitFor(() =>
       expect(screen.findByText("Yet another thing")).toBeTruthy()

package/src/useConfig.ts

@@ -4,11 +4,11 @@ import {
   getConfigStore,
   getExtensionsConfigStore,
   ConfigStore,
+  ConfigObject,
   ExtensionsConfigStore,
   getExtensionConfigFromStore,
 } from "@openmrs/esm-config";
 import { ComponentContext, ExtensionData } from "./ComponentContext";
-import { ConfigObject } from "@openmrs/esm-config";
 import { Store } from "unistore";
 import isEqual from "lodash-es/isEqual";
 

package/src/useLayoutType.ts

@@ -1,7 +1,7 @@
 /** @module @category UI */
 import { useEffect, useState } from "react";
 
-export type LayoutType = "tablet" | "phone" | "desktop";
+export type LayoutType = "phone" | "tablet" | "small-desktop" | "large-desktop";
 
 function getLayout() {
   let layout: LayoutType = "tablet";
@@ -11,8 +11,11 @@ function getLayout() {
       case "omrs-breakpoint-lt-tablet":
         layout = "phone";
         break;
+      case "omrs-breakpoint-gt-small-desktop":
+        layout = "large-desktop";
+        break;
       case "omrs-breakpoint-gt-tablet":
-        layout = "desktop";
+        layout = "small-desktop";
         break;
     }
   });
@@ -33,3 +36,6 @@ export function useLayoutType() {
 
   return type;
 }
+
+export const isDesktop = (layout: LayoutType) =>
+  layout === "small-desktop" || layout === "large-desktop";