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

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -1,15 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { mount, shallow } from 'enzyme';
-import React, { ReactNode, SyntheticEvent } from 'react';
-import ContentLoader from 'react-content-loader';
-import { act } from 'react-dom/test-utils';
+import { fireEvent, render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { ImageLoader } from './ImageLoader';
 
 describe('ImageLoader', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const { container } = render(<ImageLoader imgSrc="" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`gives the image element it's src, height, width, and alt attributes`, () => {
@@ -18,7 +17,7 @@ describe('ImageLoader', () => {
     const mockWidth = 'test-width';
     const mockAlt = 'test-alt';
 
-    const wrapper = mount(
+    const { container } = render(
       <ImageLoader
         imgSrc={mockSrc}
         alt={mockAlt}
@@ -27,110 +26,104 @@ describe('ImageLoader', () => {
       />,
     );
 
-    const src = wrapper.find('img').prop('src');
-    const height = wrapper.find('img').prop('height');
-    const width = wrapper.find('img').prop('width');
-    const alt = wrapper.find('img').prop('alt');
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    expect(src).toBe(mockSrc);
-    expect(height).toBe(mockHeight);
-    expect(width).toBe(mockWidth);
-    expect(alt).toBe(mockAlt);
+    expect(img.src).toContain(mockSrc);
+    expect(img.getAttribute('height')).toBe(mockHeight);
+    expect(img.getAttribute('width')).toBe(mockWidth);
+    expect(img.alt).toBe(mockAlt);
   });
 
   it('renders the loading animation while an image is loading', () => {
-    const wrapper = mount(<ImageLoader imgSrc="" />);
+    const { container } = render(<ImageLoader imgSrc="" />);
 
-    const loader = wrapper.find(ContentLoader);
-    const imgDisplay = wrapper.find('img').prop('style')?.display;
+    const loader = container.querySelector('svg');
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    expect(loader.exists()).toBe(true);
-    expect(imgDisplay).toBe('none');
+    expect(loader).toBeInTheDocument();
+    expect(img.style.display).toBe('none');
   });
 
   it('renders the image after loading has completed', () => {
-    const wrapper = mount(<ImageLoader imgSrc="" />);
+    const { container } = render(<ImageLoader imgSrc="" />);
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
-    wrapper.update();
+    fireEvent.load(img);
 
-    const loader = wrapper.find(ContentLoader);
-    const imgDisplay = wrapper.find('img').prop('style')?.display;
+    const loader = container.querySelector('svg');
 
-    expect(loader.exists()).toBe(false);
-    expect(imgDisplay).toBe('unset');
+    expect(loader).not.toBeInTheDocument();
+    expect(img.style.display).toBe('unset');
   });
 
   it('emits onLoad callback with img src after successful load', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockUrl = 'mock-url';
-    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
+    const { container } = render(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
+    fireEvent.load(img);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(mockUrl);
   });
 
   it('emits onImageClicked when the image is clicked with the event', () => {
-    const mockEvent = {
-      e: 'event',
-    };
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockUrl = 'mock-url';
-    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onImageClick={spy} />);
-
-    const image = wrapper.find('img');
+    const { container } = render(
+      <ImageLoader imgSrc={mockUrl} onImageClick={spy} />,
+    );
 
-    act(() => {
-      // @ts-expect-error not full event args object
-      image.prop('onClick')?.(mockEvent);
-    });
+    const image = container.querySelector('img') as HTMLImageElement;
+    fireEvent.click(image);
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(mockEvent);
   });
 
   it('renders the fallback background color when loading has failed', () => {
-    const wrapper = mount(<ImageLoader imgSrc="" />);
+    const { container } = render(<ImageLoader imgSrc="" />);
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    wrapper.find('img').prop('onError')!({} as SyntheticEvent);
-    wrapper.update();
+    fireEvent.error(img);
 
-    const loader = wrapper.find(ContentLoader);
-    const fallbackContainer = wrapper.find('.container').at(1);
+    const loader = container.querySelector('svg');
+    const fallbackContainer = container.querySelectorAll('.container')[1];
 
-    expect(wrapper.find('img').exists()).toBe(false);
-    expect(loader.exists()).toBe(false);
-    expect(fallbackContainer.hasClass('fallback')).toBe(true);
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+    expect(loader).not.toBeInTheDocument();
+    expect(fallbackContainer?.classList.contains('fallback')).toBe(true);
   });
 
   it('renders a fallback image when loading has failed', () => {
     const mockFallbackUrl = 'mock-url';
-    const wrapper = mount(
+    const { container } = render(
       <ImageLoader imgSrc="" fallbackSrc={mockFallbackUrl} />,
     );
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    wrapper.find('img').prop('onError')!({} as SyntheticEvent);
-    wrapper.update();
+    fireEvent.error(img);
 
-    const loader = wrapper.find(ContentLoader);
-    const images = wrapper.find('img');
-    const fallbackContainer = wrapper.find('.container').at(1);
+    const loader = container.querySelector('svg');
+    const images = container.querySelectorAll('img');
+    const fallbackContainers = container.querySelectorAll('.container');
 
-    expect(loader.exists()).toBe(false);
-    expect(fallbackContainer.exists()).toBe(false); // no background color
-    expect(images.at(0).exists()).toBe(true); // fallback image
-    expect(images.at(0).prop('src')).toBe(mockFallbackUrl);
-    expect(images.at(0).hasClass('fallBackImage')).toBe(true);
+    expect(loader).not.toBeInTheDocument();
+    expect(fallbackContainers).toHaveLength(1); // no background color fallback, just one container
+    expect(images[0]).toBeInTheDocument(); // fallback image
+    expect(images[0].src).toContain(mockFallbackUrl);
+    expect(images[0].classList.contains('fallBackImage')).toBe(true);
   });
 
   it('emits onError callback with img src after load failure', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockUrl = 'mock-url';
-    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onError={spy} />);
+    const { container } = render(
+      <ImageLoader imgSrc={mockUrl} onError={spy} />,
+    );
+    const img = container.querySelector('img') as HTMLImageElement;
 
-    wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    fireEvent.error(img);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(mockUrl);
@@ -143,74 +136,73 @@ describe('ImageLoader', () => {
         <circle r="50" />
       </svg>
     );
-    const wrapper = mount(<ImageLoader imgSrc="" loadingSkeleton={mockSVG} />);
+    const { container } = render(
+      <ImageLoader imgSrc="" loadingSkeleton={mockSVG} />,
+    );
 
-    const svg = wrapper.find(`#${mockId}`);
+    const svg = container.querySelector(`#${mockId}`);
 
-    expect(svg.exists()).toBe(true);
+    expect(svg).toBeInTheDocument();
   });
 
   it('default square skeleton should take up the full space of the loader by default', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const { container } = render(<ImageLoader imgSrc="" />);
 
-    const loader = wrapper.find(ContentLoader);
-    const skeleton = wrapper.find('rect');
+    const svg = container.querySelector('svg');
+    const skeleton = container.querySelector('rect');
 
-    expect(skeleton.prop('width')).toBe('100%');
-    expect(skeleton.prop('height')).toBe('100%');
-    expect(loader.prop('viewBox')).toBe('0 0 50 50');
+    expect(skeleton?.getAttribute('width')).toBe('100%');
+    expect(skeleton?.getAttribute('height')).toBe('100%');
+    expect(svg?.getAttribute('viewBox')).toBe('0 0 50 50');
   });
 
   it('uses width and height for the squarebox', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" width={123} height={456} />);
+    const { container } = render(
+      <ImageLoader imgSrc="" width={123} height={456} />,
+    );
 
-    const loader = wrapper.find(ContentLoader);
+    const svg = container.querySelector('svg');
 
-    expect(loader.prop('viewBox')).toBe('0 0 123 456');
+    expect(svg?.getAttribute('viewBox')).toBe('0 0 123 456');
   });
 
   it('passes svg viewbox, animation speed, color props to ContentLoader', () => {
-    const mockSpeed = 1;
-    const mockBackgroundColor = '#CCC';
-    const mockForegroundColor = '#FFF';
     const mockViewbox = '75 75 75 75';
-    const wrapper = shallow(
+    const { container } = render(
       <ImageLoader
         imgSrc=""
-        speed={mockSpeed}
-        backgroundColor={mockBackgroundColor}
-        foregroundColor={mockForegroundColor}
+        speed={1}
+        backgroundColor="#CCC"
+        foregroundColor="#FFF"
         viewBox={mockViewbox}
       />,
     );
 
-    const loader = wrapper.find(ContentLoader);
+    const svg = container.querySelector('svg');
 
-    expect(loader.prop('speed')).toBe(mockSpeed);
-    expect(loader.prop('backgroundColor')).toBe(mockBackgroundColor);
-    expect(loader.prop('foregroundColor')).toBe(mockForegroundColor);
-    expect(loader.prop('viewBox')).toBe(mockViewbox);
+    expect(svg?.getAttribute('viewBox')).toBe(mockViewbox);
+    // Note: speed and color props are internal to ContentLoader
   });
 
   it(`loader dimensions defaults to '50px' by '50px'`, () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const { container } = render(<ImageLoader imgSrc="" />);
 
-    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
+    const loader = container.querySelector('.loader') as HTMLDivElement;
 
-    expect(loader.height).toBe('50px');
-    expect(loader.width).toBe('50px');
+    expect(loader.style.height).toBe('50px');
+    expect(loader.style.width).toBe('50px');
   });
 
   it('sets the height and width of the loader', () => {
     const mockHeight = 15;
     const mockWidth = 75;
-    const wrapper = shallow(
+    const { container } = render(
       <ImageLoader imgSrc="" height={mockHeight} width={mockWidth} />,
     );
 
-    const loader = wrapper.find('.loader').prop('style') as React.CSSProperties;
+    const loader = container.querySelector('.loader') as HTMLDivElement;
 
-    expect(loader.height).toBe(`${mockHeight}px`);
-    expect(loader.width).toBe(`${mockWidth}px`);
+    expect(loader.style.height).toBe(`${mockHeight}px`);
+    expect(loader.style.width).toBe(`${mockWidth}px`);
   });
 });

package/src/components/Loaders/Loader/Loader.spec.tsx

@@ -1,34 +1,58 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React, { ReactNode } from 'react';
 import ContentLoader from 'react-content-loader';
+import type { Mock } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Loader } from './Loader';
 
+vi.mock('react-content-loader', async () => {
+  const ActualReact = await vi.importActual<typeof import('react')>('react');
+  return {
+    __esModule: true,
+    default: vi.fn(
+      ({
+        speed: _speed,
+        backgroundColor: _bg,
+        foregroundColor: _fg,
+        children,
+        ...svgProps
+      }) => ActualReact.createElement('svg', svgProps, children),
+    ),
+  };
+});
+
+const mockedContentLoader = ContentLoader as Mock;
+
 describe('Loader component', () => {
+  beforeEach(() => {
+    mockedContentLoader.mockClear();
+  });
+
   it('renders the container div if showLoader is set to true', () => {
-    const wrapper = shallow(<Loader showLoader={true} />);
-    expect(wrapper.exists('.container')).toBe(true);
+    const { container } = render(<Loader showLoader={true} />);
+    expect(container.querySelector('.container')).toBeInTheDocument();
   });
 
   it('container div should not be rendered if showLoader is set to false', () => {
-    const wrapper = shallow(<Loader showLoader={false} />);
-    expect(wrapper.exists('.container')).toBe(false);
+    const { container } = render(<Loader showLoader={false} />);
+    expect(container.querySelector('.container')).not.toBeInTheDocument();
   });
 
   it('container is styled with default styles if no optional styles are provided', () => {
-    const wrapper = shallow(<Loader showLoader={true} />);
-    const gridStyles = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
-    expect(gridStyles.width).toBe(100);
+    const { container } = render(<Loader showLoader={true} />);
+    const loaderContainer = container.querySelector(
+      '.container',
+    ) as HTMLDivElement;
+    expect(loaderContainer.style.width).toBe('100px');
   });
 
   it('container is styled with the custom width if width is provided with props', () => {
     const width = 120;
-    const wrapper = shallow(<Loader showLoader={true} width={width} />);
-    const gridStyles = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
-    expect(gridStyles.width).toBe(width);
+    const { container } = render(<Loader showLoader={true} width={width} />);
+    const loaderContainer = container.querySelector(
+      '.container',
+    ) as HTMLDivElement;
+    expect(loaderContainer.style.width).toBe(`${width}px`);
   });
 
   it('replaces default loading SVG with a custom SVG', () => {
@@ -39,13 +63,13 @@ describe('Loader component', () => {
       </svg>
     );
 
-    const wrapper = shallow(
+    const { container } = render(
       <Loader showLoader={true} loadingSkeleton={mockSVG} />,
     );
 
-    const svg = wrapper.find(`#${mockId}`);
+    const svg = container.querySelector(`#${mockId}`);
 
-    expect(svg.exists()).toBe(true);
+    expect(svg).toBeInTheDocument();
   });
 
   it('passes svg viewbox, animation speed, color props to ContentLoader', () => {
@@ -53,7 +77,7 @@ describe('Loader component', () => {
     const mockBackgroundColor = '#CCC';
     const mockForegroundColor = '#FFF';
     const mockViewbox = '75 75 75 75';
-    const wrapper = shallow(
+    render(
       <Loader
         showLoader={true}
         speed={mockSpeed}
@@ -63,12 +87,15 @@ describe('Loader component', () => {
       />,
     );
 
-    const loader = wrapper.find(ContentLoader);
+    const lastCallProps =
+      mockedContentLoader.mock.calls[
+        mockedContentLoader.mock.calls.length - 1
+      ][0];
 
-    expect(loader.prop('speed')).toBe(mockSpeed);
-    expect(loader.prop('backgroundColor')).toBe(mockBackgroundColor);
-    expect(loader.prop('foregroundColor')).toBe(mockForegroundColor);
-    expect(loader.prop('viewBox')).toBe(mockViewbox);
+    expect(lastCallProps.speed).toBe(mockSpeed);
+    expect(lastCallProps.backgroundColor).toBe(mockBackgroundColor);
+    expect(lastCallProps.foregroundColor).toBe(mockForegroundColor);
+    expect(lastCallProps.viewBox).toBe(mockViewbox);
   });
 
   // Height attr is not tested here since its set inside the SVG image

package/src/components/Message/Message.spec.tsx

@@ -1,6 +1,7 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { IconName, Icons } from '../Icons';
+import { describe, expect, it } from 'vitest';
+import { IconName } from '../Icons';
 import { Message, MessageProps } from './Message';
 
 const defaultProps: MessageProps = {
@@ -9,28 +10,28 @@ const defaultProps: MessageProps = {
 
 describe('Message', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Message {...defaultProps} />);
+    const { container } = render(<Message {...defaultProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`renders a message`, () => {
-    const wrapper = shallow(<Message {...defaultProps} />);
+    render(<Message {...defaultProps} />);
 
-    const message = wrapper.find('p');
+    const message = screen.getByTestId('message-title');
 
-    expect(message.text()).toBe(defaultProps.title);
+    expect(message.textContent).toBe(defaultProps.title);
   });
 
   it('allows an optional class to be passed in', () => {
     const mockClass = 'test-class';
-    const wrapper = shallow(
+    const { container } = render(
       <Message {...defaultProps} className={mockClass} />,
     );
 
-    const container = wrapper.find('.container');
+    const messageContainer = container.querySelector('.message-container');
 
-    expect(container.hasClass(mockClass)).toBe(true);
+    expect(messageContainer?.classList.contains(mockClass)).toBe(true);
   });
 
   describe('message types', () => {
@@ -41,17 +42,17 @@ describe('Message', () => {
       ['success', IconName.Success, 'hasSuccess'],
       ['warning', IconName.Warning, 'hasWarning'],
     ])('message type styling', (type, icon, className) => {
-      const wrapper = shallow(
+      const { container } = render(
         <Message {...defaultProps} type={type as MessageProps['type']} />,
       );
 
-      const icons = wrapper.find(Icons);
-      const messageIcon = icons.first();
-      const container = wrapper.find('.container');
+      const messageElement = screen.getByTestId('message');
+      const messageContainer = container.querySelector('.message-container');
 
-      expect(icons.exists()).toBe(true);
-      expect(messageIcon.prop('icon')).toBe(icon);
-      expect(container.hasClass(className)).toBe(true);
+      expect(messageElement.getAttribute('data-test-type')).toBe(
+        type || 'error',
+      );
+      expect(messageContainer?.classList.contains(className)).toBe(true);
     });
   });
 
@@ -59,70 +60,81 @@ describe('Message', () => {
     it(`renders a header component if set`, () => {
       const mockHeader: JSX.Element = <div>test</div>;
 
-      const wrapper = shallow(<Message {...defaultProps} />);
+      const { container, rerender } = render(<Message {...defaultProps} />);
 
-      let header = wrapper.find('.header');
+      let header = container.querySelector('.header');
 
-      expect(header.exists()).toBe(false);
+      expect(header).toBeNull();
 
-      wrapper.setProps({ header: mockHeader });
-      wrapper.update();
+      rerender(<Message {...defaultProps} header={mockHeader} />);
 
-      header = wrapper.find('.header');
+      header = container.querySelector('.header');
 
-      expect(header.exists()).toBe(true);
+      expect(header).toBeTruthy();
     });
   });
 
   describe('message body', () => {
     it(`does not render a body if component has no children`, () => {
-      const wrapper = shallow(<Message {...defaultProps} />);
+      const { container } = render(<Message {...defaultProps} />);
 
-      const body = wrapper.find('.body');
+      const body = container.querySelector('.body');
 
-      expect(body.exists()).toBe(false);
+      expect(body).toBeNull();
     });
 
     it(`does not render a body if component has children but 'isBodyOpen' is not true`, () => {
-      const wrapper = shallow(<Message {...defaultProps}>Test</Message>);
+      const { container } = render(<Message {...defaultProps}>Test</Message>);
 
-      const body = wrapper.find('.body');
+      const body = container.querySelector('.body');
 
-      expect(body.exists()).toBe(false);
+      expect(body).toBeNull();
     });
 
     it(`renders a body if component has children and 'isBodyOpen' is true`, () => {
-      const wrapper = shallow(<Message {...defaultProps}>Test</Message>);
+      const { container, rerender } = render(
+        <Message {...defaultProps}>Test</Message>,
+      );
 
-      let body = wrapper.find('.body');
+      let body = container.querySelector('.body');
 
-      expect(body.exists()).toBe(false);
+      expect(body).toBeNull();
 
-      wrapper.setProps({ isBodyOpen: true });
-      wrapper.update();
+      rerender(
+        <Message {...defaultProps} isBodyOpen={true}>
+          Test
+        </Message>,
+      );
 
-      body = wrapper.find('.body');
+      body = container.querySelector('.body');
 
-      expect(body.exists()).toBe(true);
+      expect(body).toBeTruthy();
     });
 
     it(`sets body position to 'absolute' by default and allows it to be removed`, () => {
-      const wrapper = shallow(
+      const { container, rerender } = render(
         <Message {...defaultProps} isBodyOpen={true}>
           Test
         </Message>,
       );
 
-      let body = wrapper.find('.body');
+      let body = container.querySelector('.body');
 
-      expect(body.hasClass('absolute')).toBe(true);
+      expect(body?.classList.contains('absolute')).toBe(true);
 
-      wrapper.setProps({ isBodyPositionAbsolute: false });
-      wrapper.update();
+      rerender(
+        <Message
+          {...defaultProps}
+          isBodyOpen={true}
+          isBodyPositionAbsolute={false}
+        >
+          Test
+        </Message>,
+      );
 
-      body = wrapper.find('.body');
+      body = container.querySelector('.body');
 
-      expect(body.hasClass('absolute')).toBe(false);
+      expect(body?.classList.contains('absolute')).toBe(false);
     });
   });
 });

package/src/components/MessageBar/MessageBar.scss

@@ -65,6 +65,9 @@
   font-size: 14px;
   background-color: var(--message-bar-bg-color, $message-bar-bg-color);
 
+  max-height: 500px;
+  overflow: auto;
+
   .textChild {
     line-height: 1.3rem;
     white-space: pre-wrap;