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

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

@@ -1,11 +1,9 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { Button } from '../../Buttons';
-import { IconName } from '../../Icons';
+import { BrowserRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
 import { Column, ListSelectMode } from '../List.model';
-import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
 import { ListRow, ListRowProps, setLocale } from './ListRow';
 
 interface TestExplorerData {
@@ -30,14 +28,14 @@ const mockProps: ListRowProps<TestExplorerData> = {
   actionSize: '50px',
   horizontalTextAlign: 'left',
   verticalTextAlign: 'center',
-  onItemClicked: jest.fn(),
+  onItemClicked: vi.fn() as (data: TestExplorerData) => void,
 };
 
 describe('ListRow', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ListRow {...mockProps} />);
+    const { container } = render(<ListRow {...mockProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it.each`
@@ -47,20 +45,20 @@ describe('ListRow', () => {
   `(
     'renders the defined columns in the defined order -> $name',
     ({ expectedColumns }: { expectedColumns: Column<TestExplorerData>[] }) => {
-      const wrapper = mount(
+      const { container } = render(
         <ListRow {...mockProps} columns={expectedColumns} />,
       );
 
-      const actualColumns = wrapper.find('.cellWrapper');
+      const actualColumns = container.querySelectorAll('.cellWrapper');
 
       // Check amount of rendered columns
       expect(actualColumns).toHaveLength(expectedColumns.length);
 
       actualColumns.forEach((column, idx) => {
         const expectedPropertyName = expectedColumns[idx].propertyName!;
-        expect(column.key()).toEqual(expectedPropertyName);
-
-        expect(column.text()).toEqual(mockExplorerData[expectedPropertyName]);
+        expect(column.textContent).toEqual(
+          mockExplorerData[expectedPropertyName],
+        );
       });
     },
   );
@@ -74,7 +72,7 @@ describe('ListRow', () => {
 
     setLocale('en-US');
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRow
         data={rowData}
         columns={expectedColumns}
@@ -87,12 +85,12 @@ describe('ListRow', () => {
       />,
     );
 
-    const actualColumns = wrapper.find('.cellWrapper');
+    const actualColumns = container.querySelectorAll('.cellWrapper');
     // Check amount of rendered columns
     expect(actualColumns).toHaveLength(2);
 
     // see https://stackoverflow.com/questions/23199909/using-tolocalestring-in-node-js/23200062
-    expect(actualColumns.at(0).text()).toEqual(
+    expect(actualColumns[0].textContent).toEqual(
       new Intl.DateTimeFormat('en-US', {
         year: 'numeric',
         month: 'numeric',
@@ -102,7 +100,7 @@ describe('ListRow', () => {
         second: 'numeric',
       }).format(rowData.date),
     );
-    expect(actualColumns.at(1).text()).toBe('123,456.12');
+    expect(actualColumns[1].textContent).toBe('123,456.12');
   });
 
   it('uses custom renderer', () => {
@@ -115,12 +113,12 @@ describe('ListRow', () => {
     ];
     const rowData = { value: 'something' };
 
-    const wrapper = mount(
+    const { container } = render(
       // @ts-expect-error Typings to not match up
       <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
     );
-    const actualColumns = wrapper.find('.cellWrapper');
-    expect(actualColumns.at(0).text()).toBe('Changed: something');
+    const actualColumns = container.querySelectorAll('.cellWrapper');
+    expect(actualColumns[0].textContent).toBe('Changed: something');
   });
 
   it('shows empty field if a value required in a column is not present on the data object', () => {
@@ -129,42 +127,41 @@ describe('ListRow', () => {
       { propertyName: "doesn't exist", size: '1fr', label: 'desc' },
     ];
 
-    const wrapper = mount(<ListRow {...mockProps} columns={expectedColumns} />);
+    const { container } = render(
+      <ListRow {...mockProps} columns={expectedColumns} />,
+    );
 
-    const actualColumns = wrapper.find('.cellWrapper');
+    const actualColumns = container.querySelectorAll('.cellWrapper');
 
     // Check amount of rendered columns
     expect(actualColumns).toHaveLength(1);
 
-    expect(actualColumns.first().key()).toEqual(
-      expectedColumns[0].propertyName,
-    );
-    expect(actualColumns.first().text()).toBe('');
+    expect(actualColumns[0].textContent).toBe('');
   });
 
   it('renders a action button by default', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow
         {...mockProps}
         columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
       />,
     );
 
-    const actionButton = wrapper.find(Button);
+    const actionButton = container.querySelector('button');
 
-    expect(actionButton.props().icon).toBe(IconName.ChevronRight);
+    expect(actionButton).toBeInTheDocument();
   });
 
   it('renders no action button if told', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow {...mockProps} showActionButton={false} />,
     );
 
-    expect(wrapper.find(Button)).toHaveLength(0);
+    expect(container.querySelector('button')).not.toBeInTheDocument();
   });
 
   it('renders a checkmark button', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow
         {...mockProps}
         columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
@@ -173,27 +170,26 @@ describe('ListRow', () => {
       />,
     );
 
-    const checkMark = wrapper.find(Button);
+    const checkMark = container.querySelector('.selectionCheckMark');
 
-    expect(checkMark.props().icon).toBe(IconName.Checkmark);
-    expect(checkMark.hasClass('selectionCheckMark')).toBe(true);
+    expect(checkMark).toBeInTheDocument();
   });
 
   it(`'actionSize' sets navigation action height and width`, () => {
     const mockActionSize = '10px';
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow {...mockProps} actionSize={mockActionSize} />,
     );
 
-    const actionButton = wrapper.find(Button);
+    const actionButton = container.querySelector('button') as HTMLElement;
 
-    expect(actionButton.props().height).toBe(mockActionSize);
-    expect(actionButton.props().width).toBe(mockActionSize);
+    expect(actionButton.style.height).toBe(mockActionSize);
+    expect(actionButton.style.width).toBe(mockActionSize);
   });
 
   it(`'actionSize' sets checkmark action height and width`, () => {
     const mockActionSize = '10px';
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow
         {...mockProps}
         actionSize={mockActionSize}
@@ -202,15 +198,15 @@ describe('ListRow', () => {
       />,
     );
 
-    const actionButton = wrapper.find(Button);
+    const actionButton = container.querySelector('button') as HTMLElement;
 
-    expect(actionButton.props().height).toBe(mockActionSize);
-    expect(actionButton.props().width).toBe(mockActionSize);
+    expect(actionButton.style.height).toBe(mockActionSize);
+    expect(actionButton.style.width).toBe(mockActionSize);
   });
 
   it(`'actionSize' sets action checkbox height and width`, () => {
     const mockActionSize = '10px';
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow
         {...mockProps}
         actionSize={mockActionSize}
@@ -218,30 +214,34 @@ describe('ListRow', () => {
       />,
     );
 
-    const checkbox = wrapper.find(ListCheckBox);
+    const checkbox = container.querySelector(
+      '.list-checkbox-container',
+    ) as HTMLElement;
 
-    expect(checkbox.props().height).toBe(mockActionSize);
-    expect(checkbox.props().width).toBe(mockActionSize);
+    expect(checkbox).toBeInTheDocument();
   });
 
   it('calls the "onItemClicked" event with data', () => {
-    const spy = jest.fn();
-    const wrapper = shallow(<ListRow {...mockProps} onItemClicked={spy} />);
-    wrapper.find('.content').simulate('click');
+    const spy = vi.fn();
+    const { container } = render(
+      <ListRow {...mockProps} onItemClicked={spy} />,
+    );
+    const content = container.querySelector('.content') as HTMLElement;
+    fireEvent.click(content);
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(mockExplorerData);
   });
 
   it('does not render a checkbox by default', () => {
-    const wrapper = shallow(<ListRow {...mockProps} />);
+    const { container } = render(<ListRow {...mockProps} />);
 
-    const checkbox = wrapper.find(ListCheckBox);
+    const checkbox = container.querySelector('.list-checkbox-container');
 
-    expect(checkbox.exists()).toBe(false);
+    expect(checkbox).not.toBeInTheDocument();
   });
 
   it('renders a checkbox button', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <ListRow
         {...mockProps}
         columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
@@ -250,14 +250,14 @@ describe('ListRow', () => {
       />,
     );
 
-    const checkbox = wrapper.find(ListCheckBox);
+    const checkbox = container.querySelector('.list-checkbox-container');
 
-    expect(checkbox.exists()).toBe(true);
+    expect(checkbox).toBeInTheDocument();
   });
 
   it('raises checkBoxHandler', () => {
-    const spy = jest.fn().mockImplementation(() => null);
-    const wrapper = mount(
+    const spy = vi.fn().mockImplementation(() => null);
+    const { container } = render(
       <ListRow
         {...mockProps}
         onItemSelected={spy}
@@ -266,36 +266,37 @@ describe('ListRow', () => {
       />,
     );
 
-    const chk = wrapper.find(ListCheckBox);
-    chk.prop('onCheckBoxToggled')!(true);
+    const checkbox = container.querySelector(
+      '.list-checkbox-container button',
+    ) as HTMLButtonElement;
+    fireEvent.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(true);
   });
 
   it(`does not have the 'selected' class by default`, () => {
-    const wrapper = mount(<ListRow {...mockProps} />);
+    const { container } = render(<ListRow {...mockProps} />);
 
-    const row = wrapper.find('.columnsRoot');
+    const row = container.querySelector('.columnsRoot');
 
-    expect(row.hasClass('selected')).toBe(false);
+    expect(row?.classList.contains('selected')).toBe(false);
   });
 
   it(`only has the 'selected' class if both itemSelect and showItemCheckbox props are true`, () => {
-    const wrapper = mount(
+    const { container } = render(
       <ListRow {...mockProps} itemSelected={true} showItemCheckbox={true} />,
     );
 
-    const row = wrapper.find('.columnsRoot');
+    const row = container.querySelector('.columnsRoot');
 
-    expect(row.hasClass('selected')).toBe(true);
+    expect(row?.classList.contains('selected')).toBe(true);
   });
 
   it(`raises onItemClicked if list selectionMode is set to None(the default mode)`, () => {
-    const onItemClickedSpy = jest.fn();
-    const onItemSelectedSpy = jest.fn();
+    const onItemClickedSpy = vi.fn();
+    const onItemSelectedSpy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRow
         {...mockProps}
         showItemCheckbox={true}
@@ -304,19 +305,19 @@ describe('ListRow', () => {
       />,
     );
 
-    const row = wrapper.find('.content');
+    const row = container.querySelector('.content') as HTMLElement;
 
-    row.simulate('click');
+    fireEvent.click(row);
 
     expect(onItemClickedSpy).toHaveBeenCalledTimes(1);
     expect(onItemSelectedSpy).not.toHaveBeenCalled();
   });
 
   it(`raises onItemClicked if list selectionMode is set to Single`, () => {
-    const onItemClickedSpy = jest.fn();
-    const onItemSelectedSpy = jest.fn();
+    const onItemClickedSpy = vi.fn();
+    const onItemSelectedSpy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRow
         {...mockProps}
         showItemCheckbox={true}
@@ -326,20 +327,20 @@ describe('ListRow', () => {
       />,
     );
 
-    const row = wrapper.find('.content');
+    const row = container.querySelector('.content') as HTMLElement;
 
-    row.simulate('click');
+    fireEvent.click(row);
 
     expect(onItemClickedSpy).toHaveBeenCalledTimes(1);
     expect(onItemSelectedSpy).not.toHaveBeenCalled();
   });
 
   it(`raises onItemSelected and toggles item selection if list selectionMode is set to Multi and checkbox is not disabled`, async () => {
-    const onItemClickedSpy = jest.fn();
-    const onItemSelectedSpy = jest.fn();
+    const onItemClickedSpy = vi.fn();
+    const onItemSelectedSpy = vi.fn();
     const mockChecked = false;
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRow
         {...mockProps}
         showItemCheckbox={true}
@@ -349,11 +350,9 @@ describe('ListRow', () => {
       />,
     );
 
-    const row = wrapper.find('.content');
-
-    row.simulate('click');
+    const row = container.querySelector('.content') as HTMLElement;
 
-    wrapper.update();
+    fireEvent.click(row);
 
     expect(onItemSelectedSpy).toHaveBeenCalledTimes(1);
     expect(onItemSelectedSpy).toHaveBeenCalledWith(!mockChecked);
@@ -361,9 +360,9 @@ describe('ListRow', () => {
   });
 
   it(`does not raise onItemSelected if the row is disabled`, async () => {
-    const onItemSelectedSpy = jest.fn();
+    const onItemSelectedSpy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRow
         {...mockProps}
         showItemCheckbox={true}
@@ -373,20 +372,18 @@ describe('ListRow', () => {
       />,
     );
 
-    const row = wrapper.find('.columnsRoot');
+    const row = container.querySelector('.columnsRoot') as HTMLElement;
 
-    row.simulate('click');
-
-    wrapper.update();
+    fireEvent.click(row);
 
     expect(onItemSelectedSpy).not.toHaveBeenCalled();
-    expect(row.hasClass('disabled')).toBe(true);
+    expect(row.classList.contains('disabled')).toBe(true);
   });
 
   it(`does not onItemClicked if the row is disabled`, async () => {
-    const onItemClickedSpy = jest.fn();
+    const onItemClickedSpy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <ListRow
         {...mockProps}
         showItemCheckbox={true}
@@ -395,33 +392,33 @@ describe('ListRow', () => {
       />,
     );
 
-    const row = wrapper.find('.columnsRoot');
-
-    row.simulate('click');
+    const row = container.querySelector('.columnsRoot') as HTMLElement;
 
-    wrapper.update();
+    fireEvent.click(row);
 
     expect(onItemClickedSpy).not.toHaveBeenCalled();
-    expect(row.hasClass('disabled')).toBe(true);
+    expect(row.classList.contains('disabled')).toBe(true);
   });
 
   describe('linking', () => {
     it('does render a link if not in select mode and got a string as "onItemClicked"', () => {
-      const wrapper = shallow(
-        <ListRow
-          {...mockProps}
-          onItemClicked="http://this.is.a.test.url"
-          selectionMode={ListSelectMode.None}
-        />,
+      const { container } = render(
+        <BrowserRouter>
+          <ListRow
+            {...mockProps}
+            onItemClicked="http://this.is.a.test.url"
+            selectionMode={ListSelectMode.None}
+          />
+        </BrowserRouter>,
       );
 
-      const link = wrapper.find(Link);
+      const link = container.querySelector('a');
 
-      expect(link.exists()).toBe(true);
+      expect(link).toBeInTheDocument();
     });
 
     it('does not render a link if in select mode and got a string as "onItemClicked"', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <ListRow
           {...mockProps}
           onItemClicked="http://this.is.a.test.url"
@@ -429,13 +426,13 @@ describe('ListRow', () => {
         />,
       );
 
-      const link = wrapper.find('.link');
+      const link = container.querySelector('.link');
 
-      expect(link.exists()).toBe(false);
+      expect(link).not.toBeInTheDocument();
     });
 
     it('does not render a link if it got a function as "onItemClicked"', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <ListRow
           {...mockProps}
           onItemClicked={() => {
@@ -445,19 +442,19 @@ describe('ListRow', () => {
         />,
       );
 
-      const link = wrapper.find('.link');
+      const link = container.querySelector('.link');
 
-      expect(link.exists()).toBe(false);
+      expect(link).not.toBeInTheDocument();
     });
   });
 
   describe('tooltip', () => {
     it(`renders a tooltip using the 'title' html attribute by default`, () => {
-      const wrapper = shallow(<ListRow {...mockProps} />);
-      const cells = wrapper.find('.cell');
+      const { container } = render(<ListRow {...mockProps} />);
+      const cells = container.querySelectorAll('.cell');
 
       cells.forEach((cell) => {
-        expect(cell.prop('title')).toBe(cell.text());
+        expect((cell as HTMLElement).title).toBe(cell.textContent);
       });
     });
 
@@ -466,12 +463,14 @@ describe('ListRow', () => {
         ...obj,
         tooltip: false,
       }));
-      const wrapper = shallow(<ListRow {...mockProps} columns={mockColumns} />);
+      const { container } = render(
+        <ListRow {...mockProps} columns={mockColumns} />,
+      );
 
-      const cells = wrapper.find('.cell');
+      const cells = container.querySelectorAll('.cell');
 
       cells.forEach((cell) => {
-        expect(cell.prop('title')).toBeUndefined();
+        expect((cell as HTMLElement).title).toBe('');
       });
     });
 
@@ -486,18 +485,14 @@ describe('ListRow', () => {
       ];
       const rowData = { value: mockValue };
 
-      const wrapper = mount(
+      const { container } = render(
         // @ts-expect-error Typings to not match up
         <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
       );
 
-      // When a custom renderer returns a string, it's wrapped in a span with data-test-id
-      const span = wrapper
-        .find('span[data-test-id="list-entry-property:value"]')
-        .first();
-      const cell = span.closest('.cell');
+      const cell = container.querySelector('.cell') as HTMLElement;
 
-      expect(cell.prop('title')).toBe(mockValue);
+      expect(cell.title).toBe(mockValue);
     });
   });
 
@@ -513,7 +508,7 @@ describe('ListRow', () => {
 
     alignments.forEach(({ horizontal, vertical }) => {
       it(`should apply the correct styles for textAlign: ${horizontal}, alignSelf: ${vertical}`, () => {
-        const wrapper = mount(
+        const { container } = render(
           <ListRow
             {...mockProps}
             columns={[{ propertyName: 'id', size: '1fr', label: 'id' }]}
@@ -522,13 +517,13 @@ describe('ListRow', () => {
           />,
         );
 
-        const wrapperDivs = wrapper.find('.cell');
+        const wrapperDivs = container.querySelectorAll('.cell');
 
         wrapperDivs.forEach((node) => {
-          const style = node.prop('style');
+          const element = node as HTMLElement;
 
-          expect(style).toHaveProperty('textAlign', horizontal);
-          expect(style).toHaveProperty('alignSelf', vertical);
+          expect(element.style.textAlign).toBe(horizontal);
+          expect(element.style.alignSelf).toBe(vertical);
         });
       });
     });