@patternfly/react-core 4.206.5 → 4.208.0

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

@@ -1,22 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HelperText default helper text variant applies successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text__item"
   >
     <span
       class="pf-c-helper-text__item-text"
     >
-      default
-       help test text
+      default help test text
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText dynamic helper text renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text"
   >
@@ -48,11 +47,11 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
       </span>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText helper text block renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text"
   >
@@ -84,11 +83,11 @@ exports[`HelperText helper text block renders successfully 1`] = `
       </span>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText icon helper text renders properly 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text"
   >
@@ -120,41 +119,39 @@ exports[`HelperText icon helper text renders properly 1`] = `
       </span>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText indeterminate helper text variant applies successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text__item pf-m-indeterminate"
   >
     <span
       class="pf-c-helper-text__item-text"
     >
-      indeterminate
-       help test text
+      indeterminate help test text
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText invalid helper text variant applies successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text__item"
   >
     <span
       class="pf-c-helper-text__item-text"
     >
-      invalid
-       help test text
+      invalid help test text
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText simple helper text renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text"
   >
@@ -168,26 +165,25 @@ exports[`HelperText simple helper text renders successfully 1`] = `
       </span>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText success helper text variant applies successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text__item pf-m-success"
   >
     <span
       class="pf-c-helper-text__item-text"
     >
-      success
-       help test text
+      success help test text
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText variant comonent helper text renders properly 1`] = `
-<div>
+<DocumentFragment>
   <ul
     class="pf-c-helper-text"
   >
@@ -210,20 +206,19 @@ exports[`HelperText variant comonent helper text renders properly 1`] = `
       </span>
     </li>
   </ul>
-</div>
+</DocumentFragment>
 `;
 
 exports[`HelperText warning helper text variant applies successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-helper-text__item pf-m-warning"
   >
     <span
       class="pf-c-helper-text__item-text"
     >
