mock Modal and ConfirmationModal from stripes-components; fix tests

folio-org · Sep 20, 2024 · 7465d6b · 7465d6b
1 parent 03f1544
commit 7465d6b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/QuickMarcEditor/QuickMarcEditorRows/LinkButton/LinkButton.test.js b/src/QuickMarcEditor/QuickMarcEditorRows/LinkButton/LinkButton.test.js
@@ -300,7 +300,7 @@ describe('Given LinkButton', () => {
       });
 
       fireEvent.click(getAllByTestId('unlink-authority-button-fakeId')[0]);
-      fireEvent.click(getByText('ui-quick-marc.record.unlink.confirm.confirm'));
+      fireEvent.click(getByText('confirm'));
 
       expect(mockHandleUnlinkAuthority).toHaveBeenCalled();
     });

diff --git a/src/QuickMarcEditor/SourceFileLookup/SourceFileLookupModal.test.js b/src/QuickMarcEditor/SourceFileLookup/SourceFileLookupModal.test.js
@@ -49,7 +49,7 @@ describe('Given SourceFileLookupModal', () => {
     it('should disable Save & close button', () => {
       const { getByRole } = renderSourceFileLookupModal();
 
-      const button = getByRole('button', { name: 'stripes-components.saveAndClose', hidden: true });
+      const button = getByRole('button', { name: 'stripes-components.saveAndClose' });
 
       expect(button).toBeDisabled();
     });
@@ -58,15 +58,15 @@ describe('Given SourceFileLookupModal', () => {
   describe('when some source file value is selected', () => {
     it('should enable Save & close button', async () => {
       const {
+        getByRole,
         getByLabelText,
-        getByText,
       } = renderSourceFileLookupModal();
 
       const select = getByLabelText('ui-quick-marc.sourceFileLookupModal.fieldLabel');
 
       fireEvent.change(select, { target: { value: sourceFileOptions[0].value } });
 
-      const button = getByText('stripes-components.saveAndClose').closest('button');
+      const button = getByRole('button', { name: 'stripes-components.saveAndClose' });
 
       expect(button).toBeEnabled();
     });
@@ -75,15 +75,15 @@ describe('Given SourceFileLookupModal', () => {
   describe('when confirming Source File selection', () => {
     it('should call onConfirm with correct source file id', async () => {
       const {
+        getByRole,
         getByLabelText,
-        getByText,
       } = renderSourceFileLookupModal();
 
       const select = getByLabelText('ui-quick-marc.sourceFileLookupModal.fieldLabel');
 
       fireEvent.change(select, { target: { value: sourceFileOptions[0].value } });
 
-      const button = getByText('stripes-components.saveAndClose').closest('button');
+      const button = getByRole('button', { name: 'stripes-components.saveAndClose' });
 
       fireEvent.click(button);
 
@@ -93,9 +93,9 @@ describe('Given SourceFileLookupModal', () => {
 
   describe('when closing the modal', () => {
     it('should call onCancel', async () => {
-      const { getByText } = renderSourceFileLookupModal();
+      const { getByRole } = renderSourceFileLookupModal();
 
-      const button = getByText('stripes-components.cancel').closest('button');
+      const button = getByRole('button', { name: 'stripes-components.cancel' });
 
       fireEvent.click(button);
 

diff --git a/test/jest/__mock__/index.js b/test/jest/__mock__/index.js
@@ -1,3 +1,4 @@
 import './stripesCore.mock';
 import './resizeObserver.mock';
 import './reactIntl.mock';
+import './stripesComponents.mock';
diff --git a/test/jest/__mock__/stripesComponents.mock.js b/test/jest/__mock__/stripesComponents.mock.js
@@ -0,0 +1,29 @@
+jest.mock('@folio/stripes/components', () => ({
+  ...jest.requireActual('@folio/stripes/components'),
+  ConfirmationModal: jest.fn(({ heading, message, onConfirm, onCancel, onRemove }) => (
+    <div>
+      <span>ConfirmationModal</span>
+      {heading}
+      <div>{message}</div>
+      <div>
+        <button type="button" onClick={onConfirm}>confirm</button>
+        <button type="button" onClick={onCancel}>cancel</button>
+        <button type="button" onClick={onRemove}>remove</button>
+      </div>
+    </div>
+  )),
+  Loading: () => <div>Loading</div>,
+  LoadingPane: () => <div>LoadingPane</div>,
+  LoadingView: jest.fn(() => <div>LoadingView</div>),
+  Modal: jest.fn(({ children, open, label, footer, ...rest }) => {
+    return open && (
+      <div
+        {...rest}
+      >
+        <h1>{label}</h1>
+        {children}
+        {footer}
+      </div>
+    );
+  }),
+}), { virtual: true });