@axinom/mosaic-ui 0.69.0-rc.13 → 0.69.0-rc.16

package/dist/helpers/testing.d.ts

@@ -1,3 +1,4 @@
+import type { MockInstance } from 'vitest';
 /**
  * Helper method to that calls the given function inside an `act` function
  * and returns the return of that function.
@@ -21,5 +22,5 @@ export declare function actWithReturn<T>(render: () => T | Promise<T>): Promise<
  * This helper will not mock any thing. It's just converting Typescript types!
  * @param f the mocked function
  */
-export declare const asSpy: <T>(fn: (...args: any) => T) => jest.SpyInstance<Partial<T>>;
+export declare const asSpy: <T>(fn: (...args: any) => T) => MockInstance;
 //# sourceMappingURL=testing.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../src/helpers/testing.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAsB,aAAa,CAAC,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAC3B,OAAO,CAAC,CAAC,CAAC,CAQZ;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,EACrB,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,KACtB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAE7B,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../src/helpers/testing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAsB,aAAa,CAAC,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAC3B,OAAO,CAAC,CAAC,CAAC,CAQZ;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC,KAAG,YAElD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.69.0-rc.13",
+  "version": "0.69.0-rc.16",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -22,17 +22,17 @@
     "build": "yarn clean && cross-env NODE_ENV=production rollup -c",
     "build:ci": "yarn workspaces focus && yarn build",
     "dev": "rollup -c -w",
-    "test": "jest --silent",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:ci": "jest --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura --coverageReporters=html",
+    "test": "vitest run --silent",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage",
+    "test:ci": "vitest run --reporter=default --reporter=junit --coverage --coverage.reporter=cobertura --coverage.reporter=html",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" --loglevel silent",
     "lint": "eslint . --ext .ts,.tsx,.js --color --cache",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.31-rc.5",
+    "@axinom/mosaic-core": "^0.4.31-rc.8",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -89,7 +89,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "formik": "^2.1.4",
-    "jest": "^29",
+    "jsdom": "^25.0.0",
     "prettier": "^2.8.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -107,10 +107,11 @@
     "storybook": "^7.0.6",
     "style-loader": "^3.3.1",
     "typescript": "^5.9.3",
-    "typescript-plugin-css-modules": "^5.0.2"
+    "typescript-plugin-css-modules": "^5.0.2",
+    "vitest": "^4.0.18"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "40779318c9b091b23a3aa559734727df3e903741"
+  "gitHead": "61cc0e626bb816beee81d16b31c46f1d2a13844d"
 }

package/src/components/Accordion/Accordion.spec.tsx

@@ -1,6 +1,6 @@
-import '@testing-library/jest-dom';
 import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 

package/src/components/Accordion/AccordionItem/AccordionItem.spec.tsx

@@ -1,6 +1,6 @@
-import '@testing-library/jest-dom';
 import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { AccordionItem } from './AccordionItem';
 
 configure({ testIdAttribute: 'data-test-id' });
