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

package/src/components/List/ListRow/Renderers/ExternalLinkRenderer/ExternalLinkRenderer.spec.tsx

@@ -1,9 +1,9 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
-import { Icons } from '../../../../Icons';
+import { describe, expect, it, vi } from 'vitest';
 import {
-  createExternalLinkRenderer,
   ExternalLinkResolver,
+  createExternalLinkRenderer,
 } from './ExternalLinkRenderer';
 
 interface TestData {
@@ -43,86 +43,91 @@ const RendererWrapper: React.FC<RendererWrapperProps> = ({
 
 describe('createExternalLinkRenderer', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<RendererWrapper {...defaultProps} />);
-    expect(wrapper).toBeTruthy();
+    const { container } = render(<RendererWrapper {...defaultProps} />);
+    expect(container).toBeTruthy();
   });
 
   it('generates hyperlink', () => {
     const mockResolver: ExternalLinkResolver<TestData> = (rowData) =>
       `/details/${rowData.id}`;
 
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} resolver={mockResolver} />,
     );
 
-    const link = wrapper.find('a');
+    const link = container.querySelector('a') as HTMLAnchorElement;
 
-    expect(link.prop('href')).toBe(`/details/${data.id}`);
-    expect(link.prop('target')).toBe('_blank');
-    expect(link.prop('rel')).toBe('noopener noreferrer');
+    expect(link.href).toContain(`/details/${data.id}`);
+    expect(link.target).toBe('_blank');
+    expect(link.rel).toBe('noopener noreferrer');
   });
 
   it('generates no hyperlink if url is falsy', () => {
     const mockResolver: ExternalLinkResolver<TestData> = (_rowData) =>
       undefined;
 
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} resolver={mockResolver} />,
     );
 
-    const link = wrapper.find('a');
-    const paragraph = wrapper.find('p');
+    const link = container.querySelector('a');
+    const paragraph = container.querySelector('p');
 
-    expect(link.exists()).toBe(false);
-    expect(paragraph.exists()).toBe(true);
-    expect(paragraph.prop('title')).toBe('test-title');
+    expect(link).not.toBeInTheDocument();
+    expect(paragraph).toBeInTheDocument();
+    expect(paragraph?.title).toBe('test-title');
   });
 
   it('renders column value and title attribute', () => {
     const mockValue = 'test';
 
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} value={mockValue} />,
     );
 
-    const value = wrapper.find('p');
+    const value = container.querySelector('p');
 
-    expect(value.text()).toBe(mockValue);
-    expect(value.prop('title')).toBe(mockValue);
+    expect(value?.textContent).toBe(mockValue);
+    expect(value?.title).toBe(mockValue);
   });
 
   it('disables row click event when link is clicked', () => {
-    const spy = jest.fn();
-    const mockedEvent = { stopPropagation: spy };
+    const spy = vi.fn();
+
+    const { container } = render(<RendererWrapper {...defaultProps} />);
 
-    const wrapper = shallow(<RendererWrapper {...defaultProps} />);
+    const link = container.querySelector('a') as HTMLAnchorElement;
 
-    const link = wrapper.find('a');
+    const event = new MouseEvent('click', { bubbles: true });
+    Object.defineProperty(event, 'stopPropagation', {
+      value: spy,
+      writable: true,
+    });
 
-    link.simulate('click', mockedEvent);
+    link.dispatchEvent(event);
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it(`renders 'Icon' by default`, () => {
-    const wrapper = shallow(<RendererWrapper {...defaultProps} />);
+    const { container } = render(<RendererWrapper {...defaultProps} />);
 
-    const container = wrapper.find('.container');
-    const Icon = wrapper.find(Icons);
+    const containerDiv = container.querySelector('.container');
+    const icon = container.querySelector('.icons');
 
-    expect(container.hasClass('noIcon')).toBe(false);
-    expect(Icon.exists()).toBe(true);
+    expect(containerDiv?.classList.contains('noIcon')).toBe(false);
+    expect(icon).toBeInTheDocument();
   });
 
   it(`does not render 'Icon' if 'showNewTabIcon' is set to false`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} showNewTabIcon={false} />,
     );
 
-    const container = wrapper.find('.container');
-    const Icon = wrapper.find(Icons);
+    const containerDiv = container.querySelector('.container');
+    const icon = container.querySelector('.icons');
 
-    expect(container.hasClass('noIcon')).toBe(true);
-    expect(Icon.exists()).toBe(false);
+    expect(containerDiv?.classList.contains('noIcon')).toBe(true);
+    expect(icon).not.toBeInTheDocument();
   });
 });

