@patternfly/react-core 4.206.5 → 4.208.0

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

@@ -1,72 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`danger banner 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="danger"
     class="pf-c-banner pf-m-danger"
   >
-    danger
-     Banner
+    danger Banner
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`default banner 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="default"
     class="pf-c-banner"
   >
-    default
-     Banner
+    default Banner
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`info banner 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="info"
     class="pf-c-banner pf-m-info"
   >
-    info
-     Banner
+    info Banner
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`sticky banner 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="sticky"
     class="pf-c-banner pf-m-sticky"
   >
     Sticky Banner
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`success banner 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="success"
     class="pf-c-banner pf-m-success"
   >
-    success
-     Banner
+    success Banner
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`warning banner 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="warning"
     class="pf-c-banner pf-m-warning"
   >
-    warning
-     Banner
+    warning Banner
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -5,12 +5,13 @@ import '@testing-library/jest-dom';
 
 describe('Brand', () => {
   test('simple brand', () => {
-    const view = render(<Brand alt="brand" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Brand alt="brand" />);
+    expect(asFragment()).toMatchSnapshot();
   });
+
   test('passing children creates picture brand', () => {
-    const view = render(
-      <Brand>
+    render(
+      <Brand alt="brand">
         <div>test</div>
       </Brand>
     );

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

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Brand simple brand 1`] = `
-<div>
+<DocumentFragment>
   <img
     alt="brand"
     class="pf-c-brand"
     src=""
   />
-</div>
+</DocumentFragment>
 `;

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

@@ -5,26 +5,26 @@ import { render } from '@testing-library/react';
 
 describe('Breadcrumb component', () => {
   test('should render default breadcrumb', () => {
-    const view = render(<Breadcrumb />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Breadcrumb />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumb with className', () => {
-    const view = render(<Breadcrumb className="className" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Breadcrumb className="className" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumb with aria-label', () => {
-    const view = render(<Breadcrumb aria-label="custom label" />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Breadcrumb aria-label="custom label" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumb with children', () => {
-    const view = render(
+    const { asFragment } = render(
       <Breadcrumb>
         <BreadcrumbItem to="#">Item 1</BreadcrumbItem> <BreadcrumbItem to="#">Item 1</BreadcrumbItem>
       </Breadcrumb>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumb/__tests__/BreadcrumbHeading.test.tsx

@@ -4,31 +4,31 @@ import { render } from '@testing-library/react';
 
 describe('BreadcrumbHeading component', () => {
   test('should render default breadcrumbHeading', () => {
-    const view = render(<BreadcrumbHeading>Item</BreadcrumbHeading>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbHeading>Item</BreadcrumbHeading>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should pass classname', () => {
-    const view = render(<BreadcrumbHeading className="Class">Item</BreadcrumbHeading>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbHeading className="Class">Item</BreadcrumbHeading>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should pass custom id', () => {
-    const view = render(<BreadcrumbHeading id="Id">Item</BreadcrumbHeading>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbHeading id="Id">Item</BreadcrumbHeading>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render link breadcrumbTitle', () => {
-    const view = render(<BreadcrumbHeading to="/somewhere">Item</BreadcrumbHeading>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbHeading to="/somewhere">Item</BreadcrumbHeading>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumbHeading with target', () => {
-    const view = render(
+    const { asFragment } = render(
       <BreadcrumbHeading to="#here" target="_blank">
         Item
       </BreadcrumbHeading>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumb/__tests__/BreadcrumbItem.test.tsx

@@ -4,51 +4,49 @@ import { render } from '@testing-library/react';
 
 describe('BreadcrumbItem component', () => {
   test('should render default breadcrumbItem', () => {
-    const view = render(<BreadcrumbItem>Item</BreadcrumbItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem>Item</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumbItem with className', () => {
-    const view = render(<BreadcrumbItem className="Class">Item</BreadcrumbItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem className="Class">Item</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumbItem with id', () => {
-    const view = render(<BreadcrumbItem id="Item 1">Item</BreadcrumbItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem id="Item 1">Item</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render active breadcrumbItem', () => {
-    const view = render(<BreadcrumbItem isActive>Item</BreadcrumbItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem isActive>Item</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render link breadcrumbItem', () => {
-    const view = render(<BreadcrumbItem to="/somewhere">Item</BreadcrumbItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem to="/somewhere">Item</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumbItem with target', () => {
-    const view = render(<BreadcrumbItem target="/somewhere">Item</BreadcrumbItem>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem target="/somewhere">Item</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumbItem with custom element', () => {
-    const view = render(
+    const { asFragment } = render(
       <BreadcrumbItem>
         <h1>Header</h1>
       </BreadcrumbItem>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render breadcrumbItem with component', () => {
     const MyComponent = () => <div>My component contents</div>;
     const consoleError = jest.spyOn(console, 'error').mockImplementation();
-    const view = render(
-      <BreadcrumbItem component={MyComponent}>Stuff</BreadcrumbItem>
-    );
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<BreadcrumbItem component={MyComponent}>Stuff</BreadcrumbItem>);
+    expect(asFragment()).toMatchSnapshot();
     expect(consoleError).not.toHaveBeenCalled();
   });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="custom label"
     class="pf-c-breadcrumb"
@@ -13,11 +13,11 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
       class="pf-c-breadcrumb__list"
     />
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Breadcrumb component should render breadcrumb with children 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Breadcrumb"
     class="pf-c-breadcrumb"
@@ -68,11 +68,11 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
       </li>
     </ol>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Breadcrumb component should render breadcrumb with className 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Breadcrumb"
     class="pf-c-breadcrumb className"
@@ -84,11 +84,11 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
       class="pf-c-breadcrumb__list"
     />
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Breadcrumb component should render default breadcrumb 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Breadcrumb"
     class="pf-c-breadcrumb"
@@ -100,5 +100,5 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
       class="pf-c-breadcrumb__list"
     />
   </nav>
-</div>
+</DocumentFragment>
 `;

package/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbHeading.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BreadcrumbHeading component should pass classname 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item Class"
   >
@@ -11,11 +11,11 @@ exports[`BreadcrumbHeading component should pass classname 1`] = `
       Item
     </h1>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbHeading component should pass custom id 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
     id="Id"
@@ -26,11 +26,11 @@ exports[`BreadcrumbHeading component should pass custom id 1`] = `
       Item
     </h1>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbHeading component should render breadcrumbHeading with target 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
@@ -47,11 +47,11 @@ exports[`BreadcrumbHeading component should render breadcrumbHeading with target
       </a>
     </h1>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
@@ -61,11 +61,11 @@ exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`]
       Item
     </h1>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbHeading component should render link breadcrumbTitle 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
@@ -81,5 +81,5 @@ exports[`BreadcrumbHeading component should render link breadcrumbTitle 1`] = `
       </a>
     </h1>
   </li>
-</div>
+</DocumentFragment>
 `;

package/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap

@@ -1,37 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BreadcrumbItem component should render active breadcrumbItem 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
     Item
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render breadcrumbItem with className 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item Class"
   >
     Item
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render breadcrumbItem with component 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
     Stuff
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render breadcrumbItem with custom element 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
@@ -39,42 +39,42 @@ exports[`BreadcrumbItem component should render breadcrumbItem with custom eleme
       Header
     </h1>
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render breadcrumbItem with id 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
     id="Item 1"
   >
     Item
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render breadcrumbItem with target 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
     Item
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render default breadcrumbItem 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
     Item
   </li>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = `
-<div>
+<DocumentFragment>
   <li
     class="pf-c-breadcrumb__item"
   >
@@ -85,5 +85,5 @@ exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = `
       Item
     </a>
   </li>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
 import { Button, ButtonVariant } from '../Button';
@@ -9,12 +8,12 @@ import { Button, ButtonVariant } from '../Button';
 describe('Button', () => {
   Object.values(ButtonVariant).forEach(variant => {
     test(`${variant} button`, () => {
-      const view = render(
+      const { asFragment } = render(
         <Button variant={variant} aria-label={variant}>
           {variant} Button
         </Button>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 
@@ -26,82 +25,82 @@ describe('Button', () => {
   });
 
   test('link with icon', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button variant={ButtonVariant.link} icon={<CartArrowDownIcon />}>
         Block Button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isBlock', () => {
-    const view = render(<Button isBlock>Block Button</Button>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Button isBlock>Block Button</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isDisabled', () => {
-    const view = render(<Button isDisabled>Disabled Button</Button>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Button isDisabled>Disabled Button</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isDanger secondary', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button variant="secondary" isDanger>
         Disabled Button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isDanger link', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button variant="link" isDanger>
         Disabled Button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isAriaDisabled button', () => {
-    const view = render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isAriaDisabled link button', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button isAriaDisabled component="a">
         Disabled yet focusable button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isInline', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button variant={ButtonVariant.link} isInline>
         Hovered Button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isSmall', () => {
-    const view = render(<Button isSmall>Small Button</Button>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Button isSmall>Small Button</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isLarge', () => {
-    const view = render(<Button isLarge>Large Button</Button>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Button isLarge>Large Button</Button>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isLoading', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button isLoading spinnerAriaValueText="Loading">
         Loading Button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('allows passing in a string as the component', () => {
@@ -119,23 +118,23 @@ describe('Button', () => {
   });
 
   test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button component="a" isDisabled>
         Disabled Anchor Button
       </Button>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('setting tab index through props', () => {
     render(<Button tabIndex={0}>TabIndex 0 Button</Button>);
-    expect(screen.getByRole('button').getAttribute('tabindex')).toEqual('0');
+    expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0');
   });
 
   test('isLoading icon only', () => {
-    const view = render(
+    const { asFragment } = render(
       <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });