From 933ff36a112e8d28acdd1f2ad81485b34a853906 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 18 Oct 2023 10:53:00 -0400 Subject: [PATCH 1/4] chore(HelperText): update tests --- .../HelperText/__tests__/HelperText.test.tsx | 117 ++++++----- .../__snapshots__/HelperText.test.tsx.snap | 197 +----------------- 2 files changed, 65 insertions(+), 249 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 index a8bc23ceda2..4d9d72c4a46 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,75 @@ 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( + + help test text + help test text 2 + help test text 3 + + ); + expect(asFragment()).toMatchSnapshot(); +}); - test('variant comonent helper text renders properly', () => { - const { asFragment } = render( - - help test text 1 - help test text 2 - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('HelperText renders custom className', () => { + render( + + help test text 1 + + ); + expect(screen.getByTestId('helper')).toHaveClass('custom'); +}); - test('icon helper text renders properly', () => { - const { asFragment } = render( - - }>help test text - +Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant) => { + test(`Renders ${styles.modifiers[variant]} when variant = ${variant}`, () => { + render( + + text + ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]); }); +}); - test('dynamic helper text renders successfully', () => { - const { asFragment } = render( - - help test text - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('HelperTextItem renders custom className', () => { + render( + + help test text 1 + + ); + expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom'); +}); - 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('Renders as ul when component = ul', () => { + render( + + help test text 1 + help test text 2 + + ); + expect(screen.getByLabelText('helper').tagName).toBe('UL'); + 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 dynamic helper text', () => { + render( + + help test text + + ); + expect(screen.getByText('help test text').parentElement).toHaveClass(styles.modifiers.dynamic); }); 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..1d5f2c5b26b 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,61 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`HelperText default helper text variant applies successfully 1`] = ` - -
- - default help test text - -
- -`; - -exports[`HelperText dynamic helper text renders successfully 1`] = ` - -
-
- - - help test text - - : default status; - - -
-
- -`; - -exports[`HelperText helper text block renders successfully 1`] = ` +exports[`Renders to match snapshot 1`] = `
- help test text 1 + help test text
`; - -exports[`HelperText icon helper text renders properly 1`] = ` - -
-
- - - help test text - -
-
- -`; - -exports[`HelperText indeterminate helper text variant applies successfully 1`] = ` - -
- - indeterminate help test text - -
- -`; - -exports[`HelperText invalid helper text variant applies successfully 1`] = ` - -
- - invalid help test text - -
- -`; - -exports[`HelperText simple helper text renders successfully 1`] = ` - -
-
- - help test text - -
-
- -`; - -exports[`HelperText success helper text variant applies successfully 1`] = ` - -
- - success help test text - -
- -`; - -exports[`HelperText variant comonent helper text renders properly 1`] = ` - -
    -
  • - - help test text 1 - -
    • -
  • - - help test text 2 - -
    • -
- -`; - -exports[`HelperText warning helper text variant applies successfully 1`] = ` - -
- - warning help test text - -
- -`; From 5085ba6919373e7bd41f5d18b255d31441ef5af5 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 24 Oct 2023 10:08:58 -0400 Subject: [PATCH 2/4] break out helpertextitem tests, update tests --- .../HelperText/__tests__/HelperText.test.tsx | 89 +++++++++---------- .../__tests__/HelperTextItem.test.tsx | 85 ++++++++++++++++++ .../__snapshots__/HelperText.test.tsx.snap | 30 +------ .../HelperTextItem.test.tsx.snap | 15 ++++ 4 files changed, 141 insertions(+), 78 deletions(-) create mode 100644 packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx create mode 100644 packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperTextItem.test.tsx.snap 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 4d9d72c4a46..9cd354973f4 100644 --- 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( - - help test text - help test text 2 - help test text 3 - - ); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); -test('HelperText renders custom className', () => { +test('Renders without children', () => { render( - - help test text 1 - +
+ +
); - 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( - - text - - ); - expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]); - }); +test('Renders default classes', () => { + render(text); + expect(screen.getByText('text')).toHaveClass(styles.helperText); }); -test('HelperTextItem renders custom className', () => { - render( - - help test text 1 - - ); - expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom'); +test('Renders id when id is passed', () => { + render(text ); + expect(screen.getByText('text')).toHaveAttribute('id'); }); -test('Renders as ul when component = ul', () => { - render( - - help test text 1 - help test text 2 - - ); - 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(text ); + expect(screen.getByText('text')).toHaveAttribute('aria-live'); }); -test('Renders custom icon', () => { - render( - - test
}>help test text - - ); - expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon); +test('Spreads additional props when passed', () => { + render(text ); + expect(screen.getByText('text')).toBeInTheDocument(); +}); + +test('Renders custom className', () => { + render(text ); + expect(screen.getByText('text')).toHaveClass('custom'); }); -test('Renders dynamic helper text', () => { +test('Renders with element passed to component prop', () => { + render(text); + expect(screen.getByText('text').tagName).toBe('UL'); +}); + +test('Renders aria-label and role when component = ul', () => { render( - - help test text + + text ); - 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(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..25be563c595 --- /dev/null +++ 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(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'); +}); 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 1d5f2c5b26b..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 @@ -4,34 +4,6 @@ exports[`Renders to match snapshot 1`] = `
-
- - help test text - -
-
- - help test text 2 - -
-
- - help test text 3 - -
-
+ /> `; diff --git a/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperTextItem.test.tsx.snap b/packages/react-core/src/components/HelperText/__tests__/__snapshots__/HelperTextItem.test.tsx.snap new file mode 100644 index 00000000000..a06fcc63aaa --- /dev/null +++ b/packages/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`] = ` + +
+ + help test text + +
+ +`; From 36239847a72b4800d3c01647c1307c1d5fe5ceae Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 6 Nov 2023 10:08:24 -0500 Subject: [PATCH 3/4] updates --- .../HelperText/__tests__/HelperText.test.tsx | 18 ++++++++++++++---- .../__tests__/HelperTextItem.test.tsx | 9 +++++++++ 2 files changed, 23 insertions(+), 4 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 index 9cd354973f4..354ec0a4206 100644 --- a/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx +++ b/packages/react-core/src/components/HelperText/__tests__/HelperText.test.tsx @@ -26,17 +26,22 @@ test('Renders default classes', () => { test('Renders id when id is passed', () => { render(text ); - expect(screen.getByText('text')).toHaveAttribute('id'); + expect(screen.getByText('text')).toHaveAttribute('id', 'helper-id'); }); test('Renders aria-live when isLiveRegion is passed', () => { render(text ); - expect(screen.getByText('text')).toHaveAttribute('aria-live'); + expect(screen.getByText('text')).toHaveAttribute('aria-live', 'polite'); }); -test('Spreads additional props when passed', () => { +test('Does not render aria-live by default', () => { render(text ); - expect(screen.getByText('text')).toBeInTheDocument(); + expect(screen.getByText('text')).not.toHaveAttribute('aria-live'); +}); + +test('Spreads additional props when passed', () => { + render(text ); + expect(screen.getByText('text')).toHaveAttribute('dir', 'rtl'); }); test('Renders custom className', () => { @@ -49,6 +54,11 @@ test('Renders with element passed to component prop', () => { 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( diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx index 25be563c595..321b2a6980f 100644 --- a/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx +++ b/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx @@ -83,3 +83,12 @@ test('Renders dynamic helper 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'); +}); From f0d231653fac1e3e3d3f0673232533f0001f9b31 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 15 Nov 2023 11:22:00 -0500 Subject: [PATCH 4/4] fix lint --- .../src/components/HelperText/__tests__/HelperTextItem.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx b/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx index 321b2a6980f..158f88c7d68 100644 --- a/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx +++ b/packages/react-core/src/components/HelperText/__tests__/HelperTextItem.test.tsx @@ -1,6 +1,5 @@ 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';