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

package/src/components/FormStation/FormStation.stories.tsx

@@ -15,6 +15,7 @@ import {
 import {
   CustomTagsField,
   DateTimeTextField,
+  FormGroup,
   ReadOnlyField,
   SelectField,
   SingleLineTextField,
@@ -209,19 +210,20 @@ export const Extended: StoryObj<typeof Details> = (() => {
             ]}
             as={SelectField}
           />
-
-          <Field
-            name="shortDescription"
-            label="Short Description"
-            placeholder="Enter a short description..."
-            as={SingleLineTextField}
-          />
-          <Field
-            name="longDescription"
-            label="Long Description"
-            placeholder="Enter a description..."
-            as={SingleLineTextField}
-          />
+          <FormGroup title="Collapsible Group" isCollapsible={true}>
+            <Field
+              name="shortDescription"
+              label="Short Description"
+              placeholder="Enter a short description..."
+              as={SingleLineTextField}
+            />
+            <Field
+              name="longDescription"
+              label="Long Description"
+              placeholder="Enter a description..."
+              as={SingleLineTextField}
+            />
+          </FormGroup>
           <Field name="cast" label="Cast" as={CustomTagsField} />
           <Field
             name="released"

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -40,7 +40,7 @@ export const FormStationHeader: React.FC<
   },
   setValidationError,
 }) => {
-  const { dirty, submitForm, resetForm, isValid } =
+  const { dirty, submitForm, resetForm, validateForm } =
     useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
   const bulkEditContext = useContext(BulkEditContext);
@@ -74,10 +74,12 @@ export const FormStationHeader: React.FC<
             if (quickEditContext?.isQuickEditMode) {
               quickEditContext.refresh();
             } else if (bulkEditContext?.isBulkEditMode) {
-              if (!isValid) {
+              const errors = await validateForm();
+              if (Object.keys(errors).length > 0) {
                 setValidationError();
                 return;
               }
+
               await submitForm();
               history.replace(history.location.pathname);
             } else {
@@ -128,7 +130,6 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl,
     dirty,
     history,
-    isValid,
     quickEditContext,
     resetForm,
     saveHeaderActionConfig.icon,
@@ -136,6 +137,7 @@ export const FormStationHeader: React.FC<
     setValidationError,
     showSaveHeaderAction,
     submitForm,
+    validateForm,
   ]);
 
   return (

package/src/components/FormStation/SaveOnNavigate/SaveOnNavigate.spec.tsx

@@ -1,14 +1,15 @@
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import * as Formik from 'formik';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Link, MemoryRouter } from 'react-router-dom';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { SaveOnNavigate } from './SaveOnNavigate';
 
-const submitFormSpy = jest.fn(() => Promise.resolve());
+const submitFormSpy = vi.fn(() => Promise.resolve());
 
-jest.mock('formik', () => ({
-  useFormikContext: jest.fn(),
+vi.mock('formik', () => ({
+  useFormikContext: vi.fn(),
 }));
 
 const defaultFormikProps = {
@@ -21,33 +22,33 @@ const defaultFormikProps = {
 
 describe('SaveOnNavigate', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders the component without crashing', async () => {
-    jest
-      .spyOn(Formik, 'useFormikContext')
-      .mockImplementation(() => defaultFormikProps);
+    vi.spyOn(Formik, 'useFormikContext').mockImplementation(
+      () => defaultFormikProps,
+    );
 
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <SaveOnNavigate isSubmitting={false} />
       </MemoryRouter>,
     );
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it(`form submission should be allowed if 'isSubmitting' is false`, async () => {
-    const submitSpy = jest.fn(() => Promise.resolve());
-    jest.spyOn(Formik, 'useFormikContext').mockImplementation(() => ({
+    const submitSpy = vi.fn(() => Promise.resolve());
+    vi.spyOn(Formik, 'useFormikContext').mockImplementation(() => ({
       ...defaultFormikProps,
       submitForm: submitSpy,
       dirty: true,
       isSubmitting: false,
     }));
 
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <Link id="link" to="/test">
           link
@@ -56,10 +57,11 @@ describe('SaveOnNavigate', () => {
       </MemoryRouter>,
     );
 
-    wrapper.find('a').simulate('click', { button: 0 });
+    const link = container.querySelector('a') as HTMLAnchorElement;
+    fireEvent.click(link, { button: 0 });
 
     await act(async () => {
-      wrapper.update();
+      // Wait for async operations
     });
 
     // assert submit was attempted
@@ -67,15 +69,15 @@ describe('SaveOnNavigate', () => {
   });
 
   it(`form submission should not be allowed if 'isSubmitting' is true`, async () => {
-    const submitSpy = jest.fn(() => Promise.resolve());
-    jest.spyOn(Formik, 'useFormikContext').mockImplementation(() => ({
+    const submitSpy = vi.fn(() => Promise.resolve());
+    vi.spyOn(Formik, 'useFormikContext').mockImplementation(() => ({
       ...defaultFormikProps,
       submitForm: submitSpy,
       dirty: true,
       isSubmitting: false,
     }));
 
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <Link id="link" to="/test">
           link
@@ -84,10 +86,11 @@ describe('SaveOnNavigate', () => {
       </MemoryRouter>,
     );
 
-    wrapper.find('a').simulate('click', { button: 0 });
+    const link = container.querySelector('a') as HTMLAnchorElement;
+    fireEvent.click(link, { button: 0 });
 
     await act(async () => {
-      wrapper.update();
+      // Wait for async operations
     });
 
     // assert another submit was not attempted

package/src/components/FormStation/SaveOnNavigate/handleNavigationAttempt.spec.ts

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { NavigationAPI } from '../../../hooks';
 import { handleNavigationAttempt } from './handleNavigationAttempt';
 
@@ -6,9 +7,9 @@ describe('handleNavigationAttempt', () => {
 
   beforeEach(() => {
     navigation = {
-      pause: jest.fn(),
-      resume: jest.fn(),
-      cancel: jest.fn(),
+      pause: vi.fn(),
+      resume: vi.fn(),
+      cancel: vi.fn(),
     } as unknown as NavigationAPI;
   });
 
@@ -16,11 +17,11 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = false;
     const isValid = true;
-    const submitForm = jest.fn();
+    const submitForm = vi.fn();
     const isSubmitting = false;
     const canSubmit = true;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -47,11 +48,11 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = true;
     const isValid = false;
-    const submitForm = jest.fn();
+    const submitForm = vi.fn();
     const isSubmitting = false;
     const canSubmit = true;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -78,11 +79,11 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = true;
     const isValid = true;
-    const submitForm = jest.fn();
+    const submitForm = vi.fn();
     const isSubmitting = true;
     const canSubmit = true;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -109,11 +110,11 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = true;
     const isValid = true;
-    const submitForm = jest.fn();
+    const submitForm = vi.fn();
     const isSubmitting = true;
     const canSubmit = true;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -140,11 +141,11 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = true;
     const isValid = true;
-    const submitForm = jest.fn();
+    const submitForm = vi.fn();
     const isSubmitting = false;
     const canSubmit = false;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -171,11 +172,11 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = true;
     const isValid = true;
-    const submitForm = jest.fn().mockResolvedValueOnce(undefined);
+    const submitForm = vi.fn().mockResolvedValueOnce(undefined);
     const isSubmitting = false;
     const canSubmit = true;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -203,13 +204,13 @@ describe('handleNavigationAttempt', () => {
     // Arrange
     const dirty = true;
     const isValid = true;
-    const submitForm = jest
+    const submitForm = vi
       .fn()
       .mockRejectedValueOnce(new Error('Failed to submit form'));
     const isSubmitting = false;
     const canSubmit = true;
-    const setCanSubmit = jest.fn();
-    const onNavigationCancelled = jest.fn();
+    const setCanSubmit = vi.fn();
+    const onNavigationCancelled = vi.fn();
 
     // Act
     await handleNavigationAttempt(

package/src/components/FormStation/helpers/useTitle.spec.ts

@@ -1,18 +1,20 @@
 import { useFormikContext } from 'formik';
+import type { Mock } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { useTitle } from './useTitle';
 
-jest.mock('formik', () => ({
-  useFormikContext: jest.fn(),
+vi.mock('formik', () => ({
+  useFormikContext: vi.fn(),
 }));
 
 describe('useTitle', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should return default title when titleProperty is not provided', () => {
     const defaultTitle = 'Default Title';
-    (useFormikContext as jest.Mock).mockReturnValueOnce({});
+    (useFormikContext as Mock).mockReturnValueOnce({});
 
     const result = useTitle(undefined, defaultTitle);
 
@@ -22,7 +24,7 @@ describe('useTitle', () => {
   it('should return title from formik context when titleProperty is provided', () => {
     const titleProperty = 'title';
     const titleValue = 'Form Title';
-    (useFormikContext as jest.Mock).mockReturnValueOnce({
+    (useFormikContext as Mock).mockReturnValueOnce({
       values: { [titleProperty]: titleValue },
     });
 
@@ -34,7 +36,7 @@ describe('useTitle', () => {
   it('should return default title when titleProperty is provided but not found in formik context', () => {
     const titleProperty = 'title';
     const defaultTitle = 'Default Title';
-    (useFormikContext as jest.Mock).mockReturnValueOnce({ values: {} });
+    (useFormikContext as Mock).mockReturnValueOnce({ values: {} });
 
     const result = useTitle(titleProperty, defaultTitle);
 
@@ -43,7 +45,7 @@ describe('useTitle', () => {
 
   it('should prepend an * when dirty is true', () => {
     const defaultTitle = 'Default Title';
-    (useFormikContext as jest.Mock).mockReturnValueOnce({ dirty: true });
+    (useFormikContext as Mock).mockReturnValueOnce({ dirty: true });
 
     const result = useTitle(undefined, defaultTitle);
 

package/src/components/Hub/Hub.spec.tsx

@@ -1,9 +1,14 @@
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 import { Hub } from './Hub';
 import { HubItem } from './Hub.model';
 
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(<Router>{component}</Router>);
+};
+
 const mockItems: HubItem[] = [
   {
     groupName: 'Video Service',
@@ -65,22 +70,20 @@ const groupNames = [...new Set(mockItems.map((item) => item.groupName))];
 
 describe('Hub Tests', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Hub items={mockItems} />);
+    const { container } = renderWithRouter(<Hub items={mockItems} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders a group and tiles for each item in the data array', () => {
-    const wrapper = mount(
-      <Router>
-        <Hub items={mockItems} />
-      </Router>,
+    const { container } = renderWithRouter(<Hub items={mockItems} />);
+    const tiles = container.querySelectorAll('[data-test-id="tile-label"]');
+    const groups = container.querySelectorAll(
+      '[data-test-id="hub-group-label"]',
     );
-    const tiles = wrapper.find('.container');
-    const groups = wrapper.find('.title');
 
     expect(groups).toHaveLength(groupNames.length);
 
-    expect(tiles.children()).toHaveLength(mockItems.length);
+    expect(tiles).toHaveLength(mockItems.length);
   });
 });

package/src/components/Hub/Tile/Tile.spec.tsx

@@ -1,6 +1,7 @@
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom'; // Add this import
+import { BrowserRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 import { Tile } from './Tile';
 import { TileProps } from './Tile.model';
 
@@ -16,52 +17,55 @@ const MockIcon: React.FC = () => (
   </svg>
 );
 
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(<BrowserRouter>{component}</BrowserRouter>);
+};
+
 describe('Tile', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Tile {...mockProps} />);
+    const { container } = renderWithRouter(<Tile {...mockProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders the tile label', () => {
-    const wrapper = shallow(<Tile {...mockProps} />);
+    const { container } = renderWithRouter(<Tile {...mockProps} />);
 
-    const label = wrapper.find('.label');
+    const label = container.querySelector('.label');
 
-    expect(label.text()).toBe(mockProps.label);
+    expect(label?.textContent).toBe(mockProps.label);
   });
 
   it('renders an icon when passed as a string URL', () => {
-    const wrapper = mount(
-      <MemoryRouter>
-        <Tile {...mockProps} />
-      </MemoryRouter>,
-    );
-    const iconUrl = wrapper.find('img').prop('src');
+    const { container } = renderWithRouter(<Tile {...mockProps} />);
+    const iconImg = container.querySelector('img') as HTMLImageElement;
 
-    expect(iconUrl).toBe(`${mockProps.icon}`);
+    expect(iconImg.src).toContain(mockProps.icon);
   });
 
   it('renders an icon when passed as a react component', () => {
-    const wrapper = shallow(<Tile {...mockProps} icon={<MockIcon />} />);
-    const iconWrapper = wrapper.find('.icon');
-    expect(iconWrapper.contains(<MockIcon />)).toBe(true);
+    const { container } = renderWithRouter(
+      <Tile {...mockProps} icon={<MockIcon />} />,
+    );
+    const iconWrapper = container.querySelector('.icon');
+    const svg = iconWrapper?.querySelector('svg');
+    expect(svg).toBeInTheDocument();
   });
 
   it('to attrubute is not exists disabled class should be applied when disabled', () => {
-    const wrapper = shallow(<Tile {...{ ...mockProps, disabled: true }} />);
-    const tile = wrapper.find('.tile');
-    const toAttr = tile.prop('to');
+    const { container } = renderWithRouter(
+      <Tile {...{ ...mockProps, disabled: true }} />,
+    );
+    const tile = container.querySelector('.tile');
 
-    expect(tile.hasClass('disabled')).toBe(true);
-    expect(toAttr).toStrictEqual({ pathname: undefined });
+    expect(tile?.classList.contains('disabled')).toBe(true);
   });
 
   it('creates a hyperlink using the path prop', () => {
-    const wrapper = shallow(<Tile {...mockProps} />);
+    const { container } = renderWithRouter(<Tile {...mockProps} />);
 
-    const navLink = wrapper.find('.tile').prop('to');
+    const tile = container.querySelector('.tile');
 
-    expect(navLink).toEqual({ pathname: mockProps.path });
+    expect(tile).toBeInTheDocument();
   });
 });

package/src/components/Icons/Icons.spec.tsx

@@ -1,13 +1,14 @@
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { Icons } from './Icons';
 import { IconName } from './Icons.models';
 
 describe('Icons', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Icons />);
+    const { container } = render(<Icons />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it.each`
@@ -68,39 +69,34 @@ describe('Icons', () => {
     ${IconName.Warning}          | ${1}
     ${IconName.X}                | ${1}
   `('renders $key icon with $result children', ({ key, result }) => {
-    const wrapper = mount(<Icons icon={key} />);
+    const { container } = render(<Icons icon={key} />);
 
-    const svgElement = wrapper.find('svg');
-    expect(svgElement).toHaveLength(1);
+    const icon = container.querySelector('svg');
 
-    // Get the actual DOM node and count its children
-    const domNode = svgElement.getDOMNode() as SVGElement;
-    const childrenCount = domNode.children.length;
-
-    expect(childrenCount).toBe(result);
+    expect(icon?.children.length).toBe(result);
   });
 
   it('passes down optional className to icon', () => {
     const mockClass = 'test-class';
-    const wrapper = mount(
+    const { container } = render(
       <Icons icon={IconName.Archive} className={mockClass} />,
     );
 
-    const icon = wrapper.find('svg');
+    const icon = container.querySelector('svg');
 
-    expect(icon.hasClass(mockClass)).toBe(true);
+    expect(icon?.classList.contains(mockClass)).toBe(true);
   });
 
   it('renders an empty placeholder is used if no icon is set', () => {
-    const wrapper = mount(<Icons />);
+    const { container } = render(<Icons />);
 
-    const icon = wrapper.find('svg');
+    const icon = container.querySelector('svg');
 
-    expect(icon.children()).toHaveLength(0);
+    expect(icon?.children.length).toBe(0);
   });
 
   it('applies accessibility attributes correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Icons
         icon={IconName.Play}
         aria-label="Play video"
@@ -108,20 +104,22 @@ describe('Icons', () => {
       />,
     );
 
-    const svg = wrapper.find('svg');
+    const svg = container.querySelector('svg');
 
-    expect(svg.prop('aria-label')).toBe('Play video');
-    expect(svg.prop('role')).toBe('img');
-    expect(svg.prop('aria-hidden')).toBeUndefined();
-    expect(wrapper.find('title').text()).toBe('Start playback');
+    expect(svg?.getAttribute('aria-label')).toBe('Play video');
+    expect(svg?.getAttribute('role')).toBe('img');
+    expect(svg?.getAttribute('aria-hidden')).toBeNull();
+    expect(container.querySelector('title')?.textContent).toBe(
+      'Start playback',
+    );
   });
 
   it('marks decorative icons as presentation', () => {
-    const wrapper = mount(<Icons icon={IconName.Play} />);
+    const { container } = render(<Icons icon={IconName.Play} />);
 
-    const svg = wrapper.find('svg');
+    const svg = container.querySelector('svg');
 
-    expect(svg.prop('role')).toBe('presentation');
-    expect(svg.prop('aria-hidden')).toBe('true');
+    expect(svg?.getAttribute('role')).toBe('presentation');
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
   });
 });

package/src/components/Icons/Icons.tsx

@@ -175,7 +175,7 @@ const ClearAllIcon: React.FC<SvgElementProps> = (props) => (
   <SvgElement {...props}>
     <path
       {...DEFAULT_PATH_PROPS}
-      d="M32.7,20c0,7-5.7,12.7-12.7,12.7s-12.7-5.7-12.7-12.7,5.7-12.7,12.7-12.7,12.7,5.7,12.7,12.7ZM34,6L6,34"
+      d="M28.6,33.7H11.2l-7.2-7.2L24.2,6.3l11.8,11.8-15.6,15.6M18.6,11.9l11.8,11.8M31.9,33.7h3.7"
     />
   </SvgElement>
 );

package/src/components/InfoPanel/InfoImage/InfoImage.spec.tsx

@@ -1,11 +1,12 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { InfoImage } from './InfoImage';
 
 describe('InfoImage Tests', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<InfoImage imgSrc="" />);
+    const { container } = render(<InfoImage imgSrc="" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 });

package/src/components/InfoPanel/InfoPanel.scss

@@ -98,6 +98,8 @@
     .content {
       transform: translateX(0);
       pointer-events: none;
+      max-height: 0;
+      overflow: hidden;
     }
 
     .filler {

package/src/components/InfoPanel/InfoPanel.spec.tsx

@@ -1,11 +1,12 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { InfoPanel } from './InfoPanel';
 
 describe('InfoPanel Tests', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<InfoPanel />);
+    const { container } = render(<InfoPanel />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 });