chore(deps): update dependency @testing-library/user-event (patternfl…

…y#7840) * chore(deps): update dependency @testing-library/user-event * fix AboutModal * fix Modal * fix other breaking changes * await transformers test helper assertion * update key press events * further transition from using .keyCode to .key * fix dropdown integration tests * revert some usage of .trigger to .type * rebase * resolve failing test in user-event v14.4.3 * improve fireEvent usage explanation * update tests to use KeyTypes constant * add missed KeyTypes
arnthor-agustsson · Sep 2, 2022 · 3b1df2c · 3b1df2c
1 parent a094872
commit 3b1df2c
Show file tree

Hide file tree

Showing 77 changed files with 647 additions and 434 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@octokit/rest": "^16.43.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/jest": "27.0.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",

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
@@ -104,8 +104,9 @@ test('CatalogTile href renders properly', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('CatalogTile onClick behaves properly', () => {
+test('CatalogTile onClick behaves properly', async () => {
   const onClickMock = jest.fn();
+  const user = userEvent.setup();
 
   render(
     <CatalogTile
@@ -119,6 +120,6 @@ test('CatalogTile onClick behaves properly', () => {
     />
   );
 
-  userEvent.click(screen.getByText('Patternfly'));
+  await user.click(screen.getByText('Patternfly'));
   expect(onClickMock).toHaveBeenCalled();
 });
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
@@ -84,11 +84,12 @@ test('Vertical Tabs renders restricted tabs properly', () => {
   expect(component.container).toMatchSnapshot();
 });
 
-test('Vertical Tabs Tab onActivate is called correctly', () => {
+test('Vertical Tabs Tab onActivate is called correctly', async () => {
   const onActivateMock = jest.fn();
+  const user = userEvent.setup();
 
   const component = render(<VerticalTabsTab id="text-click" title="Click Me" onActivate={onActivateMock} />);
-  userEvent.click(screen.getByText('Click Me'));
+  await user.click(screen.getByText('Click Me'));
 
   expect(component.container).toMatchSnapshot();
   expect(onActivateMock).toHaveBeenCalled();

diff --git a/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx b/packages/react-console/src/components/AccessConsoles/__tests__/AccessConsoles.test.tsx
@@ -72,7 +72,9 @@ describe('AccessConsoles', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('switching SerialConsole and VncConsole', () => {
+  test('switching SerialConsole and VncConsole', async () => {
+    const user = userEvent.setup();
+
     render(
       <AccessConsoles>
         <MyVncConsoleTestWrapper />
@@ -85,8 +87,8 @@ describe('AccessConsoles', () => {
     expect(screen.getByText('VNC console text')).toBeInTheDocument();
 
     // Open dropdown and select "Serial console" option
-    userEvent.click(screen.getByRole('button', { name: 'Options menu' }));
-    userEvent.click(screen.getByText('Serial console', { selector: 'button' }));
+    await user.click(screen.getByRole('button', { name: 'Options menu' }));
+    await user.click(screen.getByText('Serial console', { selector: 'button' }));
 
     // VNC content is no longer visible, and loading contents of the Serial console are visible.
     expect(screen.getByText(/Loading/)).toBeInTheDocument();

diff --git a/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx b/packages/react-console/src/components/DesktopViewer/__tests__/DesktopViewer.test.tsx
@@ -52,29 +52,33 @@ describe('DesktopViewer', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('launch button', () => {
+  test('launch button', async () => {
     const onDownload = jest.fn();
     const onGenerate = jest.fn().mockReturnValue({ content: 'Foo' });
+    const user = userEvent.setup();
 
     render(<DesktopViewer spice={spice} vnc={vnc} onDownload={onDownload} onGenerate={onGenerate} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Launch Remote Viewer' }));
+    await user.click(screen.getByRole('button', { name: 'Launch Remote Viewer' }));
     expect(onGenerate).toHaveBeenCalledTimes(1);
     expect(onDownload).toHaveBeenCalledTimes(1);
   });
 
-  test('RDP launch button', () => {
+  test('RDP launch button', async () => {
     const onDownload = jest.fn();
     const onGenerate = jest.fn().mockReturnValue({ content: 'Foo' });
+    const user = userEvent.setup();
 
     render(<DesktopViewer rdp={rdp} onDownload={onDownload} onGenerate={onGenerate} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Launch Remote Desktop' }));
+    await user.click(screen.getByRole('button', { name: 'Launch Remote Desktop' }));
     expect(onGenerate).toHaveBeenCalledTimes(1);
     expect(onDownload).toHaveBeenCalledTimes(1);
   });
 
-  test('with custom more-info content', () => {
+  test('with custom more-info content', async () => {
+    const user = userEvent.setup();
+
     render(
       <DesktopViewer spice={spice} vnc={vnc}>
         <p id="custom-more-info">My more-info content</p>
@@ -83,7 +87,7 @@ describe('DesktopViewer', () => {
 
     expect(screen.queryByText('My more-info content')).toBeNull();
 
-    userEvent.click(screen.getByRole('button', { name: 'Remote Viewer Details' }));
+    await user.click(screen.getByRole('button', { name: 'Remote Viewer Details' }));
     // If one of the items is shown in the description list, the rest will be in the document as well.
     expect(screen.getByText('RHEL, CentOS')).toBeInTheDocument();
   });

diff --git a/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx b/packages/react-console/src/components/VncConsole/__tests__/VncActions.test.tsx
@@ -35,8 +35,9 @@ describe('VncActions', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('VncActions calls ctrl+alt+del action', () => {
+  test('VncActions calls ctrl+alt+del action', async () => {
     const onCtrlAltDel = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <VncActions
@@ -47,8 +48,8 @@ describe('VncActions', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'My Send Shortcut description' }));
-    userEvent.click(screen.getByText('CtrlAltDel'));
+    await user.click(screen.getByRole('button', { name: 'My Send Shortcut description' }));
+    await user.click(screen.getByText('CtrlAltDel'));
 
     expect(onCtrlAltDel).toHaveBeenCalledTimes(1);
   });

diff --git a/packages/react-core/src/components/AboutModal/AboutModal.tsx b/packages/react-core/src/components/AboutModal/AboutModal.tsx
@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { canUseDOM } from '../../helpers';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { AboutModalContainer } from './AboutModalContainer';
 import { PickOptional } from '../../helpers/typeUtils';
 
@@ -71,7 +71,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
   }
 
   handleEscKeyClick = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
       this.props.onClose();
     }
   };

diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModal.test.tsx
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { AboutModal, AboutModalProps } from '../AboutModal';
+import { KeyTypes } from '../../../helpers';
 
 const props: AboutModalProps = {
   onClose: jest.fn(),
@@ -15,10 +16,12 @@ const props: AboutModalProps = {
 };
 
 describe('AboutModal', () => {
-  test('closes with escape', () => {
+  test('closes with escape', async () => {
+    const user = userEvent.setup();
+
     render(<AboutModal {...props} isOpen />);
 
-    userEvent.type(screen.getByRole('dialog'), '{esc}');
+    await user.type(screen.getByRole('dialog'), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 

diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
@@ -52,8 +52,9 @@ describe('Alert', () => {
         expect(asFragment()).toMatchSnapshot();
       });
 
-      test('Action Close Button', () => {
+      test('Action Close Button', async () => {
         const onClose = jest.fn();
+        const user = userEvent.setup();
 
         render(
           <Alert
@@ -65,7 +66,7 @@ describe('Alert', () => {
           </Alert>
         );
 
-        userEvent.click(screen.getByLabelText('Close'));
+        await user.click(screen.getByLabelText('Close'));
         expect(onClose).toHaveBeenCalled();
       });
 

diff --git a/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/AlertGroup/__tests__/AlertGroup.test.tsx
@@ -23,9 +23,10 @@ describe('AlertGroup', () => {
     expect(asFragment()).toBeTruthy();
   });
 
-  test('Alert group overflow shows up', () => {
+  test('Alert group overflow shows up', async () => {
     const overflowMessage = 'View 2 more alerts';
     const onOverflowClick = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
@@ -38,7 +39,7 @@ describe('AlertGroup', () => {
     const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
     expect(overflowButton).toBeInTheDocument();
 
-    userEvent.click(overflowButton);
+    await user.click(overflowButton);
     expect(onOverflowClick).toHaveBeenCalled();
   });
 
@@ -62,8 +63,9 @@ describe('AlertGroup', () => {
     expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
   });
 
-  test('alertgroup closes when alerts are closed', () => {
+  test('alertgroup closes when alerts are closed', async () => {
     const onClose = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <AlertGroup isToast appendTo={document.body}>
@@ -75,7 +77,7 @@ describe('AlertGroup', () => {
       </AlertGroup>
     );
 
-    userEvent.click(screen.getByLabelText('Close'));
+    await user.click(screen.getByLabelText('Close'));
     expect(onClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx b/packages/react-core/src/components/Card/examples/CardLegacySelectable.tsx
@@ -19,7 +19,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if ([13, 32].includes(event.keyCode)) {
+    if (['Enter', ' '].includes(event.key)) {
       event.preventDefault();
       const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
       setSelected(newSelected);

diff --git a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -67,11 +67,13 @@ describe('Checkbox', () => {
     expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
   });
 
-  test('checkbox onChange handler called when component is clicked', () => {
+  test('checkbox onChange handler called when component is clicked', async () => {
     const onChangeHandler = jest.fn();
+    const user = userEvent.setup();
+
     render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
 
-    userEvent.click(screen.getByLabelText('check'));
+    await user.click(screen.getByLabelText('check'));
     expect(onChangeHandler).toHaveBeenCalled();
   });
 

diff --git a/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx b/packages/react-core/src/components/ChipGroup/__tests__/ChipGroup.test.tsx
@@ -35,7 +35,9 @@ describe('ChipGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('chip group expanded', () => {
+  test('chip group expanded', async () => {
+    const user = userEvent.setup();
+
     render(
       <ChipGroup>
         <Chip>1</Chip>
@@ -48,7 +50,7 @@ describe('ChipGroup', () => {
     const moreText = screen.getByText('1 more');
     expect(moreText).toBeInTheDocument();
 
-    userEvent.click(moreText);
+    await user.click(moreText);
     expect(screen.getByText('Show Less')).toBeInTheDocument();
   });
 

diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx
@@ -22,14 +22,16 @@ test('copy button render', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('copy button onClick', () => {
+test('copy button onClick', async () => {
   const onclick = jest.fn();
+  const user = userEvent.setup();
+
   render(
     <ClipboardCopyButton {...props} onClick={onclick}>
       Copy to Clipboard
     </ClipboardCopyButton>
   );
 
-  userEvent.click(screen.getByRole('button'));
+  await user.click(screen.getByRole('button'));
   expect(onclick).toHaveBeenCalled();
 });
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
@@ -22,11 +22,13 @@ describe('ClipboardCopyToggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('toggle button onClick', () => {
+  test('toggle button onClick', async () => {
     const onclick = jest.fn();
+    const user = userEvent.setup();
+
     render(<ClipboardCopyToggle {...props} onClick={onclick} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onclick).toHaveBeenCalled();
   });
 

diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -8,7 +8,7 @@ import { ContextSelectorContext } from './contextSelectorConstants';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { FocusTrap, getUniqueId } from '../../helpers';
 import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -102,7 +102,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   popperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
   onEnterPressed = (event: any) => {
-    if (event.charCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       this.props.onSearchButtonClick();
     }
   };

diff --git a/packages/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx b/packages/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { PickOptional } from '../../helpers/typeUtils';
 
 export interface ContextSelectorToggleProps {
@@ -67,25 +67,21 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
 
   onEscPress = (event: any) => {
     const { isOpen, onToggle } = this.props;
-    const keyCode = event.keyCode || event.which;
-    if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY) {
+    if (isOpen && event.key === KeyTypes.Escape) {
       onToggle(null, false);
       this.toggle.current.focus();
     }
   };
 
   onKeyDown = (event: any) => {
     const { isOpen, onToggle, onEnter } = this.props;
-    if ((event.keyCode === KEY_CODES.TAB && !isOpen) || event.key !== KEY_CODES.ENTER) {
+    if ((event.key === KeyTypes.Tab && !isOpen) || event.key !== KeyTypes.Enter) {
       return;
     }
     event.preventDefault();
-    if (
-      (event.keyCode === KEY_CODES.TAB || event.keyCode === KEY_CODES.ENTER || event.key !== KEY_CODES.SPACE) &&
-      isOpen
-    ) {
+    if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key !== KeyTypes.Space) && isOpen) {
       onToggle(null, !isOpen);
-    } else if ((event.keyCode === KEY_CODES.ENTER || event.key === ' ') && !isOpen) {
+    } else if ((event.key === KeyTypes.Enter || event.key === ' ') && !isOpen) {
       onToggle(null, !isOpen);
       onEnter();
     }

diff --git a/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx b/packages/react-core/src/components/ContextSelector/__tests__/ContextSelector.test.tsx
@@ -25,11 +25,13 @@ describe('ContextSelector', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Verify onToggle is called ', () => {
+  test('Verify onToggle is called ', async () => {
     const mockfn = jest.fn();
+    const user = userEvent.setup();
+
     render(<ContextSelector onToggle={mockfn}>{items}</ContextSelector>);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(mockfn.mock.calls).toHaveLength(1);
   });
 });