-      warning
-       help test text
+      warning help test text
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -6,12 +6,12 @@ import { HintTitle } from '../HintTitle';
 import { HintFooter } from '../HintFooter';
 
 test('simple hint', () => {
-  const view = render(
+  const { asFragment } = render(
     <Hint>
       <HintTitle>Title</HintTitle>
       <HintBody>Body</HintBody>
       <HintFooter>Footer</HintFooter>
     </Hint>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple hint 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-hint"
   >
@@ -24,5 +24,5 @@ exports[`simple hint 1`] = `
       Footer
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -11,13 +11,13 @@ describe('InputGroup', () => {
     // In this test, TextInput is a form-control component and Button is not.
     // If Button has an id props, this should be used in aria-describedby.
     render(
-      <InputGroup data-testid="input-group-test-id">
+      <InputGroup>
         <TextInput value="some data" aria-label="some text" />
         <Button variant="primary" id="button-id">
           hello
         </Button>
       </InputGroup>
     );
-    expect(screen.getByLabelText('some text').getAttribute('aria-describedby')).toEqual('button-id');
+    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
   });
 });

package/src/components/InputGroup/__tests__/InputGroupText.test.tsx

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

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

@@ -5,51 +5,51 @@ import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
 
 test('simple jumplinks', () => {
-  const view = render(
+  const { asFragment } = render(
     <JumpLinks>
       <JumpLinksItem>Inactive section</JumpLinksItem>
       <JumpLinksItem isActive>Active section</JumpLinksItem>
       <JumpLinksItem>Inactive section</JumpLinksItem>
     </JumpLinks>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('jumplinks centered', () => {
-  const view = render(
+  const { asFragment } = render(
     <JumpLinks isCentered>
       <JumpLinksItem>Inactive section</JumpLinksItem>
       <JumpLinksItem isActive>Active section</JumpLinksItem>
       <JumpLinksItem>Inactive section</JumpLinksItem>
     </JumpLinks>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('jumplinks with label', () => {
-  const view = render(
+  const { asFragment } = render(
     <JumpLinks isCentered label="Jump to section">
       <JumpLinksItem>Inactive section</JumpLinksItem>
       <JumpLinksItem isActive>Active section</JumpLinksItem>
       <JumpLinksItem>Inactive section</JumpLinksItem>
     </JumpLinks>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('vertical with label', () => {
-  const view = render(
+  const { asFragment } = render(
     <JumpLinks isVertical alwaysShowLabel label="Jump to section">
       <JumpLinksItem>Inactive section</JumpLinksItem>
       <JumpLinksItem isActive>Active section</JumpLinksItem>
       <JumpLinksItem>Inactive section</JumpLinksItem>
     </JumpLinks>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('expandable vertical with subsection', () => {
-  const view = render(
+  const { asFragment } = render(
     <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
       <JumpLinksItem>Inactive section</JumpLinksItem>
       <JumpLinksItem>
@@ -64,5 +64,5 @@ test('expandable vertical with subsection', () => {
       <JumpLinksItem>Inactive section</JumpLinksItem>
     </JumpLinks>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`expandable vertical with subsection 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Jump to section"
     class="pf-c-jump-links pf-m-vertical pf-m-expandable"
@@ -45,9 +45,7 @@ exports[`expandable vertical with subsection 1`] = `
             <span
               class="pf-c-jump-links__toggle-text"
             >
-               
-              Jump to section
-               
+               Jump to section 
             </span>
           </button>
         </div>
@@ -159,11 +157,11 @@ exports[`expandable vertical with subsection 1`] = `
       </ul>
     </div>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`jumplinks centered 1`] = `
-<div>
+<DocumentFragment>
   <nav
     class="pf-c-jump-links pf-m-center"
   >
@@ -219,11 +217,11 @@ exports[`jumplinks centered 1`] = `
       </ul>
     </div>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`jumplinks with label 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Jump to section"
     class="pf-c-jump-links pf-m-center"
@@ -286,11 +284,11 @@ exports[`jumplinks with label 1`] = `
       </ul>
     </div>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`simple jumplinks 1`] = `
-<div>
+<DocumentFragment>
   <nav
     class="pf-c-jump-links"
   >
@@ -346,11 +344,11 @@ exports[`simple jumplinks 1`] = `
       </ul>
     </div>
   </nav>
-</div>
+</DocumentFragment>
 `;
 
 exports[`vertical with label 1`] = `
-<div>
+<DocumentFragment>
   <nav
     aria-label="Jump to section"
     class="pf-c-jump-links pf-m-vertical"
@@ -413,5 +411,5 @@ exports[`vertical with label 1`] = `
       </ul>
     </div>
   </nav>
-</div>
+</DocumentFragment>
 `;

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { Label } from '../Label';
 
@@ -10,123 +9,91 @@ const labelColors = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey']
 
 describe('Label', () => {
   test('renders', () => {
-    render(<Label data-testid="label-test-id">Something</Label>);
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Label>Something</Label>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with outline variant', () => {
-    render(
-      <Label variant="outline" data-testid="label-test-id">
-        Something
-      </Label>
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Label variant="outline">Something</Label>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with isCompact', () => {
-    render(
-      <Label isCompact data-testid="label-test-id">
-        Something
-      </Label>
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Label isCompact>Something</Label>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with href', () => {
-    render(
-      <Label href="#" data-testid="label-test-id">
-        Something
-      </Label>
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Label href="#">Something</Label>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with href with outline variant', () => {
-    render(
-      <Label href="#" variant="outline" data-testid="label-test-id">
+    const { asFragment } = render(
+      <Label href="#" variant="outline">
         Something
       </Label>
     );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with close button', () => {
-    render(
-      <Label onClose={jest.fn()} data-testid="label-test-id">
-        Something
-      </Label>
-    );
+    const { asFragment } = render(<Label onClose={jest.fn()}>Something</Label>);
 
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with close button and outline variant', () => {
-    render(
-      <Label onClose={jest.fn()} variant="outline" data-testid="label-test-id">
+    const { asFragment } = render(
+      <Label onClose={jest.fn()} variant="outline">
         Something
       </Label>
     );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   labelColors.forEach((color: string) =>
     test(`label with ${color} color`, () => {
-      render(
-        <Label color={color as any} data-testid="label-test-id">
-          Something
-        </Label>
-      );
-      expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+      const { asFragment } = render(<Label color={color as any}>Something</Label>);
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   labelColors.forEach((color: string) =>
     test(`label with ${color} color with outline variant`, () => {
-      render(
-        <Label color={color as any} variant="outline" data-testid="label-test-id">
+      const { asFragment } = render(
+        <Label color={color as any} variant="outline">
           Something
         </Label>
       );
-      expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     })
   );
 
   test('label with additional class name', () => {
-    render(
-      <Label className="klass1" data-testid="label-test-id">
-        Something
-      </Label>
-    );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Label className="klass1">Something</Label>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with additional class name and props', () => {
-    render(
-      <Label className="class-1" id="label-1" data-label-name="something" data-testid="label-test-id">
+    const { asFragment } = render(
+      <Label className="class-1" id="label-1" data-label-name="something">
         Something
       </Label>
     );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label with truncation', () => {
-    render(
-      <Label isTruncated data-testid="label-test-id">
-        Something very very very very very long that should be truncated
-      </Label>
+    const { asFragment } = render(
+      <Label isTruncated>Something very very very very very long that should be truncated</Label>
     );
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('editable label', () => {
-    render(
-      <Label
-        onClose={jest.fn()}
-        onEditCancel={jest.fn()}
-        onEditComplete={jest.fn()}
-        isEditable
-        data-testid="label-test-id"
-      >
+    const { asFragment } = render(
+      <Label onClose={jest.fn()} onEditCancel={jest.fn()} onEditComplete={jest.fn()} isEditable>
         Something
       </Label>
     );
@@ -134,10 +101,10 @@ describe('Label', () => {
     const button = screen.getByRole('button', { name: 'Something' });
 
     expect(button).toBeInTheDocument();
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
 
     userEvent.click(button);
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
-    expect(screen.getByTestId('label-test-id').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });