-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(HelperText): update tests (#9761)
* chore(HelperText): update tests * break out helpertextitem tests, update tests * updates * fix lint
- Loading branch information
Showing
4 changed files
with
177 additions
and
280 deletions.
There are no files selected for viewing
124 changes: 67 additions & 57 deletions
124
packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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( | ||
| <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'); | ||
| }); |
93 changes: 93 additions & 0 deletions
93
packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| }); |
Oops, something went wrong.