break out helpertextitem tests, update tests

patternfly · Nov 15, 2023 · 5085ba6 · 5085ba6
1 parent 933ff36
commit 5085ba6
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 78 deletions.
diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
@@ -1,75 +1,66 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { HelperText } from '../HelperText';
-import { HelperTextItem } from '../HelperTextItem';
 
 import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 
 test('Renders to match snapshot', () => {
-  const { asFragment } = render(
-    <HelperText>
-      <HelperTextItem>help test text</HelperTextItem>
-      <HelperTextItem>help test text 2</HelperTextItem>
-      <HelperTextItem>help test text 3</HelperTextItem>
-    </HelperText>
-  );
+  const { asFragment } = render(<HelperText />);
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('HelperText renders custom className', () => {
+test('Renders without children', () => {
   render(
-    <HelperText className="custom" data-testid="helper">
-      <HelperTextItem>help test text 1</HelperTextItem>
-    </HelperText>
+    <div data-testid="container">
+      <HelperText />
+    </div>
   );
-  expect(screen.getByTestId('helper')).toHaveClass('custom');
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant) => {
-  test(`Renders ${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 default classes', () => {
+  render(<HelperText>text</HelperText>);
+  expect(screen.getByText('text')).toHaveClass(styles.helperText);
 });
 
-test('HelperTextItem renders custom className', () => {
-  render(
-    <HelperText>
-      <HelperTextItem className="custom">help test text 1</HelperTextItem>
-    </HelperText>
-  );
-  expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom');
+test('Renders id when id is passed', () => {
+  render(<HelperText id="helper-id">text </HelperText>);
+  expect(screen.getByText('text')).toHaveAttribute('id');
 });
 
-test('Renders as ul when component = ul', () => {
-  render(
-    <HelperText component="ul" aria-label="helper">
-      <HelperTextItem component="li">help test text 1</HelperTextItem>
-      <HelperTextItem component="li">help test text 2</HelperTextItem>
-    </HelperText>
-  );
-  expect(screen.getByLabelText('helper').tagName).toBe('UL');
-  expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('LI');
+test('Renders aria-live when isLiveRegion is passed', () => {
+  render(<HelperText isLiveRegion>text </HelperText>);
+  expect(screen.getByText('text')).toHaveAttribute('aria-live');
 });
 
-test('Renders custom icon', () => {
-  render(
-    <HelperText>
-      <HelperTextItem icon={<div>test</div>}>help test text</HelperTextItem>
-    </HelperText>
-  );
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+test('Spreads additional props when passed', () => {
+  render(<HelperText>text </HelperText>);
+  expect(screen.getByText('text')).toBeInTheDocument();
+});
+
+test('Renders custom className', () => {
+  render(<HelperText className="custom">text </HelperText>);
+  expect(screen.getByText('text')).toHaveClass('custom');
 });
 
-test('Renders dynamic helper text', () => {
+test('Renders with element passed to component prop', () => {
+  render(<HelperText component="ul">text</HelperText>);
+  expect(screen.getByText('text').tagName).toBe('UL');
+});
+
+test('Renders aria-label and role when component = ul', () => {
   render(
-    <HelperText>
-      <HelperTextItem isDynamic>help test text</HelperTextItem>
+    <HelperText component="ul" aria-label="helper">
+      text
     </HelperText>
   );
-  expect(screen.getByText('help test text').parentElement).toHaveClass(styles.modifiers.dynamic);
+  expect(screen.getByText('text')).toHaveAttribute('aria-label', 'helper');
+  expect(screen.getByText('text')).toHaveAttribute('role', 'list');
+});
+
+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');
 });
diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { HelperText } from '../HelperText';
+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');
+});
diff --git a/...ges/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap b/...ges/react-core/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap
@@ -4,34 +4,6 @@ exports[`Renders to match snapshot 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
-      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>
 `;
diff --git a/...react-core/src/components/HelperText/__tests__/__snapshots__/HelperTextItem.test.tsx.snap b/...react-core/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>
+`;