@openmrs/esm-react-utils 4.0.0-pre.0 → 4.0.1-pre.206

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/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/useSession.tsx

@@ -98,11 +98,11 @@ export function useSession(): Session {
   if (!result) {
     if (promise) {
       console.warn(
-        "useSessionUser is in an unexpected state. Attempting to recover."
+        "useSession is in an unexpected state. Attempting to recover."
       );
       throw promise;
     } else {
-      throw Error("useSessionUser is in an invalid state.");
+      throw Error("useSession is in an invalid state.");
     }
   }
   return result;

package/src/useVisit.ts

@@ -7,6 +7,7 @@ import {
 import useSWR from "swr";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
+import { useMemo } from "react";
 
 dayjs.extend(isToday);
 
@@ -15,6 +16,7 @@ interface VisitReturnType {
   mutate: () => void;
   isValidating: boolean;
   currentVisit: Visit | null;
+  isLoading: boolean;
 }
 
 /**
@@ -28,15 +30,26 @@ export function useVisit(patientUuid: string): VisitReturnType {
   const { data, error, mutate, isValidating } = useSWR<{
     data: { results: Array<Visit> };
   }>(
-    `/ws/rest/v1/visit?patient=${patientUuid}&v=${defaultVisitCustomRepresentation}&includeInactive=false`,
+    patientUuid
+      ? `/ws/rest/v1/visit?patient=${patientUuid}&v=${defaultVisitCustomRepresentation}&includeInactive=false`
+      : null,
     openmrsFetch
   );
 
-  const currentVisit =
-    data?.data.results.find(
-      (visit) =>
-        visit.stopDatetime === null && dayjs(visit.startDatetime).isToday()
-    ) ?? null;
+  const currentVisit = useMemo(
+    () =>
+      data?.data.results.find(
+        (visit) =>
+          visit.stopDatetime === null && dayjs(visit.startDatetime).isToday()
+      ) ?? null,
+    [data?.data.results]
+  );
 
-  return { error, mutate, isValidating, currentVisit };
+  return {
+    error,
+    mutate,
+    isValidating,
+    currentVisit,
+    isLoading: !data && !error,
+  };
 }

package/.turbo/turbo-lint.log

@@ -1,2 +0,0 @@
-@openmrs/esm-react-utils:lint: cache hit, replaying output b4ee45d65c7c5ccf
-@openmrs/esm-react-utils:lint: $ eslint src

package/.turbo/turbo-test.log

@@ -1,45 +0,0 @@
-@openmrs/esm-react-utils:test: cache hit, replaying output c183110feface1ab
-@openmrs/esm-react-utils:test: $ jest --passWithNoTests
-@openmrs/esm-react-utils:test: PASS src/useOnClickOutside.test.tsx
-@openmrs/esm-react-utils:test: PASS src/useSession.test.tsx
-@openmrs/esm-react-utils:test: PASS src/openmrsComponentDecorator.test.tsx (5.18 s)
-@openmrs/esm-react-utils:test: PASS src/useConfig.test.tsx (6 s)
-@openmrs/esm-react-utils:test:   ● Console
-@openmrs/esm-react-utils:test: 
-@openmrs/esm-react-utils:test:     console.error
-@openmrs/esm-react-utils:test:       Warning: An update to RenderConfig inside a test was not wrapped in act(...).
-@openmrs/esm-react-utils:test:       
-@openmrs/esm-react-utils:test:       When testing, code that causes React state updates should be wrapped into act(...):
-@openmrs/esm-react-utils:test:       
-@openmrs/esm-react-utils:test:       act(() => {
-@openmrs/esm-react-utils:test:         /* fire events that update state */
-@openmrs/esm-react-utils:test:       });
-@openmrs/esm-react-utils:test:       /* assert on the output */
-@openmrs/esm-react-utils:test:       
-@openmrs/esm-react-utils:test:       This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
-@openmrs/esm-react-utils:test:           at RenderConfig (/home/brandon/Code/pih/mf/openmrs-esm-core/packages/framework/esm-react-utils/src/useConfig.test.tsx:18:29)
-@openmrs/esm-react-utils:test:           at Suspense
-@openmrs/esm-react-utils:test: 
-@openmrs/esm-react-utils:test:       85 |     return store?.subscribe((state) => {
-@openmrs/esm-react-utils:test:       86 |       if (state.loaded && state.config) {
-@openmrs/esm-react-utils:test:     > 87 |         setState(state.config);
-@openmrs/esm-react-utils:test:          |         ^
-@openmrs/esm-react-utils:test:       88 |       }
-@openmrs/esm-react-utils:test:       89 |     });
-@openmrs/esm-react-utils:test:       90 |   }, [store]);
-@openmrs/esm-react-utils:test: 
-@openmrs/esm-react-utils:test:       at printWarning (../../../node_modules/react-dom/cjs/react-dom.development.js:86:30)
-@openmrs/esm-react-utils:test:       at error (../../../node_modules/react-dom/cjs/react-dom.development.js:60:7)
-@openmrs/esm-react-utils:test:       at warnIfUpdatesNotWrappedWithActDEV (../../../node_modules/react-dom/cjs/react-dom.development.js:27543:9)
-@openmrs/esm-react-utils:test:       at scheduleUpdateOnFiber (../../../node_modules/react-dom/cjs/react-dom.development.js:25404:5)
-@openmrs/esm-react-utils:test:       at dispatchSetState (../../../node_modules/react-dom/cjs/react-dom.development.js:17389:16)
-@openmrs/esm-react-utils:test:       at Array.setState (src/useConfig.ts:87:9)
-@openmrs/esm-react-utils:test:       at Object.e (../../../node_modules/unistore/src/index.js:16:19)
-@openmrs/esm-react-utils:test: 
-@openmrs/esm-react-utils:test: PASS src/ConfigurableLink.test.tsx (9.494 s)
-@openmrs/esm-react-utils:test: 
-@openmrs/esm-react-utils:test: Test Suites: 5 passed, 5 total
-@openmrs/esm-react-utils:test: Tests:       19 passed, 19 total
-@openmrs/esm-react-utils:test: Snapshots:   0 total
-@openmrs/esm-react-utils:test: Time:        13.693 s
-@openmrs/esm-react-utils:test: Ran all test suites.