@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

package/src/components/Actions/Action/Action.spec.tsx

@@ -1,11 +1,16 @@
-import { mount, shallow } from 'enzyme';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from '@testing-library/react';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { Link, BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { afterEach, describe, expect, it, test, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
-import { TextButton } from '../../Buttons';
-import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
-import { IconName, Icons } from '../../Icons';
+import { ConfirmationConfig } from '../../ConfirmDialog';
+import { IconName } from '../../Icons';
 import {
   Action,
   ActionProps,
@@ -28,56 +33,60 @@ const defaultNavigationProps: ActionProps = {
 };
 
 describe('Action', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Action {...defaultContextProps} />);
+    const { container } = render(<Action {...defaultContextProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   describe('Navigation Action', () => {
     it('renders a label', () => {
       const mockLabel = defaultNavigationProps.action.label;
-      const wrapper = mount(
+      const { getByTestId } = render(
         <Router>
           <Action {...defaultNavigationProps} />
         </Router>,
       );
 
-      const label = wrapper.find('span');
+      const label = getByTestId('label');
 
-      expect(label.text()).toBe(mockLabel);
+      expect(label.textContent).toBe(mockLabel);
     });
 
     it(`displays a 'ChevronRight' as default icon`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Action {...defaultNavigationProps} />
         </Router>,
       );
 
-      const icon = wrapper.find(Icons);
-      const container = wrapper.find('.container').hostNodes();
+      const actionContainer = container.querySelector('.action-container');
+      const icon = container.querySelector('svg');
 
-      expect(icon.prop('icon')).toBe(IconName.ChevronRight);
-      expect(container.hasClass('hasIcon')).toBe(true);
+      expect(icon).toBeInTheDocument();
+      expect(actionContainer?.classList.contains('hasIcon')).toBe(true);
     });
 
     it(`displays a 'External' as default icon when "openInNewTab: true"`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Action action={{ label: 'test', path: '/', openInNewTab: true }} />
         </Router>,
       );
 
-      const icon = wrapper.find(Icons);
-      const container = wrapper.find('.container').hostNodes();
+      const actionContainer = container.querySelector('.action-container');
+      const icon = container.querySelector('svg');
 
-      expect(icon.prop('icon')).toBe(IconName.External);
-      expect(container.hasClass('hasIcon')).toBe(true);
+      expect(icon).toBeInTheDocument();
+      expect(actionContainer?.classList.contains('hasIcon')).toBe(true);
     });
 
     it(`disables link when property isDisabled is 'true'`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Action
             action={{ ...defaultNavigationProps.action, isDisabled: true }}
@@ -85,9 +94,9 @@ describe('Action', () => {
         </Router>,
       );
 
-      const container = wrapper.find('.container').hostNodes();
+      const actionContainer = container.querySelector('.action-container');
 
-      expect(container.hasClass('isDisabled')).toBe(true);
+      expect(actionContainer?.classList.contains('isDisabled')).toBe(true);
     });
 
     it(`changes the icon if one provided by props`, () => {
@@ -95,27 +104,27 @@ describe('Action', () => {
       const props = {
         action: { ...defaultNavigationProps.action, icon: iconName },
       };
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Action {...props} />
         </Router>,
       );
 
-      const icon = wrapper.find(Icons);
+      const icon = container.querySelector('svg');
 
-      expect(icon.prop('icon')).toBe(iconName);
+      expect(icon).toBeInTheDocument();
     });
 
     it(`renders a link`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Action {...defaultNavigationProps} />
         </Router>,
       );
 
-      const link = wrapper.find(Link);
+      const link = container.querySelector('a');
 
-      expect(link).toBeDefined();
+      expect(link).toBeInTheDocument();
     });
   });
 
@@ -123,17 +132,17 @@ describe('Action', () => {
     describe('icon', () => {
       it('allows icon to be changed', () => {
         const iconProp: IconName = IconName.Delete;
-        const wrapper = mount(
+        const { container } = render(
           <Action action={{ ...defaultContextProps.action, icon: iconProp }} />,
         );
 
-        const icon = wrapper.find(Icons);
+        const icon = container.querySelector('svg');
 
-        expect(icon.prop('icon')).toBe(iconProp);
+        expect(icon).toBeInTheDocument();
       });
 
       it(`renders no icon by default`, () => {
-        const wrapper = shallow(
+        const { container } = render(
           <Action
             action={{
               ...defaultContextProps.action,
@@ -141,13 +150,13 @@ describe('Action', () => {
           />,
         );
 
-        const icon = wrapper.find(Icons);
+        const icon = container.querySelector('svg');
 
-        expect(icon.exists()).toBe(false);
+        expect(icon).not.toBeInTheDocument();
       });
 
       it(`allows an icon for context action`, () => {
-        const wrapper = mount(
+        const { container } = render(
           <Action
             action={{
               ...defaultContextProps.action,
@@ -156,15 +165,15 @@ describe('Action', () => {
           />,
         );
 
-        const icon = wrapper.find(Icons);
+        const icon = container.querySelector('svg');
 
-        expect(icon.exists()).toBe(true);
+        expect(icon).toBeInTheDocument();
       });
     });
 
     it('renders a label', () => {
       const mockLabel = defaultContextProps.action.label;
-      const wrapper = mount(
+      const { getByTestId } = render(
         <Action
           {...defaultContextProps}
           action={{
@@ -174,14 +183,14 @@ describe('Action', () => {
         />,
       );
 
-      const label = wrapper.find('span');
+      const label = getByTestId('label');
 
-      expect(label.text()).toBe(mockLabel);
+      expect(label.textContent).toBe(mockLabel);
     });
 
     it('raises the onActionSelected event', () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { getByTestId } = render(
         <Action
           {...defaultContextProps}
           action={{
@@ -191,13 +200,14 @@ describe('Action', () => {
         />,
       );
 
-      wrapper.simulate('click');
+      const action = getByTestId('action');
+      fireEvent.click(action);
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it(`adds a context background color`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <Action
           {...defaultContextProps}
           action={{
@@ -207,18 +217,18 @@ describe('Action', () => {
         />,
       );
 
-      const action = wrapper.find('.container');
+      const action = container.querySelector('.action-container');
 
-      expect(action.hasClass('context')).toBe(true);
+      expect(action?.classList.contains('context')).toBe(true);
     });
 
     describe('confirmation', () => {
       const mockLabel = 'test-label';
 
       it(`'Simple' mode changes the background color when clicked for the first time`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
-        const wrapper = mount(
+        const { getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -228,19 +238,20 @@ describe('Action', () => {
             }}
           />,
         );
-        expect(wrapper.hasClass('hasConfirm')).toBe(false);
 
-        wrapper.simulate('click');
-        wrapper.update();
+        const action = getByTestId('action');
+        expect(action.classList.contains('hasConfirm')).toBe(false);
+
+        fireEvent.click(action);
 
-        expect(wrapper.find('.container').hasClass('hasConfirm')).toBe(true);
+        expect(action.classList.contains('hasConfirm')).toBe(true);
       });
 
       it(`'Simple' mode renders a confirmation message, raises the onActionSelected event after confirmation, and resets the action label`, () => {
         const confirmationMsg = 'Click again to confirm';
-        const spy = jest.fn();
+        const spy = vi.fn();
 
-        const wrapper = mount(
+        const { getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -251,30 +262,30 @@ describe('Action', () => {
           />,
         );
 
-        let span = wrapper.find('span');
+        const action = getByTestId('action');
+        let label = getByTestId('label');
 
-        expect(span.text()).toBe(mockLabel);
+        expect(label.textContent).toBe(mockLabel);
 
-        wrapper.simulate('click');
+        fireEvent.click(action);
 
-        span = wrapper.find('span');
+        const confirmLabel = getByTestId('confirm');
+        expect(confirmLabel.textContent).toBe(confirmationMsg);
 
-        expect(span.text()).toBe(confirmationMsg);
+        fireEvent.click(action);
 
-        wrapper.simulate('click');
-
-        span = wrapper.find('span');
+        label = getByTestId('label');
 
         expect(spy).toHaveBeenCalledTimes(1);
-        expect(span.text()).toBe(mockLabel);
+        expect(label.textContent).toBe(mockLabel);
       });
 
       it(`'Simple' mode renders a confirmation message, and doesn't raise the 'onActionSelected' event on 'mouseleave' when confirmation is required`, async () => {
         const confirmationMsg = 'Click again to confirm';
-        const spy = jest.fn();
-        jest.useFakeTimers();
+        const spy = vi.fn();
+        vi.useFakeTimers();
 
-        const wrapper = mount(
+        const { getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -285,43 +296,37 @@ describe('Action', () => {
           />,
         );
 
-        let span = wrapper.find('span');
+        const action = getByTestId('action');
+        let label = getByTestId('label');
 
-        expect(span.text()).toBe(mockLabel);
+        expect(label.textContent).toBe(mockLabel);
 
-        await act(async () => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
+        fireEvent.click(action);
 
-        span = wrapper.find('span');
-        let container = wrapper.find('.container');
+        const confirmLabel = getByTestId('confirm');
 
-        expect(span.text()).toBe(confirmationMsg);
-        expect(container.hasClass('hasConfirm')).toBe(true);
+        expect(confirmLabel.textContent).toBe(confirmationMsg);
+        expect(action.classList.contains('hasConfirm')).toBe(true);
 
-        await act(async () => {
-          await wrapper.simulate('mouseleave');
-        });
-        wrapper.update();
+        fireEvent.mouseLeave(action);
 
-        await act(async () => {
-          jest.runAllTimers();
-        });
-        wrapper.update();
+        vi.runAllTimers();
 
-        span = wrapper.find('span');
-        container = wrapper.find('.container');
+        await waitFor(() => {
+          label = getByTestId('label');
+          expect(label.textContent).toBe(mockLabel);
+        });
 
-        expect(span.text()).toBe(mockLabel);
         expect(spy).not.toHaveBeenCalled();
-        expect(container.hasClass('hasConfirm')).toBe(false);
+        expect(action.classList.contains('hasConfirm')).toBe(false);
+
+        vi.useRealTimers();
       });
 
       it(`'Advanced' mode changes the background color when clicked for the first time`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
-        const wrapper = mount(
+        const { getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -331,20 +336,19 @@ describe('Action', () => {
             }}
           />,
         );
-        expect(wrapper.hasClass('hasConfirm')).toBe(false);
 
-        wrapper.simulate('click');
-        wrapper.update();
+        const action = getByTestId('action');
+        expect(action.classList.contains('hasConfirm')).toBe(false);
 
-        expect(wrapper.find('.container').first().hasClass('hasConfirm')).toBe(
-          true,
-        );
+        fireEvent.click(action);
+
+        expect(action.classList.contains('hasConfirm')).toBe(true);
       });
 
       it(`'Advanced' mode renders a confirmation pop up, raises the 'onActionSelected' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
-        const wrapper = mount(
+        const { queryByText, getByText, getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -355,36 +359,26 @@ describe('Action', () => {
           />,
         );
 
-        let confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.exists()).toBe(false);
-
-        act(() => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
-
-        confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.exists()).toBe(true);
+        let confirmButton = queryByText('Confirm');
+        expect(confirmButton).not.toBeInTheDocument();
 
-        const confirmButton = wrapper.find(TextButton).last();
+        const action = getByTestId('action');
+        fireEvent.click(action);
 
-        act(() => {
-          confirmButton.simulate('click');
-        });
-        wrapper.update();
+        confirmButton = getByText('Confirm');
+        expect(confirmButton).toBeInTheDocument();
 
-        confirmation = wrapper.find(ConfirmDialog);
+        fireEvent.click(confirmButton);
 
-        expect(confirmation.exists()).toBe(false);
+        confirmButton = queryByText('Confirm');
+        expect(confirmButton).not.toBeInTheDocument();
         expect(spy).toHaveBeenCalledTimes(1);
       });
 
       it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onActionSelected' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
-        const wrapper = mount(
+        const { queryByText, getByText, getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -395,36 +389,26 @@ describe('Action', () => {
           />,
         );
 
-        let confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.exists()).toBe(false);
-
-        act(() => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
-
-        confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.exists()).toBe(true);
+        let cancelButton = queryByText('Cancel');
+        expect(cancelButton).not.toBeInTheDocument();
 
-        const cancelButton = wrapper.find(TextButton).first();
+        const action = getByTestId('action');
+        fireEvent.click(action);
 
-        act(() => {
-          cancelButton.simulate('click');
-        });
-        wrapper.update();
+        cancelButton = getByText('Cancel');
+        expect(cancelButton).toBeInTheDocument();
 
-        confirmation = wrapper.find(ConfirmDialog);
+        fireEvent.click(cancelButton);
 
-        expect(confirmation.exists()).toBe(false);
+        cancelButton = queryByText('Cancel');
+        expect(cancelButton).not.toBeInTheDocument();
       });
 
       it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onActionSelected' event when the mouse leaves component, and finally dismisses the confirmation pop up`, async () => {
-        const spy = jest.fn();
-        jest.useFakeTimers();
+        const spy = vi.fn();
+        vi.useFakeTimers();
 
-        const wrapper = mount(
+        const { queryByText, getByText, getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -435,35 +419,27 @@ describe('Action', () => {
           />,
         );
 
-        let confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.exists()).toBe(false);
-
-        await act(async () => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
-
-        confirmation = wrapper.find(ConfirmDialog);
+        let confirmButton = queryByText('Confirm');
+        expect(confirmButton).not.toBeInTheDocument();
 
-        expect(confirmation.exists()).toBe(true);
+        const action = getByTestId('action');
+        fireEvent.click(action);
 
-        await act(async () => {
-          await wrapper.simulate('mouseleave');
-        });
-
-        wrapper.update();
+        confirmButton = getByText('Confirm');
+        expect(confirmButton).toBeInTheDocument();
 
-        await act(async () => {
-          jest.runAllTimers();
-        });
-        wrapper.update();
+        fireEvent.mouseLeave(action);
 
-        confirmation = wrapper.find(ConfirmDialog);
+        vi.runAllTimers();
 
         // TODO: Debug why this isn't passing
-        // expect(confirmation.exists()).toBe(false);
+        // await waitFor(() => {
+        //   confirmButton = queryByText('Confirm');
+        //   expect(confirmButton).not.toBeInTheDocument();
+        // });
         expect(spy).not.toHaveBeenCalled();
+
+        vi.useRealTimers();
       });
 
       it(`'Advanced' mode accepts a 'confirmationConfig' object`, () => {
@@ -473,7 +449,7 @@ describe('Action', () => {
           cancelButtonText: 'test-cancel',
           confirmButtonText: 'test-confirm',
         };
-        const wrapper = mount(
+        const { getByText, getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -485,27 +461,23 @@ describe('Action', () => {
           />,
         );
 
-        act(() => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
-
-        const confirmation = wrapper.find(ConfirmDialog);
-
-        expect(confirmation.prop('title')).toBe(mockConfig.title);
-        expect(confirmation.prop('children')).toBe(mockConfig.body);
-        expect(confirmation.prop('cancelButtonText')).toBe(
-          mockConfig.cancelButtonText,
-        );
-        expect(confirmation.prop('confirmButtonText')).toBe(
-          mockConfig.confirmButtonText,
-        );
+        const action = getByTestId('action');
+        fireEvent.click(action);
+
+        expect(getByText(mockConfig.title as string)).toBeInTheDocument();
+        expect(getByText(mockConfig.body as string)).toBeInTheDocument();
+        expect(
+          getByText(mockConfig.cancelButtonText as string),
+        ).toBeInTheDocument();
+        expect(
+          getByText(mockConfig.confirmButtonText as string),
+        ).toBeInTheDocument();
       });
 
       it(`'Simple' raises onConfirmOpen if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
-        const wrapper = mount(
+        const { getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -517,29 +489,27 @@ describe('Action', () => {
           />,
         );
 
+        const action = getByTestId('action');
+
         // toggle confirmation on
-        act(() => {
-          wrapper.simulate('click');
-        });
+        fireEvent.click(action);
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(1);
 
         // toggle confirmation off
-        act(() => {
-          wrapper.simulate('click');
-        });
+        fireEvent.click(action);
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false);
       });
 
-      it(`'Simple' raises onConfirmOpen when 'mouseleave' if set`, async () => {
-        const confirmToggleSpy = jest.fn();
+      it(`'Simple' raises onConfirmOpen when 'mouseleave' if set`, () => {
+        const confirmToggleSpy = vi.fn();
 
-        jest.useFakeTimers();
+        vi.useFakeTimers();
 
-        const wrapper = mount(
+        const { getByTestId } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -551,30 +521,31 @@ describe('Action', () => {
           />,
         );
 
-        await act(async () => {
-          wrapper.simulate('click');
+        const action = getByTestId('action');
+
+        act(() => {
+          fireEvent.click(action);
         });
-        wrapper.update();
 
-        await act(async () => {
-          await wrapper.simulate('mouseleave');
+        act(() => {
+          fireEvent.mouseLeave(action);
         });
-        wrapper.update();
 
-        await act(async () => {
-          jest.runAllTimers();
+        act(() => {
+          vi.runAllTimers();
         });
-        wrapper.update();
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false);
+
+        vi.useRealTimers();
       });
 
       it(`'Advanced' raises onConfirmOpen when 'Cancel' is clicked, if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
-        const wrapper = mount(
+        const { getByTestId, getByText } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -586,18 +557,13 @@ describe('Action', () => {
           />,
         );
 
-        // toggle confirmation on
-        act(() => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
+        const action = getByTestId('action');
 
-        const cancelButton = wrapper.find(TextButton).first();
+        // toggle confirmation on
+        fireEvent.click(action);
 
-        act(() => {
-          cancelButton.simulate('click');
-        });
-        wrapper.update();
+        const cancelButton = getByText('Cancel');
+        fireEvent.click(cancelButton);
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true);
@@ -605,9 +571,9 @@ describe('Action', () => {
       });
 
       it(`'Advanced' raises onConfirmOpen when 'Confirm' is clicked, if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
-        const wrapper = mount(
+        const { getByTestId, getByText } = render(
           <Action
             {...defaultContextProps}
             action={{
@@ -619,18 +585,13 @@ describe('Action', () => {
           />,
         );
 
-        // toggle confirmation on
-        act(() => {
-          wrapper.simulate('click');
-        });
-        wrapper.update();
+        const action = getByTestId('action');
 
-        const confirmButton = wrapper.find(TextButton).last();
+        // toggle confirmation on
+        fireEvent.click(action);
 
-        act(() => {
-          confirmButton.simulate('click');
-        });
-        wrapper.update();
+        const confirmButton = getByText('Confirm');
+        fireEvent.click(confirmButton);
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true);
@@ -647,7 +608,7 @@ describe('isNavigationAction', () => {
   });
 
   test('returns false for a ContextActionData object', () => {
-    const action = { label: 'Context Action', onActionSelected: jest.fn() };
+    const action = { label: 'Context Action', onActionSelected: vi.fn() };
     expect(isNavigationAction(action)).toBe(false);
   });
 
@@ -663,7 +624,7 @@ describe('isNavigationAction', () => {
 
 describe('isContextAction', () => {
   test('returns true for a ContextActionData object', () => {
-    const action = { label: 'Context Action', onActionSelected: jest.fn() };
+    const action = { label: 'Context Action', onActionSelected: vi.fn() };
     expect(isContextAction(action)).toBe(true);
   });