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

package/src/hooks/useExpand/useExpand.spec.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { useExpand } from './useExpand';
 
 const TestWrapper: React.FC = () => {
@@ -17,56 +18,64 @@ const TestWrapper: React.FC = () => {
 
 describe('useExpand', () => {
   it('isExpanded defaults to false', () => {
-    const wrapper = shallow(<TestWrapper />);
-    const isExpanded = JSON.parse(wrapper.find('span').text());
+    const { container } = render(<TestWrapper />);
+    const isExpanded = JSON.parse(
+      container.querySelector('span')?.textContent || '',
+    );
 
     expect(isExpanded).toBe(false);
   });
 
   it(`expand sets isExpanded to 'true'`, () => {
-    const wrapper = shallow(<TestWrapper />);
-    const expand = wrapper.find('#expand');
+    const { container } = render(<TestWrapper />);
+    const expand = container.querySelector('#expand') as HTMLButtonElement;
 
-    expand.simulate('click');
+    fireEvent.click(expand);
 
-    const isExpanded = JSON.parse(wrapper.find('span').text());
+    const isExpanded = JSON.parse(
+      container.querySelector('span')?.textContent || '',
+    );
 
     expect(isExpanded).toBe(true);
   });
 
   it(`collapse sets isExpanded to 'false'`, () => {
-    const wrapper = shallow(<TestWrapper />);
-    const expand = wrapper.find('#expand');
-    const collapse = wrapper.find('#collapse');
+    const { container } = render(<TestWrapper />);
+    const expand = container.querySelector('#expand') as HTMLButtonElement;
+    const collapse = container.querySelector('#collapse') as HTMLButtonElement;
 
-    expand.simulate('click');
+    fireEvent.click(expand);
 
-    let isExpanded = JSON.parse(wrapper.find('span').text());
+    let isExpanded = JSON.parse(
+      container.querySelector('span')?.textContent || '',
+    );
 
     expect(isExpanded).toBe(true);
 
-    collapse.simulate('click');
+    fireEvent.click(collapse);
 
-    isExpanded = JSON.parse(wrapper.find('span').text());
+    isExpanded = JSON.parse(container.querySelector('span')?.textContent || '');
 
     expect(isExpanded).toBe(false);
   });
 
   it(`toggles isExpanded state`, () => {
-    const wrapper = shallow(<TestWrapper />);
-    let isExpanded = JSON.parse(wrapper.find('span').text());
+    const { container } = render(<TestWrapper />);
+    let isExpanded = JSON.parse(
+      container.querySelector('span')?.textContent || '',
+    );
 
     expect(isExpanded).toBe(false);
 
-    const toggle = wrapper.find('#toggle');
-    toggle.simulate('click');
+    const toggle = container.querySelector('#toggle') as HTMLButtonElement;
+    fireEvent.click(toggle);
 
-    isExpanded = JSON.parse(wrapper.find('span').text());
+    isExpanded = JSON.parse(container.querySelector('span')?.textContent || '');
 
     expect(isExpanded).toBe(true);
 
-    toggle.simulate('click');
-    isExpanded = JSON.parse(wrapper.find('span').text());
+    fireEvent.click(toggle);
+    isExpanded = JSON.parse(container.querySelector('span')?.textContent || '');
 
     expect(isExpanded).toBe(false);
   });

package/src/hooks/useTabTitle/useTabTitle.spec.tsx

@@ -1,12 +1,14 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { useHistory } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { setTitle } from '../../initialize';
 import { useTabTitle } from './useTabTitle';
 
-jest.mock('../../initialize');
-jest.mock('react-router-dom');
+vi.mock('../../initialize');
+vi.mock('react-router-dom', () => ({
+  useHistory: vi.fn(),
+}));
 
 const TestWrapper: React.FC<{ title?: string; setTabTitle: boolean }> = ({
   title,
@@ -19,12 +21,11 @@ const TestWrapper: React.FC<{ title?: string; setTabTitle: boolean }> = ({
 
 describe('useTabTitle', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
-    (useHistory as jest.Mock) = jest.fn().mockReturnValue({
+    vi.mocked(useHistory).mockReturnValue({
       location: {
         pathname: '/test',
       },
-    });
+    } as any);
   });
 
   it('should set the tab title when setTabTitle is true', () => {
@@ -33,13 +34,13 @@ describe('useTabTitle', () => {
 
     const setTabTitle = true;
 
-    const wrapper = mount(
+    const { rerender } = render(
       <TestWrapper title={firstTitle} setTabTitle={setTabTitle} />,
     );
 
     expect(setTitle).toHaveBeenCalledWith(firstTitle);
 
-    wrapper.setProps({ title: secondTitle });
+    rerender(<TestWrapper title={secondTitle} setTabTitle={setTabTitle} />);
 
     expect(setTitle).toHaveBeenNthCalledWith(2, secondTitle);
   });
@@ -48,47 +49,46 @@ describe('useTabTitle', () => {
     const title = 'Test Title';
     const setTabTitle = false;
 
-    mount(<TestWrapper title={title} setTabTitle={setTabTitle} />);
+    render(<TestWrapper title={title} setTabTitle={setTabTitle} />);
 
     expect(setTitle).not.toHaveBeenCalled();
   });
 
   it('should not set the tab title when the URL has changed', () => {
-    (useHistory as jest.Mock) = jest
-      .fn()
+    vi.mocked(useHistory)
       .mockReturnValueOnce({
         location: {
           pathname: '/test',
         },
-      })
+      } as any)
       .mockReturnValueOnce({
         location: {
           pathname: '/test2',
         },
-      });
+      } as any);
 
     const firstTitle = 'First Title';
     const secondTitle = 'Second Title';
     const setTabTitle = true;
 
-    const wrapper = mount(
+    const { rerender } = render(
       <TestWrapper title={firstTitle} setTabTitle={setTabTitle} />,
     );
 
     expect(setTitle).toHaveBeenCalledWith(firstTitle);
 
-    wrapper.setProps({ title: secondTitle });
+    rerender(<TestWrapper title={secondTitle} setTabTitle={setTabTitle} />);
 
     expect(setTitle).toHaveBeenCalledTimes(1);
   });
 
   it('should set the tab title outside a react router context', () => {
-    (useHistory as jest.Mock) = jest.fn().mockReturnValue(undefined);
+    vi.mocked(useHistory).mockReturnValue(undefined as any);
 
     const title = 'Test Title';
     const setTabTitle = true;
 
-    mount(<TestWrapper title={title} setTabTitle={setTabTitle} />);
+    render(<TestWrapper title={title} setTabTitle={setTabTitle} />);
 
     expect(setTitle).toHaveBeenCalled();
   });

package/src/hooks/useValueOrOnDemand/useValueOrOnDemand.spec.tsx

@@ -1,84 +1,63 @@
-import { act } from 'react-dom/test-utils';
-import { testHook } from '../../helpers/hooksTestingHelpers';
-import { setImmediateAsync } from '../../helpers/testing';
+import { renderHook } from '@testing-library/react-hooks';
+import { describe, expect, it, vi } from 'vitest';
 import { useValueOrOnDemand } from './useValueOrOnDemand';
 
 describe('useValueOrDemand hook', () => {
   it.each(['test', 5])('loads synchronous values', async (input) => {
-    let value = '';
-    let isLoading = true;
-    const wrapper = await testHook(async () => {
-      [value, isLoading] = useValueOrOnDemand(input);
-    });
-
-    wrapper.debug();
+    const { result } = renderHook(() => useValueOrOnDemand(input));
 
+    const [value, isLoading] = result.current;
     expect(value).toEqual(String(input));
     expect(isLoading).toBeFalsy();
   });
 
   it('returns empty string if no value given', async () => {
-    let value = '';
-    let isLoading = true;
-    await testHook(() => {
-      [value, isLoading] = useValueOrOnDemand();
-    });
+    const { result } = renderHook(() => useValueOrOnDemand());
 
+    const [value, isLoading] = result.current;
     expect(value).toBe('');
     expect(isLoading).toBeFalsy();
   });
 
   it.each(['test', 5])('loads async values', async (input) => {
     const promise = () => Promise.resolve(input);
-    let value = '';
-    let isLoading = true;
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useValueOrOnDemand(promise),
+    );
 
-    await act(async () => {
-      await testHook(() => {
-        [value, isLoading] = useValueOrOnDemand(promise);
-      });
-    });
+    await waitForNextUpdate();
 
-    await setImmediateAsync(() => {
-      expect(isLoading).toBeFalsy();
-      expect(value).toEqual(String(input));
-    });
+    const [value, isLoading] = result.current;
+    expect(isLoading).toBeFalsy();
+    expect(value).toEqual(String(input));
   });
 
   it('uses empty string as default if promise is rejected', async () => {
     const promise = () => Promise.reject('error');
-    let value = '';
-    let isLoading = true;
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useValueOrOnDemand(promise),
+    );
 
-    await act(async () => {
-      await testHook(() => {
-        [value, isLoading] = useValueOrOnDemand(promise);
-      });
-    });
+    await waitForNextUpdate();
 
-    await setImmediateAsync(() => {
-      expect(value).toBe('');
-      expect(isLoading).toBeFalsy();
-    });
+    const [value, isLoading] = result.current;
+    expect(value).toBe('');
+    expect(isLoading).toBeFalsy();
   });
 
-  it('uses uses given fallback if promise is rejected', async () => {
-    const spy = jest.fn(() => 'default');
+  it('uses given fallback if promise is rejected', async () => {
+    const spy = vi.fn(() => 'default');
     const promise = () => Promise.reject('error');
-    let value = '';
-    let isLoading = true;
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useValueOrOnDemand(promise, spy),
+    );
 
-    await act(async () => {
-      await testHook(() => {
-        [value, isLoading] = useValueOrOnDemand(promise, spy);
-      });
-    });
+    await waitForNextUpdate();
 
-    await setImmediateAsync(() => {
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith('error');
-      expect(value).toBe('default');
-      expect(isLoading).toBeFalsy();
-    });
+    const [value, isLoading] = result.current;
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('error');
+    expect(value).toBe('default');
+    expect(isLoading).toBeFalsy();
   });
 });

package/src/styles/variables.scss

@@ -56,6 +56,7 @@ $explorer-sort-color: white;
 $explorer-sort-stroke-color: var(--mosaic-neutral);
 $explorer-selected-sort-color: var(--mosaic-secondary);
 $explorer-column-label-color: var(--mosaic-accent);
+$explorer-column-label-font-size: 12px;
 $explorer-list-row-border: 1px solid var(--mosaic-neutral-2);
 
 /* List vars */
@@ -187,6 +188,7 @@ $input-max-width: $width-big;
 $label-size: 150px;
 $divider-color: var(--mosaic-neutral);
 $form-group-title-color: var(--mosaic-neutral);
+$form-group-title-alternate-color: var(--mosaic-neutral-1);
 $form-group-title-font-size: 18px;
 $label-gap: 30px;
 $input-disabled-font-color: var(--mosaic-neutral);
@@ -257,7 +259,7 @@ $dynamic-list-row-hover-bg-color: color-mix(
   transparent
 );
 $dynamic-list-row-height: 50px;
-$dynamic-list-column-gap: 20px;
+$dynamic-list-column-gap: 8px;
 $dynamic-list-row-gap: 0px;
 $dynamic-list-position-color: var(--mosaic-secondary);
 $dynamic-list-row-border: 1px solid var(--mosaic-neutral-2);

package/src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { ErrorType } from '../../../components';
 import { ApolloErrorMapper } from './ApolloErrorMapper';
 

package/src/utils/ErrorMapper/ErrorMapper.spec.ts

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { ErrorType } from '../../components/models';
 import { mapError, setErrorMappers } from './ErrorMapper';
 import { ErrorMapper } from './ErrorMapper.type';

package/src/utils/ErrorTypeToStationError.spec.tsx

@@ -1,5 +1,6 @@
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { StationError } from '../components/models';
 import { ErrorTypeToStationError } from './ErrorTypeToStationError';
 
@@ -18,36 +19,36 @@ describe('ErrorTypeToStationError', () => {
     const result2 = ErrorTypeToStationError(error2);
     expect(result2).toBe(error2);
 
-    const wrapper = render(<>{result2.body}</>);
+    const { container } = render(<>{result2.body}</>);
 
-    expect(wrapper.toString()).toContain('test body');
+    expect(container.textContent).toContain('test body');
   });
 
   it('returns a correct StationError if getting a string', () => {
     const error = 'test';
     const result = ErrorTypeToStationError(error);
     expect(result.title).toBe('An error occurred.');
-    const wrapper = render(<>{result.body}</>);
+    const { container } = render(<>{result.body}</>);
 
-    expect(wrapper.toString()).toContain('test');
+    expect(container.textContent).toContain('test');
   });
 
   it('returns a correct StationError if getting an object', () => {
     const error = { my: 'value' };
     const result = ErrorTypeToStationError(error);
     expect(result.title).toBe('An error occurred.');
-    const wrapper = render(<>{result.body}</>);
+    const { container } = render(<>{result.body}</>);
 
-    expect(wrapper.toString()).toContain(`"my": "value"`);
+    expect(container.textContent).toContain(`"my": "value"`);
   });
 
   it('returns a correct StationError if getting an Error', () => {
     const error = new Error('test error');
     const result = ErrorTypeToStationError(error);
     expect(result.title).toBe('An error occurred.');
-    const wrapper = render(<>{result.body}</>);
+    const { container } = render(<>{result.body}</>);
 
-    expect(wrapper.toString()).toContain('Error: test error');
+    expect(container.textContent).toContain('Error: test error');
   });
 
   it('allows overwriting the title', () => {
@@ -63,8 +64,8 @@ describe('ErrorTypeToStationError', () => {
     };
     const result = ErrorTypeToStationError(error);
     expect(result.title).toBe('A network error occurred');
-    const wrapper = render(<>{result.body}</>);
+    const { container } = render(<>{result.body}</>);
 
-    expect(wrapper.toString()).toContain('test error');
+    expect(container.textContent).toContain('test error');
   });
 });

package/src/utils/ToolTipHelpers.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getTooltipText } from './ToolTipHelpers';
 
 describe('ToolTipHelpers', () => {

package/src/validators/timestamp/timestamp.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { Timestamp } from '../../components/Utils/Transformers/Timestamp';
 import { timestampValidator } from './timestamp';
 

package/dist/helpers/hooksTestingHelpers.d.ts

@@ -1,7 +0,0 @@
-import { ReactWrapper } from 'enzyme';
-/**
- * Helper method to test a custom hook.
- * @param callback the hook that should be tested
- */
-export declare const testHook: (callback: () => any) => Promise<ReactWrapper>;
-//# sourceMappingURL=hooksTestingHelpers.d.ts.map

package/dist/helpers/hooksTestingHelpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooksTestingHelpers.d.ts","sourceRoot":"","sources":["../../src/helpers/hooksTestingHelpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,QAAQ,CAAC;AAe7C;;;GAGG;AACH,eAAO,MAAM,QAAQ,aAAoB,MAAM,GAAG,KAAG,QAAQ,YAAY,CAExE,CAAC"}

package/src/helpers/hooksTestingHelpers.tsx

@@ -1,22 +0,0 @@
-import { mount, ReactWrapper } from 'enzyme';
-import React from 'react';
-
-// This section implements the testing harness for custom hooks.
-// Use the `testHook` method in your test and the test function using the hook.
-
-interface TestHookProps {
-  callback: () => any;
-}
-
-const TestHook: React.FC<TestHookProps> = ({ callback }) => {
-  callback();
-  return null;
-};
-
-/**
- * Helper method to test a custom hook.
- * @param callback the hook that should be tested
- */
-export const testHook = async (callback: () => any): Promise<ReactWrapper> => {
-  return mount(<TestHook callback={callback} />);
-};