@patternfly/react-core 4.206.3 → 4.206.6

package/src/components/Card/__tests__/__snapshots__/CardBody.test.tsx.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CardBody body with no-fill applied 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-card__body pf-m-no-fill"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`CardBody renders with PatternFly Core styles 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-card__body"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardExpandableContent.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders successfully 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-card__expandable-content"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardFooter.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CardFooter renders with PatternFly Core styles 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-card__footer"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardHeadMain renders with PatternFly Core styles 1`] = `"<div class=\\"pf-c-card__head-main\\">text</div>"`;
+exports[`CardHeadMain renders with PatternFly Core styles 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-card__head-main"
+  >
+    text
+  </div>
+</DocumentFragment>
+`;

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CardHeader onExpand adds the toggle button 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-card__header"
   >
@@ -36,5 +36,5 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

package/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `"<div class=\\"\\">text</div>"`;
+exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    text
+  </div>
+</DocumentFragment>
+`;

package/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap

@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardTitle renders with PatternFly Core styles 1`] = `"<div class=\\"pf-c-card__title\\">text</div>"`;
+exports[`CardTitle renders with PatternFly Core styles 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-card__title"
+  >
+    text
+  </div>
+</DocumentFragment>
+`;

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

@@ -2,55 +2,58 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { Checkbox } from '../Checkbox';
 
 describe('Checkbox', () => {
   test('controlled', () => {
-    render(<Checkbox isChecked id="check" aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox isChecked id="check" aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('controlled - 3rd state', () => {
-    render(<Checkbox isChecked={null} id="check" aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox isChecked={null} id="check" aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('uncontrolled', () => {
-    render(<Checkbox id="check" aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox id="check" aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('isDisabled', () => {
-    render(<Checkbox id="check" isDisabled aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox id="check" isDisabled aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label is string', () => {
-    render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label is function', () => {
     const functionLabel = () => <h1>Header</h1>;
-    render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('label is node', () => {
-    render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing class', () => {
-    render(<Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(
+      <Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing HTML attribute', () => {
-    render(<Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
-    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+    const { asFragment } = render(
+      <Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passing description', () => {
@@ -69,7 +72,7 @@ describe('Checkbox', () => {
     render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
 
     userEvent.click(screen.getByLabelText('check'));
-    expect(onChangeHandler).toBeCalled();
+    expect(onChangeHandler).toHaveBeenCalled();
   });
 
   test('should throw console error when no id is given', () => {
@@ -77,6 +80,6 @@ describe('Checkbox', () => {
     global.console = { ...global.console, error: myMock };
 
     render(<Checkbox id={undefined} />);
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
   });
 });

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

@@ -1,19 +1,214 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Checkbox controlled - 3rd state 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-2\\">"`;
+exports[`Checkbox controlled - 3rd state 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check pf-m-standalone"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-2"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox controlled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-1\\" checked=\\"\\">"`;
+exports[`Checkbox controlled 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check pf-m-standalone"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-1"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox isDisabled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" disabled=\\"\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-4\\">"`;
+exports[`Checkbox isDisabled 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check pf-m-standalone"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-4"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      disabled=""
+      id="check"
+      type="checkbox"
+    />
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox label is function 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-6\\" checked=\\"\\">"`;
+exports[`Checkbox label is function 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-6"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+    <label
+      class="pf-c-check__label"
+      for="check"
+    >
+      <h1>
+        Header
+      </h1>
+    </label>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox label is node 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-7\\" checked=\\"\\">"`;
+exports[`Checkbox label is node 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-7"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+    <label
+      class="pf-c-check__label"
+      for="check"
+    >
+      <h1>
+        Header
+      </h1>
+    </label>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox label is string 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-5\\" checked=\\"\\">"`;
+exports[`Checkbox label is string 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-5"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+    <label
+      class="pf-c-check__label"
+      for="check"
+    >
+      Label
+    </label>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox passing HTML attribute 1`] = `"<input aria-labelledby=\\"labelId\\" id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-9\\" checked=\\"\\">"`;
+exports[`Checkbox passing HTML attribute 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      aria-labelledby="labelId"
+      checked=""
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-9"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+    <label
+      class="pf-c-check__label"
+      for="check"
+    >
+      label
+    </label>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox passing class 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-8\\" checked=\\"\\">"`;
+exports[`Checkbox passing class 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check class-123"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-8"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+    <label
+      class="pf-c-check__label"
+      for="check"
+    >
+      label
+    </label>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`Checkbox uncontrolled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-3\\">"`;
+exports[`Checkbox uncontrolled 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-check pf-m-standalone"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      class="pf-c-check__input"
+      data-ouia-component-id="OUIA-Generated-Checkbox-3"
+      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+  </div>
+</DocumentFragment>
+`;

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

@@ -2,42 +2,40 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { Chip } from '../Chip';
 
-
 describe('Chip', () => {
   test('overflow', () => {
-    const view = render(
+    const { asFragment } = render(
       <Chip className="my-chp-cls" isOverflowChip>
         4 more
       </Chip>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('closable', () => {
-    const view = render(
+    const { asFragment } = render(
       <Chip className="my-chp-cls" id="chip_one">
         Chip
       </Chip>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('closable with tooltip', () => {
-    const view = render(
+    const { asFragment } = render(
       <Chip className="my-chp-cls" id="chip_one">
         1234567890123456789
       </Chip>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('readonly', () => {
-    const view = render(
+    const { asFragment } = render(
       <Chip className="my-chp-cls" isReadOnly>
         4 more
       </Chip>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
-

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Chip closable 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-2"
@@ -40,11 +40,11 @@ exports[`Chip closable 1`] = `
       </svg>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Chip closable with tooltip 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-3"
@@ -83,11 +83,11 @@ exports[`Chip closable with tooltip 1`] = `
       </svg>
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Chip overflow 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chip pf-m-overflow my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -100,11 +100,11 @@ exports[`Chip overflow 1`] = `
       4 more
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Chip readonly 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-4"
@@ -118,5 +118,5 @@ exports[`Chip readonly 1`] = `
       4 more
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -2,38 +2,37 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
 
 import { ChipGroup } from '../index';
 import { Chip } from '../../Chip';
 
 describe('ChipGroup', () => {
   test('chip group default', () => {
-    const view = render(
+    const { asFragment } = render(
       <ChipGroup>
         <Chip>1.1</Chip>
       </ChipGroup>
     );
 
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('chip group with category', () => {
-    const view = render(
+    const { asFragment } = render(
       <ChipGroup categoryName="category">
         <Chip>1.1</Chip>
       </ChipGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('chip group with closable category', () => {
-    const view = render(
+    const { asFragment } = render(
       <ChipGroup categoryName="category" isClosable>
         <Chip>1.1</Chip>
       </ChipGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('chip group expanded', () => {
@@ -59,11 +58,11 @@ describe('ChipGroup', () => {
   });
 
   test('chip group with category and tooltip', () => {
-    const view = render(
+    const { asFragment } = render(
       <ChipGroup categoryName="A very long category name">
         <Chip>1.1</Chip>
       </ChipGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChipGroup chip group default 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-label="Chip group category"
     class="pf-c-chip-group"
@@ -12,7 +12,6 @@ exports[`ChipGroup chip group default 1`] = `
     <div
       class="pf-c-chip-group__main"
     >
-      
       <ul
         aria-label="Chip group category"
         class="pf-c-chip-group__list"
@@ -63,11 +62,11 @@ exports[`ChipGroup chip group default 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ChipGroup chip group with category 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-labelledby="pf-random-id-2"
     class="pf-c-chip-group pf-m-category"
@@ -134,11 +133,11 @@ exports[`ChipGroup chip group with category 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ChipGroup chip group with category and tooltip 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-labelledby="pf-random-id-12"
     class="pf-c-chip-group pf-m-category"
@@ -205,11 +204,11 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
       </ul>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`ChipGroup chip group with closable category 1`] = `
-<div>
+<DocumentFragment>
   <div
     aria-labelledby="pf-random-id-4"
     class="pf-c-chip-group pf-m-category"
@@ -305,5 +304,5 @@ exports[`ChipGroup chip group with closable category 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;