@@ -16,7 +16,7 @@ describe('AccordionItem', () => {
   });
 
   it('calls toggleExpanded when row is clicked', () => {
-    const toggleExpanded = jest.fn();
+    const toggleExpanded = vi.fn();
     render(
       <AccordionItem header={header} toggleExpanded={toggleExpanded}>
         {content}

package/src/components/Actions/Action/Action.spec.tsx

@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { afterEach, describe, expect, it, test, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
 import { ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
@@ -188,7 +189,7 @@ describe('Action', () => {
     });
 
     it('raises the onActionSelected event', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { getByTestId } = render(
         <Action
           {...defaultContextProps}
@@ -225,7 +226,7 @@ describe('Action', () => {
       const mockLabel = 'test-label';
 
       it(`'Simple' mode changes the background color when clicked for the first time`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
         const { getByTestId } = render(
           <Action
@@ -248,7 +249,7 @@ describe('Action', () => {
 
       it(`'Simple' mode renders a confirmation message, raises the onActionSelected event after confirmation, and resets the action label`, () => {
         const confirmationMsg = 'Click again to confirm';
-        const spy = jest.fn();
+        const spy = vi.fn();
 
         const { getByTestId } = render(
           <Action
@@ -281,8 +282,8 @@ describe('Action', () => {
 
       it(`'Simple' mode renders a confirmation message, and doesn't raise the 'onActionSelected' event on 'mouseleave' when confirmation is required`, async () => {
         const confirmationMsg = 'Click again to confirm';
-        const spy = jest.fn();
-        jest.useFakeTimers();
+        const spy = vi.fn();
+        vi.useFakeTimers();
 
         const { getByTestId } = render(
           <Action
@@ -309,7 +310,7 @@ describe('Action', () => {
 
         fireEvent.mouseLeave(action);
 
-        jest.runAllTimers();
+        vi.runAllTimers();
 
         await waitFor(() => {
           label = getByTestId('label');
@@ -319,11 +320,11 @@ describe('Action', () => {
         expect(spy).not.toHaveBeenCalled();
         expect(action.classList.contains('hasConfirm')).toBe(false);
 
-        jest.useRealTimers();
+        vi.useRealTimers();
       });
 
       it(`'Advanced' mode changes the background color when clicked for the first time`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
         const { getByTestId } = render(
           <Action
@@ -345,7 +346,7 @@ describe('Action', () => {
       });
 
       it(`'Advanced' mode renders a confirmation pop up, raises the 'onActionSelected' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
         const { queryByText, getByText, getByTestId } = render(
           <Action
@@ -375,7 +376,7 @@ describe('Action', () => {
       });
 
       it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onActionSelected' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, () => {
-        const spy = jest.fn();
+        const spy = vi.fn();
 
         const { queryByText, getByText, getByTestId } = render(
           <Action
@@ -404,8 +405,8 @@ describe('Action', () => {
       });
 
       it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onActionSelected' event when the mouse leaves component, and finally dismisses the confirmation pop up`, async () => {
-        const spy = jest.fn();
-        jest.useFakeTimers();
+        const spy = vi.fn();
+        vi.useFakeTimers();
 
         const { queryByText, getByText, getByTestId } = render(
           <Action
@@ -429,7 +430,7 @@ describe('Action', () => {
 
         fireEvent.mouseLeave(action);
 
-        jest.runAllTimers();
+        vi.runAllTimers();
 
         // TODO: Debug why this isn't passing
         // await waitFor(() => {
@@ -438,7 +439,7 @@ describe('Action', () => {
         // });
         expect(spy).not.toHaveBeenCalled();
 
-        jest.useRealTimers();
+        vi.useRealTimers();
       });
 
       it(`'Advanced' mode accepts a 'confirmationConfig' object`, () => {
@@ -474,7 +475,7 @@ describe('Action', () => {
       });
 
       it(`'Simple' raises onConfirmOpen if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
         const { getByTestId } = render(
           <Action
@@ -504,9 +505,9 @@ describe('Action', () => {
       });
 
       it(`'Simple' raises onConfirmOpen when 'mouseleave' if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
-        jest.useFakeTimers();
+        vi.useFakeTimers();
 
         const { getByTestId } = render(
           <Action
@@ -531,18 +532,18 @@ describe('Action', () => {
         });
 
         act(() => {
-          jest.runAllTimers();
+          vi.runAllTimers();
         });
 
         expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true);
         expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false);
 
-        jest.useRealTimers();
+        vi.useRealTimers();
       });
 
       it(`'Advanced' raises onConfirmOpen when 'Cancel' is clicked, if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
         const { getByTestId, getByText } = render(
           <Action
@@ -570,7 +571,7 @@ describe('Action', () => {
       });
 
       it(`'Advanced' raises onConfirmOpen when 'Confirm' is clicked, if set`, () => {
-        const confirmToggleSpy = jest.fn();
+        const confirmToggleSpy = vi.fn();
 
         const { getByTestId, getByText } = render(
           <Action
@@ -607,7 +608,7 @@ describe('isNavigationAction', () => {
   });
 
   test('returns false for a ContextActionData object', () => {
-    const action = { label: 'Context Action', onActionSelected: jest.fn() };
+    const action = { label: 'Context Action', onActionSelected: vi.fn() };
     expect(isNavigationAction(action)).toBe(false);
   });
 
@@ -623,7 +624,7 @@ describe('isNavigationAction', () => {
 
 describe('isContextAction', () => {
   test('returns true for a ContextActionData object', () => {
-    const action = { label: 'Context Action', onActionSelected: jest.fn() };
+    const action = { label: 'Context Action', onActionSelected: vi.fn() };
     expect(isContextAction(action)).toBe(true);
   });
 

package/src/components/Actions/Actions.spec.tsx

@@ -1,18 +1,20 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import type { Mock } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useBusy } from '../../hooks/useBusy/useBusy';
 import { IconName } from '../Icons';
 import { Actions } from './Actions';
 import { ActionData } from './Actions.models';
 
-jest.mock('../../initialize');
-jest.mock('../../hooks/useBusy/useBusy', () => ({
-  useBusy: jest.fn(() => ({ isBusy: false })),
+vi.mock('../../initialize');
+vi.mock('../../hooks/useBusy/useBusy', () => ({
+  useBusy: vi.fn(() => ({ isBusy: false })),
 }));
 
-const spy1 = jest.fn();
-const spy2 = jest.fn();
-const spy3 = jest.fn();
+const spy1 = vi.fn();
+const spy2 = vi.fn();
+const spy3 = vi.fn();
 const mockActions: ActionData[] = [
   { label: 'action-label', onActionSelected: spy1 },
   { label: 'action-label', onActionSelected: spy2 },
@@ -21,7 +23,7 @@ const mockActions: ActionData[] = [
 
 describe('Actions', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders the component without crashing', () => {
@@ -92,7 +94,7 @@ describe('Actions', () => {
   });
 
   it('disables all actions when busy', () => {
-    (useBusy as jest.Mock).mockImplementation(() => ({ isBusy: true }));
+    (useBusy as Mock).mockImplementation(() => ({ isBusy: true }));
 
     const { container } = render(<Actions actions={mockActions} />);
 

package/src/components/Buttons/Button/Button.spec.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
 import { IconName } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { Button } from './Button';
@@ -26,7 +27,7 @@ describe('Button (with icon)', () => {
     });
 
     it('raises the onButtonClicked event', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(<Button onButtonClicked={spy} />);
 
       const button = container.querySelector('button')!;
@@ -77,7 +78,7 @@ describe('Button (with icon)', () => {
     });
 
     it('allows the button to be enabled by default', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(<Button onButtonClicked={spy} />);
 
       const button = container.querySelector('button')!;
@@ -89,7 +90,7 @@ describe('Button (with icon)', () => {
     });
 
     it('allows button to be disabled', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(
         <Button disabled={true} onButtonClicked={spy} />,
       );

package/src/components/Buttons/CompositeButton/CompositeButton.spec.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
 import { IconName } from '../../Icons';
 import { ButtonContext } from '../Button.model';
 import { CompositeButton } from './CompositeButton';
@@ -22,7 +23,7 @@ describe('CompositeButton', () => {
     });
 
     it('raises the onButtonClicked event', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(<CompositeButton onButtonClicked={spy} />);
 
       const button = container.querySelector('button')!;
@@ -79,7 +80,7 @@ describe('CompositeButton', () => {
     });
 
     it('allows the button to be enabled by default', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(<CompositeButton onButtonClicked={spy} />);
 
       const button = container.querySelector('button')!;
@@ -91,7 +92,7 @@ describe('CompositeButton', () => {
     });
 
     it('allows button to be disabled', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(
         <CompositeButton disabled={true} onButtonClicked={spy} />,
       );

package/src/components/Buttons/TextButton/TextButton.spec.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
 import { ButtonContext } from '../Button.model';
 import { TextButton } from './TextButton';
 
@@ -13,7 +14,7 @@ describe('TextButton', () => {
     });
 
     it('raises the onButtonClicked event', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(<TextButton onButtonClicked={spy} />);
 
       const button = container.querySelector('button')!;
@@ -64,7 +65,7 @@ describe('TextButton', () => {
     });
 
     it('allows the button to be enabled by default', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(<TextButton onButtonClicked={spy} />);
 
       const button = container.querySelector('button')!;
@@ -76,7 +77,7 @@ describe('TextButton', () => {
     });
 
     it('allows button to be disabled', () => {
-      const spy = jest.fn();
+      const spy = vi.fn();
       const { container } = render(
         <TextButton disabled={true} onButtonClicked={spy} />,
       );

package/src/components/ConfirmDialog/ConfirmDialog.spec.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React, { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { ConfirmDialog } from './ConfirmDialog';
 import { ConfirmationConfig } from './ConfirmDialog.models';
 
@@ -45,7 +46,7 @@ describe('ConfirmDialog', () => {
   });
 
   it('disables container click event propagation', () => {
-    const parentClickSpy = jest.fn();
+    const parentClickSpy = vi.fn();
     const { container } = render(
       <div onClick={parentClickSpy}>
         <ConfirmDialog />
@@ -128,8 +129,8 @@ describe('ConfirmDialog', () => {
     });
 
     it(`raises both 'onCancel' and 'onConfirm'`, () => {
-      const cancelSpy = jest.fn();
-      const confirmSpy = jest.fn();
+      const cancelSpy = vi.fn();
+      const confirmSpy = vi.fn();
 
       render(<ConfirmDialog onCancel={cancelSpy} onConfirm={confirmSpy} />);
 
@@ -145,7 +146,7 @@ describe('ConfirmDialog', () => {
   });
 
   it(`raises 'onConfirmOpen' if set`, () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     render(<TestWrapper onConfirmOpen={spy} />);
 
     const mountButton = screen.getByTestId('test-mount');

package/src/components/DateTime/DatePicker/DatePicker.spec.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import { DateTime, Settings } from 'luxon';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { DatePicker } from './DatePicker';
 
 describe('DatePicker', () => {

package/src/components/DateTime/DateTimePicker.spec.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import { DateTime, Settings } from 'luxon';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { DateTimePicker } from './DateTimePicker';
 
 describe('DatePicker', () => {
@@ -38,7 +39,7 @@ describe('DatePicker', () => {
   });
 
   it('propagates updated values from TimePicker', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(<DateTimePicker onSelected={spy} />);
 
     // TimePicker should be present - check for scroll columns
@@ -50,7 +51,7 @@ describe('DatePicker', () => {
   });
 
   it('propagates updated values from DatePicker', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(<DateTimePicker onSelected={spy} />);
 
     // DatePicker should be present

package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.spec.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { ScrollColumn } from './ScrollColumn';
 
 describe('ScrollColumn', () => {
@@ -40,7 +41,7 @@ describe('ScrollColumn', () => {
 
   it('fires onSelected event when an item is selected', () => {
     const itemContent = 'test';
-    const selectedSpy = jest.fn();
+    const selectedSpy = vi.fn();
     const { container } = render(
       <ScrollColumn
         items={[itemContent]}
@@ -59,7 +60,7 @@ describe('ScrollColumn', () => {
 
   it('fires onSelected event when an item is selected through the wheel', () => {
     const itemContent = 'test';
-    const selectedSpy = jest.fn();
+    const selectedSpy = vi.fn();
     const { container } = render(
       <ScrollColumn
         items={[itemContent]}

package/src/components/DateTime/TimePicker/TimePicker.spec.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import { DateTime, Settings } from 'luxon';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { TimePicker } from './TimePicker';
 
 describe('DatePicker', () => {
@@ -31,7 +32,7 @@ describe('DatePicker', () => {
 
   it('fires onSelected event when a value is selected', () => {
     const now = DateTime.local();
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(<TimePicker value={now} onSelected={spy} />);
 
     // TimePicker requires complex interactions to activate columns and change values
@@ -76,7 +77,7 @@ describe('DatePicker', () => {
 
   it('fires onSelected event with 24 hour format when 12 hour display time is set', () => {
     const now = DateTime.local().set({ hour: 15 });
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(
       <TimePicker value={now} onSelected={spy} hours12={true} />,
     );