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

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

@@ -1,16 +1,20 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { on } from '../../initialize';
+import type { Mock } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useBusy } from '../../hooks/useBusy/useBusy';
 import { IconName } from '../Icons';
-import { Action } from './Action/Action';
 import { Actions } from './Actions';
 import { ActionData } from './Actions.models';
 
-jest.mock('../../initialize');
+vi.mock('../../initialize');
+vi.mock('../../hooks/useBusy/useBusy', () => ({
+  useBusy: vi.fn(() => ({ isBusy: false })),
+}));
 
-const spy1 = jest.fn();
-const spy2 = jest.fn();
-const spy3 = jest.fn();
+const spy1 = vi.fn();
+const spy2 = vi.fn();
+const spy3 = vi.fn();
 const mockActions: ActionData[] = [
   { label: 'action-label', onActionSelected: spy1 },
   { label: 'action-label', onActionSelected: spy2 },
@@ -18,52 +22,58 @@ const mockActions: ActionData[] = [
 ];
 
 describe('Actions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Actions actions={[]} />);
+    const { container } = render(<Actions actions={[]} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders an Action for each action', () => {
-    const wrapper = shallow(<Actions actions={mockActions} />);
+    const { container } = render(<Actions actions={mockActions} />);
 
-    const actions = wrapper.find(Action);
+    const actions = container.querySelectorAll('[data-test-id="action"]');
 
     expect(actions).toHaveLength(mockActions.length);
   });
 
   it('raises the click event', () => {
-    const wrapper = mount(<Actions actions={mockActions} />);
+    const { container } = render(<Actions actions={mockActions} />);
 
-    const action = wrapper.find(Action).first();
+    const action = container.querySelector('[data-test-id="action"]');
 
-    action.simulate('click');
+    if (action) {
+      fireEvent.click(action);
+    }
 
     expect(spy1).toHaveBeenCalledTimes(1);
   });
 
   it('renders Actions with the passed in width prop', () => {
     const mockWidth = '150px';
-    const wrapper = shallow(<Actions actions={[]} width={mockWidth} />);
+    const { container } = render(<Actions actions={[]} width={mockWidth} />);
 
-    const width = wrapper.find('.container');
+    const actionsContainer = container.querySelector('.actions-container');
 
-    expect(width.prop('style')).toHaveProperty('width', mockWidth);
+    expect(actionsContainer).toHaveStyle({ width: mockWidth });
   });
 
   it('displays an empty Actions container if no actions are passed in', () => {
-    const wrapper = shallow(<Actions actions={[]} />);
+    const { container } = render(<Actions actions={[]} />);
 
-    const container = wrapper.find('.container');
-    const actions = wrapper.find(Action);
+    const actionsContainer = container.querySelector('.actions-container');
+    const actions = container.querySelectorAll('[data-test-id="action"]');
 
-    expect(container.exists()).toBe(true);
+    expect(actionsContainer).toBeInTheDocument();
     expect(actions).toHaveLength(0);
   });
 
   it('allows the icon to be changed', () => {
     const iconProp: IconName = IconName.Delete;
-    const wrapper = shallow(
+    const { container } = render(
       <Actions
         actions={[
           {
@@ -75,24 +85,24 @@ describe('Actions', () => {
       />,
     );
 
-    const action = wrapper.find(Action);
+    const action = container.querySelector('[data-test-id="action"]');
 
-    expect(action.prop('action').icon).toBe(iconProp);
+    expect(action).toBeInTheDocument();
+    // Icon is rendered inside the action
+    const icon = action?.querySelector('svg');
+    expect(icon).toBeInTheDocument();
   });
 
   it('disables all actions when busy', () => {
-    (on as jest.Mock).mockImplementationOnce((event, cb) => {
-      cb(true);
-    });
-
-    const wrapper = shallow(<Actions actions={mockActions} />);
+    (useBusy as Mock).mockImplementation(() => ({ isBusy: true }));
 
-    expect(on).toHaveBeenCalledWith('busy', expect.any(Function));
+    const { container } = render(<Actions actions={mockActions} />);
 
-    const actions = wrapper.find(Action);
+    const actions = container.querySelectorAll('[data-test-id="action"]');
 
     actions.forEach((action) => {
-      expect(action.prop('action').isDisabled).toBe(true);
+      // When disabled, the action gets the isDisabled class
+      expect(action.classList.contains('isDisabled')).toBe(true);
     });
   });
 });

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

@@ -1,7 +1,8 @@
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { Link, BrowserRouter as Router } from 'react-router-dom';
-import { IconName, Icons } from '../../Icons';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { IconName } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { Button } from './Button';
 
@@ -20,35 +21,36 @@ const CustomIcon: React.FC = () => (
 describe('Button (with icon)', () => {
   describe('ContextButtonElement', () => {
     it('renders the component without crashing', () => {
-      const wrapper = mount(<Button />);
+      const { container } = render(<Button />);
 
-      expect(wrapper).toBeTruthy();
+      expect(container.querySelector('button')).toBeInTheDocument();
     });
 
     it('raises the onButtonClicked event', () => {
-      const spy = jest.fn();
-      const wrapper = mount(<Button onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(<Button 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(<Button className={mockClassName} />);
+      const { container } = render(<Button 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(<Button />);
+      const { container } = render(<Button />);
 
-      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', () => {
@@ -56,160 +58,157 @@ describe('Button (with icon)', () => {
       const mockHeight = '75px';
       const mockWidth = '80px';
 
-      const wrapper = mount(<Button />);
+      const { container, rerender } = render(<Button />);
 
-      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(
+        <Button 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(<Button onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(<Button 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(<Button disabled={true} onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(
+        <Button 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 active class', () => {
-      const wrapper = mount(<Button />);
+      const { container } = render(<Button />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.hasClass('active')).toBe(true);
+      expect(button.classList.contains('active')).toBe(true);
     });
 
     it('context button type should have a context class', () => {
-      const wrapper = mount(<Button buttonContext={ButtonContext.Context} />);
+      const { container } = render(
+        <Button 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('context button type should have a icon class', () => {
-      const wrapper = mount(<Button buttonContext={ButtonContext.Icon} />);
+      const { container } = render(
+        <Button buttonContext={ButtonContext.Icon} />,
+      );
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.hasClass('icon')).toBe(true);
+      expect(button.classList.contains('icon')).toBe(true);
     });
 
     it('active button type should have a active class', () => {
-      const wrapper = mount(<Button buttonContext={ButtonContext.Active} />);
+      const { container } = render(
+        <Button 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 an icon as it's image from the Icons component`, () => {
-      const wrapper = mount(<Button icon={IconName.ChevronRight} />);
+      const { container } = render(<Button icon={IconName.ChevronRight} />);
 
-      const icon = wrapper.find(Icons);
+      const icon = container.querySelector('svg');
 
-      expect(icon.exists()).toBe(true);
+      expect(icon).toBeInTheDocument();
     });
 
     it('renders `customIcon` when provided', () => {
-      const wrapper = mount(<Button customIcon={<CustomIcon />} />);
-      const customIcon = wrapper.find(CustomIcon);
+      const { container } = render(<Button customIcon={<CustomIcon />} />);
+      const customIcon = container.querySelector('svg');
 
-      expect(customIcon.exists()).toBe(true);
+      expect(customIcon).toBeInTheDocument();
     });
 
     it('renders `customIcon` instead of `icon` when both are provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Button icon={IconName.ChevronRight} customIcon={<CustomIcon />} />,
       );
 
-      const customIcon = wrapper.find(CustomIcon);
-      const icon = wrapper.find(Icons);
+      const svgs = container.querySelectorAll('svg');
 
-      expect(customIcon.exists()).toBe(true);
-      expect(icon.exists()).toBe(false);
+      expect(svgs).toHaveLength(1);
     });
   });
 
   describe('NavigationButtonElement', () => {
     it('renders the component without crashing', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} />
         </Router>,
       );
 
-      expect(wrapper).toBeTruthy();
+      expect(container.querySelector('a')).toBeInTheDocument();
     });
 
     it('creates a class based on the className prop', () => {
       const mockClassName = 'test-class';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
-          <Button {...navigationButtonProps} className={mockClassName} />,
+          <Button {...navigationButtonProps} className={mockClassName} />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.hasClass(mockClassName)).toBe(true);
+      expect(link.classList.contains(mockClassName)).toBe(true);
     });
 
     it('renders the correct path in the Link component', () => {
       const mockPath = '/test';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button path={mockPath} />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('to')).toBe(mockPath);
+      expect(link.getAttribute('href')).toBe(mockPath);
     });
 
     it('accepts width/height styles', () => {
       const mockHeight = '75px';
       const mockWidth = '80px';
 
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button
             {...navigationButtonProps}
@@ -219,125 +218,123 @@ describe('Button (with icon)', () => {
         </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 button to be enabled by default', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} />
         </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 button to be disabled', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} disabled={true} />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.hasClass('disabled')).toBe(true);
+      expect(link.classList.contains('disabled')).toBe(true);
     });
 
     it('renders the correct data-test-id attribute', () => {
       const mockTestId = 'test-button';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} dataTestId={mockTestId} />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('data-test-id')).toBe(mockTestId);
+      expect(link.getAttribute('data-test-id')).toBe(mockTestId);
     });
 
     it('renders the Icons component with the correct default icon', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} />
         </Router>,
       );
 
-      const icons = wrapper.find(Icons);
+      const svg = container.querySelector('svg');
 
-      expect(icons.prop('icon')).toBe(IconName.ChevronRight);
+      expect(svg).toBeInTheDocument();
     });
 
     it('renders the Icons component with the correct default icon when `openInNewTab` is set to `true`', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} openInNewTab={true} />
         </Router>,
       );
 
-      const icons = wrapper.find(Icons);
+      const svg = container.querySelector('svg');
 
-      expect(icons.prop('icon')).toBe(IconName.External);
+      expect(svg).toBeInTheDocument();
     });
 
     it('opens link in new tab when `openInNewTab` is set to `true`', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} openInNewTab={true} />
         </Router>,
       );
 
-      const link = wrapper.find(Link);
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('target')).toBe('_blank');
+      expect(link.getAttribute('target')).toBe('_blank');
     });
 
     it('does not open link in new tab by default', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} />
         </Router>,
       );
 
-      const link = wrapper.find(Link);
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('target')).toBeUndefined();
+      expect(link.getAttribute('target')).toBeNull();
     });
 
     it('renders the Icons component with the correct icon', () => {
       const mockIcon = IconName.Copy;
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} icon={mockIcon} />
         </Router>,
       );
 
-      const icons = wrapper.find(Icons);
+      const svg = container.querySelector('svg');
 
-      expect(icons.prop('icon')).toBe(mockIcon);
+      expect(svg).toBeInTheDocument();
     });
 
     it('renders `customIcon` when provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button {...navigationButtonProps} customIcon={<CustomIcon />} />
         </Router>,
       );
