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

package/src/components/InfoPanel/Paragraph/Paragraph.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 { Paragraph } from './Paragraph';
 
 describe('Paragraph Tests', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Paragraph />);
+    const { container } = render(<Paragraph />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 });

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

@@ -1,128 +1,121 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { AccordionItem } from '../../Accordion';
+import { describe, expect, it } from 'vitest';
 import { Section } from './Section';
 
 describe('Section Tests', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Section />);
+    const { container } = render(<Section />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('should not render anything if section has no children', () => {
-    const wrapper = shallow(<Section></Section>);
+    const { container } = render(<Section></Section>);
 
-    const section = wrapper.find('.container');
+    const section = container.querySelector('.container');
 
-    expect(section.exists()).toBe(false);
+    expect(section).not.toBeInTheDocument();
   });
 
   it('creates a class based off of the className prop', () => {
     const mockClassName = 'test-class';
-    const wrapper = shallow(
+    const { container } = render(
       <Section className={mockClassName}>
         <p>test</p>
       </Section>,
     );
 
-    const item = wrapper.find('.test-class');
+    const item = container.querySelector('.test-class');
 
-    expect(item.hasClass(mockClassName)).toBe(true);
+    expect(item?.classList.contains(mockClassName)).toBe(true);
   });
 
   it('accepts styles', () => {
     const mockStyles: React.CSSProperties = { backgroundColor: 'blue' };
-    const wrapper = shallow(
+    const { container } = render(
       <Section style={mockStyles}>
         <p>test</p>
       </Section>,
     );
 
-    const section = wrapper.find('.container');
+    const section = container.querySelector('.container') as HTMLDivElement;
 
-    expect(section.prop('style')).toBe(mockStyles);
+    expect(section.style.backgroundColor).toBe('blue');
   });
 
   it(`should not be toggleable if no 'title' is given`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Section>
         <p>test</p>
       </Section>,
     );
 
-    const item = wrapper.find(AccordionItem);
+    const accordionItem = container.querySelector(
+      '[data-test-id="accordion-item"]',
+    );
 
-    expect(item.exists()).toBe(false);
+    expect(accordionItem).not.toBeInTheDocument();
   });
 
   it(`should be toggleable if a 'title' is given`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Section title="test">
         <p>test</p>
       </Section>,
     );
 
-    const item = wrapper.find(AccordionItem);
+    const accordionItem = container.querySelector(
+      '[data-test-id="accordion-item"]',
+    );
 
-    expect(item.exists()).toBe(true);
+    expect(accordionItem).toBeInTheDocument();
   });
 
   it('section should be expanded by default', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Section>
         <p>test</p>
       </Section>,
     );
 
-    const section = wrapper.find('.container');
+    const section = container.querySelector('.container');
 
-    expect(section.hasClass('expanded')).toBe(true);
+    expect(section?.classList.contains('expanded')).toBe(true);
   });
 
   it(`section is collasped if 'expandedByDefault' is set to false`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Section expandedByDefault={false}>
         <p>test</p>
       </Section>,
     );
 
-    const section = wrapper.find('.container');
+    const section = container.querySelector('.container');
 
