chore(eslint): Added React Testing Library linter plugin (#9805)

.eslintignore

@@ -1,7 +1,6 @@
 # Javascript builds
 node_modules
 dist
-__tests__
 thirdparty
 tsc_out
 .out

.eslintrc.json

@@ -127,6 +127,15 @@
             "rules": {
                 "patternfly-react/no-anonymous-functions": "off"
             }
+        },
+        {
+            "files": ["**/*.test.[jt]s?(x)"],
+            "extends": ["plugin:testing-library/react"],
+            "rules": {
+                "testing-library/no-node-access": "off",
+                "react/jsx-key": "off",
+                "no-console": "off"
+            }
         }
     ]
 }

package.json

@@ -50,6 +50,7 @@
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-testing-library": "^6.1.0",
     "fs-extra": "^11.1.1",
     "glob": "^9.3.0",
     "husky": "^4.3.0",
@@ -85,6 +86,7 @@
     "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache",
     "lint:ts": "yarn lint packages/*/src",
     "lint:versions": "node scripts/verifyPatternflyVersions.js",
+    "lint:tests": "yarn lint packages/*/src/components/*/__tests__/*.test.*",
     "prepare": "ts-patch install -s",
     "serve:docs": "yarn workspace @patternfly/react-docs serve",
     "serve:integration": "lerna run serve:demo-app",

packages/react-core/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -3,10 +3,6 @@ import { render } from '@testing-library/react';
 import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
-  const { asFragment } = render(
-    <AboutModalBox aria-labelledby="id">
-      This is a AboutModalBox
-    </AboutModalBox>
-  );
+  const { asFragment } = render(<AboutModalBox aria-labelledby="id">This is a AboutModalBox</AboutModalBox>);
   expect(asFragment()).toMatchSnapshot();
 });

packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx

@@ -11,8 +11,6 @@ test('Renders children', () => {
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(
-    <AccordionItem>Test</AccordionItem>
-  );
+  const { asFragment } = render(<AccordionItem>Test</AccordionItem>);
   expect(asFragment()).toMatchSnapshot();
 });

packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -19,7 +19,7 @@ test('Alert Group renders without children', () => {
 });
 
 test('Alert Group works with n children', () => {
-  const { asFragment } = render(
+  render(
     <AlertGroup data-testid="container">
       <Alert variant="success" title="alert title" />
       <Alert variant="warning" title="another alert title" />

packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx

@@ -115,10 +115,11 @@ test('Clicking backToTop scrolls back to top of the element passed via scrollabl
   const user = userEvent.setup();
   const wrapper = document.getElementById('backToTopWrapper');
   fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   wrapper!.scrollTo = jest.fn();
   await user.click(screen.getByRole(`button`).parentElement as Element);
 
-  expect(wrapper?.scrollTo).toBeCalledTimes(1);
+  expect(wrapper?.scrollTo).toHaveBeenCalledTimes(1);
 });
 
 test('Passes correct text content to button child component', () => {

packages/react-core/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 
 export enum ButtonVariant {

packages/react-core/src/components/Button/__tests__/Button.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
 import { Button, ButtonVariant } from '../Button';
 
 Object.values(ButtonVariant).forEach((variant) => {

packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx

@@ -57,7 +57,9 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+  render(
+    <CalendarMonth inlineProps={{ component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: 'hi' }} />
+  );
 
   const article = screen.getByRole('article');
   expect(article).toHaveAttribute('aria-labelledby', 'hi');

packages/react-core/src/components/Card/__tests__/CardBody.test.tsx

@@ -30,7 +30,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 

packages/react-core/src/components/Card/__tests__/CardFooter.test.tsx

@@ -27,7 +27,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });

packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx

@@ -115,7 +115,7 @@ test('chip group with closeBtnAriaLabel', () => {
     </ChipGroup>
   );
   expect(screen.getByLabelText('close button aria label')).toBeInTheDocument();
-  expect(screen.getByLabelText('close button aria label')).toHaveAccessibleName("close button aria label category");
+  expect(screen.getByLabelText('close button aria label')).toHaveAccessibleName('close button aria label category');
 });
 
 test('chip group onClick', async () => {
@@ -169,8 +169,6 @@ test('chip group expanded', async () => {
 });
 
 test('overflow chip does not render by default when < 4 children are passed', async () => {
-  const user = userEvent.setup();
-
   render(
     <ChipGroup>
       <Chip>1</Chip>
@@ -183,8 +181,6 @@ test('overflow chip does not render by default when < 4 children are passed', as
 });
 
 test('overflow chip collapsed by default', async () => {
-  const user = userEvent.setup();
-
   render(
     <ChipGroup>
       <Chip>1</Chip>

packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
-import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
 
 const onClickMock = jest.fn();

packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx

@@ -16,13 +16,9 @@ test('disabled date picker', () => {
 test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
   const user = userEvent.setup();
 
-  const rangeValidator = (date: Date) => {
-    return '';
-  };
+  const rangeValidator = (_date: Date) => '';
 
-  const rangeValidatorB = (date: Date) => {
-    return '';
-  };
+  const rangeValidatorB = (_date: Date) => '';
 
   render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
@@ -119,7 +115,7 @@ test('Does not render emptyDateText when requiredDateOptions.isRequired is false
   await user.click(screen.getByRole('textbox'));
   await user.click(document.body);
 
-  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument;
+  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument();
 });
 
 test('Renders text input as invalid on blur when requiredDateOptions.isRequired is true', async () => {

packages/react-core/src/components/Divider/__tests__/Divider.test.tsx

@@ -64,19 +64,8 @@ test(`Test all insets`, () => {
     'inset2xl',
     'inset3xl'
   ] as ['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl']);
-
-  insetValues.forEach((insetValue) => {
-
-    const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
-
-    const classValue = modifiers.forEach((modifier, index) => {
-      const smClass = `pf-m-inset-${modifier}-on-sm`;
-      const mdClass = `pf-m-inset-${modifier}-on-md`;
-      const lgClass = `pf-m-inset-${modifier}-on-lg`;
-      const xlClass = `pf-m-inset-${modifier}-on-xl`;
-      const xl2Class = `pf-m-inset-${modifier}-on-2xl`;
-    });
 
+  insetValues.forEach((insetValue) => {
     render(
       <Divider
         inset={{
@@ -92,7 +81,7 @@ test(`Test all insets`, () => {
   });
   const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 
-  const classValue = modifiers.forEach((modifier, index) => {
+  modifiers.forEach((modifier, index) => {
     const smClass = `pf-m-inset-${modifier}-on-sm`;
     const mdClass = `pf-m-inset-${modifier}-on-md`;
     const lgClass = `pf-m-inset-${modifier}-on-lg`;

packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -10,7 +10,7 @@ import {
   DrawerPanelContent
 } from '../';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
 
@@ -134,13 +134,9 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
 
   const panelContent = (
     <TestContext.Provider value={{}}>
-      <DrawerPanelContent
-        isResizable
-      >
+      <DrawerPanelContent isResizable>
         <DrawerHead>
-          <span>
-            drawer-panel
-          </span>
+          <span>drawer-panel</span>
           <DrawerActions>
             <DrawerCloseButton />
           </DrawerActions>
@@ -163,4 +159,4 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
   await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
 
   expect(consoleError).not.toHaveBeenCalled();
-})
+});

packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dropdown } from '../../Dropdown';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('../../Menu');
@@ -176,7 +176,7 @@ test('onOpenChange is called when passed and user presses tab key', async () =>
     </Dropdown>
   );
 
-  //focus dropdown
+  // focus dropdown
   const dropdown = screen.getByRole('button', { name: 'Dropdown' });
   await user.click(dropdown);
   await user.keyboard('{Tab}');
@@ -194,7 +194,7 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
     </Dropdown>
   );
 
-  //focus dropdown
+  // focus dropdown
   const dropdown = screen.getByRole('button', { name: 'Dropdown' });
   await user.click(dropdown);
   await user.keyboard('{Escape}');