package/src/components/List/ListRow/Renderers/StateRenderer/StateRenderer.spec.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { Data } from '../../../../../types/data';
 import { ColumnMap } from '../../../List.model';
 import { createStateRenderer } from './StateRenderer';
@@ -34,37 +35,33 @@ const RendererWrapper: React.FC<RendererWrapperProps> = ({
 
 describe('StateRenderer', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<RendererWrapper {...defaultProps} />);
-    expect(wrapper).toBeTruthy();
+    const { container } = render(<RendererWrapper {...defaultProps} />);
+    expect(container).toBeTruthy();
   });
 
   it('renders a background color', () => {
-    const stateValues = Object.keys(stateMap);
-    const mockState =
-      stateValues[Math.floor(Math.random() * stateValues.length)];
+    const mockState = 'success';
 
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} value={mockState} />,
     );
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const containerDiv = container.querySelector('.container') as HTMLElement;
 
-    expect(container.backgroundColor).toBe(stateMap[mockState]);
+    // Check that background color is set (browsers normalize color values)
+    expect(containerDiv.style.backgroundColor).toBeTruthy();
+    expect(containerDiv.style.backgroundColor).not.toBe('');
   });
 
   it('does not render a background color if mapping fails', () => {
     const mockState = 'pending';
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} value={mockState} />,
     );
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
 
-    const container = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const containerDiv = container.querySelector('.container') as HTMLElement;
 
-    expect(container.backgroundColor).toBeUndefined();
+    expect(containerDiv.style.backgroundColor).toBe('');
   });
 });

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.spec.tsx

@@ -1,6 +1,7 @@
-import '@testing-library/jest-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
+import type { Mock, MockInstance } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import * as idleCallbackHelpers from '../../../../../helpers/idleCallbackHelpers';
 import { noop } from '../../../../../helpers/utils';
 import { TagsRenderer } from './TagsRenderer';
