@openmrs/esm-react-utils 5.3.3-pre.1291 → 5.3.3-pre.1296

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-@openmrs/esm-react-utils:build: cache hit, replaying output a0402b60193a6c59
+@openmrs/esm-react-utils:build: cache hit, replaying output ed5b158184da45aa
 @openmrs/esm-react-utils:build: Browserslist: caniuse-lite is outdated. Please run:
 @openmrs/esm-react-utils:build:   npx update-browserslist-db@latest
 @openmrs/esm-react-utils:build:   Why you should do it regularly: https://github.com/browserslist/update-db#readme
@@ -14,4 +14,4 @@
 @openmrs/esm-react-utils:build:     external "@openmrs/esm-extensions" 42 bytes [built] [code generated]
 @openmrs/esm-react-utils:build:     + 2 modules
 @openmrs/esm-react-utils:build:   + 5 modules
-@openmrs/esm-react-utils:build: webpack 5.88.0 compiled successfully in 4643 ms
+@openmrs/esm-react-utils:build: webpack 5.88.0 compiled successfully in 4557 ms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.3.3-pre.1291",
+  "version": "5.3.3-pre.1296",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -57,12 +57,12 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "5.3.3-pre.1291",
-    "@openmrs/esm-config": "5.3.3-pre.1291",
-    "@openmrs/esm-error-handling": "5.3.3-pre.1291",
-    "@openmrs/esm-extensions": "5.3.3-pre.1291",
-    "@openmrs/esm-feature-flags": "5.3.3-pre.1291",
-    "@openmrs/esm-globals": "5.3.3-pre.1291",
+    "@openmrs/esm-api": "5.3.3-pre.1296",
+    "@openmrs/esm-config": "5.3.3-pre.1296",
+    "@openmrs/esm-error-handling": "5.3.3-pre.1296",
+    "@openmrs/esm-extensions": "5.3.3-pre.1296",
+    "@openmrs/esm-feature-flags": "5.3.3-pre.1296",
+    "@openmrs/esm-globals": "5.3.3-pre.1296",
     "dayjs": "^1.10.8",
     "i18next": "^21.10.0",
     "react": "^18.1.0",

package/src/ConfigurableLink.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { navigate, interpolateUrl } from '@openmrs/esm-config';

package/src/extensions.test.tsx

@@ -28,6 +28,10 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('Extension receives state changes passed through (not using <Extension>)', async () => {
     function EnglishExtension({ suffix }) {
       return <div>English{suffix}</div>;
@@ -87,16 +91,22 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
   });
 
   test('ExtensionSlot throws error if both state and children provided', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
     const App = () => (
       <ExtensionSlot name="Box" state={{ color: 'red' }}>
         <Extension />
       </ExtensionSlot>
     );
-    expect(() => render(<App />)).toThrowError(
+    expect(() => render(<App />)).toThrow();
+    expect(consoleError).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
-        message: expect.stringMatching(/children.*state/),
+        message: expect.stringMatching(
+          /Both children and state have been provided. If children are provided, the state must be passed as a prop to the `Extension` component/i,
+        ),
       }),
     );
+    consoleError.mockRestore();
   });
 
   test('Extension Slot receives meta', async () => {
@@ -111,10 +121,10 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     })(() => {
       const metas = useExtensionSlotMeta('Box');
       const wrapItem = useCallback(
-        (slot: React.ReactNode, extension: ExtensionData) => {
+        (slot: React.ReactNode, extension?: ExtensionData) => {
           return (
             <div>
-              <h1>{metas[getExtensionNameFromId(extension.extensionId)].code}</h1>
+              <h1>{metas[getExtensionNameFromId(extension?.extensionId ?? '')].code}</h1>
               {slot}
             </div>
           );
@@ -124,7 +134,7 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
       return (
         <div>
           <ExtensionSlot name="Box">
-            <Extension wrap={wrapItem} />
+            <Extension>{wrapItem}</Extension>
           </ExtensionSlot>
         </div>
       );

package/src/openmrsComponentDecorator.test.tsx

@@ -13,15 +13,22 @@ describe('openmrs-component-decorator', () => {
   it('renders a component', () => {
     const DecoratedComp = openmrsComponentDecorator(opts)(CompThatWorks);
     render(<DecoratedComp />);
-    waitFor(() => {
-      expect(screen.getByText('The button')).toBeTruthy();
-    });
+
+    screen.findByText('The button');
   });
 
   it('catches any errors in the component tree and renders a ui explaining something bad happened', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
     const DecoratedComp = openmrsComponentDecorator(opts)(CompThatThrows);
     render(<DecoratedComp />);
     // TO-DO assert the UX for broken react app is showing
+    expect(consoleError).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        message: expect.stringContaining('ahahaa'),
+      }),
+    );
+    consoleError.mockRestore();
   });
 
   it('provides ComponentContext', () => {

package/src/setup-tests.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 window.openmrsBase = '/openmrs';
 window.spaBase = '/spa';

package/src/useAbortController.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import useAbortController from './useAbortController';
 
 describe('useAbortController', () => {

package/src/useOnClickOutside.test.tsx

@@ -1,12 +1,14 @@
 import React, { PropsWithChildren } from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { useOnClickOutside } from './useOnClickOutside';
 
 describe('useOnClickOutside', () => {
   const handler: (e: Event) => void = jest.fn();
   afterEach(() => (handler as jest.Mock).mockClear());
 
-  it('should call the handler when clicking outside', () => {
+  it('should call the handler when clicking outside', async () => {
+    const user = userEvent.setup();
     // setup
     const Component: React.FC<PropsWithChildren> = ({ children }) => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
@@ -15,14 +17,15 @@ describe('useOnClickOutside', () => {
     const ref = render(<Component />);
 
     // act
-    fireEvent.click(ref.container);
+    await user.click(ref.container);
 
     // verify
     expect(handler).toHaveBeenCalledTimes(1);
   });
 
-  it('should not call the handler when clicking on the element', () => {
+  it('should not call the handler when clicking on the element', async () => {
     // setup
+    const user = userEvent.setup();
     const Component: React.FC<PropsWithChildren> = ({ children }) => {
       const ref = useOnClickOutside<HTMLDivElement>(handler);
       return <div ref={ref}>{children}</div>;
@@ -36,7 +39,7 @@ describe('useOnClickOutside', () => {
 
     // act
     if (mutableRef.current) {
-      fireEvent.click(mutableRef.current);
+      await user.click(mutableRef.current);
     }
 
     // verify