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

package/src/components/VisualElements/SvgElement.spec.tsx

@@ -1,35 +1,36 @@
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { SvgElement, SvgElementProps } from './SvgElement';
 
 describe('SvgElement', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<SvgElement />);
+    const { container } = render(<SvgElement />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders with default viewBox', () => {
-    const wrapper = mount(<SvgElement />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('viewBox')).toBe('0 0 40 40');
+    expect(svg).toHaveAttribute('viewBox', '0 0 40 40');
   });
 
   it('renders with custom viewBox', () => {
     const customViewBox = '0 0 24 24';
-    const wrapper = mount(<SvgElement viewBox={customViewBox} />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement viewBox={customViewBox} />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('viewBox')).toBe(customViewBox);
+    expect(svg).toHaveAttribute('viewBox', customViewBox);
   });
 
   it('passes down className to svg element', () => {
     const testClass = 'custom-icon-class';
-    const wrapper = mount(<SvgElement className={testClass} />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement className={testClass} />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.hasClass(testClass)).toBe(true);
+    expect(svg).toHaveClass(testClass);
   });
 
   it('renders children inside svg', () => {
@@ -37,76 +38,77 @@ describe('SvgElement', () => {
     const cx = 15;
     const cy = 15;
     const r = 5;
-    const wrapper = mount(
+    const { container } = render(
       <SvgElement>
         <path d={d} />
         <circle cx={cx} cy={cy} r={r} />
       </SvgElement>,
     );
-    const circle = wrapper.find('circle');
-
-    expect(wrapper.find('path')).toHaveLength(1);
-    expect(wrapper.find('circle')).toHaveLength(1);
-    expect(wrapper.find('path').prop('d')).toBe(d);
-    expect(circle.prop('cx')).toBe(cx);
-    expect(circle.prop('cy')).toBe(cy);
-    expect(circle.prop('r')).toBe(r);
+
+    expect(container.querySelectorAll('path')).toHaveLength(1);
+    expect(container.querySelectorAll('circle')).toHaveLength(1);
+    expect(container.querySelector('path')).toHaveAttribute('d', d);
+    expect(container.querySelector('circle')).toHaveAttribute('cx', String(cx));
+    expect(container.querySelector('circle')).toHaveAttribute('cy', String(cy));
+    expect(container.querySelector('circle')).toHaveAttribute('r', String(r));
   });
 
   it('renders as decorative icon by default', () => {
-    const wrapper = mount(<SvgElement />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('role')).toBe('presentation');
-    expect(svg.prop('aria-hidden')).toBe('true');
-    expect(svg.prop('aria-label')).toBeUndefined();
+    expect(svg).toHaveAttribute('role', 'presentation');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+    expect(svg).not.toHaveAttribute('aria-label');
   });
 
   it('renders as semantic icon when aria-label is provided', () => {
     const ariaLabel = 'Custom icon description';
-    const wrapper = mount(<SvgElement aria-label={ariaLabel} />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement aria-label={ariaLabel} />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('role')).toBe('img');
-    expect(svg.prop('aria-hidden')).toBeUndefined();
-    expect(svg.prop('aria-label')).toBe(ariaLabel);
+    expect(svg).toHaveAttribute('role', 'img');
+    expect(svg).not.toHaveAttribute('aria-hidden');
+    expect(svg).toHaveAttribute('aria-label', ariaLabel);
   });
 
   it('renders as semantic icon when title is provided', () => {
     const title = 'Icon tooltip';
-    const wrapper = mount(<SvgElement title={title} />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement title={title} />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('role')).toBe('img');
-    expect(svg.prop('aria-hidden')).toBeUndefined();
-    expect(wrapper.find('title')).toHaveLength(1);
-    expect(wrapper.find('title').text()).toBe(title);
+    expect(svg).toHaveAttribute('role', 'img');
+    expect(svg).not.toHaveAttribute('aria-hidden');
+    expect(container.querySelectorAll('title')).toHaveLength(1);
+    expect(container.querySelector('title')!.textContent).toBe(title);
   });
 
   it('renders as semantic icon when both aria-label and title are provided', () => {
     const ariaLabel = 'Icon description';
     const title = 'Icon tooltip';
-    const wrapper = mount(<SvgElement aria-label={ariaLabel} title={title} />);
-    const svg = wrapper.find('svg');
-
-    expect(svg.prop('role')).toBe('img');
-    expect(svg.prop('aria-hidden')).toBeUndefined();
-    expect(svg.prop('aria-label')).toBe(ariaLabel);
-    expect(wrapper.find('title')).toHaveLength(1);
-    expect(wrapper.find('title').text()).toBe(title);
+    const { container } = render(
+      <SvgElement aria-label={ariaLabel} title={title} />,
+    );
+    const svg = container.querySelector('svg')!;
+
+    expect(svg).toHaveAttribute('role', 'img');
+    expect(svg).not.toHaveAttribute('aria-hidden');
+    expect(svg).toHaveAttribute('aria-label', ariaLabel);
+    expect(container.querySelectorAll('title')).toHaveLength(1);
+    expect(container.querySelector('title')!.textContent).toBe(title);
   });
 
   it('does not render title element when title prop is not provided', () => {
-    const wrapper = mount(<SvgElement aria-label="Icon" />);
+    const { container } = render(<SvgElement aria-label="Icon" />);
 
-    expect(wrapper.find('title')).toHaveLength(0);
+    expect(container.querySelectorAll('title')).toHaveLength(0);
   });
 
   it('applies default SVG attributes', () => {
-    const wrapper = mount(<SvgElement />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('focusable')).toBe('false');
+    expect(svg).toHaveAttribute('focusable', 'false');
   });
 
   it('passes through additional SVG attributes', () => {
@@ -116,43 +118,44 @@ describe('SvgElement', () => {
       stroke: 'red',
       strokeWidth: '2',
     };
+    const { container } = render(<SvgElement {...customProps} />);
+    const svg = container.querySelector('svg')!;
 
-    const wrapper = mount(<SvgElement {...customProps} />);
-    const svg = wrapper.find('svg');
-
-    expect(svg.prop('id')).toBe('custom-id');
-    expect(svg.prop('fill')).toBe('currentColor');
-    expect(svg.prop('stroke')).toBe('red');
-    expect(svg.prop('strokeWidth')).toBe('2');
+    expect(svg).toHaveAttribute('id', 'custom-id');
+    expect(svg).toHaveAttribute('fill', 'currentColor');
+    expect(svg).toHaveAttribute('stroke', 'red');
+    expect(svg).toHaveAttribute('stroke-width', '2');
   });
 
   it('allows overriding default attributes', () => {
-    const wrapper = mount(
+    const { container } = render(
       <SvgElement
         version="2.0"
         xmlns="http://custom-namespace.com"
         focusable="true"
       />,
     );
-    const svg = wrapper.find('svg');
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('version')).toBe('2.0');
-    expect(svg.prop('xmlns')).toBe('http://custom-namespace.com');
-    expect(svg.prop('focusable')).toBe('true');
+    expect(svg).toHaveAttribute('version', '2.0');
+    expect(svg).toHaveAttribute('xmlns', 'http://custom-namespace.com');
+    expect(svg).toHaveAttribute('focusable', 'true');
   });
 
   it('prioritizes explicit role over calculated role', () => {
-    const wrapper = mount(<SvgElement role="button" aria-label="Click me" />);
-    const svg = wrapper.find('svg');
+    const { container } = render(
+      <SvgElement role="button" aria-label="Click me" />,
+    );
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('role')).toBe('button');
+    expect(svg).toHaveAttribute('role', 'button');
   });
 
   it('prioritizes explicit aria-hidden over calculated value', () => {
-    const wrapper = mount(<SvgElement aria-hidden="false" />);
-    const svg = wrapper.find('svg');
+    const { container } = render(<SvgElement aria-hidden="false" />);
+    const svg = container.querySelector('svg')!;
 
-    expect(svg.prop('aria-hidden')).toBe('false');
-    expect(svg.prop('role')).toBe('presentation'); // Still decorative without label/title
+    expect(svg).toHaveAttribute('aria-hidden', 'false');
+    expect(svg).toHaveAttribute('role', 'presentation'); // Still decorative without label/title
   });
 });

package/src/helpers/testing.ts

@@ -1,81 +1,16 @@
-import { ShallowWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-/**
- * @jest-environment jsdom
- */
-import { setImmediate } from 'timers';
-
-/**
- * Executes the given callback in an `setImmediate` call and returns a Promise that resolves after the call is finished.
- * @param callback The code that should run in the `setImmediate`
- */
-export const setImmediateAsync = async (
-  callback: (() => Promise<void>) | (() => void),
-): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    setImmediate(async () => {
-      try {
-        await callback();
-        resolve();
-      } catch (e) {
-        reject(e);
-      }
-    });
-  });
-};
-
-/**
- * Creates a helper function that allows checking the value of a prop on an Enzyme Wrapper
- * against a property value of the given `props` object.
- * @param props
- */
-export const createExpectComponentReceivesValue = (props: {
-  [key: string]: any;
-}): ((
-  wrapper: ShallowWrapper<any>,
-  prop: string,
-  internalProp?: string | undefined,
-) => void) => {
-  /**
-   * Asserts that a given property on the wrapper is equal to the a property value on the
-   * `props` object passed to the `createExpectComponentReceivesValue` method.
-   *
-   * It assumes that the prop names on the `props` object matches the name of the prop on the wrapper.
-   * If that's not the case, you can use the `internalProp` parameter to define a different value.
-   * @param wrapper The wrapper that should contain the prop.
-   * @param prop The name of the prop that should be checked.
-   * @param internalProp In case the internal prop name does not match the prop name on the `props`
-   *                     object this parameter can be used to specify the prop name on the wrapper.
-   */
-  function test(
-    wrapper: ShallowWrapper<any>,
-    prop: string,
-    internalProp?: string,
-  ): void {
-    /**
-     * Test
-     */
-    expect(
-      wrapper.prop(internalProp ?? prop),
-      `The prop '${internalProp ?? prop}' does not equal the expected property${
-        internalProp ? ` (Input prop: '${prop}').` : '.'
-      }`,
-    ).toEqual(props[prop]);
-  }
-
-  return test;
-};
+import type { MockInstance } from 'vitest';
 
 /**
  * Helper method to that calls the given function inside an `act` function
  * and returns the return of that function.
  *
- * This is useful to avoid getting `TSS2454: Variable 'wrapper' is used before being assigned.`
- * and having to use `wrapper!.` everywhere in your test.
+ * This is useful to avoid getting `TSS2454: Variable 'result' is used before being assigned.`
+ * and having to use `result!.` everywhere in your test.
  *
  * @example
- * const wrapper = await actWithReturn(() =>
- *   mount(
+ * const result = await actWithReturn(() =>
+ *   render(
  *     <Explorer
  *       columns={[{ propertyName: 'id' }]}
  *       dataProvider={provider}
@@ -92,8 +27,8 @@ export async function actWithReturn<T>(
     w = await render();
   });
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const wrapper = w!;
-  return wrapper;
+  const result = w!;
+  return result;
 }
 
 /**
@@ -101,8 +36,6 @@ export async function actWithReturn<T>(
  * This helper will not mock any thing. It's just converting Typescript types!
  * @param f the mocked function
  */
