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

package/src/components/Buttons/TextButton/TextButton.spec.tsx

@@ -1,41 +1,43 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { Link, BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
 import { ButtonContext } from '../Button.model';
 import { TextButton } from './TextButton';
 
 describe('TextButton', () => {
   describe('TextContextButton', () => {
     it('renders the component without crashing', () => {
-      const wrapper = shallow(<TextButton />);
+      const { container } = render(<TextButton />);
 
-      expect(wrapper).toBeTruthy();
+      expect(container.querySelector('button')).toBeInTheDocument();
     });
 
     it('raises the onButtonClicked event', () => {
-      const spy = jest.fn();
-      const wrapper = mount(<TextButton onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(<TextButton onButtonClicked={spy} />);
 
-      wrapper.simulate('click');
+      const button = container.querySelector('button')!;
+      fireEvent.click(button);
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('creates a class based off of the className prop', () => {
       const mockClassName = 'test-class';
-      const wrapper = mount(<TextButton className={mockClassName} />);
+      const { container } = render(<TextButton className={mockClassName} />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.hasClass(mockClassName)).toBe(true);
+      expect(button.classList.contains(mockClassName)).toBe(true);
     });
 
     it(`button 'type' must be 'button' by default`, () => {
-      const wrapper = mount(<TextButton />);
+      const { container } = render(<TextButton />);
 
-      const buttonType = wrapper.find('button').prop('type');
+      const button = container.querySelector('button')!;
 
-      expect(buttonType).toBe('button');
+      expect(button.type).toBe('button');
     });
 
     it('accepts type html attribute and width/height styles', () => {
@@ -43,204 +45,197 @@ describe('TextButton', () => {
       const mockHeight = '75px';
       const mockWidth = '80px';
 
-      const wrapper = mount(<TextButton />);
+      const { container, rerender } = render(<TextButton />);
 
-      let buttonType = wrapper.find('button').prop('type');
-      let buttonStyles = wrapper
-        .find('button')
-        .prop('style') as React.CSSProperties;
+      let button = container.querySelector('button')!;
 
-      expect(buttonType).toBe('button');
-      expect(buttonStyles.height).toBeUndefined();
-      expect(buttonStyles.width).toBeUndefined();
+      expect(button.type).toBe('button');
+      expect(button.style.height).toBe('');
+      expect(button.style.width).toBe('');
 
-      wrapper.setProps({
-        type: mockType,
-        height: mockHeight,
-        width: mockWidth,
-      });
-      wrapper.update();
+      rerender(
+        <TextButton type={mockType} height={mockHeight} width={mockWidth} />,
+      );
 
-      buttonType = wrapper.find('button').prop('type');
-      buttonStyles = wrapper
-        .find('button')
-        .prop('style') as React.CSSProperties;
+      button = container.querySelector('button')!;
 
-      expect(buttonType).toBe(mockType);
-      expect(buttonStyles.height).toBe(mockHeight);
-      expect(buttonStyles.width).toBe(mockWidth);
+      expect(button.type).toBe(mockType);
+      expect(button.style.height).toBe(mockHeight);
+      expect(button.style.width).toBe(mockWidth);
     });
 
     it('allows the button to be enabled by default', () => {
-      const spy = jest.fn();
-      const wrapper = mount(<TextButton onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(<TextButton onButtonClicked={spy} />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      wrapper.simulate('click');
+      fireEvent.click(button);
 
-      expect(button.prop('disabled')).toBe(false);
+      expect(button.disabled).toBe(false);
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('allows button to be disabled', () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <TextButton disabled={true} onButtonClicked={spy} />,
       );
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      wrapper.simulate('click');
+      fireEvent.click(button);
 
-      expect(button.prop('disabled')).toBe(true);
+      expect(button.disabled).toBe(true);
       expect(spy).not.toHaveBeenCalled();
     });
 
     it('default should have a context class', () => {
-      const wrapper = mount(<TextButton />);
+      const { container } = render(<TextButton />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.hasClass('context')).toBe(true);
+      expect(button.classList.contains('context')).toBe(true);
     });
 
     it('context button type should have a context class', () => {
-      const wrapper = mount(
+      const { container } = render(
         <TextButton buttonContext={ButtonContext.Context} />,
       );
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.hasClass('context')).toBe(true);
+      expect(button.classList.contains('context')).toBe(true);
     });
 
     it('active button type should have a active class', () => {
-      const wrapper = mount(
+      const { container } = render(
         <TextButton buttonContext={ButtonContext.Active} />,
       );
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.hasClass('active')).toBe(true);
+      expect(button.classList.contains('active')).toBe(true);
     });
 
     it(`renders value from 'text' prop`, () => {
       const mockText = 'mock-text';
 
-      const wrapper = mount(<TextButton text={mockText} />);
+      const { container } = render(<TextButton text={mockText} />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.text()).toBe(mockText);
+      expect(button.textContent).toBe(mockText);
     });
 
     it(`defaults to an empty string is 'text' prop is not set`, () => {
-      const wrapper = mount(<TextButton />);
+      const { container } = render(<TextButton />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.text()).toBe('');
+      expect(button.textContent).toBe('');
     });
   });
 
   describe('TextNavigationButton', () => {
     it('renders the component without crashing', () => {
-      const wrapper = shallow(<TextButton path={'/'} />);
-      expect(wrapper).toBeTruthy();
+      const { container } = render(
+        <Router>
+          <TextButton path={'/'} />
+        </Router>,
+      );
+      expect(container.querySelector('a')).toBeInTheDocument();
     });
 
     it('renders as a navigation button when path prop is defined', () => {
       const mockPath = '/home';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={mockPath} />
         </Router>,
       );
-      const link = wrapper.find(Link);
-      expect(link).toHaveLength(1);
-      expect(link.prop('to')).toBe(mockPath);
+      const link = container.querySelector('a')!;
+      expect(link).toBeInTheDocument();
+      expect(link.getAttribute('href')).toBe(mockPath);
     });
 
     it('does not open link in new tab by default', () => {
       const mockPath = '/home';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={mockPath} />
         </Router>,
       );
-      const link = wrapper.find(Link);
-      expect(link.prop('target')).toBeUndefined();
+      const link = container.querySelector('a')!;
+      expect(link.getAttribute('target')).toBeNull();
     });
 
     it('opens link in new tab when openInNewTab prop set to true', () => {
       const mockPath = '/home';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={mockPath} openInNewTab={true} />
         </Router>,
       );
-      const link = wrapper.find(Link);
-      expect(link.prop('target')).toBe('_blank');
+      const link = container.querySelector('a')!;
+      expect(link.getAttribute('target')).toBe('_blank');
     });
 
     it('creates a class based on the className prop', () => {
       const mockClassName = 'test-class';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
-          <TextButton path={'/test'} className={mockClassName} />,
+          <TextButton path={'/test'} className={mockClassName} />
         </Router>,
       );
-      const link = wrapper.find(Link);
-      expect(link.hasClass(mockClassName)).toBe(true);
+      const link = container.querySelector('a')!;
+      expect(link.classList.contains(mockClassName)).toBe(true);
     });
 
     it('accepts width and height styles', () => {
       const mockHeight = '75px';
       const mockWidth = '80px';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={'/test'} width={mockWidth} height={mockHeight} />
         </Router>,
       );
-      const linkStyles = wrapper
-        .find('Link')
-        .prop('style') as React.CSSProperties;
+      const link = container.querySelector('a')!;
 
-      expect(linkStyles.height).toBe(mockHeight);
-      expect(linkStyles.width).toBe(mockWidth);
+      expect(link.style.height).toBe(mockHeight);
+      expect(link.style.width).toBe(mockWidth);
     });
 
     it('allows the link to be enabled by default', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={'/test'} />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.hasClass('disabled')).toBe(false);
+      expect(link.classList.contains('disabled')).toBe(false);
     });
 
     it('allows the button to be disabled', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={'/test'} disabled={true} />
         </Router>,
       );
-      const link = wrapper.find('Link');
-      expect(link.hasClass('disabled')).toBe(true);
+      const link = container.querySelector('a')!;
+      expect(link.classList.contains('disabled')).toBe(true);
     });
 
     it('adds `navigation` class for link buttons', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <TextButton path={'/test'} />
         </Router>,
       );
-      const link = wrapper.find(Link);
-      expect(link.hasClass('navigation')).toBe(true);
+      const link = container.querySelector('a')!;
+      expect(link.classList.contains('navigation')).toBe(true);
     });
   });
 });

package/src/components/ConfirmDialog/ConfirmDialog.spec.tsx

@@ -1,9 +1,6 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React, { useState } from 'react';
-import { act } from 'react-dom/test-utils';
-import { TextButton } from '../Buttons';
-import { Message } from '../Message';
+import { describe, expect, it, vi } from 'vitest';
 import { ConfirmDialog } from './ConfirmDialog';
 import { ConfirmationConfig } from './ConfirmDialog.models';
 
@@ -14,8 +11,11 @@ const TestWrapper: React.FC<{
 
   return (
     <div>
-      <button id="test-mount" onClick={() => setState(true)}></button>
-      <button id="test-unmount" onClick={() => setState(false)}></button>
+      <button data-test-id="test-mount" onClick={() => setState(true)}></button>
+      <button
+        data-test-id="test-unmount"
+        onClick={() => setState(false)}
+      ></button>
       {state && <ConfirmDialog onConfirmOpen={onConfirmOpen} />}
     </div>
   );
@@ -23,77 +23,82 @@ const TestWrapper: React.FC<{
 
 describe('ConfirmDialog', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ConfirmDialog />);
+    const { container } = render(<ConfirmDialog />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('allows an optional class to be passed in', () => {
     const mockClass = 'test-class';
-    const wrapper = mount(<ConfirmDialog className={mockClass} />);
+    const { container } = render(<ConfirmDialog className={mockClass} />);
 
-    const container = wrapper.find('.container').first();
+    const dialogContainer = container.querySelector(
+      '.confirm-dialog-container',
+    );
 
-    expect(container.hasClass(mockClass)).toBe(true);
+    expect(dialogContainer?.classList.contains(mockClass)).toBe(true);
   });
 
   it(`'accepts placement prop`, () => {
-    const wrapper = shallow(<ConfirmDialog placement="top" />);
+    const { container } = render(<ConfirmDialog placement="top" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('disables container click event propagation', () => {
-    const spy = jest.fn();
-    const mockedEvent = { stopPropagation: spy };
-    const wrapper = shallow(<ConfirmDialog />);
-
-    const container = wrapper.find('.container');
-
-    container.simulate('click', mockedEvent);
-
-    expect(spy).toHaveBeenCalledTimes(1);
+    const parentClickSpy = vi.fn();
+    const { container } = render(
+      <div onClick={parentClickSpy}>
+        <ConfirmDialog />
+      </div>,
+    );
+
+    const dialogContainer = container.querySelector(
+      '.confirm-dialog-container',
+    )!;
+    fireEvent.click(dialogContainer);
+
+    expect(parentClickSpy).not.toHaveBeenCalled();
   });
 
   describe('title and body', () => {
     it(`renders a default title and body and allows both props to be passed in`, () => {
       const mockTitle = 'test-title';
       const mockBody = 'test-body';
-      const wrapper = shallow(<ConfirmDialog />);
+      const { container, rerender } = render(<ConfirmDialog />);
 
-      let message = wrapper.find(Message);
-      let body = wrapper.find('.confirmBodyText');
+      let message = screen.getByTestId('message-title');
+      let body = container.querySelector('.confirmBodyText');
 
-      expect(message.prop('title')).toBe('Confirmation needed');
-      expect(body.text()).toBe(
+      expect(message.textContent).toBe('Confirmation needed');
+      expect(body?.textContent).toBe(
         'The action is irreversible. Please confirm to proceed.',
       );
 
-      wrapper.setProps({ title: mockTitle, children: mockBody });
-      wrapper.update();
+      rerender(<ConfirmDialog title={mockTitle}>{mockBody}</ConfirmDialog>);
 
-      message = wrapper.find(Message);
-      body = wrapper.find('.confirmBodyText');
+      message = screen.getByTestId('message-title');
+      body = container.querySelector('.confirmBodyText');
 
-      expect(message.prop('title')).toBe(mockTitle);
-      expect(body.text()).toBe(mockBody);
+      expect(message.textContent).toBe(mockTitle);
+      expect(body?.textContent).toBe(mockBody);
     });
 
     it(`accepts an element`, () => {
       const mockBody: JSX.Element = <span>test-body</span>;
-      const wrapper = shallow(<ConfirmDialog>{mockBody}</ConfirmDialog>);
+      const { container } = render(<ConfirmDialog>{mockBody}</ConfirmDialog>);
 
-      const body = wrapper.find('.confirmBodyText');
+      const body = container.querySelector('.confirmBodyText');
 
-      expect(body.contains(mockBody)).toBe(true);
+      expect(body?.querySelector('span')?.textContent).toBe('test-body');
     });
 
     it(`disables 'isBodyPositionAbsolute' in the Message component`, () => {
-      const wrapper = shallow(<ConfirmDialog />);
-
-      const message = wrapper.find(Message);
+      const { container } = render(<ConfirmDialog />);
 
-      expect(message.prop('isBodyPositionAbsolute')).toBe(false);
+      // Check that the body element doesn't have the absolute class
+      const body = container.querySelector('.body');
+      expect(body?.classList.contains('absolute')).toBe(false);
     });
   });
 
@@ -101,47 +106,39 @@ describe('ConfirmDialog', () => {
     it(`renders 'Cancel' and 'Confirm' button by default allows both button texts to be passed in`, () => {
       const mockCancelButton = 'test-cancel-button-text';
       const mockConfirmButton = 'test-confirm-button-text';
-      const wrapper = shallow(<ConfirmDialog />);
+      const { rerender } = render(<ConfirmDialog />);
 
-      let cancelButton = wrapper.find(TextButton).first();
-      let confirmButton = wrapper.find(TextButton).last();
+      let cancelButton = screen.getByTestId('cancel');
+      let confirmButton = screen.getByTestId('confirm');
 
-      expect(cancelButton.prop('text')).toBe('Cancel');
-      expect(confirmButton.prop('text')).toBe('Confirm');
+      expect(cancelButton.textContent).toBe('Cancel');
+      expect(confirmButton.textContent).toBe('Confirm');
 
-      wrapper.setProps({
-        cancelButtonText: mockCancelButton,
-        confirmButtonText: mockConfirmButton,
-      });
-      wrapper.update();
+      rerender(
+        <ConfirmDialog
+          cancelButtonText={mockCancelButton}
+          confirmButtonText={mockConfirmButton}
+        />,
+      );
 
-      cancelButton = wrapper.find(TextButton).first();
-      confirmButton = wrapper.find(TextButton).last();
+      cancelButton = screen.getByTestId('cancel');
+      confirmButton = screen.getByTestId('confirm');
 
-      expect(cancelButton.prop('text')).toBe(mockCancelButton);
-      expect(confirmButton.prop('text')).toBe(mockConfirmButton);
+      expect(cancelButton.textContent).toBe(mockCancelButton);
+      expect(confirmButton.textContent).toBe(mockConfirmButton);
     });
 
     it(`raises both 'onCancel' and 'onConfirm'`, () => {
-      const mockEvent = {
-        e: 'event',
-      };
-      const cancelSpy = jest.fn();
-      const confirmSpy = jest.fn();
-
-      const wrapper = shallow(
-        <ConfirmDialog onCancel={cancelSpy} onConfirm={confirmSpy} />,
-      );
+      const cancelSpy = vi.fn();
+      const confirmSpy = vi.fn();
+
+      render(<ConfirmDialog onCancel={cancelSpy} onConfirm={confirmSpy} />);
 
-      const cancelButton = wrapper.find(TextButton).first();
-      const confirmButton = wrapper.find(TextButton).last();
+      const cancelButton = screen.getByTestId('cancel');
+      const confirmButton = screen.getByTestId('confirm');
 
-      act(() => {
-        // @ts-ignore
-        cancelButton.prop('onButtonClicked')?.(mockEvent);
-        // @ts-ignore
-        confirmButton.prop('onButtonClicked')?.(mockEvent);
-      });
+      fireEvent.click(cancelButton);
+      fireEvent.click(confirmButton);
 
       expect(cancelSpy).toHaveBeenCalledTimes(1);
       expect(confirmSpy).toHaveBeenCalledTimes(1);
@@ -149,18 +146,17 @@ describe('ConfirmDialog', () => {
   });
 
   it(`raises 'onConfirmOpen' if set`, () => {
-    const spy = jest.fn();
-    const wrapper = mount(<TestWrapper onConfirmOpen={spy} />);
+    const spy = vi.fn();
+    render(<TestWrapper onConfirmOpen={spy} />);
 
-    const mountButton = wrapper.find('#test-mount').first();
-    const unmountButton = wrapper.find('#test-unmount').last();
+    const mountButton = screen.getByTestId('test-mount');
+    const unmountButton = screen.getByTestId('test-unmount');
 
-    mountButton.simulate('click');
-    wrapper.update();
+    fireEvent.click(mountButton);
 
     expect(spy).toHaveBeenCalledWith(true);
 
-    unmountButton.simulate('click');
+    fireEvent.click(unmountButton);
 
     expect(spy).toHaveBeenCalledWith(false);
     expect(spy).toHaveBeenCalledTimes(2);

package/src/components/DateTime/DatePicker/DatePicker.spec.tsx

@@ -1,23 +1,24 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import { DateTime, Settings } from 'luxon';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { DatePicker } from './DatePicker';
 
 describe('DatePicker', () => {
   Settings.defaultLocale = navigator.language;
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<DatePicker value={DateTime.local()} />);
+    const { container } = render(<DatePicker value={DateTime.local()} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('accepts the value from prop', () => {
     const now = DateTime.local();
-    const wrapper = shallow(<DatePicker value={now} />);
+    const { container } = render(<DatePicker value={now} />);
 
-    expect(wrapper.find('Calendar').prop('value')).toStrictEqual(
-      now.toJSDate(),
-    );
+    // Calendar component from react-calendar should render
+    const calendar = container.querySelector('.react-calendar');
+    expect(calendar).toBeInTheDocument();
   });
 });