chore: Add setup to always include jest-dom extended matchers, cleanup (

#7240) * chore: Add setup to always include jest-dom extended matchers, cleanup * rename DropdownToggle 'describe' title, remove unnecessary data-testid's
patternfly · Apr 27, 2022 · a759efe · a759efe
1 parent 801812d
commit a759efe
Show file tree

Hide file tree

Showing 580 changed files with 7,875 additions and 3,892 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -12,6 +12,7 @@ module.exports = {
   transform: {
     '^.+\\.[jt]sx?$': 'babel-jest'
   },
+  setupFilesAfterEnv: ['<rootDir>/packages/testSetup.ts'],
   transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor)'],
   testPathIgnorePatterns: ['<rootDir>/packages/react-integration/'],
   coveragePathIgnorePatterns: ['/dist/'],

diff --git a/.../react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx b/.../react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 test('simple catalog item header', () => {
-  const view = render(
+  const { asFragment } = render(
     <CatalogItemHeader
       title="PatternFly"
       vendor={
@@ -13,5 +13,5 @@ test('simple catalog item header', () => {
       }
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/...-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap b/...-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple catalog item header 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="catalog-item-header-pf"
   >
@@ -27,5 +27,5 @@ exports[`simple catalog item header 1`] = `
       </h5>
     </div>
   </header>
-</div>
+</DocumentFragment>
 `;
diff --git a/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx b/packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
 import { CatalogTile } from './CatalogTile';
 import { CatalogTileBadge } from './CatalogTileBadge';
 
@@ -90,7 +91,7 @@ test('CatalogTile renders properly', () => {
 });
 
 test('CatalogTile href renders properly', () => {
-  const view = render(
+  const { asFragment } = render(
     <CatalogTile
       id="test-href"
       href="http://patternfly.org"
@@ -100,7 +101,7 @@ test('CatalogTile href renders properly', () => {
       description="1234567890123"
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('CatalogTile onClick behaves properly', () => {
@@ -119,5 +120,5 @@ test('CatalogTile onClick behaves properly', () => {
   );
 
   userEvent.click(screen.getByText('Patternfly'));
-  expect(onClickMock).toBeCalled();
+  expect(onClickMock).toHaveBeenCalled();
 });
diff --git a/...catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/...catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CatalogTile href renders properly 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-card pf-m-selectable catalog-tile-pf featured"
     data-ouia-component-id="OUIA-Generated-Card-6"
@@ -39,7 +39,7 @@ exports[`CatalogTile href renders properly 1`] = `
       </div>
     </div>
   </a>
-</div>
+</DocumentFragment>
 `;
 
 exports[`CatalogTile renders properly 1`] = `

diff --git a/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx b/packages/react-catalog-view-extension/src/components/VerticalTabs/VerticalTabs.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -90,7 +91,7 @@ test('Vertical Tabs Tab onActivate is called correctly', () => {
   userEvent.click(screen.getByText('Click Me'));
 
   expect(component.container).toMatchSnapshot();
-  expect(onActivateMock).toBeCalled();
+  expect(onActivateMock).toHaveBeenCalled();
 });
 
 test('Vertical Tabs Tab wrap styling is set correctly', () => {

diff --git a/packages/react-charts/src/components/Chart/Chart.test.tsx b/packages/react-charts/src/components/Chart/Chart.test.tsx
@@ -6,13 +6,13 @@ import { ChartLine } from '../ChartLine';
 
 Object.values([true, false]).forEach(() => {
   test('Chart', () => {
-    const view = render(<Chart />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Chart />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 test('renders axis and component children', () => {
-  const view = render(
+  const { asFragment } = render(
     <Chart minDomain={{ y: 0 }} height={200} width={200}>
       <ChartGroup>
         <ChartLine
@@ -50,5 +50,5 @@ test('renders axis and component children', () => {
       </ChartGroup>
     </Chart>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Chart 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
@@ -363,11 +363,11 @@ exports[`Chart 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Chart 2`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
@@ -729,11 +729,11 @@ exports[`Chart 2`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`renders axis and component children 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
@@ -1224,5 +1224,5 @@ exports[`renders axis and component children 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx
@@ -4,13 +4,13 @@ import { ChartArea } from '../ChartArea';
 
 Object.values([true, false]).forEach(() => {
   test('ChartArea', () => {
-    const view = render(<ChartArea />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ChartArea />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 test('renders component data', () => {
-  const view = render(
+  const { asFragment } = render(
     <ChartArea
       data={[
         { name: 'Cats', x: 1, y: 1 },
@@ -20,5 +20,5 @@ test('renders component data', () => {
       ]}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChartArea 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -49,11 +49,11 @@ exports[`ChartArea 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ChartArea 2`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -101,11 +101,11 @@ exports[`ChartArea 2`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`renders component data 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -153,5 +153,5 @@ exports[`renders component data 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.test.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.test.tsx
@@ -7,13 +7,13 @@ import { ChartLine } from '../ChartLine';
 
 Object.values([true, false]).forEach(() => {
   test('ChartAxis', () => {
-    const view = render(<ChartAxis />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ChartAxis />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 test('renders component data', () => {
-  const view = render(
+  const { asFragment } = render(
     <Chart domainPadding={{ x: [30, 25] }} height={200} width={300}>
       <ChartGroup>
         <ChartLine
@@ -53,5 +53,5 @@ test('renders component data', () => {
       <ChartAxis dependentAxis tickValues={[2, 5, 8]} />
     </Chart>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChartAxis 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -221,11 +221,11 @@ exports[`ChartAxis 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ChartAxis 2`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -445,11 +445,11 @@ exports[`ChartAxis 2`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`renders component data 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
@@ -785,5 +785,5 @@ exports[`renders component data 1`] = `
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx
@@ -6,13 +6,13 @@ import { ChartGroup } from '../ChartGroup';
 
 Object.values([true, false]).forEach(() => {
   test('ChartBar', () => {
-    const view = render(<ChartBar />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<ChartBar />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 test('renders component data', () => {
-  const view = render(
+  const { asFragment } = render(
     <Chart domainPadding={{ x: [30, 25] }} height={200} width={300}>
       <ChartGroup offset={11}>
         <ChartBar
@@ -50,5 +50,5 @@ test('renders component data', () => {
       </ChartGroup>
     </Chart>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChartBar 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -89,11 +89,11 @@ A 0 0 0 0 1, 405, 250
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ChartBar 2`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; pointer-events: none; position: relative;"
@@ -181,11 +181,11 @@ A 0 0 0 0 1, 405, 250
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`renders component data 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
@@ -743,5 +743,5 @@ A 0 0 0 0 1, 246.5, 150
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;