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

package/src/components/FormElements/ReadOnlyText/ReadOnlyTextField.spec.tsx

@@ -1,66 +1,67 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { ReadOnlyTextField } from './ReadOnlyTextField';
 
 describe('ReadOnlyTextField', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ReadOnlyTextField />);
+    const { container } = render(<ReadOnlyTextField />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<ReadOnlyTextField label={mockLabel} />);
+    const { container } = render(<ReadOnlyTextField 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 a string value', () => {
     const mockValue = 'mockLabel';
-    const wrapper = shallow(<ReadOnlyTextField value={mockValue} />);
+    const { container } = render(<ReadOnlyTextField value={mockValue} />);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe(mockValue);
+    expect(input.value).toBe(mockValue);
   });
 
   it('renders a numeric value', () => {
     const mockValue = 3;
-    const wrapper = shallow(<ReadOnlyTextField value={mockValue} />);
+    const { container } = render(<ReadOnlyTextField value={mockValue} />);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe(mockValue);
+    expect(input.value).toBe(String(mockValue));
   });
 
   it('renders an array of values', () => {
     const mockValue = ['de', 'en', 'ja', 'fr'];
-    const wrapper = shallow(<ReadOnlyTextField value={mockValue} />);
+    const { container } = render(<ReadOnlyTextField value={mockValue} />);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.prop('value')).toBe('de, en, ja, fr');
+    expect(input.value).toBe('de, en, ja, fr');
   });
 
   it('defaults to empty strings for label and value', () => {
     const mockDefaults = '';
-    const wrapper = shallow(<ReadOnlyTextField />);
+    const { container } = render(<ReadOnlyTextField />);
 
-    const label = wrapper.dive().find('label');
-    const input = wrapper.find('input');
+    const label = container.querySelector('label');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(label.text()).toBe(mockDefaults);
-    expect(input.prop('value')).toBe(mockDefaults);
+    expect(label?.textContent).toBe(mockDefaults);
+    expect(input.value).toBe(mockDefaults);
   });
 
   it('triggers transform functions once per render', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockValue = 3;
 
-    shallow(<ReadOnlyTextField value={mockValue} transform={spy} />);
+    render(<ReadOnlyTextField value={mockValue} transform={spy} />);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(3);

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

@@ -1,5 +1,6 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { Select } from './Select';
 
 const mockLabel = 'mockLabel';
@@ -20,52 +21,50 @@ const mockOptions = [
 ];
 
 describe('Select', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Select name="test-name" options={[]} />);
+    const { container } = render(<Select name="test-name" options={[]} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Select name="test-name" label={mockLabel} options={[]} />,
     );
 
-    const label = wrapper.dive().find('[data-test-id="form-field-label"]');
+    const label = container.querySelector('[data-test-id="form-field-label"]');
 
-    expect(label.text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it('the given value must be filled in input', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Select name={'test-name'} options={mockOptions} value="2" />,
     );
 
-    const input = wrapper.find('[role="combobox"]');
+    const input = container.querySelector(
+      '[role="combobox"]',
+    ) as HTMLInputElement;
 
-    expect(input.prop('value')).toEqual(mockOptions[1].label);
+    expect(input.value).toEqual(mockOptions[1].label);
   });
 
   it('the popper must be rendered on input click', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Select name={'test-name'} options={mockOptions} value="2" />,
     );