-export const asSpy = <T>(
-  fn: (...args: any) => T,
-): jest.SpyInstance<Partial<T>> => {
-  return fn as unknown as jest.SpyInstance<Partial<T>>;
+export const asSpy = <T>(fn: (...args: any) => T): MockInstance => {
+  return fn as unknown as MockInstance;
 };

package/src/hooks/useBusy/useBusy.spec.tsx

@@ -1,12 +1,13 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { on } from '../../initialize';
 import { useBusy } from './useBusy';
 
 let callback: (busyState: boolean) => void;
 
-jest.mock('../../initialize', () => ({
-  on: jest.fn().mockImplementationOnce((event, cb) => {
+vi.mock('../../initialize', () => ({
+  on: vi.fn().mockImplementationOnce((event, cb) => {
     callback = cb;
   }),
 }));
@@ -19,16 +20,14 @@ const TestWrapper: React.FC = () => {
 
 describe('useBusy', () => {
   it(`both 'val' and 'debouncedValue' are set to the initial value`, () => {
-    const wrapper = mount(<TestWrapper />);
-    const currentValue = wrapper.find('#value');
+    const { container } = render(<TestWrapper />);
+    const currentValue = container.querySelector('#value');
 
     expect(on).toHaveBeenCalled();
-    expect(currentValue.text()).toBe('false');
+    expect(currentValue?.textContent).toBe('false');
 
     callback(true);
 
-    wrapper.update();
-
-    expect(currentValue.text()).toBe('true');
+    expect(container.querySelector('#value')?.textContent).toBe('true');
   });
 });

package/src/hooks/useClickOutside/useClickOutside.spec.tsx

@@ -1,6 +1,6 @@
-import { mount } from 'enzyme';
+import { act, fireEvent, render } from '@testing-library/react';
 import React, { useRef, useState } from 'react';
-import { act } from 'react-dom/test-utils';
+import { describe, expect, it } from 'vitest';
 import { useClickOutside } from './useClickOutside';
 
 const TestWrapper: React.FC<{ enabled?: boolean }> = ({ enabled = true }) => {
@@ -28,86 +28,56 @@ const TestWrapper: React.FC<{ enabled?: boolean }> = ({ enabled = true }) => {
 
 describe('useClickOutside', () => {
   it('should call handler when clicking outside the referenced elements', () => {
-    const wrapper = mount(<TestWrapper />);
-
-    let status = wrapper.find('.status');
-    expect(status.text()).toBe('not-clicked');
-
-    const outside = wrapper.find('.outside').getDOMNode();
+    const { getByText } = render(<TestWrapper />);
+    expect(getByText('not-clicked')).toBeInTheDocument();
 
     act(() => {
-      const event = new MouseEvent('mousedown', {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-      });
-      Object.defineProperty(event, 'target', {
-        writable: false,
-        value: outside,
-      });
-      document.dispatchEvent(event);
+      fireEvent.mouseDown(getByText('Outside'));
     });
 
-    wrapper.update();
-    status = wrapper.find('.status');
-    expect(status.text()).toBe('clicked-outside');
+    expect(getByText('clicked-outside')).toBeInTheDocument();
   });
 
   it('should not call handler when clicking inside the first referenced element', () => {
-    const wrapper = mount(<TestWrapper />);
-
-    const inside1 = wrapper.find('.inside-1');
+    const { getByText } = render(<TestWrapper />);
 
     act(() => {
-      inside1.simulate('mousedown');
+      fireEvent.mouseDown(getByText('Inside 1'));
     });
 
-    wrapper.update();
-    const status = wrapper.find('.status');
-    expect(status.text()).toBe('not-clicked');
+    expect(getByText('not-clicked')).toBeInTheDocument();
   });
 
   it('should not call handler when clicking inside the second referenced element', () => {
-    const wrapper = mount(<TestWrapper />);
-
-    const inside2 = wrapper.find('.inside-2');
+    const { getByText } = render(<TestWrapper />);
 
     act(() => {
-      inside2.simulate('mousedown');
+      fireEvent.mouseDown(getByText('Inside 2'));
     });
 
-    wrapper.update();
-    const status = wrapper.find('.status');
-    expect(status.text()).toBe('not-clicked');
+    expect(getByText('not-clicked')).toBeInTheDocument();
   });
 
   it('should not call handler when disabled', () => {
-    const wrapper = mount(<TestWrapper enabled={false} />);
-
-    const outside = wrapper.find('.outside');
+    const { getByText } = render(<TestWrapper enabled={false} />);
 
     act(() => {
-      outside.simulate('mousedown');
+      fireEvent.mouseDown(getByText('Outside'));
     });
 
-    wrapper.update();
-    const status = wrapper.find('.status');
-    expect(status.text()).toBe('not-clicked');
+    expect(getByText('not-clicked')).toBeInTheDocument();
   });
 
   it('should handle touch events', () => {
-    const wrapper = mount(<TestWrapper />);
-
-    let status = wrapper.find('.status');
-    expect(status.text()).toBe('not-clicked');
+    const { getByText } = render(<TestWrapper />);
+    expect(getByText('not-clicked')).toBeInTheDocument();
 
-    const outside = wrapper.find('.outside').getDOMNode();
+    const outside = getByText('Outside');
 
     act(() => {
       const event = new TouchEvent('touchstart', {
         bubbles: true,
         cancelable: true,
-        view: window,
       });
       Object.defineProperty(event, 'target', {
         writable: false,
@@ -116,8 +86,6 @@ describe('useClickOutside', () => {
       document.dispatchEvent(event);
     });
 
-    wrapper.update();
-    status = wrapper.find('.status');
-    expect(status.text()).toBe('clicked-outside');
+    expect(getByText('clicked-outside')).toBeInTheDocument();
   });
 });

package/src/hooks/useDebounce/useDebounce.spec.tsx

@@ -1,6 +1,7 @@
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React, { FormEvent, useEffect, useState } from 'react';
 import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
 import { useDebounce } from './useDebounce';
 
 const mockIntialValue = 'test-value';
@@ -27,49 +28,53 @@ const TestWrapper: React.FC<{ value: string }> = ({ value }) => {
 
 describe('useDebounce', () => {
   it(`both 'val' and 'debouncedValue' are set to the initial value`, () => {
-    const wrapper = mount(<TestWrapper value={mockIntialValue} />);
+    const { container } = render(<TestWrapper value={mockIntialValue} />);
 
-    const currentValue = wrapper.find('#value');
-    const debounced = wrapper.find('#debounced-value');
+    const currentValue = container.querySelector('#value');
+    const debounced = container.querySelector('#debounced-value');
 
-    expect(currentValue.text()).toBe(mockIntialValue);
-    expect(debounced.text()).toBe(mockIntialValue);
+    expect(currentValue?.textContent).toBe(mockIntialValue);
+    expect(debounced?.textContent).toBe(mockIntialValue);
   });
 
-  it(`'setVal()' updates both 'val' and 'debouncedValue'`, async () => {
+  it(`'setVal()' updates both 'val' and 'debouncedValue'`, () => {
     const mockNewValue = 'test-new-value';
 
-    jest.useFakeTimers();
+    vi.useFakeTimers();
 
-    const wrapper = mount(<TestWrapper value={mockIntialValue} />);
+    const { container } = render(<TestWrapper value={mockIntialValue} />);
 
-    let currentValue = wrapper.find('#value');
-    let debounced = wrapper.find('#debounced-value');
+    let currentValue = container.querySelector('#value');
+    let debounced = container.querySelector('#debounced-value');
 
-    expect(currentValue.text()).toBe(mockIntialValue);
-    expect(debounced.text()).toBe(mockIntialValue);
+    expect(currentValue?.textContent).toBe(mockIntialValue);
+    expect(debounced?.textContent).toBe(mockIntialValue);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    await act(async () => {
-      input.getDOMNode<HTMLInputElement>().value = mockNewValue;
-      await input.simulate('change', {
+    act(() => {
+      fireEvent.change(input, {
         target: { value: mockNewValue },
       });
     });
 
-    wrapper.update();
+    // Check that val is updated immediately
+    currentValue = container.querySelector('#value');
+    expect(currentValue?.textContent).toBe(mockNewValue);
 
-    await act(async () => {
-      jest.runAllTimers();
-    });
+    // Check that debounced value is still the old value
+    debounced = container.querySelector('#debounced-value');
+    expect(debounced?.textContent).toBe(mockIntialValue);
 
-    wrapper.update();
+    // Fast-forward time to trigger debounce
+    act(() => {
+      vi.runAllTimers();
+    });
 
-    currentValue = wrapper.find('#value');
-    debounced = wrapper.find('#debounced-value');
+    // Now check that debounced value has updated
+    debounced = container.querySelector('#debounced-value');
+    expect(debounced?.textContent).toBe(mockNewValue);
 
-    expect(currentValue.text()).toBe(mockNewValue);
-    expect(debounced.text()).toBe(mockNewValue);
+    vi.useRealTimers();
   });
 });