-    expect(section.hasClass('expanded')).toBe(false);
+    expect(section?.classList.contains('expanded')).toBe(false);
   });
 
   it('section can be toggled when the title is clicked', () => {
-    const wrapper = shallow(
+    const { container, rerender } = render(
       <Section title="test">
         <p>test</p>
       </Section>,
     );
 
-    let section = wrapper.find('.container').first();
-    let item = wrapper.find(AccordionItem);
-
-    expect(section.hasClass('expanded')).toBe(true);
-    expect(item.prop('isExpanded')).toBe(true);
-
-    item = wrapper.find(AccordionItem);
-    item.prop('toggleExpanded')!();
-    wrapper.update();
+    let section = container.querySelector('.container');
 
-    section = wrapper.find('.container').first();
-    item = wrapper.find(AccordionItem);
+    expect(section?.classList.contains('expanded')).toBe(true);
 
-    expect(section.hasClass('expanded')).toBe(false);
-    expect(item.prop('isExpanded')).toBe(false);
+    const toggleButton = screen.getByRole('button');
+    toggleButton.click();
 
-    item = wrapper.find(AccordionItem);
-    item.prop('toggleExpanded')!();
-    wrapper.update();
+    section = container.querySelector('.container');
+    expect(section?.classList.contains('expanded')).toBe(false);
 
-    section = wrapper.find('.container').first();
-    item = wrapper.find(AccordionItem);
+    toggleButton.click();
 
-    expect(section.hasClass('expanded')).toBe(true);
-    expect(item.prop('isExpanded')).toBe(true);
+    section = container.querySelector('.container');
+    expect(section?.classList.contains('expanded')).toBe(true);
   });
 });

package/src/components/InfoPanel/hooks/useCollapse.ts

@@ -180,13 +180,15 @@ export const useCollapse = ({
       userExpandedRef.current = true;
       autoCollapsedRef.current = false;
 
-      setTimeout(() => {
-        containerRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'end',
-        });
-      }, 350);
+      // TODO: Temporarily disable auto-scrolling to prevent jarring experience when collapsing/expanding panels in smaller screens.
+      // to be revisited with https://dev.azure.com/axinom/CMS/_workitems/edit/53479/
+      // setTimeout(() => {
+      //   containerRef.current?.scrollIntoView({
+      //     behavior: 'smooth',
+      //     block: 'nearest',
+      //     inline: 'end',
+      //   });
+      // }, 350);
     }
 
     onCollapseChange?.(newState);

package/src/components/InlineMenu/InlineMenu.spec.tsx

@@ -1,9 +1,9 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { noop } from '../../helpers/utils';
 import { initializeUi } from '../../initialize';
