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

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

@@ -1,261 +1,258 @@
-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 { ToggleButton } from './ToggleButton';
 
 describe('Button', () => {
   const mockEvent = {
     e: 'event',
-    persist: () => jest.fn(),
+    persist: () => vi.fn(),
   };
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<ToggleButton name="test-name" />);
+    const { container } = render(<ToggleButton name="test-name" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`'value' is 'false' by default and the 'OFF' button has the 'active' class`, () => {
-    const wrapper = shallow(<ToggleButton name="test-name" />);
+    const { container } = render(<ToggleButton name="test-name" />);
 
-    const buttons = wrapper.find('div');
+    const buttons = container.querySelectorAll('div');
+    const offButton = container.querySelector('.off');
+    const onButton = container.querySelector('.on');
 
-    expect(buttons.first().hasClass('active')).toBe(true);
-    expect(buttons.last().hasClass('active')).toBe(false);
+    expect(offButton?.classList.contains('active')).toBe(true);
+    expect(onButton?.classList.contains('active')).toBe(false);
   });
 
   it(`when 'value' is to 'true', the 'ON' button has the 'active' class`, () => {
-    const wrapper = shallow(<ToggleButton name="test-name" value={true} />);
+    const { container } = render(
+      <ToggleButton name="test-name" value={true} />,
+    );
 
-    const buttons = wrapper.find('div');
+    const offButton = container.querySelector('.off');
+    const onButton = container.querySelector('.on');
 
-    expect(buttons.first().hasClass('active')).toBe(false);
-    expect(buttons.last().hasClass('active')).toBe(true);
+    expect(offButton?.classList.contains('active')).toBe(false);
+    expect(onButton?.classList.contains('active')).toBe(true);
   });
 
   it(`'value' updates current active state`, () => {
-    const wrapper = mount(<ToggleButton name="test-name" value={true} />);
+    const { container, rerender } = render(
+      <ToggleButton name="test-name" value={true} />,
+    );
 
-    let offButton = wrapper.find('.off');
-    let onButton = wrapper.find('.on');
+    let offButton = container.querySelector('.off');
+    let onButton = container.querySelector('.on');
 
-    expect(offButton.hasClass('active')).toBe(false);
-    expect(onButton.hasClass('active')).toBe(true);
+    expect(offButton?.classList.contains('active')).toBe(false);
+    expect(onButton?.classList.contains('active')).toBe(true);
 
-    wrapper.setProps({ value: false });
-    wrapper.update();
+    rerender(<ToggleButton name="test-name" value={false} />);
 
-    offButton = wrapper.find('.off');
-    onButton = wrapper.find('.on');
+    offButton = container.querySelector('.off');
+    onButton = container.querySelector('.on');
 
-    expect(offButton.hasClass('active')).toBe(true);
-    expect(onButton.hasClass('active')).toBe(false);
+    expect(offButton?.classList.contains('active')).toBe(true);
+    expect(onButton?.classList.contains('active')).toBe(false);
 
-    wrapper.setProps({ value: true });
-    wrapper.update();
+    rerender(<ToggleButton name="test-name" value={true} />);
 
-    offButton = wrapper.find('.off');
-    onButton = wrapper.find('.on');
+    offButton = container.querySelector('.off');
+    onButton = container.querySelector('.on');
 
-    expect(offButton.hasClass('active')).toBe(false);
-    expect(onButton.hasClass('active')).toBe(true);
+    expect(offButton?.classList.contains('active')).toBe(false);
+    expect(onButton?.classList.contains('active')).toBe(true);
   });
 
   it(`raises the onButtonClicked event with 'false' when button is toggled 'OFF' and adds the 'active' class`, () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <ToggleButton name="test-name" onButtonClicked={spy} value={true} />,
     );
 
-    let offButton = wrapper.find('button').first();
-    let onButton = wrapper.find('button').last();
+    const buttons = container.querySelectorAll('button');
+    const offButton = buttons[0];
 
     act(() => {
-      // @ts-expect-error no full event args
-      offButton.prop('onClick')?.(mockEvent);
+      fireEvent.click(offButton);
     });
-    wrapper.update();
 
-    offButton = wrapper.find('.off');
-    onButton = wrapper.find('.on');
+    const offDiv = container.querySelector('.off');
+    const onDiv = container.querySelector('.on');
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(mockEvent, false);
-    expect(offButton.hasClass('active')).toBe(true);
-    expect(onButton.hasClass('active')).toBe(false);
+    expect(spy).toHaveBeenCalledWith(expect.any(Object), false);
+    expect(offDiv?.classList.contains('active')).toBe(true);
+    expect(onDiv?.classList.contains('active')).toBe(false);
   });
 
   it(`raises the onButtonClicked event with 'true' when the button is toggled 'ON' and adds the 'active' class`, () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
-    const wrapper = mount(
+    const { container } = render(
       <ToggleButton name="test-name" onButtonClicked={spy} value={false} />,
     );
 
-    const button = wrapper.find('button');
-    let onButton = wrapper.find('div').last();
-    let offButton = wrapper.find('div').first();
+    const button = container.querySelector('button') as HTMLButtonElement;
+    let onDiv = container.querySelector('.on');
+    let offDiv = container.querySelector('.off');
 
-    expect(onButton.hasClass('active')).toBe(false);
+    expect(onDiv?.classList.contains('active')).toBe(false);
 
     act(() => {
-      // @ts-expect-error no full event args
-      button.prop('onClick')?.(mockEvent);
+      fireEvent.click(button);
     });
-    wrapper.update();
 
-    onButton = wrapper.find('.on');
-    offButton = wrapper.find('.off');
+    onDiv = container.querySelector('.on');
+    offDiv = container.querySelector('.off');
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(mockEvent, true);
-    expect(onButton.hasClass('active')).toBe(true);
-    expect(offButton.hasClass('active')).toBe(false);
+    expect(spy).toHaveBeenCalledWith(expect.any(Object), true);
+    expect(onDiv?.classList.contains('active')).toBe(true);
+    expect(offDiv?.classList.contains('active')).toBe(false);
   });
 
   it('creates a class based off of the className prop', () => {
     const mockClassName = 'test-class';
-    const wrapper = shallow(
+    const { container } = render(
       <ToggleButton name="test-name" className={mockClassName} />,
     );
 
-    const container = wrapper.find('.container');
+    const containerDiv = container.querySelector('.container');
 
-    expect(container.hasClass(mockClassName)).toBe(true);
+    expect(containerDiv?.classList.contains(mockClassName)).toBe(true);
   });
 
   it('accepts both height and width', () => {
     const mockHeight = '75px';
     const mockWidth = '95px';
-    const wrapper = shallow(
+    const { container } = render(
       <ToggleButton name="test-name" height={mockHeight} width={mockWidth} />,
     );
 
-    const container = wrapper
-      .find('.toggle')
-      .prop('style') as React.CSSProperties;
+    const toggle = container.querySelector('.toggle') as HTMLElement;
 
-    expect(container.height).toBe(mockHeight);
-    expect(container.width).toBe(mockWidth);
+    expect(toggle.style.height).toBe(mockHeight);
+    expect(toggle.style.width).toBe(mockWidth);
   });
 
   it('button is enabled by default', () => {
-    const spy = jest.fn();
-    const wrapper = shallow(
+    const spy = vi.fn();
+    const { container } = render(
       <ToggleButton name="test-name" onButtonClicked={spy} />,
     );
 
-    const button = wrapper.find('button');
+    const button = container.querySelector('button') as HTMLButtonElement;
 
-    button.simulate('click', { persist: () => jest.fn() });
-    expect(button.prop('disabled')).toBe(false);
+    fireEvent.click(button);
+    expect(button.disabled).toBe(false);
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('button can be disabled', () => {
-    const spy = jest.fn();
-    const wrapper = mount(
+    const spy = vi.fn();
+    const { container } = render(
       <ToggleButton name="test-name" onButtonClicked={spy} disabled={true} />,
     );
 
-    const button = wrapper.find('button');
-    button.simulate('click');
+    const button = container.querySelector('button') as HTMLButtonElement;
+    fireEvent.click(button);
 
-    expect(button.prop('disabled')).toBe(true);
+    expect(button.disabled).toBe(true);
     expect(spy).not.toHaveBeenCalled();
   });
 
   it(`button 'type' must be 'button' by default`, () => {
-    const wrapper = shallow(<ToggleButton name="test-name" />);
+    const { container } = render(<ToggleButton name="test-name" />);
 
-    const button = wrapper.find('button');
+    const button = container.querySelector('button') as HTMLButtonElement;
 
-    expect(button.prop('type')).toBe('button');
+    expect(button.type).toBe('button');
   });
 
   it('accepts type html attribute and height style', () => {
     const mockType = 'submit';
     const mockHeight = '75px';
 
-    const wrapper = shallow(<ToggleButton name="test-name" />);
+    const { container, rerender } = render(<ToggleButton name="test-name" />);
 
-    let button = wrapper.find('button');
-    expect(button.prop('style')?.height).toBeUndefined();
-    expect(button.prop('type')).toBe('button');
+    let button = container.querySelector('button') as HTMLButtonElement;
+    expect(button.style.height).toBe('');
+    expect(button.type).toBe('button');
 
-    wrapper.setProps({ type: mockType, height: mockHeight });
-    wrapper.update();
+    rerender(
+      <ToggleButton name="test-name" type={mockType} height={mockHeight} />,
+    );
 
-    button = wrapper.find('button');
-    expect(button.prop('style')?.height).toBe(mockHeight);
-    expect(button.prop('type')).toBe(mockType);
+    button = container.querySelector('button') as HTMLButtonElement;
+    expect(button.style.height).toBe(mockHeight);
+    expect(button.type).toBe(mockType);
   });
 
   it(`renders 'OFF' text by default when button is not selected`, () => {
-    const wrapper = shallow(<ToggleButton name="test-name" />);
+    const { container } = render(<ToggleButton name="test-name" />);
 
-    const offText = wrapper.find('.svgText');
+    const offText = container.querySelectorAll('.svgText');
 
-    expect(offText.exists()).toBe(true);
-    expect(offText).toHaveLength(1);
+    expect(offText.length).toBeGreaterThan(0);
   });
 
   it(`does not render 'OFF' text if 'showONOFFText' is false`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <ToggleButton name="test-name" showONOFFText={false} />,
     );
 
-    const offText = wrapper.find('.svgText');
+    const offText = container.querySelector('.svgText');
 
-    expect(offText.exists()).toBe(false);
+    expect(offText).not.toBeInTheDocument();
   });
 
   it(`renders 'ON' text by default when button is selected`, () => {
-    const wrapper = shallow(<ToggleButton name="test-name" />);
+    const { container } = render(<ToggleButton name="test-name" />);
 
-    const onText = wrapper.find('.svgText');
+    const onText = container.querySelectorAll('.svgText');
 
-    expect(onText.exists()).toBe(true);
-    expect(onText).toHaveLength(1);
+    expect(onText.length).toBeGreaterThan(0);
   });
 
   it(`does not render 'ON' text if 'showONOFFText' is false`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <ToggleButton name="test-name" showONOFFText={false} />,
     );
 
-    const onText = wrapper.find('.svgText');
+    const onText = container.querySelector('.svgText');
 
-    expect(onText.exists()).toBe(false);
+    expect(onText).not.toBeInTheDocument();
   });
 
   describe('Confirmation', () => {
     it(`'Advanced' mode changes the background color when clicked for the first time`, () => {
-      const wrapper = shallow(
+      const { container } = render(
         <ToggleButton name="test-name" confirmationMode="Advanced" />,
       );
 
-      let button = wrapper.find('button');
+      let button = container.querySelector('button') as HTMLButtonElement;
 
-      expect(button.hasClass('hasConfirm')).toBe(false);
+      expect(button.classList.contains('hasConfirm')).toBe(false);
 
       act(() => {
-        button.simulate('click', { persist: () => jest.fn() });
+        fireEvent.click(button);
       });
-      wrapper.update();
 
-      button = wrapper.find('button');
+      button = container.querySelector('button') as HTMLButtonElement;
 
-      expect(button.hasClass('hasConfirm')).toBe(true);
+      expect(button.classList.contains('hasConfirm')).toBe(true);
     });
 
-    it(`'Advanced' mode renders a confirmation pop up, raises the 'onButtonClicked' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, () => {
-      const spy = jest.fn();
+    it(`'Advanced' mode renders a confirmation pop up, raises the 'onButtonClicked' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+      const spy = vi.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <ToggleButton
           name="test-name"
           confirmationMode="Advanced"
@@ -263,42 +260,50 @@ describe('Button', () => {
         />,
       );
 
-      let toggle = wrapper.find('button');
-      let confirmation = wrapper.find(ConfirmDialog);
+      let toggle = container.querySelector('button') as HTMLButtonElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        // @ts-expect-error no full event args
-        toggle.prop('onClick')?.(mockEvent);
+        fireEvent.click(toggle);
       });
-      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);
       });
-      wrapper.update();
 
-      toggle = wrapper.find('button');
-      confirmation = wrapper.find(ConfirmDialog);
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(expect.any(Object), true);
+      });
 
-      expect(toggle.hasClass('hasConfirm')).toBe(false);
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith(mockEvent, true);
+      toggle = container.querySelector('button') as HTMLButtonElement;
+
+      await waitFor(
+        () => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).not.toBeInTheDocument();
+        },
+        { timeout: 1000 },
+      );
+
+      expect(toggle.classList.contains('hasConfirm')).toBe(false);
     });
 
-    it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onButtonClicked' 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 'onButtonClicked' 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(
         <ToggleButton
           name="test-name"
           confirmationMode="Advanced"
@@ -306,41 +311,48 @@ describe('Button', () => {
         />,
       );
 
-      let toggle = wrapper.find('button');
-      let confirmation = wrapper.find(ConfirmDialog);
+      let toggle = container.querySelector('button') as HTMLButtonElement;
+      let confirmation = document.querySelector('.confirm-dialog-container');
 
-      expect(confirmation.exists()).toBe(false);
+      expect(confirmation).not.toBeInTheDocument();
 
       act(() => {
-        // @ts-expect-error no full event args
-        toggle.prop('onClick')?.(mockEvent);
+        fireEvent.click(toggle);
       });
-      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').at(1);
+      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).not.toHaveBeenCalled();
       });
-      wrapper.update();
 
-      toggle = wrapper.find('button');
-      confirmation = wrapper.find(ConfirmDialog);
+      toggle = container.querySelector('button') as HTMLButtonElement;
+
+      await waitFor(
+        () => {
+          confirmation = document.querySelector('.confirm-dialog-container');
+          expect(confirmation).not.toBeInTheDocument();
+        },
+        { timeout: 1000 },
+      );
 
