@patternfly/react-core 4.206.4 → 4.207.0

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Detached ExpandableSection renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-expandable-section pf-m-expanded pf-m-detached"
   >
@@ -45,11 +45,11 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
       </span>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Disclosure ExpandableSection 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-expandable-section pf-m-display-lg pf-m-limit-width"
   >
@@ -86,11 +86,11 @@ exports[`Disclosure ExpandableSection 1`] = `
       test 
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ExpandableSection 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-expandable-section"
   >
@@ -127,11 +127,11 @@ exports[`ExpandableSection 1`] = `
       test 
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Renders ExpandableSection expanded 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-expandable-section pf-m-expanded"
   >
@@ -168,11 +168,11 @@ exports[`Renders ExpandableSection expanded 1`] = `
        test 
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Renders ExpandableSection indented 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-expandable-section pf-m-expanded pf-m-indented"
   >
@@ -209,11 +209,11 @@ exports[`Renders ExpandableSection indented 1`] = `
        test 
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Renders Uncontrolled ExpandableSection 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-expandable-section"
   >
@@ -252,5 +252,5 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
        test 
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -7,7 +7,7 @@ test('simple fileupload', () => {
   const readStartedHandler = jest.fn();
   const readFinishedHandler = jest.fn();
 
-  const view = render(
+  const { asFragment } = render(
     <FileUpload
       id="simple-text-file"
       type="text"
@@ -19,5 +19,5 @@ test('simple fileupload', () => {
       isLoading={false}
     />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -7,7 +7,7 @@ test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
   const clearBtnClickHandler = jest.fn();
 
-  const view = render(
+  const { asFragment } = render(
     <FileUploadField
       id="custom-file-upload"
       type="text"
@@ -25,5 +25,5 @@ test('simple fileuploadfield', () => {
       {<p>A custom preview of the uploaded file can be passed as children</p>}
     </FileUploadField>
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

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

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple fileuploadfield 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-file-upload"
   >
@@ -64,5 +64,5 @@ exports[`simple fileuploadfield 1`] = `
       A custom preview of the uploaded file can be passed as children
     </p>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Form/__tests__/ActionGroup.test.tsx

@@ -5,20 +5,20 @@ import { Form } from '../Form';
 
 describe('ActionGroup component', () => {
   test('should render default action group variant', () => {
-    const view = render(
+    const { asFragment } = render(
       <ActionGroup>
         <div>Hello</div>
       </ActionGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render horizontal form ActionGroup variant', () => {
-    const view = render(
+    const { asFragment } = render(
       <Form isHorizontal>
         <ActionGroup />
       </Form>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -4,17 +4,17 @@ import { Form } from '../Form';
 
 describe('Form component', () => {
   test('should render default form variant', () => {
-    const view = render(<Form />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Form />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render horizontal form variant', () => {
-    const view = render(<Form isHorizontal />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Form isHorizontal />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('should render form with limited width', () => {
-    const view = render(<Form isWidthLimited />);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<Form isWidthLimited />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Form/__tests__/FormAlert.test.tsx

@@ -4,9 +4,7 @@ import React from 'react';
 
 describe('Form Alert component', () => {
   test('should render form group required variant', () => {
-    const view = render(
-      <FormAlert></FormAlert>
-    );
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<FormAlert></FormAlert>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -1,24 +1,26 @@
 import * as React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { FormFieldGroup } from '../FormFieldGroup';
 import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
 import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
-import { render } from '@testing-library/react';
 
 test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup
       header={
         <FormFieldGroupHeader
-          titleText={{text:"Field group 4 (non-expandable)", id:"title-text-id1"}}
+          titleText={{ text: 'Field group 4 (non-expandable)', id: 'title-text-id1' }}
           titleDescription="Field group 4 description text."
           actions={<Button />}
         />
       }
     />
   );
-  const view = render(FieldGroup);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(FieldGroup);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Check expandable form field group example against snapshot', () => {
@@ -28,15 +30,15 @@ test('Check expandable form field group example against snapshot', () => {
       toggleAriaLabel="toggle"
       header={
         <FormFieldGroupHeader
-          titleText={{text:"Field group 4 (non-expandable)", id:"title-text-id2"}}
+          titleText={{ text: 'Field group 4 (non-expandable)', id: 'title-text-id2' }}
           titleDescription="Field group 4 description text."
           actions={<Button />}
         />
       }
     />
   );
-  const view = render(FieldGroup);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(FieldGroup);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify console error logged when there is no aria-label or title', () => {
@@ -45,14 +47,9 @@ test('Verify console error logged when there is no aria-label or title', () => {
   const FieldGroup = (
     <FormFieldGroupExpandable
       isExpanded
-      header={
-        <FormFieldGroupHeader
-          titleDescription="Field group 4 description text."
-          actions={<Button />}
-        />
-      }
+      header={<FormFieldGroupHeader titleDescription="Field group 4 description text." actions={<Button />} />}
     />
   );
-  const view = render(FieldGroup);
-  expect(consoleErrorMock).toBeCalled();
+  const { asFragment } = render(FieldGroup);
+  expect(consoleErrorMock).toHaveBeenCalled();
 });

package/src/components/Form/__tests__/FormGroup.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
@@ -144,12 +143,7 @@ describe('FormGroup', () => {
 
   test('should render form group invalid variant', () => {
     const { asFragment } = render(
-      <FormGroup
-        label="label"
-        fieldId="label-id"
-        validated={'error'}
-        helperTextInvalid="Invalid FormGroup"
-      >
+      <FormGroup label="label" fieldId="label-id" validated={'error'} helperTextInvalid="Invalid FormGroup">
         <input id="id" />
       </FormGroup>
     );
@@ -175,12 +169,7 @@ describe('FormGroup', () => {
 
   test('should render form group validated error variant', () => {
     const { asFragment } = render(
-      <FormGroup
-        label="label"
-        fieldId="label-id"
-        validated={ValidatedOptions.error}
-        helperText="Validated FormGroup"
-      >
+      <FormGroup label="label" fieldId="label-id" validated={ValidatedOptions.error} helperText="Validated FormGroup">
         <input id="id" />
       </FormGroup>
     );

package/src/components/Form/__tests__/FormHelperText.test.tsx

@@ -1,33 +1,32 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {
   test('renders with PatternFly Core styles', () => {
-    render(
+    const { asFragment } = render(
       <FormHelperText isError isHidden={false}>
         test
       </FormHelperText>
     );
-    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with icon', () => {
-    render(
+    const { asFragment } = render(
       <FormHelperText isError isHidden={false} icon={<ExclamationCircleIcon />}>
         test
       </FormHelperText>
     );
-    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('className is added to the root element', () => {
-    render(<FormHelperText className="extra-class">test</FormHelperText>);
-    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<FormHelperText className="extra-class">test</FormHelperText>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('extra props are spread to the root element', () => {
@@ -39,12 +38,12 @@ describe('FormHelperText', () => {
   test('LoginFooterItem  with custom node', () => {
     const CustomNode = () => <div>My custom node</div>;
 
-    render(
+    const { asFragment } = render(
       <FormHelperText>
         <CustomNode />
       </FormHelperText>
     );
 
-    expect(screen.getByText('My custom node').parentElement.outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Form/__tests__/FormSection.test.tsx

@@ -4,12 +4,12 @@ import { render } from '@testing-library/react';
 
 test('Check form section example against snapshot', () => {
   const Section = <FormSection />;
-  const view = render(Section);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(Section);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test('Check form section example with title', () => {
-  const Section = <FormSection title="Title" titleElement="h4"/>;
-  const view = render(Section);
-  expect(view.container).toMatchSnapshot();
+  const Section = <FormSection title="Title" titleElement="h4" />;
+  const { asFragment } = render(Section);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionGroup component should render default action group variant 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-form__group pf-m-action"
   >
@@ -17,11 +17,11 @@ exports[`ActionGroup component should render default action group variant 1`] =
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ActionGroup component should render horizontal form ActionGroup variant 1`] = `
-<div>
+<DocumentFragment>
   <form
     class="pf-c-form pf-m-horizontal"
     novalidate=""
@@ -38,5 +38,5 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
       </div>
     </div>
   </form>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form component should render default form variant 1`] = `
-<div>
+<DocumentFragment>
   <form
     class="pf-c-form"
     novalidate=""
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Form component should render form with limited width 1`] = `
-<div>
+<DocumentFragment>
   <form
     class="pf-c-form pf-m-limit-width"
     novalidate=""
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`Form component should render horizontal form variant 1`] = `
-<div>
+<DocumentFragment>
   <form
     class="pf-c-form pf-m-horizontal"
     novalidate=""
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Form/__tests__/__snapshots__/FormAlert.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form Alert component should render form group required variant 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-form__alert"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Check expandable form field group example against snapshot 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-form__field-group pf-m-expanded"
   >
@@ -82,11 +82,11 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       class="pf-c-form__field-group-body"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Check form field group example against snapshot 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-form__field-group"
   >
@@ -129,5 +129,5 @@ exports[`Check form field group example against snapshot 1`] = `
       class="pf-c-form__field-group-body"
     />
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap

@@ -1,9 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormHelperText LoginFooterItem  with custom node 1`] = `"<p class=\\"pf-c-form__helper-text pf-m-hidden\\"><div>My custom node</div></p>"`;
+exports[`FormHelperText LoginFooterItem  with custom node 1`] = `
+<DocumentFragment>
+  <p
+    class="pf-c-form__helper-text pf-m-hidden"
+  />
+  <div>
+    My custom node
+  </div>
+  <p />
+</DocumentFragment>
+`;
 
-exports[`FormHelperText className is added to the root element 1`] = `"<p class=\\"pf-c-form__helper-text pf-m-hidden extra-class\\">test</p>"`;
+exports[`FormHelperText className is added to the root element 1`] = `
+<DocumentFragment>
+  <p
+    class="pf-c-form__helper-text pf-m-hidden extra-class"
+  >
+    test
+  </p>
+</DocumentFragment>
+`;
 
-exports[`FormHelperText renders with PatternFly Core styles 1`] = `"<p class=\\"pf-c-form__helper-text pf-m-error\\">test</p>"`;
+exports[`FormHelperText renders with PatternFly Core styles 1`] = `
+<DocumentFragment>
+  <p
+    class="pf-c-form__helper-text pf-m-error"
+  >
+    test
+  </p>
+</DocumentFragment>
+`;
 
-exports[`FormHelperText renders with icon 1`] = `"<p class=\\"pf-c-form__helper-text pf-m-error\\"><span class=\\"pf-c-form__helper-text-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"></path></svg></span>test</p>"`;
+exports[`FormHelperText renders with icon 1`] = `
+<DocumentFragment>
+  <p
+    class="pf-c-form__helper-text pf-m-error"
+  >
+    <span
+      class="pf-c-form__helper-text-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        />
+      </svg>
+    </span>
+    test
+  </p>
+</DocumentFragment>
+`;

package/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap

@@ -1,17 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Check form section example against snapshot 1`] = `
-<div>
+<DocumentFragment>
   <section
     class="pf-c-form__section"
-  >
-    
-  </section>
-</div>
+  />
+</DocumentFragment>
 `;
 
 exports[`Check form section example with title 1`] = `
-<div>
+<DocumentFragment>
   <section
     class="pf-c-form__section"
   >
@@ -21,5 +19,5 @@ exports[`Check form section example with title 1`] = `
       Title
     </h4>
   </section>
-</div>
+</DocumentFragment>
 `;