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

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.spec.tsx

@@ -1,6 +1,6 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { Button } from '../../Buttons';
+import { describe, expect, it, vi } from 'vitest';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import { DynamicListRow, DynamicListRowProps } from './DynamicListRow';
 
@@ -54,7 +54,7 @@ const defaultProps: DynamicListRowProps<DynamicListRowTestData> = {
 
 describe('DynamicListRow', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -62,11 +62,11 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('most styling props, except gridTemplateColumns, should be undefined by default', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -75,50 +75,33 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const row = wrapper.find('.container');
+    const row = container.querySelector('.container') as HTMLElement;
 
-    expect(row.prop('style')).toHaveProperty('gridColumnGap', undefined);
-    expect(row.prop('style')).toHaveProperty('alignItems', undefined);
-    expect(row.prop('style')).toHaveProperty(
-      'gridAutoRows',
+    expect(row.style.gridColumnGap).toBe('');
+    expect(row.style.alignItems).toBe('');
+    expect(row.style.gridAutoRows).toBe(
       `minmax(50px, ${defaultProps.rowHeight})`,
     );
-    expect(row.prop('style')).toHaveProperty(
-      'gridTemplateColumns',
-      defaultProps.columnSizes,
-    );
-    expect(row.prop('style')).toHaveProperty('justifyItems', undefined);
+    expect(row.style.gridTemplateColumns).toBe(defaultProps.columnSizes);
+    expect(row.style.justifyItems).toBe('');
   });
 
   it('sets styling props when passed in', () => {
-    const wrapper = shallow(<DynamicListRow {...defaultProps} />);
+    const { container } = render(<DynamicListRow {...defaultProps} />);
 
-    const row = wrapper.find('.container');
+    const row = container.querySelector('.container') as HTMLElement;
 
-    expect(row.prop('style')).toHaveProperty(
-      'gridColumnGap',
-      defaultProps.columnGap,
-    );
-    expect(row.prop('style')).toHaveProperty(
-      'alignItems',
-      defaultProps.verticalTextAlign,
-    );
-    expect(row.prop('style')).toHaveProperty(
-      'gridAutoRows',
+    expect(row.style.gridColumnGap).toBe(defaultProps.columnGap);
+    expect(row.style.alignItems).toBe(defaultProps.verticalTextAlign);
+    expect(row.style.gridAutoRows).toBe(
       `minmax(50px, ${defaultProps.rowHeight})`,
     );
-    expect(row.prop('style')).toHaveProperty(
-      'gridTemplateColumns',
-      defaultProps.columnSizes,
-    );
-    expect(row.prop('style')).toHaveProperty(
-      'justifyItems',
-      defaultProps.horizontalTextAlign,
-    );
+    expect(row.style.gridTemplateColumns).toBe(defaultProps.columnSizes);
+    expect(row.style.justifyItems).toBe(defaultProps.horizontalTextAlign);
   });
 
   it(`Button component should have type of 'button'`, () => {
-    const wrapper = mount(
+    const { container } = render(
       <DynamicListRow
         {...defaultProps}
         allowRemove={true}
@@ -126,18 +109,18 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const button = wrapper.find(Button);
+    const button = container.querySelector('button');
 
-    expect(button.prop('type')).toBe('button');
+    expect(button?.type).toBe('button');
   });
 
   it('renders the value for every column if set', () => {
-    const wrapper = shallow(<DynamicListRow {...defaultProps} />);
+    const { container } = render(<DynamicListRow {...defaultProps} />);
 
-    const columns = wrapper.find('.column');
+    const columns = container.querySelectorAll('.column');
 
     columns.forEach((column, idx) => {
-      expect(column.text()).toBe(
+      expect(column.textContent).toBe(
         String(defaultData[defaultColumns[idx].propertyName!]),
       );
     });
@@ -151,7 +134,7 @@ describe('DynamicListRow', () => {
       position: 3,
     };
 
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columnSizes={''}
         columns={defaultColumns}
@@ -161,9 +144,9 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const position = wrapper.find('.position');
+    const position = container.querySelector('.position');
 
-    expect(position.exists()).toBe(true);
+    expect(position).toBeInTheDocument();
   });
 
   it(`doesn't render the position column if 'showPositionColumn' is false`, () => {
@@ -174,7 +157,7 @@ describe('DynamicListRow', () => {
       position: 3,
     };
 
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columnSizes={''}
         columns={defaultColumns}
@@ -184,9 +167,9 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const position = wrapper.find('.position');
+    const position = container.querySelector('.position');
 
-    expect(position.exists()).toBe(false);
+    expect(position).not.toBeInTheDocument();
   });
 
   it('uses custom renderer', () => {
@@ -198,20 +181,20 @@ describe('DynamicListRow', () => {
       },
     ];
 
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={columnsWithRenderFunc}
         columnSizes={defaultProps.columnSizes}
         data={defaultProps.data}
       />,
     );
-    const actualColumns = wrapper.find('.column');
+    const actualColumns = container.querySelectorAll('.column');
 
-    expect(actualColumns.at(0).text()).toBe('Changed: title');
+    expect(actualColumns[0].textContent).toBe('Changed: title');
   });
 
   it(`doesn't allow dragging if showPositionColumn is 'false'`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -222,12 +205,12 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const dragIcon = wrapper.find('.draggable');
-    expect(dragIcon.exists()).toBe(false);
+    const dragIcon = container.querySelector('.draggable');
+    expect(dragIcon).not.toBeInTheDocument();
   });
 
   it(`only allows dragging if both showPositionColumn and allowDragging are 'true'`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -238,13 +221,13 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const dragIcon = wrapper.find('.draggable');
+    const dragIcon = container.querySelector('.draggable');
 
-    expect(dragIcon.exists()).toBe(true);
+    expect(dragIcon).toBeInTheDocument();
   });
 
   it(`doesn't display an action button by default`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -252,13 +235,13 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const button = wrapper.find(Button);
+    const button = container.querySelector('button');
 
-    expect(button.exists()).toBe(false);
+    expect(button).not.toBeInTheDocument();
   });
 
   it(`displays an action button if 'showActionColumn' is set to true`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -268,14 +251,14 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const button = wrapper.find(Button);
+    const button = container.querySelector('button');
 
-    expect(button.exists()).toBe(true);
+    expect(button).toBeInTheDocument();
   });
 
   it(`emits onActionClicked with row data when the action button is clicked`, () => {
-    const spy = jest.fn();
-    const wrapper = mount(
+    const spy = vi.fn();
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -286,18 +269,18 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const button = wrapper.find(Button);
+    const button = container.querySelector('button') as HTMLButtonElement;
 
-    button.simulate('click');
+    fireEvent.click(button);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(defaultData);
   });
 
   it('emits onPositionInputChanged with the current position and the new target position', () => {
-    const inputSpy = jest.fn();
+    const inputSpy = vi.fn();
     const mockNewPosition = '9';
-    const wrapper = mount(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -308,12 +291,10 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const input = wrapper.find('input');
-    input.prop('onKeyDown')?.({
-      key: 'Enter',
-      // @ts-expect-error not full event args object
-      currentTarget: { value: mockNewPosition },
-    });
+    const input = container.querySelector('input') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: mockNewPosition } });
+    fireEvent.keyDown(input, { key: 'Enter' });
 
     expect(inputSpy).toHaveBeenCalledTimes(1);
     expect(inputSpy).toHaveBeenCalledWith(
@@ -321,10 +302,8 @@ describe('DynamicListRow', () => {
       Number(mockNewPosition),
     );
 
-    input.prop('onBlur')?.({
-      // @ts-expect-error not full event args object
-      currentTarget: { value: mockNewPosition },
-    });
+    fireEvent.change(input, { target: { value: mockNewPosition } });
+    fireEvent.blur(input);
 
     expect(inputSpy).toHaveBeenCalledTimes(2);
     expect(inputSpy).toHaveBeenCalledWith(
@@ -334,9 +313,9 @@ describe('DynamicListRow', () => {
   });
 
   it('onPositionInputChanged is not emitted if current position and new position are the same', () => {
-    const inputSpy = jest.fn();
+    const inputSpy = vi.fn();
     const mockNewPosition = dataWithPosition.position;
-    const wrapper = mount(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -347,19 +326,17 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    const input = wrapper.find('input');
-    input.prop('onKeyDown')?.({
-      key: 'Enter',
-      // @ts-expect-error not full event args object
-      currentTarget: { value: mockNewPosition },
-    });
+    const input = container.querySelector('input') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: String(mockNewPosition) } });
+    fireEvent.keyDown(input, { key: 'Enter' });
 
     expect(inputSpy).not.toHaveBeenCalled();
   });
 
   it('input will update if value is a valid number', () => {
     const mockNewPosition = 5;
-    const wrapper = mount(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -369,22 +346,20 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    let input = wrapper.find('input');
-
-    expect(input.prop('value')).toBe(dataWithPosition.position);
+    let input = container.querySelector('input') as HTMLInputElement;
 
-    input.simulate('change', { target: { value: mockNewPosition } });
+    expect(input.value).toBe(String(dataWithPosition.position));
 
-    wrapper.update();
+    fireEvent.change(input, { target: { value: String(mockNewPosition) } });
 
-    input = wrapper.find('input');
+    input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe(mockNewPosition);
+    expect(input.value).toBe(String(mockNewPosition));
   });
 
   it('input will not update if value is not a valid number', () => {
     const mockNewPosition = 'NaN';
-    const wrapper = mount(
+    const { container } = render(
       <DynamicListRow
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
@@ -394,17 +369,15 @@ describe('DynamicListRow', () => {
       />,
     );
 
-    let input = wrapper.find('input');
-
-    expect(input.prop('value')).toBe(dataWithPosition.position);
+    let input = container.querySelector('input') as HTMLInputElement;
 
-    input.simulate('change', { target: { value: mockNewPosition } });
+    expect(input.value).toBe(String(dataWithPosition.position));
 
-    wrapper.update();
+    fireEvent.change(input, { target: { value: mockNewPosition } });
 
-    input = wrapper.find('input');
+    input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe(dataWithPosition.position);
+    expect(input.value).toBe(String(dataWithPosition.position));
   });
 
   describe('DynamicListRow column text alignments', () => {
@@ -420,7 +393,7 @@ describe('DynamicListRow', () => {
 
     alignments.forEach(({ horizontal, vertical }) => {
       it(`should apply the correct styles for justify-content: ${horizontal}, align-items: ${vertical}`, () => {
-        const wrapper = mount(
+        const { container } = render(
           <DynamicListRow
             columns={defaultColumns}
             columnSizes={defaultProps.columnSizes}
@@ -432,13 +405,13 @@ describe('DynamicListRow', () => {
           />,
         );
 
-        const wrapperDivs = wrapper.find('.wrapper');
+        const wrapperDivs = container.querySelectorAll('.wrapper');
 
         wrapperDivs.forEach((node) => {
-          const style = node.prop('style');
+          const element = node as HTMLElement;
 
-          expect(style).toHaveProperty('justifyContent', horizontal);
-          expect(style).toHaveProperty('alignItems', vertical);
+          expect(element.style.justifyContent).toBe(horizontal || '');
+          expect(element.style.alignItems).toBe(vertical || '');
         });
       });
     });
@@ -446,7 +419,7 @@ describe('DynamicListRow', () => {
 
   describe('tooltip', () => {
     it(`renders a tooltip using the 'title' html attribute by default`, () => {
-      const wrapper = shallow(
+      const { container } = render(
         <DynamicListRow
           columns={defaultColumns}
           columnSizes={defaultProps.columnSizes}
@@ -454,10 +427,10 @@ describe('DynamicListRow', () => {
         />,
       );
 
-      const columns = wrapper.find('.column');
+      const columns = container.querySelectorAll('.column');
 
       columns.forEach((column) => {
-        expect(column.prop('title')).toBe(column.text());
+        expect(column.getAttribute('title')).toBe(column.textContent);
       });
     });
 
@@ -467,7 +440,7 @@ describe('DynamicListRow', () => {
         tooltip: false,
       }));
 
-      const wrapper = shallow(
+      const { container } = render(
         <DynamicListRow
           columns={mockColumns}
           columnSizes={defaultProps.columnSizes}
@@ -475,10 +448,10 @@ describe('DynamicListRow', () => {
         />,
       );
 
-      const columns = wrapper.find('.column');
+      const columns = container.querySelectorAll('.column');
 
       columns.forEach((column) => {
-        expect(column.prop('title')).toBeUndefined();
+        expect(column.getAttribute('title')).toBeNull();
       });
     });
   });

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.actions.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { addItem, removeItem } from './DynamicListReducer.actions';
 
 interface Data {

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.init.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { DynamicListReducerInit } from './DynamicListReducer.init';
 
 interface Data {

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.spec.ts

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { DynamicListReducer } from './DynamicListReducer';
 import { addItem, removeItem } from './DynamicListReducer.actions';
 import { DynamicListReducerInit } from './DynamicListReducer.init';
@@ -6,10 +7,10 @@ import {
   DynamicListReducerState,
 } from './DynamicListReducer.types';
 
-jest.mock('./DynamicListReducer.init');
-jest.mock('./DynamicListReducer.actions', () => ({
-  addItem: jest.fn(),
-  removeItem: jest.fn().mockReturnValue([]),
+vi.mock('./DynamicListReducer.init');
+vi.mock('./DynamicListReducer.actions', () => ({
+  addItem: vi.fn(),
+  removeItem: vi.fn().mockReturnValue([]),
 }));
 
 interface Data {
@@ -39,7 +40,7 @@ const initialState: DynamicListReducerState<Data> = {
 
 describe('Dynamic List Reducer', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('calls addItem and DynamicListReducerInit when action is add', () => {

package/src/components/EmptyStation/EmptyStation.spec.tsx

@@ -1,18 +1,15 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { noop } from '../../helpers/utils';
 import { initializeUi } from '../../initialize';
-import { MessageBar } from '../MessageBar';
-import { PageHeader } from '../PageHeader';
 import { StationError } from '../models';
 import { EmptyStation, EmptyStationProps } from './EmptyStation';
 
 describe('EmptyStation', () => {
-  global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-  }));
+  global.ResizeObserver = vi.fn().mockImplementation(function () {
+    return { observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() };
+  }) as unknown as typeof ResizeObserver;
 
   beforeEach(() => {
     initializeUi({
@@ -35,64 +32,71 @@ describe('EmptyStation', () => {
     subtitle: 'test-subtitle',
   };
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<EmptyStation {...defaultProps} />);
+    const { container } = render(<EmptyStation {...defaultProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders a PageHeader', () => {
-    const wrapper = shallow(<EmptyStation {...defaultProps} />);
+    const { container } = render(<EmptyStation {...defaultProps} />);
 
-    const pageHeader = wrapper.find(PageHeader);
+    const pageHeader = container.querySelector('[data-test-id="page-header"]');
 
-    expect(pageHeader.exists()).toBe(true);
+    expect(pageHeader).toBeInTheDocument();
   });
 
   describe('station error', () => {
     it('renders a station error, if set', () => {
       const err: StationError = { title: 'test-title' };
-      const wrapper = shallow(<EmptyStation {...defaultProps} />);
+      const { container, rerender } = render(
+        <EmptyStation {...defaultProps} />,
+      );
 
-      let messageBar = wrapper.find(MessageBar);
-      let container = wrapper.find('.container');
+      let messageBar = screen.queryByTestId('message-title');
+      let stationContainer = container.querySelector('.container');
 
-      expect(messageBar.exists()).toBe(false);
-      expect(container.hasClass('hasStationError')).toBe(false);
+      expect(messageBar).not.toBeInTheDocument();
+      expect(stationContainer?.classList.contains('hasStationError')).toBe(
+        false,
+      );
 
-      wrapper.setProps({ stationError: err });
-      wrapper.update();
+      rerender(<EmptyStation {...defaultProps} stationError={err} />);
 
-      messageBar = wrapper.find(MessageBar);
-      container = wrapper.find('.container');
+      messageBar = screen.getByTestId('message-title');
+      stationContainer = container.querySelector('.container');
 
-      expect(messageBar.exists()).toBe(true);
-      expect(messageBar.prop('type')).toBe('error');
-      expect(messageBar.prop('title')).toBe(err.title);
-      expect(container.hasClass('hasStationError')).toBe(true);
+      expect(messageBar).toBeInTheDocument();
+      expect(messageBar.textContent).toBe(err.title);
+      expect(stationContainer?.classList.contains('hasStationError')).toBe(
+        true,
+      );
     });
 
     it('renders MessageBar body, if set', () => {
       const err: StationError = { title: 'test-title' };
       const mockBody = 'test-body';
-      const wrapper = mount(
+      const { container, rerender } = render(
         <EmptyStation {...defaultProps} stationError={err} />,
       );
 
-      let toggle = wrapper.find('.detailsIcon');
+      let toggle = screen.queryByTestId('message-bar-details-button');
 
-      expect(toggle.exists()).toBe(false);
+      expect(toggle).not.toBeInTheDocument();
 
-      wrapper.setProps({ stationError: { ...err, body: mockBody } });
-      wrapper.update();
+      rerender(
+        <EmptyStation
+          {...defaultProps}
+          stationError={{ ...err, body: mockBody }}
+        />,
+      );
 
-      toggle = wrapper.find('.detailsIcon');
-      expect(toggle.exists()).toBe(true);
+      toggle = screen.getByTestId('message-bar-details-button');
+      expect(toggle).toBeInTheDocument();
 
-      toggle.simulate('click');
-      wrapper.update();
+      fireEvent.click(toggle);
 
-      const body = wrapper.find('.body').first();
-      expect(body.text()).toBe(mockBody);
+      const body = container.querySelector('.body');
+      expect(body?.textContent).toBe(mockBody);
     });
   });
 });