@patternfly/react-core 4.202.12 → 4.202.15

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

@@ -1,36 +1,50 @@
 import React from 'react';
-import { FormHelperText } from '../FormHelperText';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { FormHelperText } from '../FormHelperText';
 
-test('renders with PatternFly Core styles', () => {
-  const view = render(<FormHelperText isError isHidden={false} />);
-  expect(view.container).toMatchSnapshot();
-});
+describe('FormHelperText', () => {
+  test('renders with PatternFly Core styles', () => {
+    render(
+      <FormHelperText isError isHidden={false}>
+        test
+      </FormHelperText>
+    );
+    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+  });
 
-test('renders with icon', () => {
-  const view = render(<FormHelperText isError isHidden={false} icon={<ExclamationCircleIcon />} />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('renders with icon', () => {
+    render(
+      <FormHelperText isError isHidden={false} icon={<ExclamationCircleIcon />}>
+        test
+      </FormHelperText>
+    );
+    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+  });
 
-test('className is added to the root element', () => {
-  const view = shallow(<FormHelperText className="extra-class" />);
-  expect(view.prop('className')).toMatchSnapshot();
-});
+  test('className is added to the root element', () => {
+    render(<FormHelperText className="extra-class">test</FormHelperText>);
+    expect(screen.getByText('test').outerHTML).toMatchSnapshot();
+  });
 
-test('extra props are spread to the root element', () => {
-  const testId = 'login-body';
-  const view = shallow(<FormHelperText data-testid={testId} />);
-  expect(view.prop('data-testid')).toBe(testId);
-});
+  test('extra props are spread to the root element', () => {
+    const testId = 'login-body';
+    render(<FormHelperText data-testid={testId}>test</FormHelperText>);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('LoginFooterItem  with custom node', () => {
+    const CustomNode = () => <div>My custom node</div>;
+
+    render(
+      <FormHelperText>
+        <CustomNode />
+      </FormHelperText>
+    );
 
-test('LoginFooterItem  with custom node', () => {
-  const CustomNode = () => <div>My custom node</div>;
-  const view = render(
-    <FormHelperText>
-      <CustomNode />
-    </FormHelperText>
-  );
-  expect(view.container).toMatchSnapshot();
+    expect(screen.getByText('My custom node').parentElement.outerHTML).toMatchSnapshot();
+  });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormGroup component should render correctly when label is not a string with Children = Array 1`] = `
-<div>
+exports[`FormGroup should render correctly when label is not a string with Children = Array 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -32,14 +32,13 @@ exports[`FormGroup component should render correctly when label is not a string
         id="id"
       />
       <input />
-      
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render default form group variant 1`] = `
-<div>
+exports[`FormGroup should render default form group variant 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -73,11 +72,11 @@ exports[`FormGroup component should render default form group variant 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group invalid variant 1`] = `
-<div>
+exports[`FormGroup should render form group invalid variant 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -111,11 +110,11 @@ exports[`FormGroup component should render form group invalid variant 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group required variant 1`] = `
-<div>
+exports[`FormGroup should render form group validated error variant 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -124,20 +123,13 @@ exports[`FormGroup component should render form group required variant 1`] = `
     >
       <label
         class="pf-c-form__label"
-        for="id"
+        for="label-id"
       >
         <span
           class="pf-c-form__label-text"
         >
           label
         </span>
-        <span
-          aria-hidden="true"
-          class="pf-c-form__label-required"
-        >
-           
-          *
-        </span>
       </label>
        
     </div>
@@ -147,16 +139,16 @@ exports[`FormGroup component should render form group required variant 1`] = `
       <input
         id="id"
       />
-      
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group validated error variant 1`] = `
-<div>
+exports[`FormGroup should render form group validated success variant 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
+    data-testid="form-group-test-id"
   >
     <div
       class="pf-c-form__group-label"
@@ -175,78 +167,37 @@ exports[`FormGroup component should render form group validated error variant 1`
     </div>
     <div
       class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FormGroup component should render form group validated success variant 1`] = `
-<FormGroup
-  fieldId="label-id"
-  helperText="Validated FormGroup"
-  label="label"
-  validated="success"
->
-  <div
-    className="pf-c-form__group"
-  >
-    <div
-      className="pf-c-form__group-label"
-    >
-      <label
-        className="pf-c-form__label"
-        htmlFor="label-id"
-      >
-        <span
-          className="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      className="pf-c-form__group-control"
     >
       <input
         id="id"
       />
       <div
         aria-live="polite"
-        className="pf-c-form__helper-text pf-m-success"
+        class="pf-c-form__helper-text pf-m-success"
         id="label-id-helper"
       >
         Validated FormGroup
       </div>
     </div>
   </div>
-</FormGroup>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group validated warning variant 1`] = `
-<FormGroup
-  fieldId="label-id"
-  helperText="Validated FormGroup"
-  label="label"
-  validated="warning"
->
+exports[`FormGroup should render form group validated warning variant 1`] = `
+<DocumentFragment>
   <div
-    className="pf-c-form__group"
+    class="pf-c-form__group"
+    data-testid="form-group-test-id"
   >
     <div
-      className="pf-c-form__group-label"
+      class="pf-c-form__group-label"
     >
       <label
-        className="pf-c-form__label"
-        htmlFor="label-id"
+        class="pf-c-form__label"
+        for="label-id"
       >
         <span
-          className="pf-c-form__label-text"
+          class="pf-c-form__label-text"
         >
           label
         </span>
@@ -254,127 +205,25 @@ exports[`FormGroup component should render form group validated warning variant
        
     </div>
     <div
-      className="pf-c-form__group-control"
+      class="pf-c-form__group-control"
     >
       <input
         id="id"
       />
       <div
         aria-live="polite"
-        className="pf-c-form__helper-text pf-m-warning"
+        class="pf-c-form__helper-text pf-m-warning"
         id="label-id-helper"
       >
         Validated FormGroup
       </div>
     </div>
   </div>
-</FormGroup>
-`;
-
-exports[`FormGroup component should render form group variant with function helperText 1`] = `
-<div>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          Label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="label-id"
-      />
-      <div>
-        label
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FormGroup component should render form group variant with function label 1`] = `
-<div>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          <div>
-            label
-          </div>
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        aria-label="input"
-      />
-      
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FormGroup component should render form group variant with node helperText 1`] = `
-<div>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          Label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="label-id"
-      />
-      <h1>
-        Header
-      </h1>
-    </div>
-  </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group variant with node label 1`] = `
-<div>
+exports[`FormGroup should render form group variant with node label 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -401,14 +250,13 @@ exports[`FormGroup component should render form group variant with node label 1`
       <input
         aria-label="input"
       />
-      
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group variant with required label 1`] = `
-<div>
+exports[`FormGroup should render form group variant with required label 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -428,8 +276,7 @@ exports[`FormGroup component should render form group variant with required labe
           aria-hidden="true"
           class="pf-c-form__label-required"
         >
-           
-          *
+           *
         </span>
       </label>
        
@@ -440,14 +287,13 @@ exports[`FormGroup component should render form group variant with required labe
       <input
         id="label-id"
       />
-      
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group variant without label 1`] = `
-<div>
+exports[`FormGroup should render form group variant without label 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -457,14 +303,13 @@ exports[`FormGroup component should render form group variant without label 1`]
       <input
         aria-label="input"
       />
-      
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render form group with additonal label info 1`] = `
-<div>
+exports[`FormGroup should render form group with additonal label info 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-form__group"
   >
@@ -500,14 +345,13 @@ exports[`FormGroup component should render form group with additonal label info
       <input
         aria-label="input"
       />
-      
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render helper text above input 1`] = `
-<div>
+exports[`FormGroup should render helper text above input 1`] = `
+<DocumentFragment>
   <form
     class="pf-c-form pf-m-horizontal"
     novalidate=""
@@ -546,11 +390,11 @@ exports[`FormGroup component should render helper text above input 1`] = `
       </div>
     </div>
   </form>
-</div>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render horizontal form group variant 1`] = `
-<div>
+exports[`FormGroup should render horizontal form group variant 1`] = `
+<DocumentFragment>
   <form
     class="pf-c-form pf-m-horizontal"
     novalidate=""
@@ -589,54 +433,11 @@ exports[`FormGroup component should render horizontal form group variant 1`] = `
       </div>
     </div>
   </form>
-</div>
-`;
-
-exports[`FormGroup component should render inline form group variant 1`] = `
-<FormGroup
-  fieldId="label-id"
-  helperText="this is helper text"
-  isInline={true}
-  label="label"
->
-  <div
-    className="pf-c-form__group"
-  >
-    <div
-      className="pf-c-form__group-label"
-    >
-      <label
-        className="pf-c-form__label"
-        htmlFor="label-id"
-      >
-        <span
-          className="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      className="pf-c-form__group-control pf-m-inline"
-    >
-      <input
-        id="label-id"
-      />
-      <div
-        aria-live="polite"
-        className="pf-c-form__helper-text"
-        id="label-id-helper"
-      >
-        this is helper text
-      </div>
-    </div>
-  </div>
-</FormGroup>
+</DocumentFragment>
 `;
 
-exports[`FormGroup component should render stacked horizontal form group variant 1`] = `
-<div>
+exports[`FormGroup should render stacked horizontal form group variant 1`] = `
+<DocumentFragment>
   <form
     class="pf-c-form pf-m-horizontal"
     novalidate=""
@@ -675,5 +476,5 @@ exports[`FormGroup component should render stacked horizontal form group variant
       </div>
     </div>
   </form>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,49 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LoginFooterItem  with custom node 1`] = `
-<div>
-  <p
-    class="pf-c-form__helper-text pf-m-hidden"
-  >
-    <div>
-      My custom node
-    </div>
-  </p>
-</div>
-`;
+exports[`FormHelperText LoginFooterItem  with custom node 1`] = `"<p class=\\"pf-c-form__helper-text pf-m-hidden\\"><div>My custom node</div></p>"`;
 
-exports[`className is added to the root element 1`] = `"pf-c-form__helper-text pf-m-hidden extra-class"`;
+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[`renders with PatternFly Core styles 1`] = `
-<div>
-  <p
-    class="pf-c-form__helper-text pf-m-error"
-  />
-</div>
-`;
+exports[`FormHelperText renders with PatternFly Core styles 1`] = `"<p class=\\"pf-c-form__helper-text pf-m-error\\">test</p>"`;
 
-exports[`renders with icon 1`] = `
-<div>
-  <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>
-  </p>
-</div>
-`;
+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>"`;