@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { Switch } from '../Switch';
 
@@ -27,12 +26,16 @@ describe('Switch', () => {
   });
 
   test('switch is checked', () => {
-    const { asFragment } = render(<Switch id="switch-is-checked" label="On" labelOff="Off" isChecked aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-checked" label="On" labelOff="Off" isChecked aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is not checked', () => {
-    const { asFragment } = render(<Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -52,17 +55,23 @@ describe('Switch', () => {
   });
 
   test('no label switch is not checked', () => {
-    const { asFragment } = render(<Switch id="no-label-switch-is-not-checked" isChecked={false} aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="no-label-switch-is-not-checked" isChecked={false} aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is checked and disabled', () => {
-    const { asFragment } = render(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-checked-and-disabled" isChecked isDisabled aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('switch is not checked and disabled', () => {
-    const { asFragment } = render(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled aria-label="Switch label" />);
+    const { asFragment } = render(
+      <Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled aria-label="Switch label" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -79,7 +88,7 @@ describe('Switch', () => {
     global.console = { ...global.console, error: myMock };
 
     render(<Switch {...props} />);
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
   });
 
   test('should not throw console error when label is given but no aria-label', () => {
@@ -88,7 +97,7 @@ describe('Switch', () => {
 
     render(<Switch {...props} label="test switch" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should not throw console error when aria-label is given but no label', () => {
@@ -97,7 +106,7 @@ describe('Switch', () => {
 
     render(<Switch {...props} aria-label="test switch" />);
 
-    expect(myMock).not.toBeCalled();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('should apply reversed modifier', () => {

package/src/components/Tabs/__tests__/Generated/TabContent.test.tsx

@@ -8,7 +8,7 @@ import { TabContent } from '../../TabContent';
 import {} from '../..';
 
 it('TabContent should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <TabContent
       children={'any'}
       child={<p>ReactElement</p>}
@@ -20,5 +20,5 @@ it('TabContent should match snapshot (auto-generated)', () => {
       aria-label={'string'}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TabContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <section
     aria-label="string"
     class="pf-c-tab-content string"
@@ -13,5 +13,5 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
   >
     any
   </section>
-</div>
+</DocumentFragment>
 `;

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

@@ -4,10 +4,10 @@ import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 
 test('should not render anything', () => {
-  const view = render(
-  <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+  const { asFragment } = render(
+    <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
       Tab 1 section
     </Tab>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -3,6 +3,6 @@ import { render } from '@testing-library/react';
 import { TabButton } from '../TabButton';
 
 test('should render tab button', () => {
-  const view = render(<TabButton>Tab button</TabButton>);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TabButton>Tab button</TabButton>);
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -8,7 +8,7 @@ import { TabContent } from '../TabContent';
 import { TabContentBody } from '../TabContentBody';
 
 test('should render simple tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="simpleTabs">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -22,17 +22,24 @@ test('should render simple tabs', () => {
       <Tab
         id="tab4"
         eventKey={3}
-        title={<><TabTitleIcon><i>4</i></TabTitleIcon> <TabTitleText>Users</TabTitleText>  </>}
+        title={
+          <>
+            <TabTitleIcon>
+              <i>4</i>
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
       >
         Tab 4 section
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render uncontrolled tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs defaultActiveKey={0}>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -46,17 +53,24 @@ test('should render uncontrolled tabs', () => {
       <Tab
         id="tab4"
         eventKey={3}
-        title={<><TabTitleIcon><i>4</i></TabTitleIcon> <TabTitleText>Users</TabTitleText>  </>}
+        title={
+          <>
+            <TabTitleIcon>
+              <i>4</i>
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
       >
         Tab 4 section
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render vertical tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="verticalTabs" isVertical>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -70,18 +84,25 @@ test('should render vertical tabs', () => {
       <Tab
         id="tab4"
         eventKey={3}
-        title={<><TabTitleIcon><i>4</i></TabTitleIcon> <TabTitleText>Users</TabTitleText>  </>}
+        title={
+          <>
+            <TabTitleIcon>
+              <i>4</i>
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
       >
         Tab 4 section
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render expandable vertical tabs', () => {
-  const view = render(
-    <Tabs id="verticalTabs" isVertical toggleText='toggle' expandable={{default: 'expandable'}}>
+  const { asFragment } = render(
+    <Tabs id="verticalTabs" isVertical toggleText="toggle" expandable={{ default: 'expandable' }}>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -94,20 +115,27 @@ test('should render expandable vertical tabs', () => {
       <Tab
         id="tab4"
         eventKey={3}
-        title={<><TabTitleIcon><i>4</i></TabTitleIcon> <TabTitleText>Users</TabTitleText>  </>}
+        title={
+          <>
+            <TabTitleIcon>
+              <i>4</i>
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
       >
         Tab 4 section
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should log error when there is no aria-label or toggleText for expandable vertical tabs', () => {
   const consoleErrorMock = jest.fn();
   global.console = { error: consoleErrorMock } as any;
-  const view = render(
-    <Tabs id="verticalTabs" isVertical expandable={{default: 'expandable'}}>
+  const { asFragment } = render(
+    <Tabs id="verticalTabs" isVertical expandable={{ default: 'expandable' }}>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -120,17 +148,24 @@ test('should log error when there is no aria-label or toggleText for expandable
       <Tab
         id="tab4"
         eventKey={3}
-        title={<><TabTitleIcon><i>4</i></TabTitleIcon> <TabTitleText>Users</TabTitleText>  </>}
+        title={
+          <>
+            <TabTitleIcon>
+              <i>4</i>
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
       >
         Tab 4 section
       </Tab>
     </Tabs>
   );
-  expect(consoleErrorMock).toBeCalled();
+  expect(consoleErrorMock).toHaveBeenCalled();
 });
 
 test('should render box tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="boxTabs" isBox>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -144,17 +179,24 @@ test('should render box tabs', () => {
       <Tab
         id="tab4"
         eventKey={3}
-        title={<><TabTitleIcon><i>4</i></TabTitleIcon> <TabTitleText>Users</TabTitleText>  </>}
+        title={
+          <>
+            <TabTitleIcon>
+              <i>4</i>
+            </TabTitleIcon>{' '}
+            <TabTitleText>Users</TabTitleText>{' '}
+          </>
+        }
       >
         Tab 4 section
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render accessible tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="accessibleTabs" aria-label="accessible Tabs example" component="nav">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} href="#/items/1">
         Tab 1 section
@@ -167,11 +209,11 @@ test('should render accessible tabs', () => {
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render filled tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="filledTabs" isFilled>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -184,11 +226,11 @@ test('should render filled tabs', () => {
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render secondary tabs', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="primarieTabs">
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         <Tabs isSecondary id="secondaryTabs">
@@ -211,11 +253,11 @@ test('should render secondary tabs', () => {
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render tabs with eventKey Strings', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="eventKeyTabs">
       <Tab id="tab1" eventKey={'one'} title={<TabTitleText>"Secondary Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -228,39 +270,54 @@ test('should render tabs with eventKey Strings', () => {
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render tabs with separate content', () => {
-  const contentRef1 = null
-  const contentRef2 = null
-  const contentRef3 = null
+  const contentRef1: React.RefObject<any> = null;
+  const contentRef2: React.RefObject<any> = null;
+  const contentRef3: React.RefObject<any> = null;
 
-  const view = render(
+  const { asFragment } = render(
     <>
       <Tabs id="separateTabs">
-        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} tabContentId="refTab1Section" tabContentRef={contentRef1} />
-        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>}tabContentId="refTab2Section" tabContentRef={contentRef2} />
-        <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>}  tabContentId="refTab3Section" tabContentRef={contentRef3} />
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Tab item 1</TabTitleText>}
+          tabContentId="refTab1Section"
+          tabContentRef={contentRef1}
+        />
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>Tab item 2</TabTitleText>}
+          tabContentId="refTab2Section"
+          tabContentRef={contentRef2}
+        />
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>Tab item 3</TabTitleText>}
+          tabContentId="refTab3Section"
+          tabContentRef={contentRef3}
+        />
       </Tabs>
       <div>
         <TabContent eventKey={0} id="refTab1Section" ref={contentRef1} aria-label="Tab item 1">
           Tab 1 section
         </TabContent>
         <TabContent eventKey={1} id="refTab2Section" ref={contentRef2} aria-label="Tab item 2" hidden>
-        <TabContentBody>Tab 2 section</TabContentBody>
+          <TabContentBody>Tab 2 section</TabContentBody>
         </TabContent>
-        <TabContent  eventKey={2} id="refTab3Section" ref={contentRef3} aria-label="Tab item 3" hidden>
+        <TabContent eventKey={2} id="refTab3Section" ref={contentRef3} aria-label="Tab item 3" hidden>
           <TabContentBody hasPadding>Tab 3 section with padding </TabContentBody>
         </TabContent>
       </div>
     </>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render box tabs of light variant', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="boxLightVariantTabs" isBox variant="light300">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -273,11 +330,11 @@ test('should render box tabs of light variant', () => {
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('should render tabs with no bottom border', () => {
-  const view = render(
+  const { asFragment } = render(
     <Tabs id="noBottomBorderTabs" hasBorderBottom={false}>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -290,6 +347,6 @@ test('should render tabs with no bottom border', () => {
       </Tab>
     </Tabs>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should not render anything 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-tabs__item"
     role="presentation"
@@ -22,5 +22,5 @@ exports[`should not render anything 1`] = `
       </span>
     </button>
   </li>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render tab button 1`] = `
-<div>
+<DocumentFragment>
   <button
     data-ouia-component-type="PF4/TabButton"
     data-ouia-safe="true"
   >
     Tab button
   </button>
-</div>
+</DocumentFragment>
 `;