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

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

@@ -1,8 +1,8 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { ConfirmDialog } from '../../ConfirmDialog';
-import { Radio, RadioButton, RadioProps } from './Radio';
+import { describe, expect, it, vi } from 'vitest';
+import { Radio, RadioProps } from './Radio';
 
 describe('Radio', () => {
   const defaultProps: RadioProps = {
@@ -20,22 +20,22 @@ describe('Radio', () => {
   };
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Radio name="test-name" />);
+    const { container } = render(<Radio name="test-name" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<Radio name="test-name" label={mockLabel} />);
+    const { container } = render(<Radio name="test-name" label={mockLabel} />);
 
-    const label = wrapper.dive().find('label').first();
+    const label = container.querySelector('label');
 
-    expect(label.text()).toBe(mockLabel);
+    expect(label?.textContent).toBe(mockLabel);
   });
 
   it('each radio button accepts optional props when passed in', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockId = 'test-id';
 
     const mockInputProps: Partial<RadioProps> = {
@@ -45,7 +45,7 @@ describe('Radio', () => {
       onFocus: spy,
     };
 
-    const wrapper = shallow(
+    const { container } = render(
       <Radio
         name="test-name"
         id={mockId}
@@ -54,11 +54,12 @@ describe('Radio', () => {
       />,
     );
 
-    const radio = wrapper.find('.container');
-    const radioButton = wrapper.find('input').first().props();
+    const radio = container.querySelector('.container') as HTMLElement;
+    const radioButton = container.querySelector('input') as HTMLInputElement;
 
-    expect(radio.prop('id')).toBe(mockId);
-    expect(radioButton).toEqual(expect.objectContaining(mockInputProps));
+    expect(radio.id).toBe(mockId);
+    expect(radioButton.autofocus).toBe(mockInputProps.autoFocus);
+    expect(radioButton.disabled).toBe(mockInputProps.disabled);
   });
 
   it(`- each radio button 'name' should have the same name
@@ -67,78 +68,56 @@ describe('Radio', () => {
   - each radio button 'htmlFor' prop should be the same as its 'id'`, () => {
     const mockName = 'test-name';
     const mockOptions = defaultProps.options ?? [];
-    const wrapper = shallow(
+    const { container } = render(
       <Radio {...defaultProps} name={mockName} options={mockOptions} />,
     );
 
-    const radioButtons = wrapper.find('.option');
+    const radioButtons = container.querySelectorAll('.option');
 
-    radioButtons.forEach((radioInput, idx) => {
+    radioButtons.forEach((radioOption, idx) => {
       const id = `${mockName}-${mockOptions[idx].value}`;
-      const input = radioInput.find('input');
-      const label = radioInput.find('label');
+      const input = radioOption.querySelector('input') as HTMLInputElement;
+      const label = radioOption.querySelector('label') as HTMLLabelElement;
 
-      expect(input.prop('name')).toBe(mockName);
-      expect(input.prop('id')).toBe(id);
-      expect(label.prop('htmlFor')).toBe(id);
-      expect(label.contains(mockOptions[idx].label)).toBe(true);
+      expect(input.name).toBe(mockName);
+      expect(input.id).toBe(id);
+      expect(label.htmlFor).toBe(id);
+      expect(label.textContent).toContain(mockOptions[idx].label);
     });
   });
 
   it(`sets current button to 'checked' using the 'value' prop and autofocus selected button`, () => {
-    const falseValues = {
-      checked: false,
-      autoFocus: false,
-    };
     const [, option2] = defaultProps.options ?? [];
     const mockValue: string = option2.value as string;
-    const wrapper = shallow(<Radio {...defaultProps} />);
+    const { container, rerender } = render(<Radio {...defaultProps} />);
 
-    let radioButtons = wrapper.find('input');
-    let button = wrapper.find(RadioButton);
+    let radioButtons = container.querySelectorAll('input');
 
-    expect(radioButtons.at(0).props()).toEqual(
-      expect.objectContaining(falseValues),
-    );
-    expect(button.at(0).prop('checked')).toBe(false);
-    expect(radioButtons.at(1).props()).toEqual(
-      expect.objectContaining(falseValues),
-    );
-    expect(button.at(1).prop('checked')).toBe(false);
-    expect(radioButtons.at(2).props()).toEqual(
-      expect.objectContaining(falseValues),
-    );
-    expect(button.at(2).prop('checked')).toBe(false);
+    expect((radioButtons[0] as HTMLInputElement).checked).toBe(false);
+    expect((radioButtons[0] as HTMLInputElement).autofocus).toBe(false);
+    expect((radioButtons[1] as HTMLInputElement).checked).toBe(false);
+    expect((radioButtons[1] as HTMLInputElement).autofocus).toBe(false);
+    expect((radioButtons[2] as HTMLInputElement).checked).toBe(false);
+    expect((radioButtons[2] as HTMLInputElement).autofocus).toBe(false);
 
-    wrapper.setProps({ value: mockValue });
-    wrapper.update();
+    rerender(<Radio {...defaultProps} value={mockValue} />);
 
-    radioButtons = wrapper.find('input');
-    button = wrapper.find(RadioButton);
+    radioButtons = container.querySelectorAll('input');
 
-    expect(radioButtons.at(0).props()).toEqual(
-      expect.objectContaining(falseValues),
-    );
-    expect(button.at(0).prop('checked')).toBe(false);
-    expect(radioButtons.at(1).props()).toEqual(
-      expect.objectContaining({
-        checked: true,
-        autoFocus: true,
-      }),
-    );
-    expect(button.at(1).prop('checked')).toBe(true);
-    expect(radioButtons.at(2).props()).toEqual(
-      expect.objectContaining(falseValues),
-    );
-    expect(button.at(2).prop('checked')).toBe(false);
+    expect((radioButtons[0] as HTMLInputElement).checked).toBe(false);
+    expect((radioButtons[0] as HTMLInputElement).autofocus).toBe(false);
+    expect((radioButtons[1] as HTMLInputElement).checked).toBe(true);
+    expect((radioButtons[1] as HTMLInputElement).autofocus).toBe(true);
+    expect((radioButtons[2] as HTMLInputElement).checked).toBe(false);
+    expect((radioButtons[2] as HTMLInputElement).autofocus).toBe(false);
   });
 
   it(`emits onBlur, onFocus, and onChange events`, () => {
-    const onBlurSpy = jest.fn();
-    const onFocusSpy = jest.fn();
-    const onChangeSpy = jest.fn();
+    const onBlurSpy = vi.fn();
+    const onFocusSpy = vi.fn();
+    const onChangeSpy = vi.fn();
 
-    const wrapper = shallow(
+    const { container } = render(
       <Radio
         {...defaultProps}
         onChange={onChangeSpy}
@@ -147,188 +126,196 @@ describe('Radio', () => {
       />,
     );
 
-    const radioButton = wrapper.find('input').first();
+    const radioButton = container.querySelector('input') as HTMLInputElement;
 
-    radioButton.simulate('blur');
+    fireEvent.blur(radioButton);
     expect(onBlurSpy).toHaveBeenCalledTimes(1);
 
-    radioButton.simulate('focus');
+    fireEvent.focus(radioButton);
     expect(onFocusSpy).toHaveBeenCalledTimes(1);
 
-    radioButton.simulate('change');
+    fireEvent.click(radioButton);
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
 
   it(`clicking on the radio button or it's label will raise onChange with the value`, () => {
-    const mockValue = {
-      currentTarget: { checked: true },
-    };
-    const onChangeSpy = jest.fn();
+    const onChangeSpy = vi.fn();
 
-    const wrapper = shallow(<Radio {...defaultProps} onChange={onChangeSpy} />);
+    const { container } = render(
+      <Radio {...defaultProps} onChange={onChangeSpy} />,
+    );
 
-    const radioButton = wrapper.find('input').first();
-    const label = wrapper.find('input').at(1);
+    const radioButtons = container.querySelectorAll('input');
+    const radioButton = radioButtons[0] as HTMLInputElement;
+    const secondButton = radioButtons[1] as HTMLInputElement;
 
-    radioButton.simulate('change', mockValue);
-    label.simulate('change', mockValue);
+    fireEvent.click(radioButton);
+    fireEvent.click(secondButton);
 
     expect(onChangeSpy).toHaveBeenCalledTimes(2);
-    expect(onChangeSpy).toHaveBeenNthCalledWith(1, mockValue);
-    expect(onChangeSpy).toHaveBeenNthCalledWith(2, mockValue);
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const [option1] = defaultProps.options ?? [];
     const mockErrorMessage = 'test-error-message';
-    const wrapper = shallow(
+    const { container } = render(
       <Radio {...defaultProps} options={[option1]} error={mockErrorMessage} />,
     );
 
-    const button = wrapper.find(RadioButton);
-    const errorMsg = wrapper.dive().find('small');
+    const errorMsg = container.querySelector('small');
+    const svg = container.querySelector('svg');
 
-    expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(button.prop('hasError')).toBe(true);
+    expect(errorMsg?.textContent).toBe(mockErrorMessage);
+    expect(svg?.classList.contains('hasError')).toBe(true);
   });
 
   describe('confirmation', () => {
     const mockEvent = {
       e: 'event',
-      persist: () => jest.fn(),
+      persist: () => vi.fn(),
     };
 
     it(`'Advanced' mode changes applies confirmation styles`, async () => {
-      const mockValue = {
-        currentTarget: { checked: true },
-      };
-
-      const wrapper = mount(
+      const { container } = render(
         <Radio {...defaultProps} confirmationMode="Advanced" />,
       );
 
-      const radioButton = wrapper.find('input').first();
-      let confirmation = wrapper.find(ConfirmDialog);
+      const radioButton = container.querySelector('input') as HTMLInputElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
-      await act(async () => {
-        await radioButton.simulate('change', mockValue);
+      act(() => {
+        fireEvent.click(radioButton);
       });
-      wrapper.update();
 
-      const radioInputs = wrapper.find('input');
-      const radioSVG = wrapper.find('svg');
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        confirmation = document.querySelector('.confirm-dialog-container');
+        expect(confirmation).toBeInTheDocument();
+      });
 
-      expect(confirmation.exists()).toBe(true);
+      const radioInputs = container.querySelectorAll('input');
+      const radioSVG = container.querySelectorAll('svg');
 
-      expect(radioSVG.at(0).hasClass('hasConfirm')).toBe(true);
-      expect(radioSVG.at(0).hasClass('unSelectable')).toBe(true);
-      expect(radioSVG.at(1).hasClass('hasConfirm')).toBe(false);
-      expect(radioSVG.at(1).hasClass('unSelectable')).toBe(true);
-      expect(radioSVG.at(2).hasClass('hasConfirm')).toBe(false);
-      expect(radioSVG.at(2).hasClass('unSelectable')).toBe(true);
+      expect(radioSVG[0].classList.contains('hasConfirm')).toBe(true);
+      expect(radioSVG[0].classList.contains('unSelectable')).toBe(true);
+      expect(radioSVG[1].classList.contains('hasConfirm')).toBe(false);
+      expect(radioSVG[1].classList.contains('unSelectable')).toBe(true);
+      expect(radioSVG[2].classList.contains('hasConfirm')).toBe(false);
+      expect(radioSVG[2].classList.contains('unSelectable')).toBe(true);
       radioInputs.forEach((radioInput) => {
-        expect(radioInput.prop('disabled')).toBe(true);
+        expect((radioInput as HTMLInputElement).disabled).toBe(true);
       });
     });
 
-    it(`'Advanced' mode renders a confirmation pop up, emits new value when 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, () => {
-      const spy = jest.fn();
-      const mockValue = {
-        currentTarget: { checked: true },
-      };
+    it(`'Advanced' mode renders a confirmation pop up, emits new value when 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+      const spy = vi.fn();
       const [option1] = defaultProps.options ?? [];
 
-      const wrapper = mount(
+      const { container } = render(
         <Radio {...defaultProps} confirmationMode="Advanced" onChange={spy} />,
       );
 
-      const radioButton = wrapper.find('input').first();
-      let confirmation = wrapper.find(ConfirmDialog);
+      const radioButton = container.querySelector('input') as HTMLInputElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        radioButton.simulate('change', mockValue);
+        fireEvent.click(radioButton);
       });
-      wrapper.update();
-
-      confirmation = wrapper.find(ConfirmDialog);
 
-      expect(confirmation.exists()).toBe(true);
+      await waitFor(() => {
+        confirmation = document.querySelector('.confirm-dialog-container');
+        expect(confirmation).toBeInTheDocument();
+      });
 
-      const confirmButton = wrapper.find('button').last();
+      const confirmButton = document.querySelector(
+        '[data-test-id="confirm"]',
+      ) as HTMLButtonElement;
 
       act(() => {
-        // @ts-expect-error no full event args
-        confirmButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(confirmButton);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(
+          expect.objectContaining({ currentTarget: { value: option1.value } }),
+        );
       });
-      wrapper.update();
 
-      const radioButtons = wrapper.find('input');
-      confirmation = wrapper.find(ConfirmDialog);
+      const radioButtons = container.querySelectorAll('input');
+
+      await waitFor(
+        () => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).not.toBeInTheDocument();
+        },
+        { timeout: 1000 },
+      );
 
       radioButtons.forEach((radioInput) => {
-        expect(radioInput.hasClass('hasConfirm')).toBe(false);
+        expect(
+          (radioInput as HTMLInputElement).classList.contains('hasConfirm'),
+        ).toBe(false);
       });
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith(
-        expect.objectContaining({ currentTarget: { value: option1.value } }),
-      );
     });
 
-    it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onChange' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, () => {
-      const spy = jest.fn();
-      const mockValue = {
-        currentTarget: { checked: true },
-      };
+    it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onChange' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+      const spy = vi.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <Radio {...defaultProps} confirmationMode="Advanced" onChange={spy} />,
       );
 
-      const radioButton = wrapper.find('input').first();
-      let confirmation = wrapper.find(ConfirmDialog);
+      const radioButton = container.querySelector('input') as HTMLInputElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        radioButton.simulate('change', mockValue);
+        fireEvent.click(radioButton);
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
-
-      expect(confirmation.exists()).toBe(true);
+      await waitFor(() => {
+        confirmation = document.querySelector('.confirm-dialog-container');
+        expect(confirmation).toBeInTheDocument();
+      });
 
-      const cancelButton = wrapper.find('button').first();
+      const cancelButton = document.querySelector(
+        '[data-test-id="cancel"]',
+      ) as HTMLButtonElement;
 
       act(() => {
-        // @ts-expect-error no full event args
-        cancelButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(cancelButton);
       });
-      wrapper.update();
 
-      const radioButtons = wrapper.find('input');
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        expect(spy).not.toHaveBeenCalled();
+      });
+
+      const radioButtons = container.querySelectorAll('input');
+
+      await waitFor(
+        () => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).not.toBeInTheDocument();
+        },
+        { timeout: 1000 },
+      );
 
       radioButtons.forEach((radioInput) => {
-        expect(radioInput.hasClass('hasConfirm')).toBe(false);
+        expect(
+          (radioInput as HTMLInputElement).classList.contains('hasConfirm'),
+        ).toBe(false);
       });
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).not.toHaveBeenCalled();
     });
 
-    it(`emits 'onConfirmOpen' if set`, () => {
-      const spy = jest.fn();
-      const mockValue = {
-        currentTarget: { checked: true },
-      };
+    it(`emits 'onConfirmOpen' if set`, async () => {
+      const spy = vi.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <Radio
           {...defaultProps}
           confirmationMode="Advanced"
@@ -336,23 +323,34 @@ describe('Radio', () => {
         />,
       );
 
-      const radioButton = wrapper.find('input').first();
+      const radioButton = container.querySelector('input') as HTMLInputElement;
 
       act(() => {
-        radioButton.simulate('change', mockValue);
+        fireEvent.click(radioButton);
       });
-      wrapper.update();
 
-      const cancelButton = wrapper.find('button').first();
+      await waitFor(() => {
+        const confirmation = document.querySelector(
+          '.confirm-dialog-container',
+        );
+        expect(confirmation).toBeInTheDocument();
+      });
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenNthCalledWith(1, true);
+
+      const cancelButton = document.querySelector(
+        '[data-test-id="cancel"]',
+      ) as HTMLButtonElement;
 
       act(() => {
-        // @ts-expect-error no full event args
-        cancelButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(cancelButton);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(2);
       });
-      wrapper.update();
 
-      expect(spy).toHaveBeenCalledTimes(2);
-      expect(spy).toHaveBeenNthCalledWith(1, true);
       expect(spy).toHaveBeenNthCalledWith(2, false);
     });
   });

package/src/components/FormElements/ReadOnly/ReadOnlyField.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 { ReadOnlyField } from './ReadOnlyField';
 
 describe('ReadOnlyField', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ReadOnlyField />);
+    const { container } = render(<ReadOnlyField />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<ReadOnlyField label={mockLabel} />);
+    const { container } = render(<ReadOnlyField 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(<ReadOnlyField value={mockValue} />);
+    const { container } = render(<ReadOnlyField value={mockValue} />);
 
-    const value = wrapper.find('.value');
+    const value = container.querySelector('.value');
 
-    expect(value.text()).toBe(mockValue);
+    expect(value?.textContent).toBe(mockValue);
   });
 
   it('renders a numeric value', () => {
     const mockValue = 3;
-    const wrapper = shallow(<ReadOnlyField value={mockValue} />);
+    const { container } = render(<ReadOnlyField value={mockValue} />);
 
-    const value = wrapper.find('.value');
+    const value = container.querySelector('.value');
 
-    expect(value.text()).toBe(String(mockValue));
+    expect(value?.textContent).toBe(String(mockValue));
   });
 
   it('renders an array of values', () => {
     const mockValue = ['de', 'en', 'ja', 'fr'];
-    const wrapper = shallow(<ReadOnlyField value={mockValue} />);
+    const { container } = render(<ReadOnlyField value={mockValue} />);
 
-    const value = wrapper.find('.value');
+    const value = container.querySelector('.value');
 
-    expect(value.text()).toBe('de, en, ja, fr');
+    expect(value?.textContent).toBe('de, en, ja, fr');
   });
 
   it('defaults to empty strings for label and value', () => {
     const mockDefaults = '';
-    const wrapper = shallow(<ReadOnlyField />);
+    const { container } = render(<ReadOnlyField />);
 
-    const label = wrapper.dive().find('label');
-    const value = wrapper.find('.value');
+    const label = container.querySelector('label');
+    const value = container.querySelector('.value');
 
-    expect(label.text()).toBe(mockDefaults);
-    expect(value.text()).toBe(mockDefaults);
+    expect(label?.textContent).toBe(mockDefaults);
+    expect(value?.textContent).toBe(mockDefaults);
   });
 
   it('triggers transform functions once per render', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockValue = 3;
 
-    shallow(<ReadOnlyField value={mockValue} transform={spy} />);
+    render(<ReadOnlyField value={mockValue} transform={spy} />);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(3);