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

package/jest.config.js

@@ -6,6 +6,14 @@ module.exports = {
     "\\.(s?css)$": "identity-obj-proxy",
     "\\.(svg)$": "<rootDir>/__mocks__/fileMock.js",
     "lodash-es/(.*)": "lodash/$1",
+    // See https://jestjs.io/docs/upgrading-to-jest28#packagejson-exports
+    // which links to https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
+    "^dexie$": require.resolve("dexie"),
+    "^uuid$": require.resolve("uuid"),
   },
   setupFilesAfterEnv: ["<rootDir>/src/integration-tests/setup-tests.ts"],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    url: "http://localhost/",
+  },
 };

package/mock.tsx

@@ -3,6 +3,7 @@ import type {} from "@openmrs/esm-globals";
 import createStore, { Store } from "unistore";
 import { never, of } from "rxjs";
 import { interpolateUrl } from "@openmrs/esm-config";
+import { SessionStore } from "@openmrs/esm-api";
 export {
   parseDate,
   formatDate,
@@ -14,7 +15,9 @@ export {
   interpolateString,
   interpolateUrl,
   validators,
+  validator,
 } from "@openmrs/esm-config";
+export { isDesktop } from "@openmrs/esm-react-utils";
 
 window.i18next = { ...window.i18next, language: "en" };
 
@@ -50,7 +53,7 @@ export function getCurrentUser() {
   return of({ authenticated: false });
 }
 
-export const mockSessionStore = createGlobalStore("mock-session-store", {
+export const mockSessionStore = createGlobalStore<SessionStore>("mock-session-store", {
   loaded: false,
   session: null,
 });
@@ -247,12 +250,6 @@ export const useSession = jest.fn(() => ({
 
 export const useLayoutType = jest.fn(() => "desktop");
 
-export const useExtensionSlot = jest.fn(() => ({
-  extensionSlotModuleName: "",
-  attachedExtensionSlotName: "",
-  extensionIdsToRender: [],
-}));
-
 export const useExtensionSlotMeta = jest.fn(() => ({}));
 
 export const UserHasAccess = jest.fn().mockImplementation((props: any) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-framework",
-  "version": "3.4.1-pre.98",
+  "version": "4.0.1-pre.204",
   "license": "MPL-2.0",
   "browser": "dist/openmrs-esm-framework.js",
   "main": "src/index.ts",
@@ -35,18 +35,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@openmrs/esm-api": "^3.4.1-pre.98",
-    "@openmrs/esm-breadcrumbs": "^3.4.1-pre.98",
-    "@openmrs/esm-config": "^3.4.1-pre.98",
-    "@openmrs/esm-error-handling": "^3.4.1-pre.98",
-    "@openmrs/esm-extensions": "^3.4.1-pre.98",
-    "@openmrs/esm-globals": "^3.4.1-pre.98",
-    "@openmrs/esm-offline": "^3.4.1-pre.98",
-    "@openmrs/esm-react-utils": "^3.4.1-pre.98",
-    "@openmrs/esm-state": "^3.4.1-pre.98",
-    "@openmrs/esm-styleguide": "^3.4.1-pre.98",
-    "@openmrs/esm-utils": "^3.4.1-pre.98",
+    "@openmrs/esm-api": "^4.0.1-pre.204",
+    "@openmrs/esm-breadcrumbs": "^4.0.1-pre.204",
+    "@openmrs/esm-config": "^4.0.1-pre.204",
+    "@openmrs/esm-error-handling": "^4.0.1-pre.204",
+    "@openmrs/esm-extensions": "^4.0.1-pre.204",
+    "@openmrs/esm-globals": "^4.0.1-pre.204",
+    "@openmrs/esm-offline": "^4.0.1-pre.204",
+    "@openmrs/esm-react-utils": "^4.0.1-pre.204",
+    "@openmrs/esm-state": "^4.0.1-pre.204",
+    "@openmrs/esm-styleguide": "^4.0.1-pre.204",
+    "@openmrs/esm-utils": "^4.0.1-pre.204",
     "dayjs": "^1.10.7"
   },
-  "gitHead": "7cea45f5f1a9b9c6c3a9f6a151022f7d6e0da315"
+  "gitHead": "4ba2589b61d90c81eef0a21b87332b9f799f8dac"
 }

package/src/integration-tests/extension-config.test.tsx

@@ -3,8 +3,6 @@ import {
   attach,
   registerExtension,
   updateInternalExtensionStore,
-  getExtensionInternalStore,
-  getExtensionStore,
 } from "../../../esm-extensions";
 import {
   ExtensionSlot,
@@ -22,7 +20,17 @@ import {
   getExtensionSlotsConfigStore,
 } from "../../../esm-config/src";
 import { act, render, screen, waitFor } from "@testing-library/react";
-import { waitForElementToBeRemoved } from "@testing-library/dom";
+import { Person } from "@openmrs/esm-api";
+import { mockSessionStore } from "../../mock";
+
+jest.mock("@openmrs/esm-api", () => {
+  const original = jest.requireActual("@openmrs/esm-api");
+  return {
+    ...original,
+    getSessionStore: () => mockSessionStore,
+    refetchCurrentUser: jest.fn(),
+  };
+});
 
 describe("Interaction between configuration and extension systems", () => {
   beforeEach(() => {
@@ -55,9 +63,12 @@ describe("Interaction between configuration and extension systems", () => {
       moduleName: "esm-flintstone",
       featureName: "The Flintstones",
       disableTranslations: true,
-    })(() => <ExtensionSlot data-testid="slot" extensionSlotName="A slot" />);
+    })(() => <ExtensionSlot data-testid="slot" name="A slot" />);
+
     render(<App />);
+
     await waitFor(() => expect(screen.getByText("Betty")).toBeInTheDocument());
+
     const slot = screen.getByTestId("slot");
     const extensions = slot.childNodes;
     expect(extensions[0]).toHaveTextContent("Betty");
@@ -93,18 +104,15 @@ describe("Interaction between configuration and extension systems", () => {
       disableTranslations: true,
     })(() => (
       <>
-        <ExtensionSlot
-          data-testid="flintstone-slot"
-          extensionSlotName="Flintstone slot"
-        />
-        <ExtensionSlot
-          data-testid="future-slot"
-          extensionSlotName="Future slot"
-        />
+        <ExtensionSlot data-testid="flintstone-slot" name="Flintstone slot" />
+        <ExtensionSlot data-testid="future-slot" name="Future slot" />
       </>
     ));
+
     render(<App />);
+
     await screen.findAllByText(/.*Pebbles.*/);
+
     const flintstonePebbles = screen.getByTestId("flintstone-slot");
     expect(flintstonePebbles).toHaveTextContent(/Pebbles:.*Springfield/);
     const futurePebbles = screen.getByTestId("future-slot");
@@ -140,14 +148,14 @@ describe("Interaction between configuration and extension systems", () => {
       disableTranslations: true,
     })(() => (
       <>
-        <ExtensionSlot
-          data-testid="flintstone-slot"
-          extensionSlotName="Flintstone slot"
-        />
+        <ExtensionSlot data-testid="flintstone-slot" name="Flintstone slot" />
       </>
     ));
+
     render(<App />);
+
     await screen.findAllByText(/.*Dino.*/);
+
     const slot = screen.getByTestId("flintstone-slot");
     expect(slot.firstChild).toHaveTextContent(/Dino/);
     expect(slot.lastChild).toHaveTextContent(/Baby Puss/);
@@ -161,9 +169,12 @@ describe("Interaction between configuration and extension systems", () => {
       moduleName: "esm-slaghoople",
       featureName: "The Slaghooples",
       disableTranslations: true,
-    })(() => <ExtensionSlot data-testid="slot" extensionSlotName="A slot" />);
+    })(() => <ExtensionSlot data-testid="slot" name="A slot" />);
+
     render(<App />);
+
     await waitFor(() => expect(screen.getByText("Pearl")).toBeInTheDocument());
+
     act(() => {
       temporaryConfigStore.setState({
         config: {
@@ -177,6 +188,7 @@ describe("Interaction between configuration and extension systems", () => {
         },
       });
     });
+
     expect(screen.queryByText("Pearl")).not.toBeInTheDocument();
   });
 
@@ -188,12 +200,16 @@ describe("Interaction between configuration and extension systems", () => {
       moduleName: "esm-quarry",
       featureName: "The Flintstones",
       disableTranslations: true,
-    })(() => <ExtensionSlot data-testid="slot" extensionSlotName="A slot" />);
+    })(() => <ExtensionSlot data-testid="slot" name="A slot" />);
+
     render(<App />);
+
     await waitFor(() =>
       expect(screen.getByText(/Mr. Slate/)).toBeInTheDocument()
     );
+
     expect(screen.getByTestId("slot")).toHaveTextContent(/green/);
+
     act(() => {
       temporaryConfigStore.setState({
         config: {
@@ -209,8 +225,11 @@ describe("Interaction between configuration and extension systems", () => {
         },
       });
     });
+
     expect(screen.queryByText("green")).not.toBeInTheDocument();
-    expect(screen.getByTestId("slot")).toHaveTextContent(/black/);
+    waitFor(() =>
+      expect(screen.getByTestId("slot")).toHaveTextContent(/black/)
+    );
   });
 
   test("Extension config should be available in extension store", async () => {
@@ -221,7 +240,7 @@ describe("Interaction between configuration and extension systems", () => {
       const store = useExtensionStore();
       return (
         <div>
-          <ExtensionSlot data-testid="slot" extensionSlotName="A slot" />
+          <ExtensionSlot data-testid="slot" name="A slot" />
           {store.slots["A slot"].assignedExtensions.map((e) => (
             <div key={e.name}>{JSON.stringify(e.config)}</div>
           ))}
@@ -233,9 +252,13 @@ describe("Interaction between configuration and extension systems", () => {
       featureName: "The Flintstones",
       disableTranslations: true,
     })(RootComponent);
+
     render(<App />);
+
     await waitFor(() => expect(screen.getByTestId(/slot/)).toBeInTheDocument());
+
     expect(screen.getByText(/clothes/)).toHaveTextContent(/leopard/);
+
     act(() => {
       temporaryConfigStore.setState({
         config: {
@@ -251,14 +274,187 @@ describe("Interaction between configuration and extension systems", () => {
         },
       });
     });
+
     expect(screen.getByText(/clothes/)).toHaveTextContent(/tiger/);
   });
+
+  test("should not show extension when user lacks configured privilege", async () => {
+    mockSessionStore.setState({
+      loaded: true,
+      session: {
+        authenticated: true,
+        sessionId: "1",
+        user: {
+          uuid: "1",
+          display: "Non-Admin",
+          username: "nonadmin",
+          systemId: "nonadmin",
+          userProperties: {},
+          person: {} as Person,
+          privileges: [],
+          roles: [],
+          retired: false,
+          locale: "en",
+          allowedLocales: ["en"],
+        },
+      },
+    });
+
+    registerSimpleExtension("Schmoo", "esm-bedrock", true);
+    registerSimpleExtension("Wilma", "esm-flintstones", true);
+    attach("A slot", "Schmoo");
+    attach("A slot", "Wilma");
+    defineConfigSchema("esm-bedrock", {});
+    defineConfigSchema("esm-flintstones", {});
+    provide({
+      "esm-bedrock": {
+        "Display conditions": {
+          privileges: ["Yabadabadoo!"],
+        },
+      },
+    });
+    provide({
+      "esm-flintstones": {},
+    });
+
+    function RootComponent() {
+      return (
+        <div>
+          <ExtensionSlot data-testid="slot" name="A slot" />
+        </div>
+      );
+    }
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-bedrock",
+      featureName: "Bedrock",
+      disableTranslations: true,
+    })(RootComponent);
+
+    render(<App />);
+
+    await waitFor(() => expect(screen.getByTestId(/slot/)).toBeInTheDocument());
+    expect(screen.getByTestId("slot").firstChild).toHaveAttribute(
+      "data-extension-id",
+      "Wilma"
+    );
+    expect(screen.queryAllByText(/\bSchmoo\b/)).toHaveLength(0);
+  });
+
+  test("should show extension when user has configured privilege", async () => {
+    mockSessionStore.setState({
+      loaded: true,
+      session: {
+        authenticated: true,
+        sessionId: "1",
+        user: {
+          uuid: "1",
+          display: "Non-Admin",
+          username: "nonadmin",
+          systemId: "nonadmin",
+          userProperties: {},
+          person: {} as Person,
+          privileges: [{ uuid: "1", display: "Yabadabadoo!" }],
+          roles: [],
+          retired: false,
+          locale: "en",
+          allowedLocales: ["en"],
+        },
+      },
+    });
+
+    registerSimpleExtension("Schmoo", "esm-bedrock", true);
+    attach("A slot", "Schmoo");
+    defineConfigSchema("esm-bedrock", {});
+    provide({
+      "esm-bedrock": {
+        "Display conditions": {
+          privileges: ["Yabadabadoo!"],
+        },
+      },
+    });
+
+    function RootComponent() {
+      return (
+        <div>
+          <ExtensionSlot data-testid="slot" name="A slot" />
+        </div>
+      );
+    }
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-bedrock",
+      featureName: "Bedrock",
+      disableTranslations: true,
+    })(RootComponent);
+
+    render(<App />);
+
+    await waitFor(() => expect(screen.getByTestId(/slot/)).toBeInTheDocument());
+    expect(screen.getByTestId("slot").firstChild).toHaveAttribute(
+      "data-extension-id",
+      "Schmoo"
+    );
+  });
+
+  test("should only show extensions users have default privilege for", async () => {
+    mockSessionStore.setState({
+      loaded: true,
+      session: {
+        authenticated: true,
+        sessionId: "1",
+        user: {
+          uuid: "1",
+          display: "Non-Admin",
+          username: "nonadmin",
+          systemId: "nonadmin",
+          userProperties: {},
+          person: {} as Person,
+          privileges: [{ uuid: "1", display: "YOWTCH!" }],
+          roles: [],
+          retired: false,
+          locale: "en",
+          allowedLocales: ["en"],
+        },
+      },
+    });
+
+    registerSimpleExtension("Schmoo", "esm-bedrock", true, "Yabadabadoo!");
+    registerSimpleExtension("Wilma", "esm-flintstones", true, "YOWTCH!");
+    attach("A slot", "Schmoo");
+    attach("A slot", "Wilma");
+    defineConfigSchema("esm-bedrock", {});
+    defineConfigSchema("esm-flintstones", {});
+    provide({ "esm-bedrock": {} });
+    provide({ "esm-flintstones": {} });
+
+    function RootComponent() {
+      return (
+        <div>
+          <ExtensionSlot data-testid="slot" name="A slot" />
+        </div>
+      );
+    }
+    const App = openmrsComponentDecorator({
+      moduleName: "esm-bedrock",
+      featureName: "Bedrock",
+      disableTranslations: true,
+    })(RootComponent);
+
+    render(<App />);
+
+    await waitFor(() => expect(screen.getByTestId(/slot/)).toBeInTheDocument());
+    expect(screen.getByTestId("slot").firstChild).toHaveAttribute(
+      "data-extension-id",
+      "Wilma"
+    );
+    expect(screen.queryAllByText(/\bSchmoo\b/)).toHaveLength(0);
+  });
 });
 
 function registerSimpleExtension(
   name: string,
   moduleName: string,
-  takesConfig: boolean = false
+  takesConfig: boolean = false,
+  privileges?: string | string[]
 ) {
   const SimpleComponent = () => <div>{name}</div>;
   const ConfigurableComponent = () => {
@@ -281,5 +477,6 @@ function registerSimpleExtension(
       }
     ),
     meta: {},
+    privileges,
   });
 }

package/typedoc.json

@@ -2,6 +2,6 @@
   "out": "docs",
   "readme": "none",
   "excludeInternal": true,
-  "gitRevision": "master",
+  "gitRevision": "main",
   "entryDocument": "API.md"
 }