-      expect(toggle.hasClass('hasConfirm')).toBe(false);
-      expect(confirmation.exists()).toBe(false);
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).not.toHaveBeenCalled();
+      expect(toggle.classList.contains('hasConfirm')).toBe(false);
     });
 
     it(`emits 'onConfirmOpen' if set`, async () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <ToggleButton
           name="test-name"
           confirmationMode="Advanced"
@@ -348,23 +360,34 @@ describe('Button', () => {
         />,
       );
 
-      const button = wrapper.find('button');
+      const button = container.querySelector('button') as HTMLButtonElement;
 
-      await act(async () => {
-        await button.simulate('click', { persist: () => jest.fn() });
+      act(() => {
+        fireEvent.click(button);
       });
-      wrapper.update();
 
-      const cancelButton = wrapper.find('button').at(2);
-
-      await act(async () => {
-        // @ts-expect-error no full event args
-        await cancelButton.prop('onClick')?.(mockEvent);
+      await waitFor(() => {
+        const confirmation = document.querySelector(
+          '.confirm-dialog-container',
+        );
+        expect(confirmation).toBeInTheDocument();
       });
-      wrapper.update();
 
-      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledTimes(1);
       expect(spy).toHaveBeenNthCalledWith(1, true);
+
+      const cancelButton = document.querySelector(
+        '[data-test-id="cancel"]',
+      ) as HTMLButtonElement;
+
+      act(() => {
+        fireEvent.click(cancelButton);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledTimes(2);
+      });
+
       expect(spy).toHaveBeenNthCalledWith(2, false);
     });
   });

package/src/components/FormElements/index.ts

@@ -22,6 +22,7 @@ export {
 export { FileUploadField } from './FileUploadControl/FileUploadField';
 export * from './Form.models';
 export { FormElementContainer } from './FormElementContainer';
+export { FormGroup, FormGroupProps } from './FormGroup/FormGroup';
 export {
   FormGroupTitle,
   FormGroupTitleProps,