@patternfly/react-core 4.236.1 → 4.236.4

package/src/components/TimePicker/__tests__/TimePicker.test.tsx

@@ -7,7 +7,7 @@ import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
   describe('test timepicker onChange method with valid values', () => {
-    const testOnChange = ({
+    const testOnChange = async ({
       inputProps,
       expects
     }: {
@@ -15,49 +15,51 @@ describe('TimePicker', () => {
       expects: { hour: number; minutes: number; seconds: number };
     }) => {
       const onChange = jest.fn();
+      const user = userEvent.setup();
+
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
-      userEvent.type(screen.getByLabelText('time picker'), String(inputProps.value));
-      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
+      await user.type(screen.getByLabelText('time picker'), String(inputProps.value));
+      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true)
     };
 
-    test('should return the correct value using the AM/PM pattern - midnight', () => {
-      testOnChange({
+    test('should return the correct value using the AM/PM pattern - midnight', async () => {
+      await testOnChange({
         inputProps: { value: '12:00 AM', is24Hour: false },
         expects: { hour: 0, minutes: 0, seconds: null }
       });
     });
 
-    test('should return the correct value using the AM/PM pattern - midday', () => {
-      testOnChange({
+    test('should return the correct value using the AM/PM pattern - midday', async () => {
+      await testOnChange({
         inputProps: { value: '12:35 PM', is24Hour: false },
         expects: { hour: 12, minutes: 35, seconds: null }
       });
     });
 
-    test('should return the correct value using the AM/PM pattern - last minute of the day', () => {
-      testOnChange({
+    test('should return the correct value using the AM/PM pattern - last minute of the day', async () => {
+      await testOnChange({
         inputProps: { value: '11:59 PM', is24Hour: false },
         expects: { hour: 23, minutes: 59, seconds: null }
       });
     });
 
-    test('should return the correct value using the 24h pattern - midnight', () => {
-      testOnChange({
+    test('should return the correct value using the 24h pattern - midnight', async () => {
+      await testOnChange({
         inputProps: { value: '00:00:00', is24Hour: true, includeSeconds: true },
         expects: { hour: 0, minutes: 0, seconds: 0 }
       });
     });
 
-    test('should return the correct value using the 24h pattern - midday', () => {
-      testOnChange({
+    test('should return the correct value using the 24h pattern - midday', async () => {
+      await testOnChange({
         inputProps: { value: '12:35', is24Hour: false },
         expects: { hour: 12, minutes: 35, seconds: null }
       });
     });
 
-    test('should return the correct value using the 24h pattern - last minute of the day', () => {
-      testOnChange({
+    test('should return the correct value using the 24h pattern - last minute of the day', async () => {
+      await testOnChange({
         inputProps: { value: '23:59', is24Hour: true },
         expects: { hour: 23, minutes: 59, seconds: null }
       });
@@ -75,16 +77,17 @@ describe('TimePicker', () => {
       expect(screen.getByLabelText('time picker')).not.toHaveClass('pf-m-error');
     });
 
-    test('should stay valid after onChange', () => {
+    test('should stay valid after onChange', async () => {
       const validateTime = (_time: string) => {
         return true;
       };
+      const user = userEvent.setup();
 
       render(<TimePicker value="00:00" validateTime={validateTime} aria-label="time picker" />);
 
       const input = screen.getByLabelText('time picker');
 
-      userEvent.type(input, '01:00');
+      await user.type(input, '01:00');
       expect(input).not.toHaveClass('pf-m-error');
     });
 
@@ -92,6 +95,7 @@ describe('TimePicker', () => {
       const validateTime = (_time: string) => {
         return false;
       };
+      const user = userEvent.setup();
 
       render(
         <>
@@ -100,10 +104,10 @@ describe('TimePicker', () => {
         </>
       );
 
-      userEvent.type(screen.getByLabelText('time picker'), '01:00');
+      await user.type(screen.getByLabelText('time picker'), '01:00');
       expect(screen.queryByText('Invalid time format')).toBeNull();
 
-      userEvent.click(screen.getByText('Other element'));
+      await user.click(screen.getByText('Other element'));
       expect(screen.getByText('Invalid time format')).toBeInTheDocument();
     });
   });
@@ -115,21 +119,27 @@ describe('TimePicker', () => {
       includeSeconds: true
     };
 
-    it('should be valid still with a max value of "11:59:59 PM" by default', () => {
+    it('should be valid still with a max value of "11:59:59 PM" by default', async () => {
+      const user = userEvent.setup();
+
       render(<TimePicker {...baseProps} />);
 
-      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '11:59:59 PM');
+      await user.type(screen.getByLabelText(baseProps['aria-label']), '11:59:59 PM');
       expect(screen.queryByText('Invalid time format')).toBeNull();
     });
 
-    it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', () => {
+    it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', async () => {
+      const user = userEvent.setup();
+
       render(<TimePicker {...baseProps} value="20:00" is24Hour />);
 
-      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '23:59:59');
+      await user.type(screen.getByLabelText(baseProps['aria-label']), '23:59:59');
       expect(screen.queryByText('Invalid time format')).toBeNull();
     });
 
-    it('should be invalid with a max value of "24:00:00" by default', () => {
+    it('should be invalid with a max value of "24:00:00" by default', async () => {
+      const user = userEvent.setup();
+
       render(
         <>
           <div>Other element</div>
@@ -137,10 +147,10 @@ describe('TimePicker', () => {
         </>
       );
 
-      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '24:00:00');
+      await user.type(screen.getByLabelText(baseProps['aria-label']), '24:00:00');
       expect(screen.queryByText('Invalid time format')).toBeNull();
 
-      userEvent.click(screen.getByText('Other element'));
+      await user.click(screen.getByText('Other element'));
       expect(screen.getByText('Invalid time format')).toBeInTheDocument();
     });
   });

package/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -40,12 +40,14 @@ describe('ToggleGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('item passes selection and event to onChange handler', () => {
+  test('item passes selection and event to onChange handler', async () => {
+    const user = userEvent.setup();
+    
     render(
       <ToggleGroupItem text="test" buttonId="toggleGroupItem" onChange={props.onChange} aria-label="onChange handler" />
     );
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 

package/src/components/Tooltip/Tooltip.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 import { css } from '@patternfly/react-styles';
 import { TooltipContent } from './TooltipContent';
 import { TooltipArrow } from './TooltipArrow';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { ReactElement } from 'react';
 import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
@@ -209,13 +209,13 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
 
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
-      if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
+      if (event.key === KeyTypes.Escape && visible) {
         hide();
       }
     }
   };
   const onTriggerEnter = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       if (!visible) {
         show();
       } else {

package/src/components/Wizard/Wizard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { Modal, ModalVariant } from '../Modal';
@@ -178,7 +178,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   }
 
   private handleKeyClicks = (event: KeyboardEvent): void => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY) {
+    if (event.key === KeyTypes.Escape) {
       if (this.state.isNavOpen) {
         this.setState({ isNavOpen: !this.state.isNavOpen });
       } else if (this.props.isOpen) {

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -223,13 +223,14 @@ describe('Wizard', () => {
     expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
   });
 
-  test('wiz with onCurrentStepChanged setter', () => {
+  test('wiz with onCurrentStepChanged setter', async () => {
     const stepA = { name: 'A', component: <p>Step 1</p> };
     const stepB = { name: 'B', component: <p>Step 2</p> };
     const stepC = { name: 'C', component: <p>Step 3</p> };
 
     const steps: WizardStep[] = [ stepA, stepB, stepC ];
     const setter = jest.fn();
+    const user = userEvent.setup();
 
     render(
         <Wizard
@@ -239,15 +240,15 @@ describe('Wizard', () => {
         />
     );
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-    userEvent.click(screen.getByText(/next/i));
+    await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
-    userEvent.click(screen.getByText(/next/i));
+    await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepC));
-    userEvent.click(screen.getByText('A'));
+    await user.click(screen.getByText('A'));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
-    userEvent.click(screen.getByText(/next/i));
+    await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
-    userEvent.click(screen.getByText(/back/i));
+    await user.click(screen.getByText(/back/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
   });
 });
@@ -274,14 +275,15 @@ describe('Wizard', () => {
     expect(screen.getByRole('button',{ name: "E" })).toBeDisabled();
   });
 
-  test('wiz skip the step disabled when press the next/back button', () => {
+  test('wiz skip the step disabled when press the next/back button', async () => {
     const steps: WizardStep[] = [
       { name: 'A', component: <p>Step 1</p>},
       { name: 'B', component: <p>Step 2</p>, isDisabled: true },
       { name: 'C', component: <p>Step 3</p>},
 
     ];
-    
+    const user = userEvent.setup();
+
     render(
       <Wizard
         navAriaLabel="nav aria-label"
@@ -290,19 +292,20 @@ describe('Wizard', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
     expect(screen.getByRole('button',{ name: "C" })).toHaveClass('pf-m-current')
 
-    userEvent.click(screen.getByRole('button', { name: 'Back' }));
+    await user.click(screen.getByRole('button', { name: 'Back' }));
     expect(screen.getByRole('button',{ name: "A" })).toHaveClass('pf-m-current')
   });
   
-  test('wiz skip the step when click on the nav item disabled', () => {
+  test('wiz skip the step when click on the nav item disabled', async () => {
     const steps: WizardStep[] = [
       { name: 'A', component: <p>Step 1</p>},
       { name: 'B', component: <p>Step 2</p>, isDisabled: true },
       { name: 'C', component: <p>Step 3</p>}
     ];
+    const user = userEvent.setup();
     
     render(
       <Wizard
@@ -315,7 +318,7 @@ describe('Wizard', () => {
     const navItemButton = screen.getByRole('button',{ name: "B" })
     const navItemButtonSelected = screen.getByRole('button',{ name: "A" })
     
-    userEvent.click(navItemButton);
+    await user.click(navItemButton);
 
     expect(navItemButton).not.toHaveClass('pf-m-current')
     expect(navItemButtonSelected).toHaveClass('pf-m-current')
@@ -343,7 +346,7 @@ describe('Wizard', () => {
     expect(screen.getByRole('button',{ name: "A-2" })).toBeDisabled();
   });
 
-test('startAtStep can be used to externally control the current step of the wizard', () => {
+test('startAtStep can be used to externally control the current step of the wizard', async () => {
   const WizardTest = () => {
     const [step, setStep] = React.useState(1);
 
@@ -364,12 +367,13 @@ test('startAtStep can be used to externally control the current step of the wiza
       </>
     );
   };
+  const user = userEvent.setup();
 
   render(<WizardTest />);
 
   expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('button', { name: 'Increment step'}))
+  await user.click(screen.getByRole('button', { name: 'Increment step'}))
 
   expect(screen.getByText('Step 2')).toBeVisible();
 });

package/src/demos/PrimaryDetail.md

@@ -1264,7 +1264,7 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
 
-      if ([13, 32].includes(event.keyCode)) {
+      if (['Enter', ' '].includes(event.key)) {
         if (event.currentTarget.id === this.state.activeCard) {
           this.setState({
             isDrawerExpanded: !this.state.isDrawerExpanded,

package/src/next/components/Wizard/__tests__/Wizard.test.tsx

@@ -202,7 +202,8 @@ describe('Wizard', () => {
     expect(wizard).toHaveStyle('width: 500px');
   });
 
-  it('calls onNavByIndex on nav item click', () => {
+  it('calls onNavByIndex on nav item click', async () => {
+    const user = userEvent.setup();
     const onNavByIndex = jest.fn();
 
     render(
@@ -212,11 +213,12 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
     expect(onNavByIndex).toHaveBeenCalled();
   });
 
-  it('calls onNext and not onSave on next button click when not on the last step', () => {
+  it('calls onNext and not onSave on next button click when not on the last step', async () => {
+    const user = userEvent.setup();
     const onNext = jest.fn();
     const onSave = jest.fn();
 
@@ -227,13 +229,14 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
 
     expect(onNext).toHaveBeenCalled();
     expect(onSave).not.toHaveBeenCalled();
   });
 
-  it('calls onBack on back button click', () => {
+  it('calls onBack on back button click', async () => {
+    const user = userEvent.setup();
     const onBack = jest.fn();
 
     render(
@@ -243,13 +246,14 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
-    userEvent.click(screen.getByRole('button', { name: 'Back' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Back' }));
 
     expect(onBack).toHaveBeenCalled();
   });
 
-  it('calls onSave and not onClose on next button click when on the last step', () => {
+  it('calls onSave and not onClose on next button click when on the last step', async () => {
+    const user = userEvent.setup();
     const onSave = jest.fn();
     const onClose = jest.fn();
 
@@ -260,14 +264,15 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
 
     expect(onSave).toHaveBeenCalled();
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it('calls onClose when onSave is not specified on next button click when on the last step', () => {
+  it('calls onClose when onSave is not specified on next button click when on the last step', async () => {
+    const user = userEvent.setup();
     const onClose = jest.fn();
 
     render(
@@ -277,13 +282,14 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Test step 2' }));
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
 
     expect(onClose).toHaveBeenCalled();
   });
 
-  it('calls onClose on cancel link click', () => {
+  it('calls onClose on cancel link click', async () => {
+    const user = userEvent.setup();
     const onClose = jest.fn();
 
     render(
@@ -292,7 +298,7 @@ describe('Wizard', () => {
       </Wizard>
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(onClose).toHaveBeenCalled();
   });
 });