@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`check loginpage example against snapshot 1`] = `
-<div>
+<DocumentFragment>
   <div
     alt="Pf-background"
     class="pf-c-background-image"
@@ -73,7 +73,6 @@ exports[`check loginpage example against snapshot 1`] = `
           >
             Log into your account
           </h2>
-          
         </header>
         <div
           class="pf-c-login__main-body"
@@ -112,5 +111,5 @@ exports[`check loginpage example against snapshot 1`] = `
       </footer>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -4,13 +4,13 @@ import { Masthead, MastheadBrand, MastheadContent, MastheadMain, MastheadToggle
 
 describe('Masthead', () => {
   test('verify basic', () => {
-    const view = render(<Masthead>test</Masthead>);
+    const { asFragment } = render(<Masthead>test</Masthead>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify full structure', () => {
-    const view = render(
+    const { asFragment } = render(
       <Masthead>
         <MastheadToggle>Toggle</MastheadToggle>
         <MastheadMain>
@@ -22,17 +22,17 @@ describe('Masthead', () => {
       </Masthead>
     );
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const view = render(<Masthead className="custom-css">test</Masthead>);
+    const { asFragment } = render(<Masthead className="custom-css">test</Masthead>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify inline display breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       <Masthead
         display={{ default: 'inline', sm: 'inline', md: 'inline', lg: 'inline', xl: 'inline', '2xl': 'inline' }}
       >
@@ -40,17 +40,17 @@ describe('Masthead', () => {
       </Masthead>
     );
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify stack display breakpoints', () => {
-    const view = render(
+    const { asFragment } = render(
       <Masthead display={{ default: 'stack', sm: 'stack', md: 'stack', lg: 'stack', xl: 'stack', '2xl': 'stack' }}>
         test
       </Masthead>
     );
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   Object.values(['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl'] as [
@@ -64,72 +64,72 @@ describe('Masthead', () => {
     'inset3xl'
   ]).forEach(inset => {
     test(`verify ${inset} inset breakpoints`, () => {
-      const view = render(
+      const { asFragment } = render(
         <Masthead inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Masthead>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 });
 
 describe('MastheadBrand', () => {
   test('verify basic', () => {
-    const view = render(<MastheadBrand>test</MastheadBrand>);
+    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const view = render(<MastheadBrand className="custom-css">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadBrand className="custom-css">test</MastheadBrand>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom component', () => {
-    const view = render(<MastheadBrand component="div">test</MastheadBrand>);
+    const { asFragment } = render(<MastheadBrand component="div">test</MastheadBrand>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 describe('MastheadContent', () => {
   test('verify basic', () => {
-    const view = render(<MastheadContent>test</MastheadContent>);
+    const { asFragment } = render(<MastheadContent>test</MastheadContent>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const view = render(<MastheadContent className="custom-css">test</MastheadContent>);
+    const { asFragment } = render(<MastheadContent className="custom-css">test</MastheadContent>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 describe('MastheadMain', () => {
   test('verify basic', () => {
-    const view = render(<MastheadMain>test</MastheadMain>);
+    const { asFragment } = render(<MastheadMain>test</MastheadMain>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const view = render(<MastheadMain className="custom-css">test</MastheadMain>);
+    const { asFragment } = render(<MastheadMain className="custom-css">test</MastheadMain>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 describe('MastheadToggle', () => {
   test('verify basic', () => {
-    const view = render(<MastheadToggle>test</MastheadToggle>);
+    const { asFragment } = render(<MastheadToggle>test</MastheadToggle>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('verify custom class', () => {
-    const view = render(<MastheadToggle className="custom-css">test</MastheadToggle>);
+    const { asFragment } = render(<MastheadToggle className="custom-css">test</MastheadToggle>);
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Masthead verify basic 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify custom class 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md custom-css"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify full structure 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md"
   >
@@ -48,198 +48,198 @@ exports[`Masthead verify full structure 1`] = `
       </span>
     </div>
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify inline display breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline pf-m-display-inline-on-sm pf-m-display-inline-on-md pf-m-display-inline-on-lg pf-m-display-inline-on-xl pf-m-display-inline-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify inset2xl inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify inset3xl inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify insetLg inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify insetMd inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify insetNone inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify insetSm inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify insetXl inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify insetXs inset breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Masthead verify stack display breakpoints 1`] = `
-<div>
+<DocumentFragment>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-stack-on-sm pf-m-display-stack-on-md pf-m-display-stack-on-lg pf-m-display-stack-on-xl pf-m-display-stack-on-2xl"
   >
     test
   </header>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadBrand verify basic 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-masthead__brand"
     tabindex="0"
   >
     test
   </a>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadBrand verify custom class 1`] = `
-<div>
+<DocumentFragment>
   <a
     class="pf-c-masthead__brand custom-css"
     tabindex="0"
   >
     test
   </a>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadBrand verify custom component 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__brand"
     tabindex="0"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadContent verify basic 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__content"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadContent verify custom class 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__content custom-css"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadMain verify basic 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__main"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadMain verify custom class 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__main custom-css"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadToggle verify basic 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__toggle"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`MastheadToggle verify custom class 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-masthead__toggle custom-css"
   >
     test
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
 
 import { Menu } from '../Menu';
 

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

@@ -7,51 +7,51 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
-    const view = render(<MenuToggle>Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle>Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passes additional classes', () => {
-    const view = render(<MenuToggle className="test-class">Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle className="test-class">Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows isExpanded', () => {
-    const view = render(<MenuToggle isExpanded>Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle isExpanded>Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows isDisabled', () => {
-    const view = render(<MenuToggle isDisabled>Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle isDisabled>Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows isPrimary', () => {
-    const view = render(<MenuToggle variant="primary">Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle variant="primary">Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows isPlain', () => {
-    const view = render(
+    const { asFragment } = render(
       <MenuToggle variant="plain">
         <EllipsisVIcon />
       </MenuToggle>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows plain text', () => {
-    const view = render(<MenuToggle variant="plainText">Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle variant="plainText">Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows icon', () => {
-    const view = render(<MenuToggle icon={<CogIcon />}>Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle icon={<CogIcon />}>Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('shows badge', () => {
-    const view = render(<MenuToggle badge={<Badge>badge</Badge>}>Toggle</MenuToggle>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<MenuToggle badge={<Badge>badge</Badge>}>Toggle</MenuToggle>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`menu toggle passes additional classes 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle test-class"
@@ -34,11 +34,11 @@ exports[`menu toggle passes additional classes 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle"
@@ -71,11 +71,11 @@ exports[`menu toggle renders successfully 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows badge 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle"
@@ -117,11 +117,11 @@ exports[`menu toggle shows badge 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows icon 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle"
@@ -171,11 +171,11 @@ exports[`menu toggle shows icon 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows isDisabled 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle"
@@ -209,11 +209,11 @@ exports[`menu toggle shows isDisabled 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows isExpanded 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="true"
     class="pf-c-menu-toggle pf-m-expanded"
@@ -246,11 +246,11 @@ exports[`menu toggle shows isExpanded 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows isPlain 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle pf-m-plain"
@@ -270,11 +270,11 @@ exports[`menu toggle shows isPlain 1`] = `
       />
     </svg>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows isPrimary 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle pf-m-primary"
@@ -307,11 +307,11 @@ exports[`menu toggle shows isPrimary 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`menu toggle shows plain text 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-menu-toggle pf-m-plain pf-m-text"
@@ -344,5 +344,5 @@ exports[`menu toggle shows plain text 1`] = `
       </span>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;