diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
index a8bc23ceda2..354ec0a4206 100644
--- a/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
+++ b/packages/react-core/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/dist/esm/icons/check-icon';
-describe('HelperText', () => {
- test('simple helper text renders successfully', () => {
- const { asFragment } = render(
-
- help test text
-
- );
- 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(
-
- {variant} help test text
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
- });
+test('Renders to match snapshot', () => {
+ const { asFragment } = render();
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders default classes', () => {
+ render(text);
+ expect(screen.getByText('text')).toHaveClass(styles.helperText);
+});
- test('variant comonent helper text renders properly', () => {
- const { asFragment } = render(
-
- help test text 1
- help test text 2
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test('Renders id when id is passed', () => {
+ render(text );
+ expect(screen.getByText('text')).toHaveAttribute('id', 'helper-id');
+});
- test('icon helper text renders properly', () => {
- const { asFragment } = render(
-
- }>help test text
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test('Renders aria-live when isLiveRegion is passed', () => {
+ render(text );
+ expect(screen.getByText('text')).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Does not render aria-live by default', () => {
+ render(text );
+ expect(screen.getByText('text')).not.toHaveAttribute('aria-live');
+});
- test('dynamic helper text renders successfully', () => {
- const { asFragment } = render(
-
- help test text
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test('Spreads additional props when passed', () => {
+ render(text );
+ expect(screen.getByText('text')).toHaveAttribute('dir', 'rtl');
+});
+
+test('Renders custom className', () => {
+ render(text );
+ expect(screen.getByText('text')).toHaveClass('custom');
+});
+
+test('Renders with element passed to component prop', () => {
+ render(text);
+ expect(screen.getByText('text').tagName).toBe('UL');
+});
+
+test('Renders with div by default when no component prop is passed', () => {
+ render(text);
+ expect(screen.getByText('text').tagName).toBe('DIV');
+});
+
+test('Renders aria-label and role when component = ul', () => {
+ render(
+
+ text
+
+ );
+ expect(screen.getByText('text')).toHaveAttribute('aria-label', 'helper');
+ expect(screen.getByText('text')).toHaveAttribute('role', 'list');
+});
- test('helper text block renders successfully', () => {
- const { asFragment } = render(
-
- help test text 1
- help test text 2
- help test text 3
-
- );
- expect(asFragment()).toMatchSnapshot();
- });
+test('Does not render aria-label and role when component != ul', () => {
+ render(text);
+ expect(screen.getByText('text')).not.toHaveAttribute('aria-label', 'helper');
+ expect(screen.getByText('text')).not.toHaveAttribute('role', 'list');
});
diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx
new file mode 100644
index 00000000000..158f88c7d68
--- /dev/null
+++ b/packages/react-core/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(help test text);
+ expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders default classes', () => {
+ render(help test text 1);
+ 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(help test text 1);
+ 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(
+
+ text
+
+ );
+ expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]);
+ });
+});
+
+test('Renders id when id is passed', () => {
+ render(help test text 1);
+ expect(screen.getByText('help test text 1').parentElement).toHaveAttribute('id', 'text-item');
+});
+
+test('Renders as div by default when component is not passed', () => {
+ render(help test text 1);
+ expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('DIV');
+});
+
+test('Renders with element passed to component prop', () => {
+ render(help test text 1);
+ expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('LI');
+});
+
+test('Renders custom icon', () => {
+ render(test}>help test text);
+ expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+});
+
+test('Renders default icon when hasIcon = true and icon is not passed', () => {
+ render(help test text);
+ expect(screen.getByText('help test text').parentElement?.querySelector('span')).toHaveClass(
+ styles.helperTextItemIcon
+ );
+});
+
+test('Renders custom icon when icon is passed and hasIcon = true', () => {
+ render(
+ test}>
+ help test text
+
+ );
+ expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+});
+
+test('Renders dynamic helper text', () => {
+ render(help test text);
+ 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(
+
+ help test text
+
+ );
+ expect(screen.getByText('help test text').querySelector('span')).toHaveTextContent('sr test');
+});
diff --git a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap b/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
index bc7fa094120..80d9d88b05f 100644
--- a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
+++ b/packages/react-core/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`] = `