@patternfly/react-core 4.206.5 → 4.206.6

package/src/components/FormSelect/__tests__/FormSelect.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 { FormSelect } from '../FormSelect';
 import { FormSelectOption } from '../FormSelectOption';
@@ -54,18 +53,18 @@ const groupedProps = {
 
 describe('FormSelect', () => {
   test('Simple FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       <FormSelect value={props.value} aria-label="simple FormSelect">
         {props.options.map((option, index) => (
           <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
         ))}
       </FormSelect>
     );
-    expect(screen.getByLabelText('simple FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Grouped FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       <FormSelect value={groupedProps.value} aria-label="grouped FormSelect">
         {groupedProps.groups.map((group, index) => (
           <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
@@ -76,71 +75,71 @@ describe('FormSelect', () => {
         ))}
       </FormSelect>
     );
-    expect(screen.getByLabelText('grouped FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('Disabled FormSelect input ', () => {
-    render(
+    const { asFragment } = render(
       <FormSelect isDisabled aria-label="disabled FormSelect">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
     );
-    expect(screen.getByLabelText('disabled FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('FormSelect input with aria-label does not generate console error', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
-    render(
+    const { asFragment } = render(
       <FormSelect aria-label="label">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
     );
 
-    expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot();
-    expect(myMock).not.toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('FormSelect input with id does not generate console error', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
-    render(
+    const { asFragment } = render(
       <FormSelect id="id" aria-label="label">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
     );
 
-    expect(screen.getByLabelText('label').outerHTML).toMatchSnapshot();
-    expect(myMock).not.toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+    expect(myMock).not.toHaveBeenCalled();
   });
 
   test('FormSelect input with no aria-label or id generates console error', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
-    render(
-      <FormSelect data-testid="test-id">
+    const { asFragment } = render(
+      <FormSelect>
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
     );
 
-    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
-    expect(myMock).toBeCalled();
+    expect(asFragment()).toMatchSnapshot();
+    expect(myMock).toHaveBeenCalled();
   });
 
   test('invalid FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       <FormSelect validated="error" aria-label="invalid FormSelect">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
     );
-    expect(screen.getByLabelText('invalid FormSelect').outerHTML).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('validated success FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       <FormSelect validated={ValidatedOptions.success} aria-label="validated FormSelect">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
@@ -148,12 +147,12 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect.className).toContain('pf-m-success');
-    expect(formSelect.outerHTML).toMatchSnapshot();
+    expect(formSelect).toHaveClass('pf-m-success');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('validated warning FormSelect input', () => {
-    render(
+    const { asFragment } = render(
       <FormSelect validated={ValidatedOptions.warning} aria-label="validated FormSelect">
         <FormSelectOption key={1} value={props.options[1].value} label={props.options[1].label} />
       </FormSelect>
@@ -161,8 +160,8 @@ describe('FormSelect', () => {
 
     const formSelect = screen.getByLabelText('validated FormSelect');
 
-    expect(formSelect.className).toContain('pf-m-warning');
-    expect(formSelect.outerHTML).toMatchSnapshot();
+    expect(formSelect).toHaveClass('pf-m-warning');
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('required FormSelect input', () => {
@@ -186,7 +185,7 @@ describe('FormSelect', () => {
 
     userEvent.selectOptions(screen.getByLabelText('Some label'), 'Mr');
 
-    expect(myMock).toBeCalled();
+    expect(myMock).toHaveBeenCalled();
     expect(myMock.mock.calls[0][0]).toEqual('mr');
   });
 });

package/src/components/FormSelect/__tests__/Generated/FormSelectOption.test.tsx

@@ -8,6 +8,6 @@ import { FormSelectOption } from '../../FormSelectOption';
 import {} from '../..';
 
 it('FormSelectOption should match snapshot (auto-generated)', () => {
-  const view = render(<FormSelectOption className={"''"} value={''} label={'string'} isDisabled={false} />);
-  expect(view.container).toMatchSnapshot();
+  const { asFragment } = render(<FormSelectOption className={"''"} value={''} label={'string'} isDisabled={false} />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/FormSelect/__tests__/Generated/FormSelectOptionGroup.test.tsx

@@ -8,8 +8,8 @@ import { FormSelectOptionGroup } from '../../FormSelectOptionGroup';
 import {} from '../..';
 
 it('FormSelectOptionGroup should match snapshot (auto-generated)', () => {
-  const view = render(
+  const { asFragment } = render(
     <FormSelectOptionGroup children={<>ReactNode</>} className={"''"} label={'string'} isDisabled={false} />
   );
-  expect(view.container).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOption.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormSelectOption should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <option
     class="''"
     value=""
   >
     string
   </option>
-</div>
+</DocumentFragment>
 `;

package/src/components/FormSelect/__tests__/Generated/__snapshots__/FormSelectOptionGroup.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormSelectOptionGroup should match snapshot (auto-generated) 1`] = `
-<div>
+<DocumentFragment>
   <optgroup
     class="''"
     label="string"
   >
     ReactNode
   </optgroup>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,19 +1,266 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormSelect Disabled FormSelect input  1`] = `"<select aria-label=\\"disabled FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-3\\" disabled=\\"\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect Disabled FormSelect input  1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="disabled FormSelect"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+    disabled=""
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `"<select aria-label=\\"label\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-4\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="label"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect FormSelect input with id does not generate console error 1`] = `"<select id=\\"id\\" aria-label=\\"label\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-5\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="label"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+    id="id"
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `"<select data-testid=\\"test-id\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-6\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect Grouped FormSelect input 1`] = `"<select aria-label=\\"grouped FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-2\\"><optgroup class=\\"\\" label=\\"Group1\\"><option class=\\"\\" value=\\"1\\">The First Option</option><option class=\\"\\" value=\\"2\\">Second option is selected by default</option></optgroup><optgroup class=\\"\\" label=\\"Group2\\"><option class=\\"\\" value=\\"3\\">The Third Option</option><option class=\\"\\" value=\\"4\\">The Fourth option</option></optgroup><optgroup disabled=\\"\\" class=\\"\\" label=\\"Group3\\"><option class=\\"\\" value=\\"5\\">The Fifth Option</option><option class=\\"\\" value=\\"6\\">The Sixth option</option></optgroup></select>"`;
+exports[`FormSelect Grouped FormSelect input 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="grouped FormSelect"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <optgroup
+      class=""
+      label="Group1"
+    >
+      <option
+        class=""
+        value="1"
+      >
+        The First Option
+      </option>
+      <option
+        class=""
+        value="2"
+      >
+        Second option is selected by default
+      </option>
+    </optgroup>
+    <optgroup
+      class=""
+      label="Group2"
+    >
+      <option
+        class=""
+        value="3"
+      >
+        The Third Option
+      </option>
+      <option
+        class=""
+        value="4"
+      >
+        The Fourth option
+      </option>
+    </optgroup>
+    <optgroup
+      class=""
+      disabled=""
+      label="Group3"
+    >
+      <option
+        class=""
+        value="5"
+      >
+        The Fifth Option
+      </option>
+      <option
+        class=""
+        value="6"
+      >
+        The Sixth option
+      </option>
+    </optgroup>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect Simple FormSelect input 1`] = `"<select aria-label=\\"simple FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-default-1\\"><option class=\\"\\" value=\\"please choose\\" disabled=\\"\\">Please Choose</option><option class=\\"\\" value=\\"mr\\">Mr</option><option class=\\"\\" value=\\"miss\\">Miss</option><option class=\\"\\" value=\\"mrs\\">Mrs</option><option class=\\"\\" value=\\"ms\\">Ms</option><option class=\\"\\" value=\\"dr\\">Dr</option><option class=\\"\\" value=\\"other\\" disabled=\\"\\">Other</option></select>"`;
+exports[`FormSelect Simple FormSelect input 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="simple FormSelect"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <option
+      class=""
+      disabled=""
+      value="please choose"
+    >
+      Please Choose
+    </option>
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+    <option
+      class=""
+      value="miss"
+    >
+      Miss
+    </option>
+    <option
+      class=""
+      value="mrs"
+    >
+      Mrs
+    </option>
+    <option
+      class=""
+      value="ms"
+    >
+      Ms
+    </option>
+    <option
+      class=""
+      value="dr"
+    >
+      Dr
+    </option>
+    <option
+      class=""
+      disabled=""
+      value="other"
+    >
+      Other
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect invalid FormSelect input 1`] = `"<select aria-label=\\"invalid FormSelect\\" class=\\"pf-c-form-control\\" aria-invalid=\\"true\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-error-1\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect invalid FormSelect input 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="true"
+    aria-label="invalid FormSelect"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect validated success FormSelect input 1`] = `"<select aria-label=\\"validated FormSelect\\" class=\\"pf-c-form-control pf-m-success\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-success-1\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect validated success FormSelect input 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="validated FormSelect"
+    class="pf-c-form-control pf-m-success"
+    data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;
 
-exports[`FormSelect validated warning FormSelect input 1`] = `"<select aria-label=\\"validated FormSelect\\" class=\\"pf-c-form-control pf-m-warning\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/FormSelect\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-FormSelect-warning-1\\"><option class=\\"\\" value=\\"mr\\">Mr</option></select>"`;
+exports[`FormSelect validated warning FormSelect input 1`] = `
+<DocumentFragment>
+  <select
+    aria-invalid="false"
+    aria-label="validated FormSelect"
+    class="pf-c-form-control pf-m-warning"
+    data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
+    data-ouia-component-type="PF4/FormSelect"
+    data-ouia-safe="true"
+  >
+    <option
+      class=""
+      value="mr"
+    >
+      Mr
+    </option>
+  </select>
+</DocumentFragment>
+`;

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

@@ -6,61 +6,61 @@ import { CheckIcon } from '@patternfly/react-icons';
 
 describe('HelperText', () => {
   test('simple helper text renders successfully', () => {
-    const view = render(
+    const { asFragment } = render(
       <HelperText>
         <HelperTextItem>help test text</HelperTextItem>
       </HelperText>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   Object.values(['default', 'indeterminate', 'warning', 'success', 'invalid']).forEach(variant => {
     test(`${variant} helper text variant applies successfully`, () => {
-      const view = render(
-        <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'invalid'}>
+      const { asFragment } = render(
+        <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>
           {variant} help test text
         </HelperTextItem>
       );
-      expect(view.container).toMatchSnapshot();
+      expect(asFragment()).toMatchSnapshot();
     });
   });
 
   test('variant comonent helper text renders properly', () => {
-    const view = render(
+    const { asFragment } = render(
       <HelperText component="ul">
         <HelperTextItem component="li">help test text 1</HelperTextItem>
         <HelperTextItem component="li">help test text 2</HelperTextItem>
       </HelperText>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('icon helper text renders properly', () => {
-    const view = render(
+    const { asFragment } = render(
       <HelperText>
         <HelperTextItem icon={<CheckIcon />}>help test text</HelperTextItem>
       </HelperText>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('dynamic helper text renders successfully', () => {
-    const view = render(
+    const { asFragment } = render(
       <HelperText>
         <HelperTextItem isDynamic>help test text</HelperTextItem>
       </HelperText>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('helper text block renders successfully', () => {
-    const view = render(
+    const { asFragment } = render(
       <HelperText>
         <HelperTextItem>help test text 1</HelperTextItem>
         <HelperTextItem>help test text 2</HelperTextItem>
         <HelperTextItem>help test text 3</HelperTextItem>
       </HelperText>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });