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

package/src/components/MessageBar/MessageBar.spec.tsx

@@ -1,6 +1,7 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { IconName, Icons } from '../Icons';
+import { describe, expect, it, vi } from 'vitest';
+import { IconName } from '../Icons';
 import { MessageBar, MessageBarProps } from './MessageBar';
 
 const defaultProps: MessageBarProps = {
@@ -9,17 +10,17 @@ const defaultProps: MessageBarProps = {
 
 describe('MessageBar', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<MessageBar {...defaultProps} />);
+    const { container } = render(<MessageBar {...defaultProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`renders a message`, () => {
-    const wrapper = mount(<MessageBar {...defaultProps} />);
+    render(<MessageBar {...defaultProps} />);
 
-    const message = wrapper.find('p');
+    const message = screen.getByTestId('message-title');
 
-    expect(message.text()).toBe(defaultProps.title);
+    expect(message.textContent).toBe(defaultProps.title);
   });
 
   describe('message types', () => {
@@ -29,174 +30,176 @@ describe('MessageBar', () => {
       ['info', IconName.Info, 'hasInfo'],
       ['warning', IconName.Warning, 'hasWarning'],
     ])('message type styling', (type, icon, className) => {
-      const wrapper = mount(
+      const { container } = render(
         <MessageBar {...defaultProps} type={type as MessageBarProps['type']} />,
       );
 
-      const icons = wrapper.find(Icons);
-      const messageIcon = icons.first();
-      const body = wrapper.find('.container');
+      const messageElement = screen.getByTestId('message-bar');
+      const messageContainer = container.querySelector('.message-container');
 
-      expect(icons.exists()).toBe(true);
-      expect(messageIcon.prop('icon')).toBe(icon);
-      expect(body.hasClass(className)).toBe(true);
+      expect(messageElement.getAttribute('data-test-type')).toBe(
+        type || 'error',
+      );
+      expect(messageContainer?.classList.contains(className)).toBe(true);
     });
   });
 
   describe('close button', () => {
     it('close button is not rendered by default', () => {
-      const wrapper = mount(<MessageBar {...defaultProps} />);
+      const { container } = render(<MessageBar {...defaultProps} />);
 
-      const x = wrapper.find('.xIcon');
+      const x = container.querySelector('.xIcon');
 
-      expect(x.exists()).toBe(false);
+      expect(x).toBeNull();
     });
 
     it(`displays a close button and raises 'onClose' when set`, () => {
-      const spy = jest.fn();
-      const wrapper = mount(<MessageBar {...defaultProps} onClose={spy} />);
+      const spy = vi.fn();
+      const { container } = render(
+        <MessageBar {...defaultProps} onClose={spy} />,
+      );
 
-      const xIcon = wrapper.find('.xIcon');
-      const closeIcon = wrapper.find('.closeIcon');
+      const xIcon = container.querySelector('.xIcon');
+      const closeIcon = screen.getByTestId('message-bar-close-button');
 
-      closeIcon.simulate('click');
+      fireEvent.click(closeIcon);
 
-      expect(xIcon.exists()).toBe(true);
+      expect(xIcon).toBeTruthy();
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('retry button', () => {
     it('retry button is not rendered by default', () => {
-      const wrapper = mount(<MessageBar {...defaultProps} />);
+      const { container } = render(<MessageBar {...defaultProps} />);
 
-      const x = wrapper.find('.xIcon');
+      const x = container.querySelector('.xIcon');
 
-      expect(x.exists()).toBe(false);
+      expect(x).toBeNull();
     });
 
     it(`displays a retry button and raises 'onRetry' when set`, () => {
-      const spy = jest.fn();
-      const wrapper = mount(<MessageBar {...defaultProps} onRetry={spy} />);
+      const spy = vi.fn();
+      const { container } = render(
+        <MessageBar {...defaultProps} onRetry={spy} />,
+      );
 
-      const retryIcon = wrapper.find('.retryIcon');
-      const reIcon = wrapper.find('.reIcon');
+      const retryIcon = screen.getByTestId('message-bar-retry-button');
+      const reIcon = container.querySelector('.reIcon');
 
-      retryIcon.simulate('click');
+      fireEvent.click(retryIcon);
 
-      expect(reIcon.exists()).toBe(true);
+      expect(reIcon).toBeTruthy();
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('message body', () => {
     it(`does not render a body nor the details icon if component has no children`, () => {
-      const wrapper = mount(<MessageBar {...defaultProps} />);
+      const { container } = render(<MessageBar {...defaultProps} />);
 
-      const body = wrapper.find('.body');
-      const toggle = wrapper.find('.detailsIcon');
+      const body = container.querySelector('.body');
+      const toggle = container.querySelector('.detailsIcon');
 
-      expect(body.exists()).toBe(false);
-      expect(toggle.exists()).toBe(false);
+      expect(body).toBeNull();
+      expect(toggle).toBeNull();
     });
 
     it(`body is not rendered by default and a details icon is rendered when body is passed in`, () => {
-      const wrapper = mount(<MessageBar {...defaultProps}>Test</MessageBar>);
+      const { container } = render(
+        <MessageBar {...defaultProps}>Test</MessageBar>,
+      );
 
-      const body = wrapper.find('.body');
-      const toggle = wrapper.find('.detailsIcon');
+      const body = container.querySelector('.body');
+      const toggle = container.querySelector('.detailsIcon');
 
-      expect(body.exists()).toBe(false);
-      expect(toggle.exists()).toBe(true);
+      expect(body).toBeNull();
+      expect(toggle).toBeTruthy();
     });
 
     it('shows/hides body if children are passed in when details icon is clicked', () => {
-      const wrapper = mount(<MessageBar {...defaultProps}>Test</MessageBar>);
+      const { container } = render(
+        <MessageBar {...defaultProps}>Test</MessageBar>,
+      );
 
-      let body = wrapper.find('.body');
-      let toggleIcon = wrapper.find('.detIcon').first();
+      let body = container.querySelector('.body');
+      let toggleIcon = container.querySelector('.detIcon');
 
-      expect(body.exists()).toBe(false);
-      expect(toggleIcon.hasClass('open')).toBe(false);
+      expect(body).toBeNull();
+      expect(toggleIcon?.classList.contains('open')).toBe(false);
 
       // Show body
-      let toggle = wrapper.find('.detailsIcon');
+      let toggle = screen.getByTestId('message-bar-details-button');
 
-      toggle.simulate('click');
+      fireEvent.click(toggle);
 
-      wrapper.update();
+      body = container.querySelector('.body');
+      toggleIcon = container.querySelector('.detIcon');
 
-      body = wrapper.find('.body');
-      toggleIcon = wrapper.find('.detIcon').first();
-
-      expect(body.exists()).toBe(true);
-      expect(toggleIcon.hasClass('open')).toBe(true);
+      expect(body).toBeTruthy();
+      expect(toggleIcon?.classList.contains('open')).toBe(true);
 
       // Hide body
-      toggle = wrapper.find('.detailsIcon');
-
-      toggle.simulate('click');
+      toggle = screen.getByTestId('message-bar-details-button');
 
-      wrapper.update();
+      fireEvent.click(toggle);
 
-      body = wrapper.find('.body');
-      toggleIcon = wrapper.find('.detIcon').first();
+      body = container.querySelector('.body');
+      toggleIcon = container.querySelector('.detIcon');
 
-      expect(body.exists()).toBe(false);
-      expect(toggleIcon.hasClass('open')).toBe(false);
+      expect(body).toBeNull();
+      expect(toggleIcon?.classList.contains('open')).toBe(false);
     });
 
     it(`wraps children in 'div' tags if children is of type 'string'`, () => {
-      const wrapper = mount(<MessageBar {...defaultProps}>Test</MessageBar>);
-
-      const toggle = wrapper.find('.detailsIcon');
+      const { container } = render(
+        <MessageBar {...defaultProps}>Test</MessageBar>,
+      );
 
-      toggle.simulate('click');
+      const toggle = screen.getByTestId('message-bar-details-button');
 
-      wrapper.update();
+      fireEvent.click(toggle);
 
-      const wrappedChild = wrapper.find('.body > div.textChild');
+      const wrappedChild = container.querySelector('.body > div.textChild');
 
-      expect(wrappedChild.exists()).toBe(true);
+      expect(wrappedChild).toBeTruthy();
     });
 
     it(`does not wrap children in div tags if children is a react node`, () => {
-      const wrapper = mount(
+      const { container } = render(
         <MessageBar {...defaultProps}>
           <h1>Test</h1>
         </MessageBar>,
       );
 
-      const toggle = wrapper.find('.detailsIcon');
-
-      toggle.simulate('click');
+      const toggle = screen.getByTestId('message-bar-details-button');
 
-      wrapper.update();
+      fireEvent.click(toggle);
 
-      const wrappedChild = wrapper.find('.body > div.textChild');
-      const node = wrapper.find('.body > h1');
+      const wrappedChild = container.querySelector('.body > div.textChild');
+      const node = container.querySelector('.body > h1');
 
-      expect(wrappedChild.exists()).toBe(false);
-      expect(node.exists()).toBe(true);
+      expect(wrappedChild).toBeNull();
+      expect(node).toBeTruthy();
     });
 
     it('body is not rendered if children is an empty string', () => {
       const mockBody = '';
-      const wrapper = mount(
+      const { container } = render(
         <MessageBar {...defaultProps}>{mockBody}</MessageBar>,
       );
 
-      const toggle = wrapper.find('.detailsIcon');
+      const toggle = container.querySelector('.detailsIcon');
 
-      expect(toggle.exists()).toBe(false);
+      expect(toggle).toBeNull();
     });
 
     it('body is not rendered if children is undefined', () => {
-      const wrapper = mount(<MessageBar {...defaultProps}></MessageBar>);
+      const { container } = render(<MessageBar {...defaultProps}></MessageBar>);
 
-      const toggle = wrapper.find('.detailsIcon');
+      const toggle = container.querySelector('.detailsIcon');
 
-      expect(toggle.exists()).toBe(false);
+      expect(toggle).toBeNull();
     });
   });
 });

package/src/components/Modal/Modal.spec.tsx

@@ -1,71 +1,73 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
 import { Modal } from './Modal';
 
 describe('Actions', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Modal isShown={true} />);
+    const { container } = render(<Modal isShown={true} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`emits 'onBackDropClicked' when the back-drop is clicked`, () => {
-    const backDropSpy = jest.fn();
-    const wrapper = shallow(
+    const backDropSpy = vi.fn();
+    const { container } = render(
       <Modal isShown={true} onBackDropClicked={backDropSpy} />,
     );
 
-    const container = wrapper.find('.container');
+    const modalContainer = container.querySelector('.modal-container');
 
-    act(() => {
-      container.simulate('click');
-    });
+    if (modalContainer) {
+      fireEvent.click(modalContainer);
+    }
 
     expect(backDropSpy).toHaveBeenCalledTimes(1);
   });
 
   it(`does not emit 'onBackDropClicked' when a child element is clicked`, () => {
-    const backDropSpy = jest.fn();
-    const wrapper = shallow(
+    const backDropSpy = vi.fn();
+    render(
       <Modal onBackDropClicked={backDropSpy} isShown={true}>
-        <div id="child">Test</div>
+        <div data-test-id="child">Test</div>
       </Modal>,
     );
 
-    const child = wrapper.find('#child');
+    const child = screen.getByTestId('child');
 
-    act(() => {
-      child.simulate('click');
-    });
+    fireEvent.click(child);
 
     expect(backDropSpy).not.toHaveBeenCalled();
   });
 
-  it(`emits 'onOpen' when the modal is shown`, () => {
-    const onOpenSpy = jest.fn();
+  it(`emits 'onOpen' when the modal is shown`, async () => {
+    const onOpenSpy = vi.fn();
 
-    const wrapper = mount(<Modal isShown={false} onOpen={onOpenSpy} />);
+    const { rerender } = render(<Modal isShown={false} onOpen={onOpenSpy} />);
 
-    wrapper.setProps({ isShown: true });
-    wrapper.update();
+    rerender(<Modal isShown={true} onOpen={onOpenSpy} />);
 
-    setTimeout(() => {
-      expect(onOpenSpy).toHaveBeenCalledTimes(1);
-    }, 500);
+    await waitFor(
+      () => {
+        expect(onOpenSpy).toHaveBeenCalledTimes(1);
+      },
+      { timeout: 500 },
+    );
   });
 
-  it(`emits 'onClose' when the modal is hidden`, () => {
-    const onCloseSpy = jest.fn();
+  it(`emits 'onClose' when the modal is hidden`, async () => {
+    const onCloseSpy = vi.fn();
 
-    const wrapper = mount(<Modal isShown={true} onClose={onCloseSpy} />);
+    const { rerender } = render(<Modal isShown={true} onClose={onCloseSpy} />);
 
-    wrapper.setProps({ isShown: false });
-    wrapper.update();
+    rerender(<Modal isShown={false} onClose={onCloseSpy} />);
 
-    setTimeout(() => {
-      expect(onCloseSpy).toHaveBeenCalledTimes(1);
-    }, 500);
+    await waitFor(
+      () => {
+        expect(onCloseSpy).toHaveBeenCalledTimes(1);
+      },
+      { timeout: 500 },
+    );
   });
 
   it(`accepts padding styles which are 'undefined' by default`, () => {
@@ -74,79 +76,82 @@ describe('Actions', () => {
     const mockPaddingBottom = '52px';
     const mockPaddingRight = '53px';
 
-    const wrapper = shallow(<Modal isShown={true} />);
-
-    let modalStyles = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
-
-    expect(modalStyles.height).toBeUndefined();
-    expect(modalStyles.width).toBeUndefined();
-    expect(modalStyles.height).toBeUndefined();
-    expect(modalStyles.width).toBeUndefined();
-
-    wrapper.setProps({
-      paddingTop: mockPaddingTop,
-      paddingLeft: mockPaddingLeft,
-      paddingBottom: mockPaddingBottom,
-      paddingRight: mockPaddingRight,
-    });
-    wrapper.update();
-
-    modalStyles = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
-
-    expect(modalStyles.paddingTop).toBe(mockPaddingTop);
-    expect(modalStyles.paddingRight).toBe(mockPaddingRight);
-    expect(modalStyles.paddingBottom).toBe(mockPaddingBottom);
-    expect(modalStyles.paddingLeft).toBe(mockPaddingLeft);
+    const { container, rerender } = render(<Modal isShown={true} />);
+
+    let modalContainer = container.querySelector(
+      '.modal-container',
+    ) as HTMLElement;
+
+    expect(modalContainer?.style.paddingTop).toBeFalsy();
+    expect(modalContainer?.style.paddingLeft).toBeFalsy();
+    expect(modalContainer?.style.paddingBottom).toBeFalsy();
+    expect(modalContainer?.style.paddingRight).toBeFalsy();
+
+    rerender(
+      <Modal
+        isShown={true}
+        paddingTop={mockPaddingTop}
+        paddingLeft={mockPaddingLeft}
+        paddingBottom={mockPaddingBottom}
+        paddingRight={mockPaddingRight}
+      />,
+    );
+
+    modalContainer = container.querySelector('.modal-container') as HTMLElement;
+
+    expect(modalContainer?.style.paddingTop).toBe(mockPaddingTop);
+    expect(modalContainer?.style.paddingRight).toBe(mockPaddingRight);
+    expect(modalContainer?.style.paddingBottom).toBe(mockPaddingBottom);
+    expect(modalContainer?.style.paddingLeft).toBe(mockPaddingLeft);
   });
 
   it(`if 'width' prop is set, passes 'width' value to child container`, () => {
     const mockWidth = '50px';
 
-    const wrapper = shallow(<Modal isShown={true} />);
+    const { rerender } = render(<Modal isShown={true} />);
 
-    let modalStyles = wrapper
-      .find('.child')
-      .prop('style') as React.CSSProperties;
+    let modalElement = screen.getByTestId('modal') as HTMLElement;
 
-    expect(modalStyles.width).toBeUndefined();
+    expect(modalElement?.style.width).toBeFalsy();
 
-    wrapper.setProps({
-      width: mockWidth,
-    });
-    wrapper.update();
+    rerender(<Modal isShown={true} width={mockWidth} />);
 
-    modalStyles = wrapper.find('.child').prop('style') as React.CSSProperties;
+    modalElement = screen.getByTestId('modal') as HTMLElement;
 
-    expect(modalStyles.width).toBe(mockWidth);
+    expect(modalElement?.style.width).toBe(mockWidth);
   });
 
-  it(`data-test-state attribute is set to "open" when fully opened`, () => {
-    const wrapper = shallow(<Modal isShown={false} />);
-    const selector = '[data-test-id="modal"]';
+  it(`data-test-state attribute is set to "open" when fully opened`, async () => {
+    const { rerender } = render(<Modal isShown={false} />);
 
-    expect(wrapper.find(selector)).toHaveLength(0);
+    expect(screen.queryByTestId('modal')).toBeNull();
 
-    wrapper.setProps({ isShown: true });
-    wrapper.update();
+    rerender(<Modal isShown={true} />);
 
-    expect(wrapper.find(selector).prop('data-test-state')).toBe('closed');
+    const modalElement = screen.getByTestId('modal');
 
-    setTimeout(() => {
-      expect(wrapper.find(selector).prop('data-test-state')).toBe('open');
-    }, 500);
+    expect(modalElement.getAttribute('data-test-state')).toBe('closed');
+
+    await waitFor(
+      () => {
+        expect(modalElement.getAttribute('data-test-state')).toBe('open');
+      },
+      { timeout: 500 },
+    );
   });
 
-  it(`element with data-test-id="modal" is hidden when closed`, () => {
-    const wrapper = shallow(<Modal isShown={true} />);
-    const selector = '[data-test-id="modal"]';
+  it(`element with data-test-id="modal" is hidden when closed`, async () => {
+    const { rerender } = render(<Modal isShown={true} />);
 
-    wrapper.setProps({ isShown: false });
-    wrapper.update();
+    expect(screen.getByTestId('modal')).toBeTruthy();
 
-    expect(wrapper.find(selector)).toHaveLength(0);
+    rerender(<Modal isShown={false} />);
+
+    await waitFor(
+      () => {
+        expect(screen.queryByTestId('modal')).toBeNull();
+      },
+      { timeout: 500 },
+    );
   });
 });

package/src/components/NavigationAwareStation/NavigationAwareStation.spec.tsx

@@ -1,6 +1,7 @@
-jest.mock('hooks/useReactRouterPause/useReactRouterPause');
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+vi.mock('../../hooks/useReactRouterPause/useReactRouterPause');
 
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { asSpy } from '../../helpers/testing';
@@ -13,7 +14,7 @@ describe('NavigationAwareStation', () => {
   });
 
   it('does nothing if restrictNavigation is set to false', async () => {
-    mount(
+    render(
       <MemoryRouter>
         <NavigationAwareStation restrictNavigation={false} />
       </MemoryRouter>,
@@ -24,7 +25,7 @@ describe('NavigationAwareStation', () => {
   });
 
   it('blocks navigation if restrictNavigation is set to true', async () => {
-    mount(
+    render(
       <MemoryRouter>
         <NavigationAwareStation restrictNavigation={true} />
       </MemoryRouter>,
@@ -36,14 +37,14 @@ describe('NavigationAwareStation', () => {
 
   it('pauses navigation until onNavigate is finished and resumes when returned true', async () => {
     const navigation = {
-      isPaused: jest.fn(),
-      pausedLocation: jest.fn(),
-      pause: jest.fn(),
-      resume: jest.fn(),
-      cancel: jest.fn(),
+      isPaused: vi.fn(),
+      pausedLocation: vi.fn(),
+      pause: vi.fn(),
+      resume: vi.fn(),
+      cancel: vi.fn(),
     };
 
-    mount(
+    render(
       <MemoryRouter>
         <NavigationAwareStation
           restrictNavigation={true}
@@ -70,14 +71,14 @@ describe('NavigationAwareStation', () => {
 
   it('pauses navigation until onNavigate is finished and cancels when returned false', async () => {
     const navigation = {
-      isPaused: jest.fn(),
-      pausedLocation: jest.fn(),
-      pause: jest.fn(),
-      resume: jest.fn(),
-      cancel: jest.fn(),
+      isPaused: vi.fn(),
+      pausedLocation: vi.fn(),
+      pause: vi.fn(),
+      resume: vi.fn(),
+      cancel: vi.fn(),
     };
 
-    mount(
+    render(
       <MemoryRouter>
         <NavigationAwareStation
           restrictNavigation={true}
@@ -104,14 +105,14 @@ describe('NavigationAwareStation', () => {
 
   it('pauses navigation until onNavigate is finished and cancels when exception is thrown', async () => {
     const navigation = {
-      isPaused: jest.fn(),
-      pausedLocation: jest.fn(),
-      pause: jest.fn(),
-      resume: jest.fn(),
-      cancel: jest.fn(),
+      isPaused: vi.fn(),
+      pausedLocation: vi.fn(),
+      pause: vi.fn(),
+      resume: vi.fn(),
+      cancel: vi.fn(),
     };
 
-    mount(
+    render(
       <MemoryRouter>
         <NavigationAwareStation
           restrictNavigation={true}