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

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

@@ -1,7 +1,8 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { IconName, Icons } from '../../Icons';
+import { describe, expect, it, vi } from 'vitest';
+import { IconName } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { CompositeButton } from './CompositeButton';
 
@@ -16,35 +17,38 @@ const CustomIcon: React.FC = () => (
 describe('CompositeButton', () => {
   describe('Composite context button', () => {
     it('renders the component without crashing', () => {
-      const wrapper = shallow(<CompositeButton />);
+      const { container } = render(<CompositeButton />);
 
-      expect(wrapper).toBeTruthy();
+      expect(container.querySelector('button')).toBeInTheDocument();
     });
 
     it('raises the onButtonClicked event', () => {
-      const spy = jest.fn();
-      const wrapper = mount(<CompositeButton onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(<CompositeButton 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(<CompositeButton className={mockClassName} />);
+      const { container } = render(
+        <CompositeButton 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(<CompositeButton />);
+      const { container } = render(<CompositeButton />);
 
-      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', () => {
@@ -52,293 +56,290 @@ describe('CompositeButton', () => {
       const mockHeight = '75px';
       const mockWidth = '80px';
 
-      const wrapper = mount(<CompositeButton />);
+      const { container, rerender } = render(<CompositeButton />);
 
-      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(
+        <CompositeButton
+          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(<CompositeButton onButtonClicked={spy} />);
+      const spy = vi.fn();
+      const { container } = render(<CompositeButton 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(
         <CompositeButton 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(<CompositeButton />);
+      const { container } = render(<CompositeButton />);
 
-      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(
         <CompositeButton 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(
         <CompositeButton 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(<CompositeButton text={mockText} />);
+      const { container } = render(<CompositeButton 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(<CompositeButton />);
+      const { container } = render(<CompositeButton />);
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button')!;
 
-      expect(button.text()).toBe('');
+      expect(button.textContent).toBe('');
     });
 
     it('renders `customIcon` when provided', () => {
-      const wrapper = mount(<CompositeButton customIcon={<CustomIcon />} />);
-      const customIcon = wrapper.find(CustomIcon);
+      const { container } = render(
+        <CompositeButton customIcon={<CustomIcon />} />,
+      );
+      const customIcon = container.querySelector('svg');
 
-      expect(customIcon.exists()).toBeTruthy();
+      expect(customIcon).toBeInTheDocument();
     });
 
     it('renders `customIcon` instead of `icon` when both provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <CompositeButton
           customIcon={<CustomIcon />}
           icon={IconName.ChevronRight}
         />,
       );
-      const customIcon = wrapper.find(CustomIcon);
+      const svgs = container.querySelectorAll('svg');
 
-      expect(customIcon.exists()).toBeTruthy();
-      expect(wrapper.find(Icons).exists()).toBeFalsy();
+      expect(svgs).toHaveLength(1);
     });
   });
 
   describe('Composite navigation button', () => {
     it('renders the component without crashing', () => {
-      const wrapper = shallow(<CompositeButton path="/example" />);
+      const { container } = render(
+        <Router>
+          <CompositeButton path="/example" />
+        </Router>,
+      );
 
-      expect(wrapper).toBeTruthy();
+      expect(container.querySelector('a')).toBeInTheDocument();
     });
 
     it('renders a Link component with the provided path', () => {
       const mockPath = '/example';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton 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('applies the provided className to the component', () => {
       const mockClassName = 'test-class';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton className={mockClassName} path="/example" />
         </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('applies the disabled class when disabled prop is true', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
-          <CompositeButton disabled={true} path="/example" />,
+          <CompositeButton disabled={true} path="/example" />
         </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('does not apply the disabled class when disabled prop is false', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton disabled={false} path="/example" />
         </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('sets the height and width styles based on the provided props', () => {
       const mockHeight = '50px';
       const mockWidth = '100px';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton
             height={mockHeight}
             width={mockWidth}
             path="/example"
           />
-          ,
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('style')?.height).toBe(mockHeight);
-      expect(link.prop('style')?.width).toBe(mockWidth);
+      expect(link.style.height).toBe(mockHeight);
+      expect(link.style.width).toBe(mockWidth);
     });
 
     it('sets the direction style to "rtl" when iconPosition is "left"', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton iconPosition="left" path="/example" />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('style')).toEqual({
-        direction: 'rtl',
-      });
+      expect(link.style.direction).toBe('rtl');
     });
 
     it('sets the direction style to "ltr" when iconPosition is "right"', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton iconPosition="right" path="/example" />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('style')).toEqual({
-        direction: 'ltr',
-      });
+      expect(link.style.direction).toBe('ltr');
     });
 
     it('renders the text inside a div', () => {
       const mockText = 'Example Button';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton text={mockText} path="/example" />
         </Router>,
       );
 
-      const textDiv = wrapper.find('div').at(0);
+      const textDiv = container.querySelector('div')!;
 
-      expect(textDiv.text()).toBe(mockText);
+      expect(textDiv.textContent).toBe(mockText);
     });
 
     it('renders the icon inside a div when icon prop is provided', () => {
       const mockIcon = IconName.Calendar;
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton icon={mockIcon} path="/example" />
         </Router>,
       );
 
-      const iconDiv = wrapper.find('div').at(1);
+      const svg = container.querySelector('svg');
 
-      expect(iconDiv.find('Icons').prop('icon')).toBe(mockIcon);
+      expect(svg).toBeInTheDocument();
     });
 
     it('renders the Icons component with the correct default icon', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton path="/example" />
         </Router>,
       );
-      const iconDiv = wrapper.find('div').at(1);
 
-      expect(iconDiv.find('Icons').prop('icon')).toBe(IconName.ChevronRight);
+      const svg = container.querySelector('svg');
+
+      expect(svg).toBeInTheDocument();
     });
 
     it('renders `External` icon by default when none provided and `openInNewTab: true`', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton path="/example" openInNewTab={true} />
         </Router>,
       );
-      const iconDiv = wrapper.find('div').at(1);
 
-      expect(iconDiv.find('Icons').prop('icon')).toBe(IconName.External);
+      const svg = container.querySelector('svg');
+
+      expect(svg).toBeInTheDocument();
     });
 
     it('renders `customIcon` when provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton customIcon={<CustomIcon />} path="/example" />
         </Router>,
       );
-      const customIcon = wrapper.find(CustomIcon);
+      const customIcon = container.querySelector('svg');
 
-      expect(customIcon.exists()).toBeTruthy();
+      expect(customIcon).toBeInTheDocument();
     });
 
     it('renders `customIcon` instead of `icon` when both provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton
             customIcon={<CustomIcon />}
@@ -347,34 +348,34 @@ describe('CompositeButton', () => {
           />
         </Router>,
       );
-      const iconDiv = wrapper.find('div').at(1);
 
-      expect(iconDiv.find('CustomIcon').exists()).toBeTruthy();
-      expect(iconDiv.find('Icons').exists()).toBeFalsy();
+      const svgs = container.querySelectorAll('svg');
+
+      expect(svgs).toHaveLength(1);
     });
 
     it('renders the default data-test-id when dataTestId prop is not provided', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton path="/example" />
         </Router>,
       );
 
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('data-test-id')).toBe('text-button');
+      expect(link.getAttribute('data-test-id')).toBe('text-button');
     });
 
     it('renders the provided data-test-id when dataTestId prop is provided', () => {
       const mockDataTestId = 'test-id';
-      const wrapper = mount(
+      const { container } = render(
         <Router>
           <CompositeButton dataTestId={mockDataTestId} path="/example" />
         </Router>,
       );
-      const link = wrapper.find('Link');
+      const link = container.querySelector('a')!;
 
-      expect(link.prop('data-test-id')).toBe(mockDataTestId);
+      expect(link.getAttribute('data-test-id')).toBe(mockDataTestId);
     });
   });
 });