@patternfly/react-core 4.206.5 → 4.208.0

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>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render accessible tabs 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
     class="pf-c-tabs"
@@ -154,11 +154,11 @@ exports[`should render accessible tabs 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render box tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-box"
     data-ouia-component-id="OUIA-Generated-Tabs-6"
@@ -276,7 +276,7 @@ exports[`should render box tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -348,11 +348,11 @@ exports[`should render box tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render box tabs of light variant 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300"
     data-ouia-component-id="OUIA-Generated-Tabs-13"
@@ -501,11 +501,11 @@ exports[`should render box tabs of light variant 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render expandable vertical tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-vertical pf-m-expandable"
     data-ouia-component-id="OUIA-Generated-Tabs-4"
@@ -666,7 +666,7 @@ exports[`should render expandable vertical tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -738,11 +738,11 @@ exports[`should render expandable vertical tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render filled tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-fill"
     data-ouia-component-id="OUIA-Generated-Tabs-8"
@@ -891,11 +891,11 @@ exports[`should render filled tabs 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render secondary tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-9"
@@ -1192,11 +1192,11 @@ exports[`should render secondary tabs 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render simple tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-1"
@@ -1314,7 +1314,7 @@ exports[`should render simple tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -1386,11 +1386,11 @@ exports[`should render simple tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render tabs with eventKey Strings 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-11"
@@ -1540,11 +1540,11 @@ exports[`should render tabs with eventKey Strings 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render tabs with no bottom border 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-no-border-bottom"
     data-ouia-component-id="OUIA-Generated-Tabs-14"
@@ -1693,11 +1693,11 @@ exports[`should render tabs with no bottom border 1`] = `
   >
     Tab 3 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render tabs with separate content 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-12"
@@ -1856,11 +1856,11 @@ exports[`should render tabs with separate content 1`] = `
       </div>
     </section>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render uncontrolled tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-2"
@@ -1977,7 +1977,7 @@ exports[`should render uncontrolled tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -2049,11 +2049,11 @@ exports[`should render uncontrolled tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render vertical tabs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-tabs pf-m-vertical"
     data-ouia-component-id="OUIA-Generated-Tabs-3"
@@ -2171,7 +2171,7 @@ exports[`should render vertical tabs 1`] = `
           >
             Users
           </span>
-            
+           
         </button>
       </li>
     </ul>
@@ -2243,5 +2243,5 @@ exports[`should render vertical tabs 1`] = `
   >
     Tab 4 section
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/Text/__tests__/Generated/TextContent.test.tsx

@@ -8,6 +8,6 @@ import { TextContent } from '../../TextContent';
 import {} from '../..';
 
 it('TextContent should match snapshot (auto-generated)', () => {
-  const view = render(<TextContent children={<>ReactNode</>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TextContent children={<>ReactNode</>} className={"''"} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/Generated/TextList.test.tsx

@@ -8,6 +8,6 @@ import { TextList } from '../../TextList';
 import {} from '../..';
 
 it('TextList should match snapshot (auto-generated)', () => {
-  const view = render(<TextList children={<>ReactNode</>} className={"''"} component={'ul'} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TextList children={<>ReactNode</>} className={"''"} component={'ul'} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/Generated/TextListItem.test.tsx

@@ -8,6 +8,6 @@ import { TextListItem } from '../../TextListItem';
 import {} from '../..';
 
 it('TextListItem should match snapshot (auto-generated)', () => {
-  const view = render(<TextListItem children={<>ReactNode</>} className={"''"} component={'li'} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<TextListItem children={<>ReactNode</>} className={"''"} component={'li'} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-content ''"
   >
     ReactNode
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextList should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="''"
     data-pf-content="true"
   >
     ReactNode
   </ul>
-</div>
+</DocumentFragment>
 `;

package/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextListItem should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="''"
     data-pf-content="true"
   >
     ReactNode
   </li>
-</div>
+</DocumentFragment>
 `;

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

@@ -6,7 +6,7 @@ import { TextList, TextListVariants } from '../TextList';
 import { TextListItem, TextListItemVariants } from '../TextListItem';
 
 test('Text example should match snapshot', () => {
-  const view = render(
+  const { asFragment } = render(
     <TextContent>
       <Text component={TextVariants.h1}>Hello World</Text>
       <Text component={TextVariants.p}>
@@ -108,5 +108,5 @@ test('Text example should match snapshot', () => {
       </Text>
     </TextContent>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Text example should match snapshot 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-content"
   >
@@ -107,8 +107,7 @@ exports[`Text example should match snapshot 1`] = `
       data-ouia-safe="true"
       data-pf-content="true"
     >
-      Quisque ante lacus, malesuada ac auctor vitae, congue
-       
+      Quisque ante lacus, malesuada ac auctor vitae, congue 
       <a
         class=""
         data-ouia-component-id="OUIA-Generated-Text-7"
@@ -331,5 +330,5 @@ exports[`Text example should match snapshot 1`] = `
       Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
     </p>
   </div>
-</div>
+</DocumentFragment>
 `;