-      const customIcon = wrapper.find(CustomIcon);
+      const customIcon = container.querySelector('svg');
 
-      expect(customIcon.exists()).toBe(true);
+      expect(customIcon).toBeInTheDocument();
     });
 
     it('renders `customIcon` instead of `icon` when both are provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <Button
             {...navigationButtonProps}
@@ -347,11 +344,9 @@ describe('Button (with icon)', () => {
         </Router>,
       );
 
-      const customIcon = wrapper.find(CustomIcon);
-      const icon = wrapper.find(Icons);
+      const svgs = container.querySelectorAll('svg');
 
-      expect(customIcon.exists()).toBe(true);
-      expect(icon.exists()).toBe(false);
+      expect(svgs).toHaveLength(1);
     });
   });
 });

package/src/components/Buttons/Button/Button.tsx

@@ -69,6 +69,7 @@ const ContextButtonElement = React.forwardRef<
     className = '',
     customIcon,
     dataTestId,
+    title,
     onButtonClicked = noop,
     onBlur,
   }: ContextButtonProps,
@@ -93,6 +94,7 @@ const ContextButtonElement = React.forwardRef<
       disabled={disabled}
       onBlur={onBlur}
       data-test-id={dataTestId ?? 'button'}
+      title={title}
     >
       {customIcon ? customIcon : <Icons icon={icon} />}
     </button>
@@ -113,6 +115,7 @@ const NavigationButtonElement = React.forwardRef<
     dataTestId = undefined,
     disabled = false,
     openInNewTab = false,
+    title,
   }: NavigationButtonProps,
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
@@ -132,6 +135,7 @@ const NavigationButtonElement = React.forwardRef<
       style={{ height, width }}
       data-test-id={dataTestId ?? 'button'}
       target={openInNewTab ? '_blank' : undefined}
+      title={title}
     >
       {customIcon ? customIcon : <Icons icon={icon ? icon : defaultIcon} />}
     </Link>

package/src/components/Buttons/Button.model.ts

@@ -104,4 +104,6 @@ interface CommonButtonOptions {
   className?: string;
   /** Optional data-test-id */
   dataTestId?: string;
+  /** Optional title attribute for the button */
+  title?: string;
 }