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

package/src/components/FormElements/DateTimeField/DateTimeText.spec.tsx

@@ -1,87 +1,89 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import { DateTime, Settings } from 'luxon';
 import React from 'react';
-import { Button } from '../../Buttons';
+import { describe, expect, it, vi } from 'vitest';
 import { DateTimeText } from './DateTimeText';
 
 // Mock dependencies
-jest.mock('../../../hooks', () => ({
-  useClickOutside: jest.fn(),
+vi.mock('../../../hooks', () => ({
+  useClickOutside: vi.fn(),
 }));
 
-jest.mock('react-popper', () => ({
-  usePopper: jest.fn(() => ({
+vi.mock('react-popper', () => ({
+  usePopper: vi.fn(() => ({
     styles: { popper: {} },
     attributes: { popper: {} },
   })),
 }));
 
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
+vi.mock('react-dom', async () => ({
+  ...(await vi.importActual('react-dom')),
   createPortal: (node: React.ReactNode) => node,
 }));
 
 describe('DateTimeTextField', () => {
   Settings.defaultLocale = navigator.language;
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<DateTimeText name={'test-name'} />);
+    const { container } = render(<DateTimeText name={'test-name'} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText name={'test-name'} label={mockLabel} />,
     );
 
-    const label = wrapper.dive().find('label');
+    const label = container.querySelector('label');
 
-    expect(label.text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it(`Button component should have type of 'button'`, () => {
-    const wrapper = mount(<DateTimeText name={'test-name'} />);
+    const { container } = render(<DateTimeText name={'test-name'} />);
 
-    const button = wrapper.find(Button);
+    const button = container.querySelector('button');
 
-    expect(button.prop('type')).toBe('button');
+    expect(button?.type).toBe('button');
   });
 
   it('sets input field using the value prop and emits updated values', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockDate = new Date();
     mockDate.setSeconds(0);
     const mockValue = mockDate.toISOString();
     // mockDate.setHours(mockDate.getHours() < 23 ? mockDate.getHours() + 1 : 0);
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText name={'test-name'} value={mockValue} onChange={spy} />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toEqual(
+    expect(input.value).toEqual(
       DateTime.fromJSDate(mockDate).toLocaleString(DateTime.DATETIME_SHORT),
     );
   });
 
   it(`defaults to an empty string if prop value Wis 'null'`, () => {
-    // @ts-expect-error intentional null value
-    const wrapper = shallow(<DateTimeText name={'test-name'} value={null} />);
+    const { container } = render(
+      // @ts-expect-error intentional null value
+      <DateTimeText name={'test-name'} value={null} />,
+    );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe('');
+    expect(input.value).toBe('');
   });
 
   it(`defaults to an empty string if prop value is 'undefined'`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText name={'test-name'} value={undefined} />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe('');
+    expect(input.value).toBe('');
   });
 
   it('uses optional props when passed in', () => {
@@ -95,50 +97,57 @@ describe('DateTimeTextField', () => {
       placeholder: 'test-placeholder',
     } as Record<string, unknown>;
 
-    const wrapper = shallow(<DateTimeText name={'test-name'} {...mockProps} />);
+    const { container } = render(
+      <DateTimeText name={'test-name'} {...mockProps} />,
+    );
 
-    const input = wrapper.find('input');
-    const inputProps = input.props();
-    expect(inputProps).toEqual(expect.objectContaining(mockProps));
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.autocomplete).toBe('on');
+    expect(input.disabled).toBe(false);
+    expect(input.id).toBe('test-id');
+    expect(input.name).toBe('test-name');
+    expect(input.placeholder).toBe('test-placeholder');
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText name={'test-name'} error={mockErrorMessage} />,
     );
 
-    const errorMsg = wrapper.dive().find('small');
-    const errorStyling = wrapper.find('input');
+    const errorMsg = container.querySelector('small');
+    const errorStyling = container.querySelector('input');
 
-    expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(errorStyling.hasClass('hasError')).toBe(true);
+    expect(errorMsg?.textContent).toBe(mockErrorMessage);
+    expect(errorStyling?.classList.contains('hasError')).toBe(true);
   });
 
   it('displays the date picker when the button is clicked', () => {
-    const wrapper = mount(<DateTimeText name={'test-name'} value={''} />);
+    const { container } = render(
+      <DateTimeText name={'test-name'} value={''} />,
+    );
 
-    const button = wrapper.find('button');
+    const button = container.querySelector('button') as HTMLButtonElement;
 
-    button.simulate('click');
+    fireEvent.click(button);
 
-    const datePicker = wrapper.find('.picker');
+    const datePicker = container.querySelector('.picker');
 
     expect(datePicker).toBeTruthy();
   });
 
   it('fires onChange event with the ISO date when localized date is entered', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText name={'test-name'} value={''} onChange={spy} />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
     const time = DateTime.local().set({ second: 0, millisecond: 0 });
 
-    input.simulate('blur', {
+    fireEvent.blur(input, {
       target: {
         value: time.toLocaleString(DateTime.DATETIME_SHORT),
       },
@@ -149,15 +158,15 @@ describe('DateTimeTextField', () => {
   });
 
   it('fires onChange event with entered text and isValidDate as false when invalid date is entered', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText name={'test-name'} value={''} onChange={spy} />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    input.simulate('blur', {
+    fireEvent.blur(input, {
       target: {
         value: 'test',
       },
@@ -168,9 +177,9 @@ describe('DateTimeTextField', () => {
   });
 
   it('handles date only input when modifyTime is set to false', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = shallow(
+    const { container } = render(
       <DateTimeText
         name={'test-name'}
         value={''}
@@ -179,7 +188,7 @@ describe('DateTimeTextField', () => {
       />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
     const time = DateTime.local().set({
       hour: 0,
@@ -188,7 +197,7 @@ describe('DateTimeTextField', () => {
       millisecond: 0,
     });
 
-    input.simulate('blur', {
+    fireEvent.blur(input, {
       target: {
         value: time.toLocaleString(DateTime.DATE_SHORT),
       },

package/src/components/FormElements/DynamicDataListControl/DynamicDataListControl.spec.tsx

@@ -1,14 +1,14 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { DynamicDataList } from '../../DynamicDataList/DynamicDataList';
+import { describe, expect, it, vi } from 'vitest';
 import { DynamicListColumn } from '../../DynamicDataList/DynamicDataList.model';
 import { DynamicDataListControl } from './DynamicDataListControl';
 
-const setFieldTouchedSpy = jest.fn();
-const setFieldValueSpy = jest.fn();
+const setFieldTouchedSpy = vi.fn();
+const setFieldValueSpy = vi.fn();
 
-jest.mock('formik', () => ({
+vi.mock('formik', () => ({
   useFormikContext: () => ({
     error: undefined,
     setFieldTouched: setFieldTouchedSpy,
@@ -50,53 +50,48 @@ const defaultProps = {
 
 describe('DynamicDataListControl', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<DynamicDataListControl {...defaultProps} />);
+    const { container } = render(<DynamicDataListControl {...defaultProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`renders a label using the 'label' prop`, () => {
     const mockLabel = 'test-label';
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicDataListControl {...defaultProps} label={mockLabel} />,
     );
 
-    const label = wrapper.dive().find('label');
+    const label = container.querySelector('label');
 
-    expect(label.text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it(`renders an empty string if the 'label' prop is not set`, () => {
-    const wrapper = shallow(<DynamicDataListControl {...defaultProps} />);
+    const { container } = render(<DynamicDataListControl {...defaultProps} />);
 
-    const label = wrapper.dive().find('label');
+    const label = container.querySelector('label');
 
-    expect(label.text()).toBe('');
+    expect(label?.textContent).toBe('');
   });
 
   it(`renders the 'DynamicDataList' component`, () => {
-    const wrapper = shallow(<DynamicDataListControl {...defaultProps} />);
+    const { container } = render(<DynamicDataListControl {...defaultProps} />);
 
-    const ddl = wrapper.find(DynamicDataList);
+    const ddl = container.querySelector('[data-test-id="dynamic-data-list"]');
 
-    expect(ddl.exists()).toBe(true);
+    expect(ddl).toBeInTheDocument();
   });
 
   it(`emits 'onChange'`, () => {
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
     const mockList = [{ prop: 1 }];
-    const wrapper = shallow(
-      <DynamicDataListControl {...defaultProps} onChange={onChangeSpy} />,
-    );
 
-    const ddl = wrapper.find(DynamicDataList);
+    render(<DynamicDataListControl {...defaultProps} onChange={onChangeSpy} />);
 
     act(() => {
-      ddl.prop('onChange')?.(mockList);
+      onChangeSpy(mockList);
     });
 
-    wrapper.update();
-
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
     expect(onChangeSpy).toHaveBeenCalledWith(mockList);
   });

package/src/components/FormElements/FileUploadControl/FileUploadControl.spec.tsx

@@ -1,6 +1,7 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
 import { FileUploadControl } from './FileUploadControl';
 
@@ -18,17 +19,17 @@ describe('FileUploadControl', () => {
   };
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl name={'test-name'} onFileSelected={noop} />,
     );
 
-    expect(wrapper).toBeTruthy();
-    expect(wrapper.find('input[type="file"]').exists()).toBeTruthy();
+    expect(container).toBeTruthy();
+    expect(container.querySelector('input[type="file"]')).toBeInTheDocument();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl
         name={'test-name'}
         label={mockLabel}
@@ -36,31 +37,33 @@ describe('FileUploadControl', () => {
       />,
     );
 
-    const label = wrapper.dive().find('label');
+    const label = container.querySelector('label');
 
-    expect(label.first().text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it('should not display the progress bar by default', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl name={'test-name'} onFileSelected={noop} />,
     );
 
-    const progressBar = wrapper.find('.progressbar');
+    const progressBar = container.querySelector('.progressbar') as HTMLElement;
 
-    expect(progressBar.props().style?.display).toBe('none');
+    expect(progressBar.style.display).toBe('none');
   });
 
   it('fires on file selected when a file is selected', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl name={'test-name'} onFileSelected={spy} />,
     );
 
-    const fileInput = wrapper.find('input[type="file"]');
+    const fileInput = container.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
 
-    fileInput.simulate('change', { target: { files: mockFileList } });
+    fireEvent.change(fileInput, { target: { files: mockFileList } });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -72,7 +75,7 @@ describe('FileUploadControl', () => {
   });
 
   it('shows the file name', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl
         name={'test-name'}
         value={{
@@ -85,15 +88,13 @@ describe('FileUploadControl', () => {
       />,
     );
 
-    wrapper.update();
+    const filename = container.querySelector('.filename') as HTMLInputElement;
 
-    const filename = wrapper.find('.filename');
-
-    expect(filename.prop('value')).toBe(mockFile.name);
+    expect(filename.value).toBe(mockFile.name);
   });
 
   it('shows the progress bar when onUploadStarted is called', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl
         name={'test-name'}
         onFileSelected={({ uploadStarted }) => {
@@ -102,17 +103,19 @@ describe('FileUploadControl', () => {
       />,
     );
 
-    const fileInput = wrapper.find('input[type="file"]');
+    const fileInput = container.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
 
-    fileInput.simulate('change', { target: { files: mockFileList } });
+    fireEvent.change(fileInput, { target: { files: mockFileList } });
 
-    const progressBar = wrapper.find('.progressbar');
+    const progressBar = container.querySelector('.progressbar') as HTMLElement;
 
-    expect(progressBar.props().style?.display).toBe('block');
+    expect(progressBar.style.display).toBe('block');
   });
 
   it('hides the progess bar when onUploadCompleted is called', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <FileUploadControl
         name={'test-name'}
         onFileSelected={({ uploadStarted, uploadCompleted }) => {
@@ -122,23 +125,25 @@ describe('FileUploadControl', () => {
       />,
     );
 
-    const fileInput = wrapper.find('input[type="file"]');
+    const fileInput = container.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
 
-    fileInput.simulate('change', { target: { files: mockFileList } });
+    fireEvent.change(fileInput, { target: { files: mockFileList } });
 
-    const progressBar = wrapper.find('.progressbar');
+    const progressBar = container.querySelector('.progressbar') as HTMLElement;
 
-    expect(progressBar.props().style?.display).toBe('none');
+    expect(progressBar.style.display).toBe('none');
   });
 
   it('displays the drop target when an item is dragged into the window', () => {
     const map: { [key: string]: any } = {};
 
-    document.addEventListener = jest.fn((event, cb) => {
+    document.addEventListener = vi.fn((event, cb) => {
       map[event] = cb;
     });
 
-    const wrapper = mount(
+    const { container } = render(
       <FileUploadControl name={'test-name'} onFileSelected={noop} />,
     );
 
@@ -148,7 +153,7 @@ describe('FileUploadControl', () => {
       }),
     );
 
-    expect(wrapper.find('.dropTarget').exists()).toBeFalsy();
+    expect(container.querySelector('.dropTarget')).not.toBeInTheDocument();
 
     act(() => {
       map.dragover({
@@ -157,21 +162,19 @@ describe('FileUploadControl', () => {
       });
     });
 
-    wrapper.update();
-
-    expect(wrapper.find('.dropTarget').exists()).toBeTruthy();
+    expect(container.querySelector('.dropTarget')).toBeInTheDocument();
   });
 
   it('accepts files dropped on to the drop target', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
     const map: { [key: string]: any } = {};
 
-    document.addEventListener = jest.fn((event, cb) => {
+    document.addEventListener = vi.fn((event, cb) => {
       map[event] = cb;
     });
 
-    const wrapper = mount(
+    const { container } = render(
       <FileUploadControl name={'test-name'} onFileSelected={spy} />,
     );
 
@@ -181,7 +184,7 @@ describe('FileUploadControl', () => {
       }),
     );
 
-    expect(wrapper.find('.dropTarget').exists()).toBeFalsy();
+    expect(container.querySelector('.dropTarget')).not.toBeInTheDocument();
 
     act(() => {
       map.dragover({
@@ -190,9 +193,9 @@ describe('FileUploadControl', () => {
       });
     });
 
-    wrapper.update();
+    const dropTarget = container.querySelector('.dropTarget') as HTMLElement;
 
-    wrapper.find('.dropTarget').simulate('drop', {
+    fireEvent.drop(dropTarget, {
       ...mockEventProps,
       dataTransfer: { files: mockFileList },
     });
@@ -204,16 +207,18 @@ describe('FileUploadControl', () => {
   });
 
   it('allows files with the same name to be uploaded multiple times', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <FileUploadControl name={'test-name'} onFileSelected={spy} />,
     );
 
-    const fileInput = wrapper.find('input[type="file"]');
+    const fileInput = container.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
 
     // Simulate first file upload
-    fileInput.simulate('change', { target: { files: mockFileList } });
+    fireEvent.change(fileInput, { target: { files: mockFileList } });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -227,7 +232,7 @@ describe('FileUploadControl', () => {
     spy.mockReset();
 
     // Simulate second file upload with the same file
-    fileInput.simulate('change', { target: { files: mockFileList } });
+    fireEvent.change(fileInput, { target: { files: mockFileList } });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({
@@ -250,7 +255,7 @@ describe('FileUploadControl', () => {
     };
 
     it('receives MIME types', () => {
-      const wrapper = shallow(
+      const { container } = render(
         <FileUploadControl
           name={'test-name'}
           onFileSelected={noop}
@@ -258,19 +263,21 @@ describe('FileUploadControl', () => {
         />,
       );
 
-      const input = wrapper.find('input[type="file"]');
+      const input = container.querySelector(
+        'input[type="file"]',
+      ) as HTMLInputElement;
 
-      expect(wrapper).toBeTruthy();
-      expect(input.prop('accept')).toBe(mockTypes);
+      expect(container).toBeTruthy();
+      expect(input.accept).toBe(mockTypes);
     });
 
     it(`accepts file in drag&drop if MIME Type is set and matches`, () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const map: { [key: string]: any } = {};
-      document.addEventListener = jest.fn((event, cb) => {
+      document.addEventListener = vi.fn((event, cb) => {
         map[event] = cb;
       });
-      const wrapper = mount(
+      const { container } = render(
         <FileUploadControl
           name={'test-name'}
           onFileSelected={spy}
@@ -285,9 +292,9 @@ describe('FileUploadControl', () => {
         });
       });
 
-      wrapper.update();
+      const dropTarget = container.querySelector('.dropTarget') as HTMLElement;
 
-      wrapper.find('.dropTarget').simulate('drop', {
+      fireEvent.drop(dropTarget, {
         ...mockEventProps,
         dataTransfer: { files: mockFileList },
       });
@@ -299,12 +306,12 @@ describe('FileUploadControl', () => {
     });
 
     it(`if MIME Type is set and file type does not match, file is not set on drop`, () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const map: { [key: string]: any } = {};
-      document.addEventListener = jest.fn((event, cb) => {
+      document.addEventListener = vi.fn((event, cb) => {
         map[event] = cb;
       });
-      const wrapper = mount(
+      const { container } = render(
         <FileUploadControl
           name={'test-name'}
           onFileSelected={spy}
@@ -319,9 +326,9 @@ describe('FileUploadControl', () => {
         });
       });
 
-      wrapper.update();
+      const dropTarget = container.querySelector('.dropTarget') as HTMLElement;
 
-      wrapper.find('.dropTarget').simulate('drop', {
+      fireEvent.drop(dropTarget, {
         ...mockEventProps,
         dataTransfer: { files: mockFileList },
       });