-    const input = wrapper.find('[role="combobox"]');
-    input.simulate('mousedown');
+    const input = container.querySelector('[role="combobox"]') as HTMLElement;
+    fireEvent.mouseDown(input);
 
     const popper = document.querySelector('[role="tooltip"]');
     expect(popper).not.toBeNull();
   });
 
   it('raises change, blur, and focus events', () => {
-    const changeSpy = jest.fn();
-    const blurSpy = jest.fn();
-    const focusSpy = jest.fn();
-    const wrapper = mount(
+    const changeSpy = vi.fn();
+    const blurSpy = vi.fn();
+    const focusSpy = vi.fn();
+    const { container } = render(
       <Select
         name={'test-name'}
         onChange={changeSpy}
@@ -75,30 +74,32 @@ describe('Select', () => {
       />,
     );
 
-    const input = wrapper.find('[role="combobox"]');
-    input.simulate('mousedown');
+    const input = container.querySelector('[role="combobox"]') as HTMLElement;
+    fireEvent.mouseDown(input);
     const firstOption = document.querySelector('[role="option"]');
     firstOption?.dispatchEvent(new Event('click', { bubbles: true }));
 
     expect(changeSpy).toHaveBeenCalledTimes(1);
 
-    input.simulate('blur');
+    fireEvent.blur(input);
     expect(blurSpy).toHaveBeenCalledTimes(1);
 
-    input.simulate('focus');
+    fireEvent.focus(input);
     expect(focusSpy).toHaveBeenCalledTimes(1);
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
-    const wrapper = shallow(
+    const { container } = render(
       <Select name={'test-name'} error={mockErrorMessage} options={[]} />,
     );
 
-    const errorMsg = wrapper.dive().find('[data-test-id="form-field-error"]');
-    const input = wrapper.find('[role="combobox"]');
+    const errorMsg = container.querySelector(
+      '[data-test-id="form-field-error"]',
+    );
+    const input = container.querySelector('[role="combobox"]');
 
-    expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(input.hasClass('hasError')).toBe(true);
+    expect(errorMsg?.textContent).toBe(mockErrorMessage);
+    expect(input?.classList.contains('hasError')).toBe(true);
   });
 });

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

@@ -1,43 +1,43 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { SingleLineText } from './SingleLineText';
 
 describe('SingleLineText', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<SingleLineText name={'test-name'} />);
+    const { container } = render(<SingleLineText name={'test-name'} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(
+    const { container } = render(
       <SingleLineText 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('sets input field using the value prop and emits updated values', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockValue = 'test-value';
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = mount(
+    const { container } = render(
       <SingleLineText name={'test-name'} value={mockValue} onChange={spy} />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.getDOMNode<HTMLInputElement>().value).toEqual(mockValue);
+    expect(input.value).toEqual(mockValue);
 
-    input.simulate('change', { target: { value: mockValueUpdated } });
+    fireEvent.change(input, { target: { value: mockValueUpdated } });
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(
-      expect.objectContaining({ target: { value: mockValueUpdated } }),
-    );
+    const callArg = spy.mock.calls[0][0];
+    expect(callArg.target.value).toBe(mockValueUpdated);
   });
 
   it('uses optional props when passed in', () => {
@@ -52,21 +52,27 @@ describe('SingleLineText', () => {
       type: 'number',
     } as Record<string, unknown>;
 
-    const wrapper = shallow(
+    const { container } = render(
       <SingleLineText 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(mockProps.autoComplete);
+    // React's autoFocus focuses the element programmatically, not via the attribute
+    expect(document.activeElement).toBe(input);
+    expect(input.disabled).toBe(mockProps.disabled);
+    expect(input.id).toBe(mockProps.id);
+    expect(input.name).toBe(mockProps.name);
+    expect(input.placeholder).toBe(mockProps.placeholder);
+    expect(input.type).toBe(mockProps.type);
   });
 
   it('raises change, blur, and focus events', () => {
-    const changeSpy = jest.fn();
-    const blurSpy = jest.fn();
-    const focusSpy = jest.fn();
+    const changeSpy = vi.fn();
+    const blurSpy = vi.fn();
+    const focusSpy = vi.fn();
     const mockValue = 'test input';
-    const wrapper = shallow(
+    const { container } = render(
       <SingleLineText
         name={'test-name'}
         onChange={changeSpy}
@@ -75,38 +81,38 @@ describe('SingleLineText', () => {
       />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    input.simulate('change', { target: { value: mockValue } });
+    fireEvent.change(input, { target: { value: mockValue } });
     expect(changeSpy).toHaveBeenCalledTimes(1);
 
-    input.simulate('blur');
+    fireEvent.blur(input);
     expect(blurSpy).toHaveBeenCalledTimes(1);
 
-    input.simulate('focus');
+    fireEvent.focus(input);
     expect(focusSpy).toHaveBeenCalledTimes(1);
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
-    const wrapper = shallow(
+    const { container } = render(
       <SingleLineText 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('show a dummy value as the input value, when type is password', () => {
     const dummyPwd = '0000000000';
-    const wrapper = mount(
+    const { container } = render(
       <SingleLineText name={'test-pwd'} type="password" isSet={true} />,
     );
 
-    const input = wrapper.find('input').getDOMNode<HTMLInputElement>();
+    const input = container.querySelector('input') as HTMLInputElement;
 
     expect(input.value).toBe(dummyPwd);
   });
@@ -114,9 +120,9 @@ describe('SingleLineText', () => {
   it('when user changes the value it should be displayed, when type is password', () => {
     const initialVal = undefined;
     const mockValueUpdated = 'New Password';
-    const changeSpy = jest.fn();
+    const changeSpy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <SingleLineText
         name={'test-pwd'}
         type="password"
@@ -125,13 +131,11 @@ describe('SingleLineText', () => {
       />,
     );
 
-    const input = wrapper.find('input');
-    input.simulate('change', { target: { value: mockValueUpdated } });
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: mockValueUpdated } });
 
-    expect(changeSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: { value: mockValueUpdated },
-      }),
-    );
+    expect(changeSpy).toHaveBeenCalledTimes(1);
+    const callArg = changeSpy.mock.calls[0][0];
+    expect(callArg.target.value).toBe(mockValueUpdated);
   });
 });

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

@@ -1,37 +1,40 @@
-import { mount, ReactWrapper, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { Button } from '../../Buttons';
-import { Select } from '../Select/Select';
+import { describe, expect, it, vi } from 'vitest';
 import { Tags } from './Tags';
 
-function selectFirstOption(wrapper: ReactWrapper) {
-  const input = wrapper.find('[role="combobox"]');
-  input.simulate('mousedown');
-  const firstOption = document.querySelector('[role="option"]');
-  firstOption?.dispatchEvent(new Event('click', { bubbles: true }));
+function selectFirstOption(container: HTMLElement) {
+  const input = container.querySelector('[role="combobox"]') as HTMLElement;
+  fireEvent.mouseDown(input);
+  const firstOption = document.querySelector('[role="option"]') as HTMLElement;
+  if (firstOption) {
+    fireEvent.click(firstOption);
+  }
 }
 
 describe('Tags', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Tags name={'test-name'} />);
+    const { container } = render(<Tags name={'test-name'} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<Tags name={'test-name'} label={mockLabel} />);
+    const { container } = render(<Tags 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('displays a tag for each currently selected tag', () => {
     const mockValue: string[] = ['1', '2', '3'];
-    const wrapper = shallow(<Tags name={'test-name'} value={mockValue} />);
+    const { container } = render(<Tags name={'test-name'} value={mockValue} />);
 
-    const tags = wrapper.find('span > span').map((node) => node.text());
+    const tags = Array.from(container.querySelectorAll('span > span')).map(
+      (node) => node.textContent,
+    );
 
     expect(tags).toHaveLength(3);
     expect(tags).toEqual(mockValue);
@@ -39,19 +42,19 @@ describe('Tags', () => {
 
   it(`each Button component should have type of 'button'`, () => {
     const mockValue = ['1', '2', '3'];
-    const wrapper = mount(<Tags name={'test-name'} value={mockValue} />);
+    const { container } = render(<Tags name={'test-name'} value={mockValue} />);
 
-    const buttons = wrapper.find(Button);
+    const buttons = container.querySelectorAll('button');
 
     buttons.forEach((button) => {
-      expect(button.prop('type')).toBe('button');
+      expect(button.type).toBe('button');
     });
   });
 
   it('raises onChange when selecting a tag along with the new value', () => {
-    const changeSpy = jest.fn();
+    const changeSpy = vi.fn();
     const mockValue: string[] = ['1'];
-    const wrapper = mount(
+    const { container } = render(
       <Tags
         name={'test-name'}
         onChange={changeSpy}
@@ -60,7 +63,7 @@ describe('Tags', () => {
       />,
     );
 
-    selectFirstOption(wrapper);
+    selectFirstOption(container);
 
     expect(changeSpy).toHaveBeenCalledTimes(1);
     expect(changeSpy).toHaveBeenCalledWith(
@@ -71,9 +74,9 @@ describe('Tags', () => {
   });
 
   it('raises onChange when removing a tag along with the new value', () => {
-    const changeSpy = jest.fn();
+    const changeSpy = vi.fn();
     const mockValue: string[] = ['1'];
-    const wrapper = mount(
+    const { container } = render(
       <Tags
         name={'test-name'}
         onChange={changeSpy}
@@ -82,13 +85,11 @@ describe('Tags', () => {
       />,
     );
 
-    const x = wrapper.find('[data-test-id="tags-delete"]');
-
-    x.simulate('click', {
-      persist: jest.fn(),
-    });
+    const x = container.querySelector(
+      '[data-test-id="tags-delete"]',
+    ) as HTMLElement;
 
-    wrapper.update();
+    fireEvent.click(x);
 
     expect(changeSpy).toHaveBeenCalledTimes(1);
     expect(changeSpy).toHaveBeenCalledWith(
@@ -99,33 +100,35 @@ describe('Tags', () => {
   });
 
   it('shows select element when current selected tags and optional tags are the not same length', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Tags name={'test-name'} value={['1']} tagsOptions={['1', '2']} />,
     );
 
-    const select = wrapper.find(Select);
+    const select = container.querySelector('[role="combobox"]');
 
-    expect(select).toHaveLength(1);
+    expect(select).toBeInTheDocument();
   });
 
   it('hides select element when current selected tags and optional tags are the same length', () => {
-    const wrapper = mount(
+    const { container, rerender } = render(
       <Tags name={'test-name'} value={['1']} tagsOptions={['1', '2']} />,
     );
 
-    selectFirstOption(wrapper);
+    selectFirstOption(container);
 
-    wrapper.update();
+    rerender(
+      <Tags name={'test-name'} value={['1', '2']} tagsOptions={['1', '2']} />,
+    );
 
-    const select = wrapper.find(Select);
+    const select = container.querySelector('[role="combobox"]');
 
-    expect(select).toHaveLength(0);
+    expect(select).not.toBeInTheDocument();
   });
 
   it('raises blur and focus events', () => {
-    const blurSpy = jest.fn();
-    const focusSpy = jest.fn();
-    const wrapper = shallow(
+    const blurSpy = vi.fn();
+    const focusSpy = vi.fn();
+    const { container } = render(
       <Tags
         name={'test-name'}
         onBlur={blurSpy}
@@ -134,17 +137,17 @@ describe('Tags', () => {
       />,
     );
 
-    const select = wrapper.find(Select);
+    const select = container.querySelector('[role="combobox"]') as HTMLElement;
 
-    select.simulate('blur');
+    fireEvent.blur(select);
     expect(blurSpy).toHaveBeenCalledTimes(1);
 
-    select.simulate('focus');
+    fireEvent.focus(select);
     expect(focusSpy).toHaveBeenCalledTimes(1);
   });
 
   it('uses the displayValue for existing tags when tagOptions are objects', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Tags
         name={'test-name'}
         value={['1', '3']}
@@ -159,7 +162,9 @@ describe('Tags', () => {
       />,
     );
 
-    const tags = wrapper.find('span > span').map((node) => node.text());
+    const tags = Array.from(container.querySelectorAll('span > span')).map(
+      (node) => node.textContent,
+    );
 
     expect(tags).toHaveLength(2);
 
@@ -167,7 +172,7 @@ describe('Tags', () => {
   });
 
   it('uses the displayValue for available tags when tagOptions are objects', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Tags
         name={'test-name'}
         value={['1', '3']}
@@ -182,8 +187,8 @@ describe('Tags', () => {
       />,
     );
 
-    const input = wrapper.find('[role="combobox"]');
-    input.simulate('mousedown');
+    const input = container.querySelector('[role="combobox"]') as HTMLElement;
+    fireEvent.mouseDown(input);
 
     const popper = document.querySelector('[role="tooltip"]');
 
@@ -199,14 +204,15 @@ describe('Tags', () => {
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
-    const wrapper = mount(
+    const { container } = render(
       <Tags name={'test-name'} error={mockErrorMessage} tagsOptions={['1']} />,
     );
 
-    const errorMsg = wrapper.find('small');
-    const select = wrapper.find(Select);
+    const errorMsg = container.querySelector('small');
+    // The hasError class is applied to the Select component's container, not the combobox itself
+    const selectContainer = container.querySelector('.hasError');
 
-    expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(select.hasClass('hasError')).toBe(true);
+    expect(errorMsg?.textContent).toBe(mockErrorMessage);
+    expect(selectContainer).toBeInTheDocument();
   });
 });