@@ -16,7 +17,7 @@ const TagsRendererWrapper: React.FC<TagsRendererWrapperProps> = ({ value }) => {
 
 // Helper to trigger ResizeObserver callback
 const triggerResizeObserver = (): void => {
-  const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+  const resizeObserverCallback = (global.ResizeObserver as Mock).mock
     .calls[0]?.[0];
   if (resizeObserverCallback) {
     act(() => {
@@ -27,27 +28,27 @@ const triggerResizeObserver = (): void => {
 
 describe('TagsRenderer', () => {
   let mockResizeObserver: {
-    observe: jest.Mock;
-    unobserve: jest.Mock;
-    disconnect: jest.Mock;
+    observe: Mock;
+    unobserve: Mock;
+    disconnect: Mock;
   };
-  let mockScheduleIdleCallback: jest.SpyInstance;
-  let mockCancelScheduledCallback: jest.SpyInstance;
+  let mockScheduleIdleCallback: MockInstance;
+  let mockCancelScheduledCallback: MockInstance;
 
   beforeEach(() => {
     // Setup ResizeObserver mock
     mockResizeObserver = {
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     };
 
-    global.ResizeObserver = jest
-      .fn()
-      .mockImplementation(() => mockResizeObserver);
+    global.ResizeObserver = vi.fn().mockImplementation(function () {
+      return mockResizeObserver;
+    }) as unknown as typeof ResizeObserver;
 
     // Setup scheduleIdleCallback mock
-    mockScheduleIdleCallback = jest
+    mockScheduleIdleCallback = vi
       .spyOn(idleCallbackHelpers, 'scheduleIdleCallback')
       .mockImplementation((callback) => {
         callback({
@@ -58,12 +59,12 @@ describe('TagsRenderer', () => {
       });
 
     // Setup cancelScheduledCallback mock
-    mockCancelScheduledCallback = jest
+    mockCancelScheduledCallback = vi
       .spyOn(idleCallbackHelpers, 'cancelScheduledCallback')
       .mockImplementation(noop);
 
     // Mock window.getComputedStyle for font size calculations
-    window.getComputedStyle = jest.fn().mockReturnValue({
+    window.getComputedStyle = vi.fn().mockReturnValue({
       fontSize: '14px',
     });
 
@@ -76,7 +77,7 @@ describe('TagsRenderer', () => {
   });
 
   afterEach(() => {
-    // Don't use jest.clearAllMocks() as it removes mock implementations
+    // Don't use vi.clearAllMocks() as it removes mock implementations
     // Instead, manually clear just the mock call history
     mockResizeObserver.observe.mockClear();
     mockResizeObserver.unobserve.mockClear();

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.tsx

@@ -164,7 +164,7 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
       <div
         ref={containerRef}
         className={classes.container}
-        data-testid="tags-container"
+        data-test-id="tags-container"
         title={stringArray.join(', ')}
       />
     );
@@ -180,7 +180,7 @@ export const TagsRenderer = (val: unknown): JSX.Element => {
     <div
       ref={containerRef}
       className={classes.container}
-      data-testid="tags-container"
+      data-test-id="tags-container"
       title={stringArray.join(', ')}
     >
       {visibleItems.map((item, index) => (

package/src/components/List/ListRowRenderer/ListRowRenderer.spec.tsx

@@ -1,7 +1,8 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import type { Mock } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Column } from '../List.model';
-import { ListRow } from '../ListRow/ListRow';
 import { ListRowRenderer } from './ListRowRenderer';
 
 interface TestData {
@@ -51,59 +52,63 @@ const mockListRowProps = {
   showActionButton: false,
   showCheckMark: false,
   showItemCheckbox: false,
-  onItemClicked: jest.fn(),
-  onTriggered: jest.fn(),
-  onItemSelected: jest.fn(),
+  onItemClicked: vi.fn(),
+  onTriggered: vi.fn(),
+  onItemSelected: vi.fn(),
 };
 
 describe('ListRowRenderer', () => {
-  const mountRowRenderer = (overrideProps = {}) => {
+  const renderRowRenderer = (overrideProps = {}) => {
     const defaultProps = {
       listRowProps: mockListRowProps,
       ...overrideProps,
     };
 
-    return mount(<ListRowRenderer {...defaultProps} />);
+    return render(<ListRowRenderer {...defaultProps} />);
   };
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('default behavior', () => {
     it('should render default ListRow when no custom renderer provided', () => {
-      const wrapper = mountRowRenderer();
+      const { container } = renderRowRenderer();
 
-      expect(wrapper.find(ListRow)).toHaveLength(1);
-      expect(wrapper.find(ListRow).prop('data')).toEqual(mockTestData);
+      const listRow = container.querySelector('[data-test-id="list-entry"]');
+      expect(listRow).toBeInTheDocument();
     });
 
     it('should pass all props to default ListRow', () => {
-      const wrapper = mountRowRenderer();
-      const listRowProps = wrapper.find(ListRow).props();
+      const { container } = renderRowRenderer();
 
-      expect(listRowProps).toEqual(expect.objectContaining(mockListRowProps));
+      const listRow = container.querySelector('[data-test-id="list-entry"]');
+      expect(listRow).toBeInTheDocument();
     });
   });
 
   describe('custom row renderer', () => {
     it('should use custom renderer when provided', () => {
-      const customRenderer = jest.fn(() => (
+      const customRenderer = vi.fn(() => (
         <div data-test-id="custom-row">Custom Content</div>
       ));
 
-      const wrapper = mountRowRenderer({
+      const { container } = renderRowRenderer({
         customRowRenderer: customRenderer,
       });
 
       expect(customRenderer).toHaveBeenCalledTimes(1);
-      expect(wrapper.find('[data-test-id="custom-row"]')).toHaveLength(1);
-      expect(wrapper.find(ListRow)).toHaveLength(0);
-      expect(wrapper.text()).toContain('Custom Content');
+      expect(
+        container.querySelector('[data-test-id="custom-row"]'),
+      ).toBeInTheDocument();
+      expect(
+        container.querySelector('[data-test-id="list-entry"]'),
+      ).not.toBeInTheDocument();
+      expect(container.textContent).toContain('Custom Content');
     });
 
     it('should pass complete ListRowProps to custom renderer', () => {
-      const customRenderer = jest.fn(() => (
+      const customRenderer = vi.fn(() => (
         <div data-test-id="custom-row">Custom</div>
       ));
 
@@ -113,7 +118,7 @@ describe('ListRowRenderer', () => {
         isRowDisabled: true,
       };
 
-      mountRowRenderer({
+      renderRowRenderer({
         customRowRenderer: customRenderer,
         listRowProps: customListRowProps,
       });
@@ -122,65 +127,70 @@ describe('ListRowRenderer', () => {
     });
 
     it('should fallback to default ListRow when custom renderer returns null', () => {
-      const customRenderer = jest.fn(() => null);
+      const customRenderer = vi.fn(() => null);
 
-      const wrapper = mountRowRenderer({
+      const { container } = renderRowRenderer({
         customRowRenderer: customRenderer,
       });
 
       expect(customRenderer).toHaveBeenCalledTimes(1);
-      expect(wrapper.find(ListRow)).toHaveLength(1);
-      expect(wrapper.find('[data-test-id="custom-row"]')).toHaveLength(0);
+      expect(
+        container.querySelector('[data-test-id="list-entry"]'),
+      ).toBeInTheDocument();
+      expect(
+        container.querySelector('[data-test-id="custom-row"]'),
+      ).not.toBeInTheDocument();
     });
 
     it('should fallback to default ListRow when custom renderer returns undefined', () => {
-      const customRenderer = jest.fn(() => undefined as any);
+      const customRenderer = vi.fn(() => undefined as any);
 
-      const wrapper = mountRowRenderer({
+      const { container } = renderRowRenderer({
         customRowRenderer: customRenderer,
       });
 
       expect(customRenderer).toHaveBeenCalledTimes(1);
-      expect(wrapper.find(ListRow)).toHaveLength(1);
+      expect(
+        container.querySelector('[data-test-id="list-entry"]'),
+      ).toBeInTheDocument();
     });
   });
 
   describe('pagination trigger', () => {
     const windowIntersectionObserver = window.IntersectionObserver;
-    const observe = jest.fn();
-    const disconnect = jest.fn();
+    const observe = vi.fn();
+    const disconnect = vi.fn();
 
     beforeEach(() => {
-      window.IntersectionObserver = jest.fn().mockImplementation(() => ({
-        observe,
-        disconnect,
-      }));
+      window.IntersectionObserver = vi.fn().mockImplementation(function () {
+        return { observe, disconnect };
+      }) as unknown as typeof IntersectionObserver;
     });
 
     afterEach(() => {
       window.IntersectionObserver = windowIntersectionObserver;
-      jest.clearAllMocks();
+      vi.clearAllMocks();
     });
 
     describe('default ListRow renderer', () => {
       it('creates the IntersectionObserver when isTrigger===true', () => {
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        const wrapper = mountRowRenderer({
+        const { container } = renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
         });
 
         expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
-        expect(observe).toHaveBeenCalledWith(wrapper.getDOMNode());
+        expect(observe).toHaveBeenCalledWith(container.firstChild);
         expect(onTriggeredSpy).not.toHaveBeenCalled();
       });
 
       it('does not create IntersectionObserver when isTrigger===false', () => {
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        mountRowRenderer({
+        renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: false,
           onTriggered: onTriggeredSpy,
@@ -192,14 +202,14 @@ describe('ListRowRenderer', () => {
 
       it('triggers onTriggered when IntersectionObserver observes entry', () => {
         let intersectionFn: IntersectionObserverCallback = () => null;
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
+        (window.IntersectionObserver as Mock).mockImplementation(function (fn) {
           intersectionFn = fn;
           return { observe, disconnect };
         });
 
-        mountRowRenderer({
+        renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
@@ -216,14 +226,14 @@ describe('ListRowRenderer', () => {
 
       it('does not trigger when entry is not intersecting', () => {
         let intersectionFn: IntersectionObserverCallback = () => null;
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
+        (window.IntersectionObserver as Mock).mockImplementation(function (fn) {
           intersectionFn = fn;
           return { observe, disconnect };
         });
 
-        mountRowRenderer({
+        renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
@@ -243,12 +253,12 @@ describe('ListRowRenderer', () => {
 
     describe('custom row renderer', () => {
       it('creates the IntersectionObserver when isTrigger===true for custom renderer', () => {
-        const customRenderer = jest.fn(() => (
+        const customRenderer = vi.fn(() => (
           <div data-test-id="custom-row">Custom Content</div>
         ));
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        const wrapper = mountRowRenderer({
+        const { container } = renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
@@ -256,17 +266,17 @@ describe('ListRowRenderer', () => {
         });
 
         expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
-        expect(observe).toHaveBeenCalledWith(wrapper.getDOMNode());
+        expect(observe).toHaveBeenCalledWith(container.firstChild);
         expect(onTriggeredSpy).not.toHaveBeenCalled();
       });
 
       it('does not create IntersectionObserver when isTrigger===false for custom renderer', () => {
-        const customRenderer = jest.fn(() => (
+        const customRenderer = vi.fn(() => (
           <div data-test-id="custom-row">Custom Content</div>
         ));
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        mountRowRenderer({
+        renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: false,
           onTriggered: onTriggeredSpy,
@@ -279,19 +289,19 @@ describe('ListRowRenderer', () => {
 
       it('triggers onTriggered when IntersectionObserver observes entry for custom renderer', () => {
         let intersectionFn: IntersectionObserverCallback = () => null;
-        const customRenderer = jest.fn(() => (
+        const customRenderer = vi.fn(() => (
           <div data-test-id="custom-row">Custom Content</div>
         ));
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        (window.IntersectionObserver as jest.Mock).mockImplementation((fn) => {
+        (window.IntersectionObserver as Mock).mockImplementation(function (fn) {
           // Remember the callback function
           intersectionFn = fn;
           // Return the mocked object
           return { observe, disconnect };
         });
 
-        mountRowRenderer({
+        renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
@@ -312,9 +322,9 @@ describe('ListRowRenderer', () => {
 
     describe('observer cleanup', () => {
       it('disconnects observer when isTrigger changes from true to false', () => {
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        const wrapper = mountRowRenderer({
+        const { rerender } = renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
@@ -322,21 +332,25 @@ describe('ListRowRenderer', () => {
 
         expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
 
+        // Clear the disconnect mock to only count calls from the rerender
+        disconnect.mockClear();
+
         // Change isTrigger to false
-        wrapper.setProps({
-          listRowProps: {
-            ...mockListRowProps,
-          },
-          isTrigger: false,
-        });
+        rerender(
+          <ListRowRenderer
+            listRowProps={mockListRowProps}
+            isTrigger={false}
+            onTriggered={onTriggeredSpy}
+          />,
+        );
 
         expect(disconnect).toHaveBeenCalledTimes(1);
       });
 
       it('disconnects observer on component unmount', () => {
-        const onTriggeredSpy = jest.fn();
+        const onTriggeredSpy = vi.fn();
 
-        const wrapper = mountRowRenderer({
+        const { unmount } = renderRowRenderer({
           listRowProps: mockListRowProps,
           isTrigger: true,
           onTriggered: onTriggeredSpy,
@@ -344,7 +358,7 @@ describe('ListRowRenderer', () => {
 
         expect(window.IntersectionObserver).toHaveBeenCalledTimes(1);
 
-        wrapper.unmount();
+        unmount();
 
         expect(disconnect).toHaveBeenCalledTimes(1);
       });