-import { Button } from '../Buttons';
 import { InlineMenu } from './InlineMenu';
 
 describe('InlineMenu', () => {
@@ -24,50 +24,51 @@ describe('InlineMenu', () => {
   });
 
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<InlineMenu />);
+    const { container } = render(<InlineMenu />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('should render button', () => {
-    const wrapper = shallow(<InlineMenu />);
+    const { container } = render(<InlineMenu />);
 
-    const button = wrapper.find(Button);
+    const button = container.querySelector('button');
     expect(button).toBeTruthy();
   });
 
   it('menu should toggle on button click', async () => {
-    const wrapper = mount(<InlineMenu />);
-    const button = wrapper.find(Button);
-    expect(wrapper.find('.sub-menu-container').exists()).toBeFalsy();
+    const { container } = render(<InlineMenu />);
+    const button = container.querySelector('button') as HTMLButtonElement;
+    expect(
+      document.querySelector('.sub-menu-container'),
+    ).not.toBeInTheDocument();
     await act(async () => {
-      button.simulate('click');
+      fireEvent.click(button);
     });
-    wrapper.update();
-    expect(wrapper.find('.sub-menu-container').exists()).toBeTruthy();
+    expect(document.querySelector('.sub-menu-container')).toBeInTheDocument();
     await act(async () => {
-      button.simulate('click');
+      fireEvent.click(button);
     });
-    wrapper.update();
-    expect(wrapper.find('.sub-menu-container').exists()).toBeFalsy();
+    expect(
+      document.querySelector('.sub-menu-container'),
+    ).not.toBeInTheDocument();
   });
 
   it('allows an optional class to be passed in', async () => {
     const mockClass = 'test-class';
-    const wrapper = mount(<InlineMenu className={mockClass} />);
-    const button = wrapper.find(Button);
+    const { container } = render(<InlineMenu className={mockClass} />);
+    const button = container.querySelector('button') as HTMLButtonElement;
     await act(async () => {
-      button.simulate('click');
+      fireEvent.click(button);
     });
-    wrapper.update();
-    const container = wrapper.find('.sub-menu-container').first();
+    const subMenu = document.querySelector('.sub-menu-container');
 
-    expect(container.hasClass(mockClass)).toBe(true);
+    expect(subMenu?.classList.contains(mockClass)).toBe(true);
   });
 
   it(`'accepts placement prop`, () => {
-    const wrapper = shallow(<InlineMenu placement="top" />);
+    const { container } = render(<InlineMenu placement="top" />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 });

package/src/components/InlineMenu/InlineMenu.tsx

@@ -116,6 +116,9 @@ export const InlineMenu: React.FC<InlineMenuProps> = ({
             onBlur={() => {
               onBlurTimeout = global.setTimeout(() => collapse(), 250);
             }}
+            onContextMenu={() => {
+              clearTimeout(onBlurTimeout);
+            }}
             data-test-id="inline-menu"
           >
             <Actions

package/src/components/LandingPageHeader/LandingPageHeader.spec.tsx

@@ -1,27 +1,28 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { LandingPageHeader } from './LandingPageHeader';
 
 describe('LandingPageHeader', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <LandingPageHeader title="test-title" subtitle="test-title" />,
     );
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders a title and subtitle', () => {
     const mockTitle = 'test-title';
     const mockSubtitle = 'test-subtitle';
-    const wrapper = shallow(
+    const { container } = render(
       <LandingPageHeader title={mockTitle} subtitle={mockSubtitle} />,
     );
 
-    const title = wrapper.find('.title');
-    const subtitle = wrapper.find('.subtitle');
+    const title = container.querySelector('.title');
+    const subtitle = container.querySelector('.subtitle');
 
-    expect(title.text()).toBe(mockTitle);
-    expect(subtitle.text()).toBe(mockSubtitle);
+    expect(title?.textContent).toBe(mockTitle);
+    expect(subtitle?.textContent).toBe(mockSubtitle);
   });
 });

package/src/components/LandingPageTiles/LandingPageTiles.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 { LandingPageTiles } from './LandingPageTiles';
 import { LandingPageItem } from './LandingPageTiles.model';
 
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(<Router>{component}</Router>);
+};
+
 const mockItems: LandingPageItem[] = [
   {
     path: '/contentset',
@@ -35,27 +40,27 @@ const mockItems: LandingPageItem[] = [
 
 describe('LandingPageTiles', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<LandingPageTiles items={mockItems} />);
+    const { container } = renderWithRouter(
+      <LandingPageTiles items={mockItems} />,
+    );
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('renders a tile for each item in the data array', () => {
-    const wrapper = mount(
-      <Router>
-        <LandingPageTiles items={mockItems} />
-      </Router>,
+    const { container } = renderWithRouter(
+      <LandingPageTiles items={mockItems} />,
     );
-    const tiles = wrapper.find('.container').first();
+    const tiles = container.querySelector('.container');
 
-    expect(tiles.children()).toHaveLength(mockItems.length);
+    expect(tiles?.children.length).toBe(mockItems.length);
   });
 
   it('displays the right row height, grid gap, and amount of columns when passed into props', () => {
     const mockRowHeight = '300px';
     const mockGidGap = '35px';
     const mockColumns = 36;
-    const wrapper = shallow(
+    const { container } = renderWithRouter(
       <LandingPageTiles
         items={mockItems}
         gridTemplateColumns={mockColumns}
@@ -64,21 +69,20 @@ describe('LandingPageTiles', () => {
       />,
     );
 
-    const gridStyles = wrapper
-      .find('.container')
-      .first()
-      .prop('style') as React.CSSProperties;
+    const gridElement = container.querySelector('.container') as HTMLElement;
 
-    expect(gridStyles.gridAutoRows).toBe(mockRowHeight);
-    expect(gridStyles.gridGap).toBe(mockGidGap);
-    expect(gridStyles.gridTemplateColumns).toBe(`repeat(${mockColumns}, 1fr)`);
+    expect(gridElement.style.gridAutoRows).toBe(mockRowHeight);
+    expect(gridElement.style.gridGap).toBe(mockGidGap);
+    expect(gridElement.style.gridTemplateColumns).toBe(
+      `repeat(${mockColumns}, 1fr)`,
+    );
   });
 
   it('has the right minimum width, maximum width, and alignment when passed into props', () => {
     const mockMinWidth = '200px';
     const mockMaxWidth = '400px';
     const mockAlignment = 'right';
-    const wrapper = shallow(
+    const { container } = renderWithRouter(
       <LandingPageTiles
         items={mockItems}
         minWidth={mockMinWidth}
@@ -87,26 +91,23 @@ describe('LandingPageTiles', () => {
       />,
     );
 
-    const gridStyles = wrapper
-      .find('.container')
-      .first()
-      .prop('style') as React.CSSProperties;
+    const gridElement = container.querySelector('.container') as HTMLElement;
 
-    expect(gridStyles.minWidth).toBe(mockMinWidth);
-    expect(gridStyles.maxWidth).toBe(mockMaxWidth);
-    expect(gridStyles.justifySelf).toBe(mockAlignment);
+    expect(gridElement.style.minWidth).toBe(mockMinWidth);
+    expect(gridElement.style.maxWidth).toBe(mockMaxWidth);
+    expect(gridElement.style.justifySelf).toBe(mockAlignment);
   });
 
   it('supports children elements to be passed in', () => {
-    const wrapper = shallow(
+    const { container } = renderWithRouter(
       <LandingPageTiles items={mockItems}>
         <div id="test-child"></div>
       </LandingPageTiles>,
     );
 
-    const child = wrapper.find('#test-child');
+    const child = container.querySelector('#test-child');
 
-    expect(child).toHaveLength(1);
+    expect(child).toBeInTheDocument();
   });
 
   // These need tests. Currently, spying on these functions and useState/useEffect is broken.

package/src/components/LandingPageTiles/TileLarge/TileLarge.spec.tsx

@@ -1,11 +1,9 @@
-import { mount, ReactWrapper, shallow } from 'enzyme';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 import { TileLarge, TileLargeProps } from './TileLarge';
 
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-
 const mockProps: TileLargeProps = {
   path: 'test-path',
   label: 'test-label',
@@ -22,119 +20,128 @@ const MockIcon: React.FC = () => (
 
 describe('TileLarge', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<TileLarge {...mockProps} />);
-    expect(wrapper).toBeTruthy();
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge {...mockProps} />
+      </MemoryRouter>,
+    );
+    expect(container).toBeTruthy();
   });
 
   it('renders the tile label and subtile', () => {
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <TileLarge {...mockProps} />
       </MemoryRouter>,
     );
 
-    const label = wrapper.find('.label');
-    const subtitle = wrapper.find('.subtitle');
+    const label = container.querySelector('.label');
+    const subtitle = container.querySelector('.subtitle');
 
-    expect(label.text()).toBe(mockProps.label);
-    expect(subtitle.text()).toBe(mockProps.subtitle);
+    expect(label?.textContent).toBe(mockProps.label);
+    expect(subtitle?.textContent).toBe(mockProps.subtitle);
   });
 
   it('renders the tile subtile when a callback function is passed', async () => {
-    let wrapper: ReactWrapper;
-    await act(async () => {
-      wrapper = await mount(
-        <MemoryRouter>
-          <TileLarge {...mockProps} subtitle={() => Promise.resolve('135')} />
-        </MemoryRouter>,
-      );
-    });
-
-    const realWrapper = wrapper!;
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge {...mockProps} subtitle={() => Promise.resolve('135')} />
+      </MemoryRouter>,
+    );
 
-    const subtitle = realWrapper.find('.subtitle');
-    expect(subtitle.text()).toBe('135');
+    await waitFor(() => {
+      const subtitle = container.querySelector('.subtitle');
+      expect(subtitle?.textContent).toBe('135');
+    });
   });
 
   it('does not show a subtitle in case of an error', async () => {
-    let wrapper: ReactWrapper;
-    await act(async () => {
-      wrapper = await mount(
-        <MemoryRouter>
-          <TileLarge {...mockProps} subtitle={() => Promise.reject('')} />
-        </MemoryRouter>,
-      );
-    });
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge {...mockProps} subtitle={() => Promise.reject('')} />
+      </MemoryRouter>,
+    );
 
-    const subtitle = wrapper!.find('.subtitle');
-    expect(subtitle.text()).toBe('');
+    await waitFor(() => {
+      const subtitle = container.querySelector('.subtitle');
+      expect(subtitle?.textContent).toBe('');
+    });
   });
   it.todo('does show a loading indicator while the subtitle is loading');
 
   it('renders an empty string if no subtitle is found', () => {
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <TileLarge {...mockProps} subtitle={undefined} />
       </MemoryRouter>,
     );
 
-    const subtitle = wrapper.find('.subtitle');
+    const subtitle = container.querySelector('.subtitle');
 
-    expect(subtitle.text()).toBe('');
+    expect(subtitle?.textContent).toBe('');
   });
 
   it('renders an icon when passed as a string URL', () => {
-    const wrapper = mount(
+    const { container } = render(
       <MemoryRouter>
         <TileLarge {...mockProps} />
       </MemoryRouter>,
     );
-    const iconUrl = wrapper.find('img').prop('src');
+    const iconUrl = container.querySelector('img')?.getAttribute('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);
   });
 
   it('renders an icon when passed as a react component', () => {
-    const wrapper = shallow(<TileLarge {...mockProps} icon={<MockIcon />} />);
-    const iconWrapper = wrapper.find('.icon');
-    expect(iconWrapper.contains(<MockIcon />)).toBe(true);
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge {...mockProps} icon={<MockIcon />} />
+      </MemoryRouter>,
+    );
+    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(
-      <TileLarge {...{ ...mockProps, disabled: true }} />,
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge {...{ ...mockProps, disabled: true }} />
+      </MemoryRouter>,
     );
-    const tile = wrapper.find('.container');
-    const toAttr = tile.prop('to');
+    const tile = container.querySelector('.container');
 
-    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(<TileLarge {...mockProps} />);
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge {...mockProps} />
+      </MemoryRouter>,
+    );
 
-    const navLink = wrapper.find('.container').prop('to');
+    const navLink = container.querySelector('.container') as HTMLAnchorElement;
 
-    expect(navLink).toEqual({ pathname: mockProps.path });
+    expect(navLink?.getAttribute('href')).toBe(mockProps.path);
   });
 
   it('sets row and column spans from props', () => {
     const mockColumnSpan = 3;
     const mockRowSpan = 1;
-    const wrapper = shallow(
-      <TileLarge
-        {...mockProps}
-        largeTileColumnSpan={mockColumnSpan}
-        largeTileRowSpan={mockRowSpan}
-      />,
+    const { container } = render(
+      <MemoryRouter>
+        <TileLarge
+          {...mockProps}
+          largeTileColumnSpan={mockColumnSpan}
+          largeTileRowSpan={mockRowSpan}
+        />
+      </MemoryRouter>,
     );
 
-    const navStyles = wrapper
-      .find('.container')
-      .prop('style') as React.CSSProperties;
+    const navElement = container.querySelector('.container') as HTMLElement;
 
-    expect(navStyles.gridColumn).toBe(`span ${mockColumnSpan}`);
-    expect(navStyles.gridRow).toBe(`span ${mockRowSpan}`);
+    expect(navElement.style.gridColumn).toBe(`span ${mockColumnSpan}`);
+    expect(navElement.style.gridRow).toBe(`span ${mockRowSpan}`);
   });
 });