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

package/src/components/List/ListRow/ListRowCell/ListRowCell.spec.tsx

@@ -1,5 +1,6 @@
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { Column } from '../..';
 import { Data } from '../../../..';
 import { ListRowCell } from './ListRowCell';
@@ -36,7 +37,7 @@ describe('ListRowCell', () => {
       label: 'Name',
     };
 
-    const wrapper = shallow(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -45,7 +46,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders a string value correctly', () => {
@@ -54,7 +55,7 @@ describe('ListRowCell', () => {
       label: 'Name',
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -63,7 +64,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper.text()).toBe('Test User');
+    expect(container.textContent).toBe('Test User');
   });
 
   it('renders a number value with number formatter', () => {
@@ -72,7 +73,7 @@ describe('ListRowCell', () => {
       label: 'Age',
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -81,7 +82,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper.text()).toBe(numberFormatter.format(30));
+    expect(container.textContent).toBe(numberFormatter.format(30));
   });
 
   it('renders a date value with date formatter', () => {
@@ -90,7 +91,7 @@ describe('ListRowCell', () => {
       label: 'Date',
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -99,7 +100,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper.text()).toBe(dateFormatter.format(mockData.date));
+    expect(container.textContent).toBe(dateFormatter.format(mockData.date));
   });
 
   it('uses custom renderer when provided', () => {
@@ -109,7 +110,7 @@ describe('ListRowCell', () => {
       render: (value) => `Custom: ${value}`,
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -118,7 +119,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper.text()).toBe('Custom: Test User');
+    expect(container.textContent).toBe('Custom: Test User');
   });
 
   it('handles null values', () => {
@@ -128,7 +129,7 @@ describe('ListRowCell', () => {
       label: 'Name',
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={nullData}
@@ -137,7 +138,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper.text()).toBe('');
+    expect(container.textContent).toBe('');
   });
 
   it('handles undefined values', () => {
@@ -147,7 +148,7 @@ describe('ListRowCell', () => {
       label: 'Name',
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={undefinedData}
@@ -156,7 +157,7 @@ describe('ListRowCell', () => {
       />,
     );
 
-    expect(wrapper.text()).toBe('');
+    expect(container.textContent).toBe('');
   });
 
   it('renders tooltip with column text by default', () => {
@@ -165,7 +166,7 @@ describe('ListRowCell', () => {
       label: 'Name',
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -174,8 +175,8 @@ describe('ListRowCell', () => {
       />,
     );
 
-    const cell = wrapper.find('.cell');
-    expect(cell.prop('title')).toBe('Test User');
+    const cell = container.querySelector('.cell')!;
+    expect(cell).toHaveAttribute('title', 'Test User');
   });
 
   it('does not render tooltip when column.tooltip is false', () => {
@@ -185,7 +186,7 @@ describe('ListRowCell', () => {
       tooltip: false,
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRowCell
         column={column}
         data={mockData}
@@ -194,8 +195,8 @@ describe('ListRowCell', () => {
       />,
     );
 
-    const cell = wrapper.find('.cell');
-    expect(cell.prop('title')).toBeUndefined();
+    const cell = container.querySelector('.cell')!;
+    expect(cell).not.toHaveAttribute('title');
   });
 
   describe('text alignment', () => {
@@ -205,7 +206,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -214,8 +215,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('style')).toHaveProperty('textAlign', 'left');
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveStyle({ textAlign: 'left' });
     });
 
     it('applies custom horizontal text alignment', () => {
@@ -224,7 +225,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -234,8 +235,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('style')).toHaveProperty('textAlign', 'right');
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveStyle({ textAlign: 'right' });
     });
 
     it('applies default vertical text alignment (center)', () => {
@@ -244,7 +245,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -253,8 +254,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('style')).toHaveProperty('alignSelf', 'center');
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveStyle({ alignSelf: 'center' });
     });
 
     it('applies custom vertical text alignment', () => {
@@ -263,7 +264,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -273,8 +274,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('style')).toHaveProperty('alignSelf', 'start');
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveStyle({ alignSelf: 'start' });
     });
 
     it('applies horizontal column alignment from column config', () => {
@@ -284,7 +285,7 @@ describe('ListRowCell', () => {
         horizontalColumnAlign: 'right',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -293,8 +294,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('style')).toHaveProperty('justifySelf', 'right');
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveStyle({ justifySelf: 'right' });
     });
   });
 
@@ -305,7 +306,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -314,8 +315,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.hasClass('nowrap')).toBe(true);
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveClass('nowrap');
     });
 
     it('does not apply nowrap class when textWrap is true', () => {
@@ -324,7 +325,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -334,8 +335,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.hasClass('nowrap')).toBe(false);
+      const cell = container.querySelector('.cell')!;
+      expect(cell).not.toHaveClass('nowrap');
     });
   });
 
@@ -347,7 +348,7 @@ describe('ListRowCell', () => {
         render: (value) => `Custom: ${value}`,
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -356,8 +357,8 @@ describe('ListRowCell', () => {
         />,
       );
 
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('data-test-id')).toBeNull();
+      const cell = container.querySelector('.cell')!;
+      expect(cell).not.toHaveAttribute('data-test-id');
     });
 
     it('sets data-test-id on inner span for standard values', () => {
@@ -366,7 +367,7 @@ describe('ListRowCell', () => {
         label: 'Name',
       };
 
-      const wrapper = mount(
+      const { container, getByTestId } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -376,14 +377,11 @@ describe('ListRowCell', () => {
       );
 
       // For standard values, data-test-id is on the inner span, not the cell div
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('data-test-id')).toBeNull();
+      const cell = container.querySelector('.cell')!;
+      expect(cell).not.toHaveAttribute('data-test-id');
 
       // Check that the span inside has the data-test-id
-      const span = wrapper.find(
-        'span[data-test-id="list-entry-property:name"]',
-      );
-      expect(span).toHaveLength(1);
+      expect(getByTestId('list-entry-property:name')).toBeInTheDocument();
     });
 
     it('sets data-test-id on cell when custom renderer returns JSX', () => {
@@ -393,7 +391,7 @@ describe('ListRowCell', () => {
         render: (value) => <div className="custom-render">{value}</div>,
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -403,49 +401,8 @@ describe('ListRowCell', () => {
       );
 
       // For custom JSX renderers, data-test-id is on the cell div
-      const cell = wrapper.find('.cell');
-      expect(cell.prop('data-test-id')).toBe('list-entry-property:name');
-    });
-  });
-
-  describe('column key handling', () => {
-    it('uses propertyName as key when key is not provided', () => {
-      const column: Column<TestData> = {
-        propertyName: 'name',
-        label: 'Name',
-      };
-
-      const wrapper = shallow(
-        <ListRowCell
-          column={column}
-          data={mockData}
-          dateFormatter={dateFormatter}
-          numberFormatter={numberFormatter}
-        />,
-      );
-
-      const cellWrapper = wrapper.find('.cellWrapper');
-      expect(cellWrapper.key()).toBe('name');
-    });
-
-    it('uses custom key when provided', () => {
-      const column: Column<TestData> = {
-        propertyName: 'name',
-        label: 'Name',
-        key: 'custom-key',
-      };
-
-      const wrapper = shallow(
-        <ListRowCell
-          column={column}
-          data={mockData}
-          dateFormatter={dateFormatter}
-          numberFormatter={numberFormatter}
-        />,
-      );
-
-      const cellWrapper = wrapper.find('.cellWrapper');
-      expect(cellWrapper.key()).toBe('custom-key');
+      const cell = container.querySelector('.cell')!;
+      expect(cell).toHaveAttribute('data-test-id', 'list-entry-property:name');
     });
   });
 
@@ -457,7 +414,7 @@ describe('ListRowCell', () => {
         render: (_value, data) => <button>Edit {data.name}</button>,
       };
 
-      const wrapper = mount(
+      const { getByRole } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -466,7 +423,7 @@ describe('ListRowCell', () => {
         />,
       );
 
-      expect(wrapper.find('button').text()).toBe('Edit Test User');
+      expect(getByRole('button').textContent).toBe('Edit Test User');
     });
 
     it('handles unbound column with string render result', () => {
@@ -476,7 +433,7 @@ describe('ListRowCell', () => {
         render: () => 'Active',
       };
 
-      const wrapper = mount(
+      const { container } = render(
         <ListRowCell
           column={column}
           data={mockData}
@@ -485,7 +442,7 @@ describe('ListRowCell', () => {
         />,
       );
 
-      expect(wrapper.text()).toBe('Active');
+      expect(container.textContent).toBe('Active');
     });
   });
 });

package/src/components/List/ListRow/ListRowLoader.spec.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
-import { Loader } from '../../Loaders/Loader/Loader';
+import { describe, expect, it } from 'vitest';
 import { Column } from '../List.model';
 import { ListRowLoader, ListRowLoaderProps } from './ListRowLoader';
 
@@ -20,9 +20,9 @@ const mockProps: ListRowLoaderProps<TestExplorerData> = {
 
 describe('ListRowLoader', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ListRowLoader {...mockProps} />);
+    const { container } = render(<ListRowLoader {...mockProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`Loader 'width' should be undefined and 'viewBox' should be the default if size is not a 'px' value`, () => {
@@ -30,15 +30,15 @@ describe('ListRowLoader', () => {
     const mockColumns: Column<TestExplorerData>[] = [
       { propertyName: 'id', size: '1fr', label: 'id' },
     ];
-    const wrapper = shallow(
+    const { container } = render(
       <ListRowLoader {...mockProps} columns={mockColumns} />,
     );
 
-    const loaders = wrapper.find(Loader);
+    const loaders = container.querySelectorAll('svg');
 
     loaders.forEach((loader) => {
-      expect(loader.prop('width')).toBeUndefined();
-      expect(loader.prop('viewBox')).toBe(mockViewBox);
+      expect(loader.getAttribute('width')).toBeNull();
+      expect(loader.getAttribute('viewBox')).toBe(mockViewBox);
     });
   });
 
@@ -48,15 +48,19 @@ describe('ListRowLoader', () => {
     const mockColumns: Column<TestExplorerData>[] = [
       { propertyName: 'id', size: `${mockSize}px`, label: 'id' },
     ];
-    const wrapper = shallow(
+    const { container } = render(
       <ListRowLoader {...mockProps} columns={mockColumns} />,
     );
 
-    const loaders = wrapper.find(Loader);
+    const loaders = container.querySelectorAll('[data-test-id="loader"]');
 
     loaders.forEach((loader) => {
-      expect(loader.prop('width')).toBe(mockSize);
-      expect(loader.prop('viewBox')).toBe(mockViewBox);
+      expect(loader).toHaveStyle({ width: `${mockSize}px` });
+    });
+
+    const svgs = container.querySelectorAll('svg');
+    svgs.forEach((svg) => {
+      expect(svg.getAttribute('viewBox')).toBe(mockViewBox);
     });
   });
 });

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.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 { BooleanDotRenderer } from './BooleanDotRenderer';
 
@@ -21,21 +22,23 @@ const defaultProps: RendererWrapperProps = {
 
 describe('BooleanDotRenderer', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<RendererWrapper {...defaultProps} />);
-    expect(wrapper).toBeTruthy();
+    const { container } = render(<RendererWrapper {...defaultProps} />);
+    expect(container).toBeTruthy();
   });
 
   it('renders the red dot when false is passed', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <RendererWrapper {...defaultProps} value={false} />,
     );
-    const dot = wrapper.find('.false');
-    expect(dot).toHaveLength(1);
+    const dot = container.querySelector('.false');
+    expect(dot).toBeInTheDocument();
   });
 
   it('renders the green dot when true is passed', () => {
-    const wrapper = shallow(<RendererWrapper {...defaultProps} value={true} />);
-    const dot = wrapper.find('.true');
-    expect(dot).toHaveLength(1);
+    const { container } = render(
+      <RendererWrapper {...defaultProps} value={true} />,
+    );
+    const dot = container.querySelector('.true');
+    expect(dot).toBeInTheDocument();
   });
 });