@openmrs/esm-framework 8.0.1-pre.3439 → 8.0.1-pre.3457

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-framework",
-  "version": "8.0.1-pre.3439",
+  "version": "8.0.1-pre.3457",
   "license": "MPL-2.0",
   "type": "module",
   "module": "dist/openmrs-esm-framework.js",
@@ -59,24 +59,24 @@
     "access": "public"
   },
   "dependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3439",
-    "@openmrs/esm-config": "8.0.1-pre.3439",
-    "@openmrs/esm-context": "8.0.1-pre.3439",
-    "@openmrs/esm-dynamic-loading": "8.0.1-pre.3439",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3439",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3439",
-    "@openmrs/esm-expression-evaluator": "8.0.1-pre.3439",
-    "@openmrs/esm-extensions": "8.0.1-pre.3439",
-    "@openmrs/esm-feature-flags": "8.0.1-pre.3439",
-    "@openmrs/esm-globals": "8.0.1-pre.3439",
-    "@openmrs/esm-navigation": "8.0.1-pre.3439",
-    "@openmrs/esm-offline": "8.0.1-pre.3439",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3439",
-    "@openmrs/esm-routes": "8.0.1-pre.3439",
-    "@openmrs/esm-state": "8.0.1-pre.3439",
-    "@openmrs/esm-styleguide": "8.0.1-pre.3439",
-    "@openmrs/esm-translations": "8.0.1-pre.3439",
-    "@openmrs/esm-utils": "8.0.1-pre.3439"
+    "@openmrs/esm-api": "8.0.1-pre.3457",
+    "@openmrs/esm-config": "8.0.1-pre.3457",
+    "@openmrs/esm-context": "8.0.1-pre.3457",
+    "@openmrs/esm-dynamic-loading": "8.0.1-pre.3457",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3457",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3457",
+    "@openmrs/esm-expression-evaluator": "8.0.1-pre.3457",
+    "@openmrs/esm-extensions": "8.0.1-pre.3457",
+    "@openmrs/esm-feature-flags": "8.0.1-pre.3457",
+    "@openmrs/esm-globals": "8.0.1-pre.3457",
+    "@openmrs/esm-navigation": "8.0.1-pre.3457",
+    "@openmrs/esm-offline": "8.0.1-pre.3457",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3457",
+    "@openmrs/esm-routes": "8.0.1-pre.3457",
+    "@openmrs/esm-state": "8.0.1-pre.3457",
+    "@openmrs/esm-styleguide": "8.0.1-pre.3457",
+    "@openmrs/esm-translations": "8.0.1-pre.3457",
+    "@openmrs/esm-utils": "8.0.1-pre.3457"
   },
   "peerDependencies": {
     "dayjs": "1.x",
@@ -89,7 +89,7 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/typedoc-plugin-file-categories": "8.0.1-pre.3439",
+    "@openmrs/typedoc-plugin-file-categories": "8.0.1-pre.3457",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "concurrently": "^9.1.2",

package/setup-tests.ts

@@ -1,12 +1,33 @@
-import { afterEach, vi } from 'vitest';
+import { afterEach } from 'vitest';
 import type {} from '@openmrs/esm-globals';
 import '@testing-library/jest-dom/vitest';
 import { cleanup } from '@testing-library/react';
 
+// Configure React's act() environment for Vitest
+// See: https://github.com/testing-library/react-testing-library/issues/1061
+// Store the actual value in a variable to avoid infinite recursion
+let actEnvironment = true;
+
+Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+  get() {
+    return actEnvironment;
+  },
+  set(value) {
+    actEnvironment = value;
+    if (typeof window !== 'undefined' && globalThis !== window) {
+      window.IS_REACT_ACT_ENVIRONMENT = value;
+    }
+  },
+});
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 window.openmrsBase = '/openmrs';
 window.spaBase = '/spa';
 window.getOpenmrsSpaBase = () => '/openmrs/spa/';
 const { getComputedStyle } = window;
 window.getComputedStyle = (elt) => getComputedStyle(elt);
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,316 @@
+/* eslint-disable */
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { type Person } from '@openmrs/esm-api';
+import { mockSessionStore } from '@openmrs/esm-api/mock';
+import { attach, registerExtension, updateInternalExtensionStore } from '../../../esm-extensions';
+import { ExtensionSlot, getSyncLifecycle, openmrsComponentDecorator, useConfig } from '../../../esm-react-utils/src';
+import {
+  configInternalStore,
+  defineConfigSchema,
+  getExtensionSlotsConfigStore,
+  getExtensionsConfigStore,
+  provide,
+  registerModuleLoad,
+  resetConfigSystem,
+  temporaryConfigStore,
+} from '../../../esm-config/src';
+
+vi.mock('@openmrs/esm-api', async () => {
+  const original = await import('@openmrs/esm-api');
+  return {
+    ...original,
+    sessionStore: mockSessionStore,
+    refetchCurrentUser: vi.fn(),
+  };
+});
+
+/**
+ * Expression evaluation tests
+ *
+ * These tests are in a separate file due to test isolation issues. When run with other
+ * extension/config tests, there is accumulation of state/subscriptions that causes infinite
+ * update loops. The tests pass when run individually or in this isolated file.
+ *
+ * Root cause: Even with subscription cleanup (resetConfigSystem) and deep equality checks,
+ * running these tests alongside other tests that manipulate the config system creates
+ * conditions where store updates don't settle. This is a test environment issue, not a
+ * production code bug - the functionality works correctly in isolation and in production.
+ */
+describe('Expression evaluation in extension display conditions', () => {
+  beforeEach(() => {
+    temporaryConfigStore.setState({ config: {} });
+    configInternalStore.setState({ providedConfigs: [], schemas: {}, moduleLoaded: {} });
+    mockSessionStore.setState({});
+    getExtensionSlotsConfigStore().setState({ slots: {} });
+    getExtensionsConfigStore().setState({ configs: {} });
+    updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
+    resetConfigSystem();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should show extension when the expression evalutes to true', async () => {
+    const promise = Promise.resolve();
+
+    registerSimpleExtension('Schmoo', 'esm-bedrock', true);
+    attach('A slot', 'Schmoo');
+    defineConfigSchema('esm-bedrock', {});
+    registerModuleLoad('esm-bedrock');
+    provide({
+      'esm-bedrock': {
+        'Display conditions': {
+          expression: 'true',
+        },
+      },
+    });
+
+    function RootComponent() {
+      return (
+        <div>
+          <ExtensionSlot data-testid="slot" name="A slot" />
+        </div>
+      );
+    }
+
+    const App = openmrsComponentDecorator({
+      moduleName: 'esm-bedrock',
+      featureName: 'Bedrock',
+      disableTranslations: true,
+    })(RootComponent);
+
+    await act(async () => await promise);
+
+    render(<App />);
+
+    await screen.findByTestId(/slot/);
+    expect(screen.getByTestId('slot').firstChild).toHaveAttribute('data-extension-id', 'Schmoo');
+  });
+
+  it('should hide extension when the expression evaluates to false', async () => {
+    const promise = Promise.resolve();
+
+    registerSimpleExtension('Schmoo', 'esm-bedrock', true);
+    attach('A slot', 'Schmoo');
+    defineConfigSchema('esm-bedrock', {});
+    registerModuleLoad('esm-bedrock');
+    provide({
+      'esm-bedrock': {
+        'Display conditions': {
+          expression: 'false',
+        },
+      },
+    });
+
+    function RootComponent() {
+      return (
+        <div>
+          <ExtensionSlot data-testid="slot" name="A slot" />
+        </div>
+      );
+    }
+
+    const App = openmrsComponentDecorator({
+      moduleName: 'esm-bedrock',
+      featureName: 'Bedrock',
+      disableTranslations: true,
+    })(RootComponent);
+
+    await act(async () => await promise);
+
+    render(<App />);
+
+    await screen.findByTestId(/slot/);
+    expect(screen.getByTestId('slot').firstChild).toBeNull();
+  });
+
+  it('should show extension using a complex expression', async () => {
+    registerSimpleExtension('Schmoo', 'esm-bedrock', true);
+    attach('A slot', 'Schmoo');
+    defineConfigSchema('esm-bedrock', {});
+    registerModuleLoad('esm-bedrock');
+    provide({
+      'esm-bedrock': {
+        'Display conditions': {
+          expression: 'session.user.privileges.some(p => p.display === "YOWTCH!")',
+        },
+      },
+    });
+
+    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 />);
+
+    // Update session state after rendering so the component can react to the change
+    await act(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'],
+          },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      const slot = screen.getByTestId('slot');
+      expect(slot.firstChild).toHaveAttribute('data-extension-id', 'Schmoo');
+    });
+  });
+
+  it('should hide extension using a complex expression', async () => {
+    registerSimpleExtension('Schmoo', 'esm-bedrock', true);
+    attach('A slot', 'Schmoo');
+    defineConfigSchema('esm-bedrock', {});
+    registerModuleLoad('esm-bedrock');
+    provide({
+      'esm-bedrock': {
+        'Display conditions': {
+          expression: 'session.user.privileges.every(p => p.display !== "YOWTCH!")',
+        },
+      },
+    });
+
+    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 />);
+
+    // Update session state after rendering so the component can react to the change
+    await act(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'],
+          },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      const slot = screen.getByTestId('slot');
+      expect(slot.firstChild).toBeNull();
+    });
+  });
+
+  it('should hide extension if expression contains an error', async () => {
+    registerSimpleExtension('Schmoo', 'esm-bedrock', true);
+    attach('A slot', 'Schmoo');
+    defineConfigSchema('esm-bedrock', {});
+    registerModuleLoad('esm-bedrock');
+
+    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 />);
+
+    // Provide config with error expression after rendering so the component can react to the change
+    await act(async () => {
+      provide({
+        'esm-bedrock': {
+          'Display conditions': {
+            expression: 'NotDefined === true',
+          },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      const slot = screen.getByTestId('slot');
+      expect(slot.firstChild).toBeNull();
+    });
+  }, 10000);
+});
+
+async function registerSimpleExtension(
+  name: string,
+  moduleName: string,
+  takesConfig: boolean = false,
+  privileges?: string | string[],
+) {
+  const SimpleComponent = () => <div>{name}</div>;
+  const ConfigurableComponent = () => {
+    const config = useConfig();
+    return (
+      <div>
+        {name}: {JSON.stringify(config)}
+      </div>
+    );
+  };
+
+  registerExtension({
+    name,
+    moduleName,
+    load: getSyncLifecycle(takesConfig ? ConfigurableComponent : SimpleComponent, {
+      moduleName,
+      featureName: moduleName,
+      disableTranslations: true,
+    }),
+    meta: {},
+    privileges,
+  });
+}

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import React from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom/vitest';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
 import { type Person } from '@openmrs/esm-api';
 import { mockSessionStore } from '@openmrs/esm-api/mock';
 import { attach, registerExtension, updateInternalExtensionStore } from '../../../esm-extensions';
@@ -14,13 +14,15 @@ import {
   useExtensionStore,
 } from '../../../esm-react-utils/src';
 import {
+  configInternalStore,
   defineConfigSchema,
+  getExtensionSlotsConfigStore,
+  getExtensionsConfigStore,
   provide,
-  Type,
   registerModuleLoad,
+  resetConfigSystem,
   temporaryConfigStore,
-  configInternalStore,
-  getExtensionSlotsConfigStore,
+  Type,
 } from '../../../esm-config/src';
 
 vi.mock('@openmrs/esm-api', async () => {
@@ -35,9 +37,16 @@ vi.mock('@openmrs/esm-api', async () => {
 describe('Interaction between configuration and extension systems', () => {
   beforeEach(() => {
     temporaryConfigStore.setState({ config: {} });
-    configInternalStore.setState({ providedConfigs: [], schemas: {} });
+    configInternalStore.setState({ providedConfigs: [], schemas: {}, moduleLoaded: {} });
+    mockSessionStore.setState({});
     getExtensionSlotsConfigStore().setState({ slots: {} });
+    getExtensionsConfigStore().setState({ configs: {} });
     updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
+    resetConfigSystem();
+  });
+
+  afterEach(() => {
+    cleanup();
   });
 
   it('Config should add, order, and remove extensions within slots', async () => {
@@ -292,7 +301,7 @@ describe('Interaction between configuration and extension systems', () => {
 
     render(<App />);
 
-    screen.findByTestId(/slot/);
+    await screen.findByTestId(/slot/);
     expect(screen.getByText(/clothes/)).toHaveTextContent(/leopard/);
 
     act(() => {
@@ -374,9 +383,11 @@ describe('Interaction between configuration and extension systems', () => {
 
     render(<App />);
 
-    screen.findByTestId(/slot/);
-    expect(screen.getByTestId('slot').firstChild).toHaveAttribute('data-extension-id', 'Wilma');
-    expect(screen.queryAllByText(/\bSchmoo\b/)).toHaveLength(0);
+    await waitFor(() => {
+      const slot = screen.getByTestId('slot');
+      expect(slot.firstChild).toHaveAttribute('data-extension-id', 'Wilma');
+      expect(screen.queryAllByText(/\bSchmoo\b/)).toHaveLength(0);
+    });
   });
 
   it('should show extension when user has configured privilege', async () => {
@@ -436,28 +447,29 @@ describe('Interaction between configuration and extension systems', () => {
     expect(screen.getByTestId('slot').firstChild).toHaveAttribute('data-extension-id', 'Schmoo');
   });
 
-  // TODO This test fails on CI but not locally
-  it.skip('should only show extensions users have default privilege for', async () => {
-    const promise = Promise.resolve();
-    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'],
+  it('should only show extensions users have default privilege for', async () => {
+    // Set up initial session state before registering extensions
+    await act(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!');
@@ -485,13 +497,13 @@ describe('Interaction between configuration and extension systems', () => {
       disableTranslations: true,
     })(RootComponent);
 
-    await act(async () => await promise);
-
     render(<App />);
 
-    screen.findByTestId(/slot/);
-    expect(screen.getByTestId('slot').firstChild).toHaveAttribute('data-extension-id', 'Wilma');
-    expect(screen.queryAllByText(/\bSchmoo\b/)).toHaveLength(0);
+    await waitFor(() => {
+      const slot = screen.getByTestId('slot');
+      expect(slot.firstChild).toHaveAttribute('data-extension-id', 'Wilma');
+      expect(screen.queryAllByText(/\bSchmoo\b/)).toHaveLength(0);
+    });
   });
 });