@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,30 +1,30 @@
 import { Divider } from '../Divider';
-import { Flex, FlexItem} from '../../../layouts/Flex';
+import { Flex, FlexItem } from '../../../layouts/Flex';
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
 test('divider using hr', () => {
-  const view = render(<Divider />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Divider />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('divider using li', () => {
-  const view = render(<Divider component="li" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Divider component="li" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('divider using div', () => {
-  const view = render(<Divider component="div" />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<Divider component="div" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('vertical divider', () => {
-  const view = render(
+  const { asFragment } = render(
     <Flex>
       <FlexItem>first item</FlexItem>
-      <Divider isVertical/>
+      <Divider isVertical />
       <FlexItem>second item</FlexItem>
     </Flex>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`divider using div 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-divider"
     role="separator"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`divider using hr 1`] = `
-<div>
+<DocumentFragment>
   <hr
     class="pf-c-divider"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`divider using li 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-divider"
     role="separator"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`vertical divider 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-l-flex"
   >
@@ -45,5 +45,5 @@ exports[`vertical divider 1`] = `
       second item
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -3,17 +3,13 @@ import { render } from '@testing-library/react';
 import { DragDrop, Draggable, Droppable } from '../';
 
 test('renders some divs', () => {
-  const view = render(
+  const { asFragment } = render(
     <DragDrop>
       <Droppable droppableId="dropzone">
-        <Draggable draggableId="draggable1">
-          item 1
-        </Draggable>
-        <Draggable draggableId="draggable2">
-          item 2
-        </Draggable>
+        <Draggable id="draggable1">item 1</Draggable>
+        <Draggable id="draggable2">item 2</Draggable>
       </Droppable>
     </DragDrop>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders some divs 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-droppable"
     data-pf-droppable="defaultZone"
@@ -11,7 +11,7 @@ exports[`renders some divs 1`] = `
       class="pf-c-draggable"
       data-pf-draggable-zone="defaultZone"
       draggable="true"
-      draggableid="draggable1"
+      id="draggable1"
     >
       item 1
     </div>
@@ -19,10 +19,10 @@ exports[`renders some divs 1`] = `
       class="pf-c-draggable"
       data-pf-draggable-zone="defaultZone"
       draggable="true"
-      draggableid="draggable2"
+      id="draggable2"
     >
       item 2
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -33,14 +33,14 @@ Object.values([
   const drawerContent =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
   test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
-    const view = render(
+    const { asFragment } = render(
       <Drawer isExpanded={isExpanded}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>
       </Drawer>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
@@ -59,19 +59,25 @@ test(`Drawer expands from bottom`, () => {
   const drawerContent =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
 
-  const view = render(
+  const { asFragment } = render(
     <Drawer isExpanded={true} position="bottom">
       <DrawerContent panelContent={panelContent}>
         <DrawerContentBody>{drawerContent}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test(`Drawer has resizable css and color variants`, () => {
   const panelContent = (
-    <DrawerPanelContent isResizable minSize={'200px'} defaultSize={'300px'} maxSize={'400px'} colorVariant={DrawerColorVariant.light200}>
+    <DrawerPanelContent
+      isResizable
+      minSize={'200px'}
+      defaultSize={'300px'}
+      maxSize={'400px'}
+      colorVariant={DrawerColorVariant.light200}
+    >
       <DrawerHead>
         <span>drawer-panel</span>
         <DrawerActions>
@@ -84,14 +90,14 @@ test(`Drawer has resizable css and color variants`, () => {
   const drawerContent =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
 
-  const view = render(
+  const { asFragment } = render(
     <Drawer isExpanded={true} position="left">
       <DrawerContent panelContent={panelContent}>
         <DrawerContentBody>{drawerContent}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test(`Drawer has resizable callback and id`, () => {
@@ -109,12 +115,12 @@ test(`Drawer has resizable callback and id`, () => {
   const drawerContent =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
 
-  const view = render(
+  const { asFragment } = render(
     <Drawer isExpanded={true} position="left">
       <DrawerContent panelContent={panelContent}>
         <DrawerContentBody>{drawerContent}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Drawer/__tests__/Generated/DrawerContent.test.tsx

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

package/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx

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

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerContent.test.tsx.snap

@@ -1,96 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DrawerContent should match snapshot (auto-generated) 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="pf-c-drawer__main"
-      >
-        <div
-          class="pf-c-drawer__content ''"
-        >
-          <div>
-            ReactNode
-          </div>
-        </div>
-        <div
-          drawercontentref="[object Object]"
-        >
-          test
-        </div>
+<DocumentFragment>
+  <div
+    class="pf-c-drawer__main"
+  >
+    <div
+      class="pf-c-drawer__content ''"
+    >
+      <div>
+        ReactNode
       </div>
     </div>
-  </body>,
-  "container": <div>
     <div
-      class="pf-c-drawer__main"
+      drawercontentref="[object Object]"
     >
-      <div
-        class="pf-c-drawer__content ''"
-      >
-        <div>
-          ReactNode
-        </div>
-      </div>
-      <div
-        drawercontentref="[object Object]"
-      >
-        test
-      </div>
+      test
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</DocumentFragment>
 `;

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer__panel ''"
     hidden=""
     id="pf-drawer-panel-0"
   />
-</div>
+</DocumentFragment>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Drawer expands from bottom 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer pf-m-expanded pf-m-panel-bottom"
   >
@@ -71,11 +71,11 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer has resizable callback and id 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer pf-m-expanded pf-m-panel-left"
   >
@@ -165,11 +165,11 @@ exports[`Drawer has resizable callback and id 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer has resizable css and color variants 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer pf-m-expanded pf-m-panel-left"
   >
@@ -260,11 +260,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer"
   >
@@ -287,11 +287,11 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer"
   >
@@ -314,11 +314,11 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       />
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer pf-m-expanded"
   >
@@ -388,11 +388,11 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer pf-m-expanded"
   >
@@ -462,11 +462,11 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-drawer pf-m-expanded"
   >
@@ -536,5 +536,5 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;