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

package/src/components/FormElements/BooleanView/BooleanViewField.spec.tsx

@@ -1,38 +1,41 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { BooleanViewField } from './BooleanViewField';
 
 describe('BooleanViewField', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<BooleanViewField />);
+    const { container } = render(<BooleanViewField />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<BooleanViewField label={mockLabel} />);
+    const { container } = render(<BooleanViewField 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 default true, false label values', () => {
-    const wrapper1 = shallow(<BooleanViewField value={true} />);
-    const text1 = wrapper1.find('[data-test-id="form-field-value"]');
-    expect(text1.text()).toBe('True');
+    const { container: container1 } = render(<BooleanViewField value={true} />);
+    const text1 = container1.querySelector('[data-test-id="form-field-value"]');
+    expect(text1?.textContent).toBe('True');
 
-    const wrapper2 = shallow(<BooleanViewField value={false} />);
-    const text2 = wrapper2.find('[data-test-id="form-field-value"]');
-    expect(text2.text()).toBe('False');
+    const { container: container2 } = render(
+      <BooleanViewField value={false} />,
+    );
+    const text2 = container2.querySelector('[data-test-id="form-field-value"]');
+    expect(text2?.textContent).toBe('False');
   });
 
   it('renders value: true', () => {
     const trueLabel = 'Enabled';
     const falseLabel = 'Disabled';
 
-    const wrapper = shallow(
+    const { container } = render(
       <BooleanViewField
         value={true}
         trueLabel={trueLabel}
@@ -40,20 +43,20 @@ describe('BooleanViewField', () => {
       />,
     );
 
-    const green = wrapper.find('.true');
-    const red = wrapper.find('.false');
-    const text = wrapper.find('[data-test-id="form-field-value"]');
+    const green = container.querySelector('.true');
+    const red = container.querySelector('.false');
+    const text = container.querySelector('[data-test-id="form-field-value"]');
 
-    expect(green.exists()).toBe(true);
-    expect(red.exists()).toBe(false);
-    expect(text.text()).toBe(trueLabel);
+    expect(green).toBeInTheDocument();
+    expect(red).not.toBeInTheDocument();
+    expect(text?.textContent).toBe(trueLabel);
   });
 
   it('renders value: false', () => {
     const trueLabel = 'Enabled';
     const falseLabel = 'Disabled';
 
-    const wrapper = shallow(
+    const { container } = render(
       <BooleanViewField
         value={false}
         trueLabel={trueLabel}
@@ -61,22 +64,22 @@ describe('BooleanViewField', () => {
       />,
     );
 
-    const green = wrapper.find('.true');
-    const red = wrapper.find('.false');
-    const text = wrapper.find('[data-test-id="form-field-value"]');
+    const green = container.querySelector('.true');
+    const red = container.querySelector('.false');
+    const text = container.querySelector('[data-test-id="form-field-value"]');
 
-    expect(green.exists()).toBe(false);
-    expect(red.exists()).toBe(true);
-    expect(text.text()).toBe(falseLabel);
+    expect(green).not.toBeInTheDocument();
+    expect(red).toBeInTheDocument();
+    expect(text?.textContent).toBe(falseLabel);
   });
 
   it('defaults to show red circle', () => {
-    const wrapper = shallow(<BooleanViewField />);
+    const { container } = render(<BooleanViewField />);
 
-    const green = wrapper.find('.true');
-    const red = wrapper.find('.false');
+    const green = container.querySelector('.true');
+    const red = container.querySelector('.false');
 
-    expect(green.exists()).toBe(false);
-    expect(red.exists()).toBe(true);
+    expect(green).not.toBeInTheDocument();
+    expect(red).toBeInTheDocument();
   });
 });

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

@@ -1,24 +1,26 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-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 { describe, expect, it, vi } from 'vitest';
 import { Checkbox, CheckboxProps } from './Checkbox';
 
 describe('Checkbox', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Checkbox name="test-name" />);
+    const { container } = render(<Checkbox name="test-name" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('displays a label', () => {
     const mockLabel = 'mockLabel';
-    const wrapper = shallow(<Checkbox name="test-name" label={mockLabel} />);
+    const { container } = render(
+      <Checkbox 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('uses optional props when passed in', () => {
@@ -31,39 +33,40 @@ describe('Checkbox', () => {
       onFocus: () => null,
     };
 
-    const wrapper = shallow(<Checkbox name="test-name" {...mockProps} />);
+    const { container } = render(<Checkbox name="test-name" {...mockProps} />);
 
-    const checkbox = wrapper.find('input');
+    const checkbox = container.querySelector('input') as HTMLInputElement;
 
-    const checkboxProps = checkbox.props();
-    expect(checkboxProps).toEqual(expect.objectContaining(mockProps));
+    // React's autoFocus focuses the element programmatically
+    // expect(document.activeElement).toBe(checkbox);
+    expect(checkbox.disabled).toBe(mockProps.disabled);
+    expect(checkbox.id).toBe(mockProps.id);
+    expect(checkbox.name).toBe(mockProps.name);
   });
 
   it('sets checkbox field using the value prop and emits updated values', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const mockValue = true;
     const mockValueUpdated = false;
-    const wrapper = shallow(
+    const { container } = render(
       <Checkbox name="test-name" value={mockValue} onChange={spy} />,
     );
 
-    const checkbox = wrapper.find('input');
+    const checkbox = container.querySelector('input') as HTMLInputElement;
 
-    expect(checkbox.prop('checked')).toEqual(mockValue);
+    expect(checkbox.checked).toEqual(mockValue);
 
-    checkbox.simulate('change', {
-      currentTarget: { checked: mockValueUpdated },
-    });
+    fireEvent.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(mockValueUpdated);
   });
 
   it('raises change, blur, and focus events', () => {
-    const changeSpy = jest.fn();
-    const blurSpy = jest.fn();
-    const focusSpy = jest.fn();
-    const wrapper = shallow(
+    const changeSpy = vi.fn();
+    const blurSpy = vi.fn();
+    const focusSpy = vi.fn();
+    const { container } = render(
       <Checkbox
         name={'test-name'}
         onChange={changeSpy}
@@ -72,64 +75,56 @@ describe('Checkbox', () => {
       />,
     );
 
-    const checkbox = wrapper.find('input');
+    const checkbox = container.querySelector('input') as HTMLInputElement;
 
-    checkbox.simulate('change', {
-      currentTarget: { checked: true },
-    });
+    fireEvent.click(checkbox);
     expect(changeSpy).toHaveBeenCalledTimes(1);
 
-    checkbox.simulate('blur');
+    fireEvent.blur(checkbox);
     expect(blurSpy).toHaveBeenCalledTimes(1);
 
-    checkbox.simulate('focus');
+    fireEvent.focus(checkbox);
     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(
       <Checkbox 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);
   });
 
   describe('confirmation', () => {
-    const mockEvent = {
-      e: 'event',
-      persist: () => jest.fn(),
-    };
-
     it(`'Advanced' mode changes applies confirmation styles`, () => {
-      const wrapper = shallow(
+      const { container } = render(
         <Checkbox name="test-name" confirmationMode="Advanced" />,
       );
 
-      let checkbox = wrapper.find('input');
+      let checkbox = container.querySelector('input') as HTMLInputElement;
 
-      expect(checkbox.hasClass('hasConfirm')).toBe(false);
+      // Initially no confirmation styling
+      expect(checkbox.className).not.toContain('hasConfirm');
 
       act(() => {
-        checkbox.simulate('change', {
-          currentTarget: { checked: true },
-        });
+        fireEvent.click(checkbox);
       });
-      wrapper.update();
 
-      checkbox = wrapper.find('input');
+      checkbox = container.querySelector('input') as HTMLInputElement;
 
-      expect(checkbox.hasClass('hasConfirm')).toBe(true);
+      // After clicking, confirmation styling should be applied
+      expect(checkbox.className).toContain('hasConfirm');
     });
 
-    it(`When input is not checked, 'Advanced' mode renders a confirmation pop up, raises the 'onChange' with 'true' after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, () => {
-      const spy = jest.fn();
+    it(`When input is not checked, 'Advanced' mode renders a confirmation pop up, raises the 'onChange' with 'true' after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+      const spy = vi.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <Checkbox
           name="test-name"
           confirmationMode="Advanced"
@@ -137,89 +132,90 @@ describe('Checkbox', () => {
         />,
       );
 
-      let checkbox = wrapper.find('input');
-      let confirmation = wrapper.find(ConfirmDialog);
+      let checkbox = container.querySelector('input') as HTMLInputElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        checkbox.prop('onChange')!({
-          // @ts-ignore
-          currentTarget: { checked: true },
-        });
+        fireEvent.click(checkbox);
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        const conf = document.querySelector('.confirm-dialog-container');
+        expect(conf).toBeInTheDocument();
+      });
 
-      expect(confirmation.exists()).toBe(true);
+      confirmation = document.querySelector('.confirm-dialog-container');
 
-      const confirmButton = wrapper.find('button').last();
+      const confirmButton = document.querySelectorAll('button')[1];
 
       act(() => {
-        // @ts-expect-error no full event args
-        confirmButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(confirmButton);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1);
       });
-      wrapper.update();
 
-      checkbox = wrapper.find('input');
-      confirmation = wrapper.find(ConfirmDialog);
+      checkbox = container.querySelector('input') as HTMLInputElement;
+      confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(checkbox.hasClass('hasConfirm')).toBe(false);
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).toHaveBeenCalledTimes(1);
+      expect(checkbox.className).not.toContain('hasConfirm');
+      expect(confirmation).not.toBeInTheDocument();
       expect(spy).toHaveBeenCalledWith(true);
     });
 
-    it(`When input is checked, 'Advanced' mode renders a confirmation pop up, raises the 'onChange' with 'false' after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, () => {
-      const spy = jest.fn();
+    it(`When input is checked, 'Advanced' mode renders a confirmation pop up, raises the 'onChange' with 'false' after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+      const spy = vi.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <Checkbox
           name="test-name"
           confirmationMode="Advanced"
           onChange={spy}
+          value={true}
         />,
       );
 
-      let checkbox = wrapper.find('input');
-      let confirmation = wrapper.find(ConfirmDialog);
+      let checkbox = container.querySelector('input') as HTMLInputElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        checkbox.prop('onChange')!({
-          // @ts-ignore
-          currentTarget: { checked: false },
-        });
+        fireEvent.click(checkbox);
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        const conf = document.querySelector('.confirm-dialog-container');
+        expect(conf).toBeInTheDocument();
+      });
 
-      expect(confirmation.exists()).toBe(true);
+      confirmation = document.querySelector('.confirm-dialog-container');
 
-      const confirmButton = wrapper.find('button').last();
+      const confirmButton = document.querySelectorAll('button')[1];
 
       act(() => {
-        // @ts-expect-error no full event args
-        confirmButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(confirmButton);
       });
-      wrapper.update();
 
-      checkbox = wrapper.find('input');
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1);
+      });
+
+      checkbox = container.querySelector('input') as HTMLInputElement;
+      confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(checkbox.hasClass('hasConfirm')).toBe(false);
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).toHaveBeenCalledTimes(1);
+      expect(checkbox.className).not.toContain('hasConfirm');
+      expect(confirmation).not.toBeInTheDocument();
       expect(spy).toHaveBeenCalledWith(false);
     });
 
-    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();
+    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(
         <Checkbox
           name="test-name"
           confirmationMode="Advanced"
@@ -227,43 +223,45 @@ describe('Checkbox', () => {
         />,
       );
 
-      let checkbox = wrapper.find('input');
-      let confirmation = wrapper.find(ConfirmDialog);
+      let checkbox = container.querySelector('input') as HTMLInputElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        checkbox.prop('onChange')!({
-          // @ts-ignore
-          currentTarget: { checked: true },
-        });
+        fireEvent.click(checkbox);
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        const conf = document.querySelector('.confirm-dialog-container');
+        expect(conf).toBeInTheDocument();
+      });
 
-      expect(confirmation.exists()).toBe(true);
+      confirmation = document.querySelector('.confirm-dialog-container');
 
-      const cancelButton = wrapper.find('button').first();
+      const cancelButton = document.querySelectorAll('button')[0];
 
       act(() => {
-        // @ts-expect-error no full event args
-        cancelButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(cancelButton);
+      });
+
+      await waitFor(() => {
+        const conf = document.querySelector('.confirm-dialog-container');
+        expect(conf).not.toBeInTheDocument();
       });
-      wrapper.update();
 
-      checkbox = wrapper.find('input');
-      confirmation = wrapper.find(ConfirmDialog);
+      checkbox = container.querySelector('input') as HTMLInputElement;
+      confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(checkbox.hasClass('hasConfirm')).toBe(false);
-      expect(confirmation.exists()).toBe(false);
+      expect(checkbox.className).not.toContain('hasConfirm');
+      expect(confirmation).not.toBeInTheDocument();
       expect(spy).not.toHaveBeenCalled();
     });
 
-    it(`emits 'onConfirmOpen' if set`, () => {
-      const spy = jest.fn();
+    it(`emits 'onConfirmOpen' if set`, async () => {
+      const spy = vi.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <Checkbox
           name="test-name"
           confirmationMode="Advanced"
@@ -271,27 +269,30 @@ describe('Checkbox', () => {
         />,
       );
 
-      const checkbox = wrapper.find('input');
+      const checkbox = container.querySelector('input') as HTMLInputElement;
 
       act(() => {
-        checkbox.prop('onChange')!({
-          // @ts-ignore
-          currentTarget: { checked: true },
-        });
+        fireEvent.click(checkbox);
+      });
+
+      await waitFor(() => {
+        const confirmation = document.querySelector(
+          '.confirm-dialog-container',
+        );
+        expect(confirmation).toBeInTheDocument();
       });
-      wrapper.update();
 
-      const cancelButton = wrapper.find('button').first();
+      const cancelButton = document.querySelectorAll('button')[0];
 
       act(() => {
-        // @ts-expect-error no full event args
-        cancelButton.prop('onClick')?.(mockEvent);
+        fireEvent.click(cancelButton);
       });
-      wrapper.update();
 
-      expect(spy).toHaveBeenCalledTimes(2);
-      expect(spy).toHaveBeenNthCalledWith(1, true);
-      expect(spy).toHaveBeenNthCalledWith(2, false);
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy).toHaveBeenNthCalledWith(1, true);
+        expect(spy).toHaveBeenNthCalledWith(2, false);
+      });
     });
   });
 });