-
Notifications
You must be signed in to change notification settings - Fork 353
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore(DescriptionList): update tests #9753
Merged
wise-king-sullyman
merged 4 commits into
patternfly:main
from
kmcfaul:descriptionlist-test
Nov 16, 2023
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
230 changes: 128 additions & 102 deletions
230
packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.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,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(<DescriptionList />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('1 col on all breakpoints', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionList columnModifier={{ default: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }} /> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; | ||
|
|
||
| test('2 col on all breakpoints', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionList columnModifier={{ default: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }} /> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test('Renders to match snapshot', () => { | ||
| const { asFragment } = render(<DescriptionList />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('3 col on all breakpoints', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionList columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }} /> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders default class ${styles.descriptionList}`, () => { | ||
| render(<DescriptionList aria-label="list" />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList, { exact: true }); | ||
| }); | ||
|
|
||
| test('Horizontal Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isHorizontal />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test('Renders custom className', () => { | ||
| render(<DescriptionList aria-label="list" className="custom" />); | ||
| expect(screen.getByLabelText('list')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('Compact Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isCompact />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| Object.values(['1Col', '2Col', '3Col']).forEach((_col) => { | ||
| const col = _col as '1Col' | '2Col' | '3Col'; | ||
| test(`Renders ${col} on all breakpoints`, () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| columnModifier={{ default: col, sm: col, md: col, lg: col, xl: col, '2xl': col }} | ||
| /> | ||
| ); | ||
| 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(<DescriptionList isCompact isHorizontal />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => { | ||
| render(<DescriptionList aria-label="list" isHorizontal />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal); | ||
| }); | ||
|
|
||
| test('Fluid Horizontal Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isFluid isHorizontal />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => { | ||
| render(<DescriptionList aria-label="list" isCompact />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact); | ||
| }); | ||
|
|
||
| test(`Renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => { | ||
| render(<DescriptionList aria-label="list" isFluid />); | ||
| 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( | ||
| <DescriptionList | ||
| isHorizontal | ||
| aria-label="list" | ||
| orientation={{ | ||
| sm: 'horizontal', | ||
| md: 'vertical', | ||
| lg: 'horizontal', | ||
| xl: 'vertical', | ||
| '2xl': 'horizontal' | ||
| sm: align, | ||
| md: align, | ||
| lg: align, | ||
| xl: align, | ||
| '2xl': align | ||
| }} | ||
| /> | ||
| ); | ||
| 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(<DescriptionList isAutoColumnWidths />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => { | ||
| render(<DescriptionList aria-label="list" isAutoColumnWidths />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths); | ||
| }); | ||
|
|
||
| test('Inline Grid Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isInlineGrid />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => { | ||
| render(<DescriptionList aria-label="list" isInlineGrid />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid); | ||
| }); | ||
|
|
||
| test('Auto fit Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isAutoFit />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => { | ||
| render(<DescriptionList aria-label="list" isAutoFit />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit); | ||
| }); | ||
|
|
||
| test('Auto fit with responsive grid Description List', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }} /> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => { | ||
| render(<DescriptionList aria-label="list" isFillColumns />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns); | ||
| }); | ||
|
|
||
| test('Term default', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListTerm key="term-id-1" aria-labelledby="term-1"> | ||
| test | ||
| </DescriptionListTerm> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => { | ||
| render(<DescriptionList aria-label="list" displaySize="lg" />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg); | ||
| }); | ||
|
|
||
| test('Term helper text', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListTermHelpText key="term-id-1" aria-labelledby="term-1"> | ||
| <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton> | ||
| </DescriptionListTermHelpText> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => { | ||
| render(<DescriptionList aria-label="list" displaySize="2xl" />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl); | ||
| }); | ||
|
|
||
| test('Group', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1"> | ||
| test | ||
| </DescriptionListGroup> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| isHorizontal | ||
| horizontalTermWidthModifier={{ | ||
| default: '12ch', | ||
| sm: '15ch', | ||
| md: '20ch', | ||
| lg: '28ch', | ||
| xl: '30ch', | ||
| '2xl': '35ch' | ||
| }} | ||
| /> | ||
| ); | ||
| 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( | ||
| <DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1"> | ||
| test | ||
| </DescriptionListDescription> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| test(`Renders style when termWidth is set`, () => { | ||
| render(<DescriptionList aria-label="list" isHorizontal termWidth="30px" />); | ||
| expect(screen.getByLabelText('list')).toHaveStyle({ | ||
| '--pf-v5-c-description-list__term--width': '30px' | ||
| }); | ||
| }); | ||
|
|
||
| test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| isAutoFit | ||
| autoFitMinModifier={{ default: '50px', sm: '50px', md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }} | ||
| /> | ||
| ); | ||
| 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;' | ||
| ); | ||
| }); | ||
25 changes: 25 additions & 0 deletions
25
...s/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.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,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(<DescriptionListDescription>test</DescriptionListDescription>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test(`Renders default class ${styles.descriptionListDescription}`, () => { | ||
| render(<DescriptionListDescription>test</DescriptionListDescription>); | ||
| expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription, { exact: true }); | ||
| }); | ||
|
|
||
| test('Renders custom className', () => { | ||
| render(<DescriptionListDescription className="custom">test</DescriptionListDescription>); | ||
| expect(screen.getByText('test').parentElement).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('Renders spread props', () => { | ||
| render(<DescriptionListDescription id="id">test</DescriptionListDescription>); | ||
| expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id'); | ||
| }); |
25 changes: 25 additions & 0 deletions
25
packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.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,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(<DescriptionListGroup>test</DescriptionListGroup>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test(`Renders default class ${styles.descriptionListGroup}`, () => { | ||
| render(<DescriptionListGroup>test</DescriptionListGroup>); | ||
| expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup, { exact: true }); | ||
| }); | ||
|
|
||
| test('Renders custom className', () => { | ||
| render(<DescriptionListGroup className="custom">test</DescriptionListGroup>); | ||
| expect(screen.getByText('test')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('Renders spread props', () => { | ||
| render(<DescriptionListGroup id="id">test</DescriptionListGroup>); | ||
| expect(screen.getByText('test')).toHaveAttribute('id', 'id'); | ||
| }); |
27 changes: 27 additions & 0 deletions
27
...eact-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.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,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(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test(`Renders default class ${styles.descriptionListText}`, () => { | ||
| render(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>); | ||
| expect(screen.getByText('test')).toHaveClass(`${styles.descriptionListText} ${styles.modifiers.helpText}`, { | ||
| exact: true | ||
| }); | ||
| }); | ||
|
|
||
| test('Renders custom className', () => { | ||
| render(<DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>); | ||
| expect(screen.getByText('test')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('Renders spread props', () => { | ||
| render(<DescriptionListTermHelpTextButton id="id">test</DescriptionListTermHelpTextButton>); | ||
| expect(screen.getByText('test')).toHaveAttribute('id', 'id'); | ||
| }); |
35 changes: 35 additions & 0 deletions
35
packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.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,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(<DescriptionListTerm>test</DescriptionListTerm>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test(`Renders default class ${styles.descriptionListTerm}`, () => { | ||
| render(<DescriptionListTerm>test</DescriptionListTerm>); | ||
| expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm, { exact: true }); | ||
| }); | ||
|
|
||
| test(`Renders default class ${styles.descriptionListText}`, () => { | ||
| render(<DescriptionListTerm>test</DescriptionListTerm>); | ||
| expect(screen.getByText('test')).toHaveClass(styles.descriptionListText, { exact: true }); | ||
| }); | ||
|
|
||
| test('Renders custom className', () => { | ||
| render(<DescriptionListTerm className="custom">test</DescriptionListTerm>); | ||
| expect(screen.getByText('test').parentElement).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('Renders icon', () => { | ||
| render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>); | ||
| expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon); | ||
| }); | ||
|
|
||
| test('Renders spread props', () => { | ||
| render(<DescriptionListTerm id="id">test</DescriptionListTerm>); | ||
| expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id'); | ||
| }); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we add additional tests to check that the
styleobject is being applied correctly when the applicable props are possed? isHorizontal + horizontalTermWidthModifier, termWidth, and isAutoFit + autoFitMinModifierThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added horizontalTermWidthModifier and termWidth, but autoFitMinModifier isn't being registered as a visual difference for the style object.