@patternfly/react-core 4.236.1 → 4.236.4

package/src/components/Tabs/Tabs.tsx

@@ -463,6 +463,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           )}
           {!isOverflowHorizontal && (
             <button
+              type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
               aria-label={leftScrollAriaLabel}
               onClick={this.scrollLeft}
@@ -478,6 +479,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           </ul>
           {!isOverflowHorizontal && (
             <button
+              type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
               aria-label={rightScrollAriaLabel}
               onClick={this.scrollRight}

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -106,12 +106,14 @@ test('Renders without pf-m-expanded on the tab element by default', () => {
   expect(screen.getByRole('tab')).not.toHaveClass('pf-m-expanded');
 });
 
-test('Renders with pf-m-expanded on the tab element once clicked', () => {
+test('Renders with pf-m-expanded on the tab element once clicked', async () => {
+  const user = userEvent.setup();
+
   render(<OverflowTab />);
 
   const overflowTab = screen.getByRole('tab');
 
-  userEvent.click(overflowTab);
+  await user.click(overflowTab);
 
   expect(overflowTab).toHaveClass('pf-m-expanded');
 });
@@ -156,7 +158,9 @@ test('Does not render tabs passed via overflowingTabs when not expanded', () =>
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Renders tabs passed via overflowingTabs when expanded', () => {
+test('Renders tabs passed via overflowingTabs when expanded', async () => {
+  const user = userEvent.setup();
+
   render(
     <OverflowTab
       overflowingTabs={[
@@ -166,13 +170,15 @@ test('Renders tabs passed via overflowingTabs when expanded', () => {
     />
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   expect(screen.getByText('Tab one')).toBeVisible();
   expect(screen.getByText('Tab two')).toBeVisible();
 });
 
-test('Closes the overflowing tabs menu when a tab is selected', () => {
+test('Closes the overflowing tabs menu when a tab is selected', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -184,15 +190,17 @@ test('Closes the overflowing tabs menu when a tab is selected', () => {
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
-  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+  await user.click(screen.getByRole('button', { name: 'Select' }));
 
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Closes the overflowing tabs menu when the user clicks outside of the menu', () => {
+test('Closes the overflowing tabs menu when the user clicks outside of the menu', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -204,14 +212,15 @@ test('Closes the overflowing tabs menu when the user clicks outside of the menu'
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
-  userEvent.click(document.body);
+  await user.click(document.body);
 
   expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
 });
 
-test('Calls the onTabClick callback provided via context when a tab is clicked', () => {
+test('Calls the onTabClick callback provided via context when a tab is clicked', async () => {
+  const user = userEvent.setup();
   const mockHandleTabClick = jest.fn();
 
   render(
@@ -224,10 +233,10 @@ test('Calls the onTabClick callback provided via context when a tab is clicked',
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+  await user.click(screen.getByRole('tab', { name: 'More' }));
 
   // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
-  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+  await user.click(screen.getByRole('button', { name: 'Select' }));
 
   expect(mockHandleTabClick).toHaveBeenCalledTimes(1);
   expect(mockHandleTabClick).toHaveBeenCalledWith('mouseEvent', 1, 'fakeRef');
@@ -325,12 +334,14 @@ test('Renders the tab with aria-expanded set to false by default', () => {
   expect(screen.getByRole('tab')).toHaveAttribute('aria-expanded', 'false');
 });
 
-test('Renders the tab with aria-expanded set to true when the menu is opened', () => {
+test('Renders the tab with aria-expanded set to true when the menu is opened', async () => {
+  const user = userEvent.setup();
+  
   render(<OverflowTab />);
 
   const overflowTab = screen.getByRole('tab');
 
-  userEvent.click(overflowTab);
+  await user.click(overflowTab);
 
   expect(overflowTab).toHaveAttribute('aria-expanded', 'true');
 });
@@ -342,16 +353,20 @@ test('Passes Popper popperMatchesTriggerWidth set to false', () => {
   expect(screen.getByText('Popper matches trigger width: false')).toBeVisible();
 });
 
-test('Passes Popper an appendTo value of the presentation element', () => {
+test('Passes Popper an appendTo value of the presentation element', async () => {
+  const user = userEvent.setup();
+  
   render(<OverflowTab />);
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.getByText('Append to class name: pf-c-tabs__item pf-m-overflow')).toBeVisible();
 });
 
-test('Does not render an overflowing tab as a selected menu item by default', () => {
+test('Does not render an overflowing tab as a selected menu item by default', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
@@ -362,13 +377,15 @@ test('Does not render an overflowing tab as a selected menu item by default', ()
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.queryByText('Selected: true')).not.toBeInTheDocument();
 });
 
-test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', () => {
+test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', async () => {
+  const user = userEvent.setup();
+  
   render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
@@ -379,13 +396,15 @@ test('Renders an overflowing tab as a selected menu item when its key matches th
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
   expect(screen.getByText('Selected: true')).toBeVisible();
 });
 
-test('Matches snapshot when expanded', () => {
+test('Matches snapshot when expanded', async () => {
+  const user = userEvent.setup();
+  
   const { asFragment } = render(
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
@@ -397,7 +416,7 @@ test('Matches snapshot when expanded', () => {
     </TabsContext.Provider>
   );
 
-  userEvent.click(screen.getByRole('tab'));
+  await user.click(screen.getByRole('tab'));
 
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`Matches snapshot when expanded 1`] = `
           aria-haspopup="menu"
           class="pf-c-tabs__link pf-m-expanded"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`should not render anything 1`] = `
       data-ouia-safe="true"
       id="pf-tab-0-"
       role="tab"
+      type="button"
     >
       <span
         class="pf-c-tabs__item-text"

package/src/components/Tabs/__tests__/__snapshots__/TabButton.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`should render tab button 1`] = `
   <button
     data-ouia-component-type="PF4/TabButton"
     data-ouia-safe="true"
+    type="button"
   >
     Tab button
   </button>