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

package/src/components/LandingPageTiles/TileSmall/TileSmall.spec.tsx

@@ -1,6 +1,7 @@
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 import { TileSmall, TileSmallProps } from './TileSmall';
 
 const mockProps: TileSmallProps = {
@@ -18,71 +19,88 @@ const MockIcon: React.FC = () => (
 
 describe('TileSmall', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} />);
+    const { container } = render(
+      <MemoryRouter>
+        <TileSmall {...mockProps} />
+      </MemoryRouter>,
+    );
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders the tile label', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} />);
+    const { container } = render(
+      <MemoryRouter>
+        <TileSmall {...mockProps} />
+      </MemoryRouter>,
+    );
 
-    const label = wrapper.find('.label');
+    const label = container.querySelector('.label');
 
-    expect(label.text()).toBe(mockProps.label);
+    expect(label?.textContent).toBe(mockProps.label);
   });
 
   it('renders an icon when passed a string URL', () => {
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <TileSmall {...mockProps} />
       </MemoryRouter>,
     );
-    const iconUrl = wrapper.find('img').prop('src');
+    const iconUrl = container.querySelector('img')?.getAttribute('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);
   });
 
   it('renders an icon when passed as a react component', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} icon={<MockIcon />} />);
-    const iconWrapper = wrapper.find('.icon');
-    expect(iconWrapper.contains(<MockIcon />)).toBe(true);
+    const { container } = render(
+      <MemoryRouter>
+        <TileSmall {...mockProps} icon={<MockIcon />} />
+      </MemoryRouter>,
+    );
+    const iconWrapper = container.querySelector('.icon');
+    const svg = iconWrapper?.querySelector('svg');
+    expect(svg).toBeInTheDocument();
   });
 
   it('to attrubute is not exists disabled class should be applied when disabled', () => {
-    const wrapper = shallow(
-      <TileSmall {...{ ...mockProps, disabled: true }} />,
+    const { container } = render(
+      <MemoryRouter>
+        <TileSmall {...{ ...mockProps, disabled: true }} />
+      </MemoryRouter>,
     );
-    const tile = wrapper.find('.container');
-    const toAttr = tile.prop('to');
+    const tile = container.querySelector('.container');
 
-    expect(tile.hasClass('disabled')).toBe(true);
-    expect(toAttr).toStrictEqual({ pathname: undefined });
+    expect(tile?.classList.contains('disabled')).toBe(true);
   });
 
   it('creates a hyperlink using the path prop', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} />);
+    const { container } = render(
+      <MemoryRouter>
+        <TileSmall {...mockProps} />
+      </MemoryRouter>,
+    );
 
-    const navLink = wrapper.find('.container').prop('to');
+    const navLink = container.querySelector('.container') as HTMLAnchorElement;
 
-    expect(navLink).toEqual({ pathname: mockProps.path });
+    expect(navLink?.getAttribute('href')).toBe(mockProps.path);
   });
 
   it('sets row and column spans from props', () => {
     const mockColumnSpan = 3;
     const mockRowSpan = 1;
-    const wrapper = shallow(
-      <TileSmall
-        {...mockProps}
-        smallTileColumnSpan={mockColumnSpan}
-        smallTileRowSpan={mockRowSpan}
-      />,
+    const { container } = render(
+      <MemoryRouter>
+        <TileSmall
+          {...mockProps}
+          smallTileColumnSpan={mockColumnSpan}
+          smallTileRowSpan={mockRowSpan}
+        />
+      </MemoryRouter>,
     );
 
-    const navStyles = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const navElement = container.querySelector('.container') as HTMLElement;
 
-    expect(navStyles.gridColumn).toBe(`span ${mockColumnSpan}`);
-    expect(navStyles.gridRow).toBe(`span ${mockRowSpan}`);
+    expect(navElement.style.gridColumn).toBe(`span ${mockColumnSpan}`);
+    expect(navElement.style.gridRow).toBe(`span ${mockRowSpan}`);
   });
 });