@patternfly/react-core 4.236.2 → 4.236.5

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

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Pagination, PaginationVariant } from '../index';
+import { KeyTypes } from '../../../helpers';
 
 describe('Pagination', () => {
   describe('component render', () => {
@@ -117,166 +118,204 @@ describe('Pagination', () => {
     describe('onSetPage', () => {
       const onSetPage = jest.fn();
 
-      test('should call first', () => {
+      test('should call first', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call previous', () => {
+      test('should call previous', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} page={3} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call next', () => {
+      test('should call next', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to next page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call last', () => {
+      test('should call last', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input', () => {
+      test('should call input', async () => {
+        const user = userEvent.setup();
+        
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '1');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '1');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input wrong value', () => {
+      test('should call input wrong value', async () => {
+        const user = userEvent.setup();
+        
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, 'a');
-        userEvent.type(input, '{enter}');
+        await user.type(input, 'a');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input huge page number', () => {
+      test('should call input huge page number', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '10');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '10');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should call input small page number', () => {
+      test('should call input small page number', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onSetPage={onSetPage} itemCount={40} />);
 
         const input = screen.getByLabelText('Current page');
-        userEvent.type(input, '-10');
-        userEvent.type(input, '{enter}');
+        await user.type(input, '-10');
+        await user.type(input, `{${KeyTypes.Enter}}`);
 
         expect(onSetPage).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onSetPage).not.toHaveBeenCalled();
       });
     });
 
     describe('onFirst', () => {
       const onFirst = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onFirstClick={onFirst} itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onFirst).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} page={2} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to first page' }));
         expect(onFirst).not.toHaveBeenCalled();
       });
     });
 
     describe('onLast', () => {
       const onLast = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onLastClick={onLast} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onLast).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to last page' }));
         expect(onLast).not.toHaveBeenCalled();
       });
     });
 
     describe('onPrevious', () => {
       const onPrevious = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onPreviousClick={onPrevious} itemCount={40} page={3} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onPrevious).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onPrevious).not.toHaveBeenCalled();
       });
     });
 
     describe('onNext', () => {
       const onNext = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onNextClick={onNext} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to next page' }));
         expect(onNext).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        await user.click(screen.getByRole('button', { name: 'Go to previous page' }));
         expect(onNext).not.toHaveBeenCalled();
       });
     });
 
     describe('onPerPage', () => {
       const onPerPage = jest.fn();
-      test('should call', () => {
+      test('should call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination onPerPageSelect={onPerPage} itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
-        userEvent.click(screen.getByText('20 per page'));
+        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).toHaveBeenCalled();
       });
 
-      test('should NOT call', () => {
+      test('should NOT call', async () => {
+        const user = userEvent.setup();
+
         render(<Pagination itemCount={40} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
-        userEvent.click(screen.getByText('20 per page'));
+        await user.click(screen.getByRole('button', { name: 'Items per page' }));
+        await user.click(screen.getByText('20 per page'));
 
         expect(onPerPage).not.toHaveBeenCalled();
       });

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

@@ -73,10 +73,12 @@ describe('Radio', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Radio passes value and event to onChange handler', () => {
+  test('Radio passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+
     render(<Radio id="check" {...props} aria-label="check" name="check" />);
 
-    userEvent.click(screen.getByRole('radio'));
+    await user.click(screen.getByRole('radio'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
-import { GenerateId, KEY_CODES } from '../../helpers';
+import { GenerateId, KeyTypes } from '../../helpers';
 import { SearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -107,10 +107,9 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   };
 
   const onEscPress = (event: KeyboardEvent) => {
-    const keyCode = event.keyCode || event.which;
     if (
       isSearchMenuOpen &&
-      keyCode === KEY_CODES.ESCAPE_KEY &&
+      event.key === KeyTypes.Escape &&
       parentRef &&
       parentRef.current.contains(event.target as Node)
     ) {

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

@@ -33,20 +33,22 @@ describe('SearchInput', () => {
     expect(screen.getByTestId('test-id').querySelector('.pf-c-badge')).toBeInTheDocument();
   });
 
-  test('navigable search results', () => {
+  test('navigable search results', async () => {
+    const user = userEvent.setup();
+
     render(<SearchInput {...props} resultsCount="3 / 7" aria-label="simple text input" data-testid="test-id" />);
 
     const input = screen.getByTestId('test-id');
     expect(input.querySelector('.pf-c-text-input-group__group')).toBeInTheDocument();
     expect(input.querySelector('.pf-c-badge')).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', { name: 'Previous' }));
+    await user.click(screen.getByRole('button', { name: 'Previous' }));
     expect(props.onPreviousClick).toHaveBeenCalled();
 
-    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    await user.click(screen.getByRole('button', { name: 'Next' }));
     expect(props.onNextClick).toHaveBeenCalled();
 
-    userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+    await user.click(screen.getByRole('button', { name: 'Reset' }));
     expect(props.onClear).toHaveBeenCalled();
   });
 
@@ -57,7 +59,9 @@ describe('SearchInput', () => {
     expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
   });
 
-  test('advanced search', () => {
+  test('advanced search', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <SearchInput
         attributes={[
@@ -72,13 +76,15 @@ describe('SearchInput', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+    await user.click(screen.getByRole('button', { name: 'Search' }));
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('advanced search with custom attributes', () => {
+  test('advanced search with custom attributes', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <SearchInput
         data-testid="test-id"
@@ -101,45 +107,37 @@ describe('SearchInput', () => {
       />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Search' }));
+    await user.click(screen.getByRole('button', { name: 'Search' }));
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
     expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('advanced search with custom attributes and appendTo="inline', () => {
-    const {container}  = render(
-    <SearchInput
-        data-testid="test-id"
-        attributes={[
-          { attr: 'test', display: 'test' },
-        ]}
-        appendTo='inline'
-      />
+  test('advanced search with custom attributes and appendTo="inline', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    
-    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'))
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'));
   });
 
-  test('advanced search with custom attributes and appendTo external DOM element', () => {
-    const {container}  = render(
-    <SearchInput
-        data-testid="test-id"
-        attributes={[
-          { attr: 'test', display: 'test' },
-        ]}
-        appendTo={document.body}
-      />
+  test('advanced search with custom attributes and appendTo external DOM element', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(
+      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    
-    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'))
-    expect(document.body).toContainElement(screen.getByText('test'))
+    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+
+    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'));
+    expect(document.body).toContainElement(screen.getByText('test'));
   });
 });

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -243,7 +243,10 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
     </div>
     <span
       class=""
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px;"
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
     >
       <div
         class="pf-c-panel pf-m-raised"

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

@@ -7,6 +7,7 @@ import { Select } from '../Select';
 import { SelectOption, SelectOptionObject } from '../SelectOption';
 import { SelectGroup } from '../SelectGroup';
 import { SelectVariant, SelectDirection } from '../selectConstants';
+import { KeyTypes } from '../../../helpers';
 
 class User implements SelectOptionObject {
   private firstName: string;
@@ -107,7 +108,7 @@ describe('Select', () => {
   });
 
   describe('custom select filter', () => {
-    test('filters properly', () => {
+    test('filters properly', async () => {
       const customFilter = (e: React.ChangeEvent<HTMLInputElement>, value: string) => {
         let input: RegExp;
         try {
@@ -121,6 +122,8 @@ describe('Select', () => {
             : selectOptions;
         return typeaheadFilteredChildren;
       };
+      const user = userEvent.setup();
+
       render(
         <Select
           toggleId="custom-select-filters"
@@ -136,7 +139,7 @@ describe('Select', () => {
         </Select>
       );
 
-      userEvent.type(screen.getByTestId('test-id').querySelector('input'), 'r');
+      await user.type(screen.getByTestId('test-id').querySelector('input'), 'r');
 
       expect(screen.getByText('Mr')).toBeInTheDocument();
       expect(screen.getByText('Mrs')).toBeInTheDocument();
@@ -333,7 +336,9 @@ describe('typeahead select', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('test select existing option on a non-creatable select', () => {
+  test('test select existing option on a non-creatable select', async () => {
+    const user = userEvent.setup();
+
     render(
       <Select variant={SelectVariant.typeahead} onToggle={jest.fn()} isOpen ouiaId="test-id">
         {selectOptions}
@@ -341,8 +346,8 @@ describe('typeahead select', () => {
     );
 
     const input = screen.getByTestId('test-id').querySelector('input');
-    userEvent.type(input, 'Other');
-    userEvent.type(input, '{enter}');
+    await user.type(input, 'Other');
+    await user.type(input, `{${KeyTypes.Enter}}`);
 
     expect(screen.getByText('Other')).toBeVisible();
   });
@@ -392,9 +397,10 @@ describe('typeahead multi select', () => {
 });
 
 describe('API', () => {
-  test('click on item', () => {
+  test('click on item', async () => {
     const mockToggle = jest.fn();
     const mockSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <Select variant="single" onToggle={mockToggle} onSelect={mockSelect} isOpen ouiaId="test-id">
@@ -402,7 +408,7 @@ describe('API', () => {
       </Select>
     );
 
-    userEvent.click(screen.getByRole('option', { name: 'Mr' }));
+    await user.click(screen.getByRole('option', { name: 'Mr' }));
 
     expect(mockToggle).not.toHaveBeenCalled();
     expect(mockSelect).toHaveBeenCalled();
@@ -517,7 +523,9 @@ describe('select with placeholder', () => {
   });
 });
 
-test('applies focus styling to the create option when reached via keyboard navigation', () => {
+test('applies focus styling to the create option when reached via keyboard navigation', async () => {
+  const user = userEvent.setup();
+  
   render(
     <Select
       variant={SelectVariant.typeahead}
@@ -530,7 +538,7 @@ test('applies focus styling to the create option when reached via keyboard navig
   );
 
   const input = screen.getByRole('textbox');
-  userEvent.type(input, 'a{arrowdown}');
+  await user.type(input, `a{${KeyTypes.ArrowDown}}`);
 
   const createOption = screen.getByRole('option', { name: 'Create "a"' });
 

package/src/components/Select/__tests__/SelectToggle.test.tsx

@@ -7,20 +7,24 @@ import { SelectToggle } from '../SelectToggle';
 
 describe('SelectToggle', () => {
   describe('API', () => {
-    test('click on closed', () => {
+    test('click on closed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
+
       render(
         <SelectToggle id="Select Toggle" onToggle={mockToggle} parentRef={{ current: document.createElement('div') }}>
           Select
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle).toHaveBeenCalledWith(true, expect.any(Object));
     });
 
-    test('click on opened', () => {
+    test('click on opened', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
+
       render(
         <SelectToggle
           id="Select Toggle"
@@ -32,12 +36,13 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('button'));
       expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
 
-    test('click on document', () => {
+    test('click on document', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <SelectToggle
@@ -50,12 +55,13 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByText('Select').parentElement);
+      await user.click(screen.getByText('Select').parentElement);
       expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
 
-    test('on click outside has been removed', () => {
+    test('on click outside has been removed', async () => {
       const mockToggle = jest.fn();
+      const user = userEvent.setup();
 
       render(
         <SelectToggle
@@ -68,7 +74,7 @@ describe('SelectToggle', () => {
         </SelectToggle>
       );
 
-      userEvent.click(screen.getByText('Select').parentElement);
+      await user.click(screen.getByText('Select').parentElement);
       expect(mockToggle).not.toHaveBeenCalled();
     });
   });

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

@@ -40,12 +40,13 @@ describe('SimpleList', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('onSelect is called when item is selected', () => {
+  test('onSelect is called when item is selected', async () => {
     const onSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(<SimpleList onSelect={onSelect}>{items}</SimpleList>);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onSelect).toHaveBeenCalled();
   });
 
@@ -54,12 +55,13 @@ describe('SimpleList', () => {
     expect(screen.getAllByRole('link').length).toEqual(3);
   });
 
-  test('onSelect is called when anchor item is selected', () => {
+  test('onSelect is called when anchor item is selected', async () => {
     const onSelect = jest.fn();
+    const user = userEvent.setup();
 
     render(<SimpleList onSelect={onSelect}>{anchors}</SimpleList>);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await user.click(screen.getByText('Item 1'));
     expect(onSelect).toHaveBeenCalled();
   });
 });

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

@@ -75,10 +75,12 @@ describe('Switch', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('switch passes value and event to onChange handler', () => {
+  test('switch passes value and event to onChange handler', async () => {
+    const user = userEvent.setup();
+    
     render(<Switch id="onChange-switch" {...props} aria-label="Switch label" />);
 
-    userEvent.click(screen.getByLabelText('Switch label'));
+    await user.click(screen.getByLabelText('Switch label'));
     expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
   });
 

package/src/components/Tabs/OverflowTab.tsx

@@ -88,6 +88,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
       {...props}
     >
       <button
+        type="button"
         className={css(styles.tabsLink, isExpanded && styles.modifiers.expanded)}
         onClick={() => toggleMenu()}
         aria-label={toggleAriaLabel}

package/src/components/Tabs/TabButton.tsx

@@ -26,7 +26,12 @@ export const TabButton: React.FunctionComponent<TabButtonProps> = ({
   const Component = (props.href ? 'a' : 'button') as any;
 
   return (
-    <Component ref={parentInnerRef} {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
+    <Component
+      {...(!props.href && { type: 'button' })}
+      ref={parentInnerRef}
+      {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)}
+      {...props}
+    >
       {children}
     </Component>
   );