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

package/src/components/PageHeader/PageHeader.spec.tsx

@@ -1,13 +1,12 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../helpers/utils';
 import { PageHeader } from './PageHeader';
 import { PageHeaderActionItemProps } from './PageHeader.model';
 import { PageHeaderActionProps } from './PageHeaderAction';
-import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
-jest.mock('../../hooks/useTabTitle/useTabTitle');
+vi.mock('../../hooks/useTabTitle/useTabTitle');
 
 const defaultbulkActions: PageHeaderActionProps[] = [
   {
@@ -18,35 +17,35 @@ const defaultbulkActions: PageHeaderActionProps[] = [
 
 describe('PageHeader', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<PageHeader />);
+    const { container } = render(<PageHeader />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
   it('displays a title', () => {
     const mockTitle = 'test-title';
-    const wrapper = shallow(<PageHeader title={mockTitle} />);
+    const { container } = render(<PageHeader title={mockTitle} />);
 
-    const title = wrapper.find('.title');
+    const title = container.querySelector('.title');
 
-    expect(title.text()).toBe(mockTitle);
+    expect(title?.textContent).toBe(mockTitle);
   });
 
   it('displays a subtitle', () => {
     const mockSubtitle = 'test-subtitle';
-    const wrapper = shallow(<PageHeader subtitle={mockSubtitle} />);
+    const { container } = render(<PageHeader subtitle={mockSubtitle} />);
 
-    const subtitle = wrapper.find('.subtitle');
+    const subtitle = container.querySelector('.subtitle');
 
-    expect(subtitle.text()).toBe(mockSubtitle);
+    expect(subtitle?.textContent).toBe(mockSubtitle);
   });
 
   it(`renders actions`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <PageHeader actions={[{ ...defaultbulkActions[0], kind: 'action' }]} />,
     );
 
-    const action = wrapper.find(PageHeaderAction);
-    expect(action.exists()).toBe(true);
+    const action = container.querySelector('[data-test-id="action"]');
+    expect(action).toBeInTheDocument();
   });
 
   it(`renders actions groups`, () => {
@@ -57,10 +56,12 @@ describe('PageHeader', () => {
         actions: defaultbulkActions,
       },
     ];
-    const wrapper = shallow(<PageHeader actions={actions} />);
+    const { container } = render(<PageHeader actions={actions} />);
 
-    const action = wrapper.find(PageHeaderActionsGroup);
-    expect(action.exists()).toBe(true);
+    const actionsGroup = container.querySelector(
+      '.page-header-group-action-container',
+    );
+    expect(actionsGroup).toBeInTheDocument();
   });
 
   it('renders spacers', () => {
@@ -69,9 +70,9 @@ describe('PageHeader', () => {
         kind: 'spacer',
       },
     ];
-    const wrapper = shallow(<PageHeader actions={actions} />);
+    const { container } = render(<PageHeader actions={actions} />);
 
-    const spacer = wrapper.find('.spacer');
-    expect(spacer.exists()).toBe(true);
+    const spacer = container.querySelector('.spacer');
+    expect(spacer).toBeInTheDocument();
   });
 });