diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx index 22431afd832..67f76a232b8 100644 --- a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx +++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx @@ -1,130 +1,156 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { DescriptionList } from '../DescriptionList'; -import { DescriptionListGroup } from '../DescriptionListGroup'; -import { DescriptionListTerm } from '../DescriptionListTerm'; -import { DescriptionListDescription } from '../DescriptionListDescription'; -import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText'; -import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton'; - -describe('Description List', () => { - test('default', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - test('1 col on all breakpoints', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); +import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; - test('2 col on all breakpoints', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test('Renders to match snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); - test('3 col on all breakpoints', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders default class ${styles.descriptionList}`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList, { exact: true }); +}); - test('Horizontal Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test('Renders custom className', () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass('custom'); +}); - test('Compact Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); +Object.values(['1Col', '2Col', '3Col']).forEach((_col) => { + const col = _col as '1Col' | '2Col' | '3Col'; + test(`Renders ${col} on all breakpoints`, () => { + render( + + ); + expect(screen.getByLabelText('list')).toHaveClass( + styles.modifiers[col], + styles.modifiers[`${col}OnSm`], + styles.modifiers[`${col}OnMd`], + styles.modifiers[`${col}OnLg`], + styles.modifiers[`${col}OnXl`], + styles.modifiers[`${col}On_2xl`] + ); }); +}); - test('Compact Horizontal Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal); +}); - test('Fluid Horizontal Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact); +}); + +test(`Renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fluid, styles.modifiers.horizontal); +}); - test('alignment breakpoints', () => { - const { asFragment } = render( +Object.values(['horizontal', 'vertical']).forEach((_align) => { + const align = _align as 'horizontal' | 'vertical'; + test(`Renders ${align} on all breakpoints`, () => { + render( ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByLabelText('list')).toHaveClass( + styles.modifiers[`${align}OnSm`], + styles.modifiers[`${align}OnMd`], + styles.modifiers[`${align}OnLg`], + styles.modifiers[`${align}OnXl`], + styles.modifiers[`${align}On_2xl`] + ); }); +}); - test('Auto Column Widths Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths); +}); - test('Inline Grid Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid); +}); - test('Auto fit Description List', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit); +}); - test('Auto fit with responsive grid Description List', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns); +}); - test('Term default', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg); +}); - test('Term helper text', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); - }); +test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl); +}); - test('Group', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); +test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, () => { + render( + + ); + expect(screen.getByLabelText('list')).toHaveStyle({ + '--pf-v5-c-description-list--m-horizontal__term--width': '12ch', + '--pf-v5-c-description-list--m-horizontal__term--width-on-sm': '15ch', + '--pf-v5-c-description-list--m-horizontal__term--width-on-md': '20ch', + '--pf-v5-c-description-list--m-horizontal__term--width-on-lg': '28ch', + '--pf-v5-c-description-list--m-horizontal__term--width-on-xl': '30ch', + '--pf-v5-c-description-list--m-horizontal__term--width-on-2xl': '35ch' }); +}); - test('Description', () => { - const { asFragment } = render( - - test - - ); - expect(asFragment()).toMatchSnapshot(); +test(`Renders style when termWidth is set`, () => { + render(); + expect(screen.getByLabelText('list')).toHaveStyle({ + '--pf-v5-c-description-list__term--width': '30px' }); }); + +test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () => { + render( + + ); + expect(screen.getByLabelText('list')).toHaveAttribute( + 'style', + '--pf-v5-c-description-list--GridTemplateColumns--min: 50px; --pf-v5-c-description-list--GridTemplateColumns--min-on-sm: 50px; --pf-v5-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v5-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v5-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v5-c-description-list--GridTemplateColumns--min-on-2xl: 300px;' + ); +}); diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx new file mode 100644 index 00000000000..65367307167 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DescriptionListDescription } from '../DescriptionListDescription'; + +import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders default class ${styles.descriptionListDescription}`, () => { + render(test); + expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription, { exact: true }); +}); + +test('Renders custom className', () => { + render(test); + expect(screen.getByText('test').parentElement).toHaveClass('custom'); +}); + +test('Renders spread props', () => { + render(test); + expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id'); +}); diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx new file mode 100644 index 00000000000..53e84b545ff --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DescriptionListGroup } from '../DescriptionListGroup'; + +import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders default class ${styles.descriptionListGroup}`, () => { + render(test); + expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup, { exact: true }); +}); + +test('Renders custom className', () => { + render(test); + expect(screen.getByText('test')).toHaveClass('custom'); +}); + +test('Renders spread props', () => { + render(test); + expect(screen.getByText('test')).toHaveAttribute('id', 'id'); +}); diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx new file mode 100644 index 00000000000..bb49c585450 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton'; + +import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders default class ${styles.descriptionListText}`, () => { + render(test); + expect(screen.getByText('test')).toHaveClass(`${styles.descriptionListText} ${styles.modifiers.helpText}`, { + exact: true + }); +}); + +test('Renders custom className', () => { + render(test); + expect(screen.getByText('test')).toHaveClass('custom'); +}); + +test('Renders spread props', () => { + render(test); + expect(screen.getByText('test')).toHaveAttribute('id', 'id'); +}); diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx new file mode 100644 index 00000000000..840db5199ea --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DescriptionListTerm } from '../DescriptionListTerm'; + +import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders default class ${styles.descriptionListTerm}`, () => { + render(test); + expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm, { exact: true }); +}); + +test(`Renders default class ${styles.descriptionListText}`, () => { + render(test); + expect(screen.getByText('test')).toHaveClass(styles.descriptionListText, { exact: true }); +}); + +test('Renders custom className', () => { + render(test); + expect(screen.getByText('test').parentElement).toHaveClass('custom'); +}); + +test('Renders icon', () => { + render(icon}>test); + expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon); +}); + +test('Renders spread props', () => { + render(test); + expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id'); +}); diff --git a/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx new file mode 100644 index 00000000000..1bd9779d379 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTermHelpText.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText'; + +import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; + +test('Renders to match snapshot', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders default class ${styles.descriptionListTerm}`, () => { + render(test); + expect(screen.getByText('test')).toHaveClass(styles.descriptionListTerm, { exact: true }); +}); + +test('Renders custom className', () => { + render(test); + expect(screen.getByText('test')).toHaveClass('custom'); +}); + +test('Renders spread props', () => { + render(test); + expect(screen.getByText('test')).toHaveAttribute('id', 'id'); +}); diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap index b9bde9f6974..e59055aa1af 100644 --- a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap +++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap @@ -1,162 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Description List 1 col on all breakpoints 1`] = ` - -
- -`; - -exports[`Description List 2 col on all breakpoints 1`] = ` - -
- -`; - -exports[`Description List 3 col on all breakpoints 1`] = ` - -
- -`; - -exports[`Description List Auto Column Widths Description List 1`] = ` - -
- -`; - -exports[`Description List Auto fit Description List 1`] = ` - -
- -`; - -exports[`Description List Auto fit with responsive grid Description List 1`] = ` - -
- -`; - -exports[`Description List Compact Description List 1`] = ` - -
- -`; - -exports[`Description List Compact Horizontal Description List 1`] = ` - -
- -`; - -exports[`Description List Description 1`] = ` - -
-
- test -
-
-
-`; - -exports[`Description List Fluid Horizontal Description List 1`] = ` - -
- -`; - -exports[`Description List Group 1`] = ` - -
- test -
-
-`; - -exports[`Description List Horizontal Description List 1`] = ` - -
- -`; - -exports[`Description List Inline Grid Description List 1`] = ` - -
- -`; - -exports[`Description List Term default 1`] = ` - -
- - test - -
-
-`; - -exports[`Description List Term helper text 1`] = ` - -
- - test - -
-
-`; - -exports[`Description List alignment breakpoints 1`] = ` - -
- -`; - -exports[`Description List default 1`] = ` +exports[`Renders to match snapshot 1`] = `
+
+
+ test +
+
+ +`; diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap new file mode 100644 index 00000000000..73b0656b755 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListGroup.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders to match snapshot 1`] = ` + +
+ test +
+
+`; diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap new file mode 100644 index 00000000000..1d85b2b7303 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListHelpTextButton.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders to match snapshot 1`] = ` + + + test + + +`; diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap new file mode 100644 index 00000000000..a99897481de --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTerm.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders to match snapshot 1`] = ` + +
+ + test + +
+
+`; diff --git a/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap new file mode 100644 index 00000000000..883c9a40ad7 --- /dev/null +++ b/packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionListTermHelpText.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders to match snapshot 1`] = ` + +
+ test +
+
+`;