@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.20

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

@@ -3,9 +3,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FormContextConsumer, FormContextProvider } from '../FormContext';
 
-const customRender = (ui, initialValues?: Record<string, any>) => {
-  return render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
-};
+const customRender = (ui, initialValues?: Record<string, any>) =>
+  render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
 
 test('consumers can show all values from "values" provided by "initialValues"', () => {
   const initialValues = { fieldOneId: 'some value', fieldTwoId: 'some other value' };
@@ -63,9 +62,9 @@ test('sets a new value for a single field using setValue', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ getValue, setValue }) => {
-        return <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />;
-      }}
+      {({ getValue, setValue }) => (
+        <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -86,16 +85,14 @@ test('using setValues, consumers can set multiple values at once', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ values, setValues }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setValues(newValues)} />
-            {Object.entries(values).map(([fieldId, value]) => (
-              <span key={fieldId}>{`${fieldId}: ${value}`}</span>
-            ))}
-          </>
-        );
-      }}
+      {({ values, setValues }) => (
+        <>
+          <input type="checkbox" onClick={() => setValues(newValues)} />
+          {Object.entries(values).map(([fieldId, value]) => (
+            <span key={fieldId}>{`${fieldId}: ${value}`}</span>
+          ))}
+        </>
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -129,14 +126,12 @@ test('sets a new error for a single field using setError', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ errors, setError }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
-            {`Error: ${errors.someId}`}
-          </>
-        );
-      }}
+      {({ errors, setError }) => (
+        <>
+          <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
+          {`Error: ${errors.someId}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 
@@ -150,16 +145,14 @@ test('using setErrors, consumers can set multiple errors at once', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ errors, setErrors }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setErrors(newErrors)} />
-            {Object.entries(errors).map(([fieldId, error]) => (
-              <span key={fieldId}>{`${fieldId}: ${error}`}</span>
-            ))}
-          </>
-        );
-      }}
+      {({ errors, setErrors }) => (
+        <>
+          <input type="checkbox" onClick={() => setErrors(newErrors)} />
+          {Object.entries(errors).map(([fieldId, error]) => (
+            <span key={fieldId}>{`${fieldId}: ${error}`}</span>
+          ))}
+        </>
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -175,14 +168,12 @@ test('sets a new touched state for a single field using setTouched', async () =>
 
   customRender(
     <FormContextConsumer>
-      {({ touched, setTouched }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setTouched('someId', true)} />
-            {`isTouched: ${touched.someId}`}
-          </>
-        );
-      }}
+      {({ touched, setTouched }) => (
+        <>
+          <input type="checkbox" onClick={() => setTouched('someId', true)} />
+          {`isTouched: ${touched.someId}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 
@@ -195,14 +186,12 @@ test("can get a single field's touched state by using isTouched", async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ touched, setTouched, isTouched }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
-            {`isTouched: ${isTouched('someId')}`}
-          </>
-        );
-      }}
+      {({ touched, setTouched, isTouched }) => (
+        <>
+          <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
+          {`isTouched: ${isTouched('someId')}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 

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

@@ -50,7 +50,7 @@ test('Verify console error logged when there is no aria-label or title', () => {
       header={<FormFieldGroupHeader titleDescription="Field group 4 description text." actions={<Button />} />}
     />
   );
-  const { asFragment } = render(FieldGroup);
+  render(FieldGroup);
   expect(consoleErrorMock).toHaveBeenCalled();
 });
 

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
 import { Form } from '../Form';
 

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {

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

@@ -1,66 +1,76 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { HelperText } from '../HelperText';
-import { HelperTextItem } from '../HelperTextItem';
-import { CheckIcon } from '@patternfly/react-icons';
 
-describe('HelperText', () => {
-  test('simple helper text renders successfully', () => {
-    const { asFragment } = render(
-      <HelperText>
-        <HelperTextItem>help test text</HelperTextItem>
-      </HelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 
-  Object.values(['default', 'indeterminate', 'warning', 'success', 'invalid']).forEach(variant => {
-    test(`${variant} helper text variant applies successfully`, () => {
-      const { asFragment } = render(
-        <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>
-          {variant} help test text
-        </HelperTextItem>
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<HelperText />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <HelperText />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders default classes', () => {
+  render(<HelperText>text</HelperText>);
+  expect(screen.getByText('text')).toHaveClass(styles.helperText);
+});
 
-  test('variant comonent helper text renders properly', () => {
-    const { asFragment } = render(
-      <HelperText component="ul">
-        <HelperTextItem component="li">help test text 1</HelperTextItem>
-        <HelperTextItem component="li">help test text 2</HelperTextItem>
-      </HelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders id when id is passed', () => {
+  render(<HelperText id="helper-id">text </HelperText>);
+  expect(screen.getByText('text')).toHaveAttribute('id', 'helper-id');
+});
 
-  test('icon helper text renders properly', () => {
-    const { asFragment } = render(
-      <HelperText>
-        <HelperTextItem icon={<CheckIcon />}>help test text</HelperTextItem>
-      </HelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders aria-live when isLiveRegion is passed', () => {
+  render(<HelperText isLiveRegion>text </HelperText>);
+  expect(screen.getByText('text')).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Does not render aria-live by default', () => {
+  render(<HelperText>text </HelperText>);
+  expect(screen.getByText('text')).not.toHaveAttribute('aria-live');
+});
 
-  test('dynamic helper text renders successfully', () => {
-    const { asFragment } = render(
-      <HelperText>
-        <HelperTextItem isDynamic>help test text</HelperTextItem>
-      </HelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Spreads additional props when passed', () => {
+  render(<HelperText dir="rtl">text </HelperText>);
+  expect(screen.getByText('text')).toHaveAttribute('dir', 'rtl');
+});
+
+test('Renders custom className', () => {
+  render(<HelperText className="custom">text </HelperText>);
+  expect(screen.getByText('text')).toHaveClass('custom');
+});
+
+test('Renders with element passed to component prop', () => {
+  render(<HelperText component="ul">text</HelperText>);
+  expect(screen.getByText('text').tagName).toBe('UL');
+});
+
+test('Renders with div by default when no component prop is passed', () => {
+  render(<HelperText>text</HelperText>);
+  expect(screen.getByText('text').tagName).toBe('DIV');
+});
+
+test('Renders aria-label and role when component = ul', () => {
+  render(
+    <HelperText component="ul" aria-label="helper">
+      text
+    </HelperText>
+  );
+  expect(screen.getByText('text')).toHaveAttribute('aria-label', 'helper');
+  expect(screen.getByText('text')).toHaveAttribute('role', 'list');
+});
 
-  test('helper text block renders successfully', () => {
-    const { asFragment } = render(
-      <HelperText>
-        <HelperTextItem>help test text 1</HelperTextItem>
-        <HelperTextItem>help test text 2</HelperTextItem>
-        <HelperTextItem>help test text 3</HelperTextItem>
-      </HelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Does not render aria-label and role when component != ul', () => {
+  render(<HelperText aria-label="helper">text</HelperText>);
+  expect(screen.getByText('text')).not.toHaveAttribute('aria-label', 'helper');
+  expect(screen.getByText('text')).not.toHaveAttribute('role', 'list');
 });

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

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { HelperTextItem } from '../HelperTextItem';
+
+import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
+
+test('Renders to match snapshot', () => {
+  const { asFragment } = render(<HelperTextItem>help test text</HelperTextItem>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <HelperTextItem />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders default classes', () => {
+  render(<HelperTextItem>help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1')).toHaveClass(styles.helperTextItemText);
+  expect(screen.getByText('help test text 1').parentElement).toHaveClass(styles.helperTextItem);
+});
+
+test('Renders custom className', () => {
+  render(<HelperTextItem className="custom">help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom');
+});
+
+Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant) => {
+  test(`Renders with class ${styles.modifiers[variant]} when variant = ${variant}`, () => {
+    render(
+      <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>
+        text
+      </HelperTextItem>
+    );
+    expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]);
+  });
+});
+
+test('Renders id when id is passed', () => {
+  render(<HelperTextItem id="text-item">help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement).toHaveAttribute('id', 'text-item');
+});
+
+test('Renders as div by default when component is not passed', () => {
+  render(<HelperTextItem>help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('DIV');
+});
+
+test('Renders with element passed to component prop', () => {
+  render(<HelperTextItem component="li">help test text 1</HelperTextItem>);
+  expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('LI');
+});
+
+test('Renders custom icon', () => {
+  render(<HelperTextItem icon={<div>test</div>}>help test text</HelperTextItem>);
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+});
+
+test('Renders default icon when hasIcon = true and icon is not passed', () => {
+  render(<HelperTextItem hasIcon>help test text</HelperTextItem>);
+  expect(screen.getByText('help test text').parentElement?.querySelector('span')).toHaveClass(
+    styles.helperTextItemIcon
+  );
+});
+
+test('Renders custom icon when icon is passed and hasIcon = true', () => {
+  render(
+    <HelperTextItem hasIcon icon={<div>test</div>}>
+      help test text
+    </HelperTextItem>
+  );
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+});
+
+test('Renders dynamic helper text', () => {
+  render(<HelperTextItem isDynamic>help test text</HelperTextItem>);
+  expect(screen.getByText('help test text').parentElement).toHaveClass(styles.modifiers.dynamic);
+  expect(screen.getByText('help test text').querySelector('span')).toHaveClass('pf-v5-screen-reader');
+});
+
+test('Renders custom screenreader text when isDynamic = true and screenReaderText is passed', () => {
+  render(
+    <HelperTextItem isDynamic screenReaderText="sr test">
+      help test text
+    </HelperTextItem>
+  );
+  expect(screen.getByText('help test text').querySelector('span')).toHaveTextContent('sr test');
+});

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

@@ -1,230 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HelperText default helper text variant applies successfully 1`] = `
+exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-helper-text__item"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      default help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText dynamic helper text renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item pf-m-dynamic"
-    >
-      <span
-        aria-hidden="true"
-        class="pf-v5-c-helper-text__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
-        >
-          <path
-            d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text
-        <span
-          class="pf-v5-screen-reader"
-        >
-          : default status;
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText helper text block renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 1
-      </span>
-    </div>
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 2
-      </span>
-    </div>
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 3
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText icon helper text renders properly 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        aria-hidden="true"
-        class="pf-v5-c-helper-text__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 512 512"
-          width="1em"
-        >
-          <path
-            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText indeterminate helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item pf-m-indeterminate"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      indeterminate help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText invalid helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      invalid help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText simple helper text renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text"
-  >
-    <div
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText success helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item pf-m-success"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      success help test text
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`HelperText variant comonent helper text renders properly 1`] = `
-<DocumentFragment>
-  <ul
     class="pf-v5-c-helper-text"
-    role="list"
-  >
-    <li
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 1
-      </span>
-    </li>
-    <li
-      class="pf-v5-c-helper-text__item"
-    >
-      <span
-        class="pf-v5-c-helper-text__item-text"
-      >
-        help test text 2
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`HelperText warning helper text variant applies successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-helper-text__item pf-m-warning"
-  >
-    <span
-      class="pf-v5-c-helper-text__item-text"
-    >
-      warning help test text
-    </span>
-  </div>
+  />
 </DocumentFragment>
 `;

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-helper-text__item"
+  >
+    <span
+      class="pf-v5-c-helper-text__item-text"
+    >
+      help test text
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Icon } from '../Icon';
-import { CheckIcon } from '@patternfly/react-icons';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
@@ -14,7 +14,7 @@ test('renders basic icon successfully', () => {
 });
 
 test('checks basic icon structure', () => {
-  const { asFragment } = render(
+  render(
     <Icon title="icon">
       <CheckIcon />
     </Icon>

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

@@ -23,7 +23,7 @@ describe('InputGroup', () => {
       </InputGroup>
     );
 
-    const formControl = screen.getByLabelText("User password");
-    expect(formControl).not.toHaveAttribute("aria-describedby");
+    const formControl = screen.getByLabelText('User password');
+    expect(formControl).not.toHaveAttribute('aria-describedby');
   });
 });