chore(eslint): Added React Testing Library linter plugin

.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}');