-
Notifications
You must be signed in to change notification settings - Fork 355
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(DescriptionList): update tests
- Loading branch information
Showing
2 changed files
with
218 additions
and
240 deletions.
There are no files selected for viewing
319 changes: 198 additions & 121 deletions
319
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,207 @@ | ||
| 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(); | ||
| }); | ||
|
|
||
| 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('3 col on all breakpoints', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionList columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }} /> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Horizontal Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isHorizontal />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Compact Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isCompact />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Compact Horizontal Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isCompact isHorizontal />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Fluid Horizontal Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isFluid isHorizontal />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('alignment breakpoints', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionList | ||
| isHorizontal | ||
| orientation={{ | ||
| sm: 'horizontal', | ||
| md: 'vertical', | ||
| lg: 'horizontal', | ||
| xl: 'vertical', | ||
| '2xl': 'horizontal' | ||
| }} | ||
| /> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Auto Column Widths Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isAutoColumnWidths />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Inline Grid Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isInlineGrid />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Auto fit Description List', () => { | ||
| const { asFragment } = render(<DescriptionList isAutoFit />); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| 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('Term default', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListTerm key="term-id-1" aria-labelledby="term-1"> | ||
| test | ||
| </DescriptionListTerm> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Term helper text', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListTermHelpText key="term-id-1" aria-labelledby="term-1"> | ||
| <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton> | ||
| </DescriptionListTermHelpText> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Group', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1"> | ||
| test | ||
| </DescriptionListGroup> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('Description', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1"> | ||
| test | ||
| </DescriptionListDescription> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; | ||
|
|
||
| test('renders to match snapshot', () => { | ||
| const { asFragment } = render(<DescriptionList aria-label="list" />); | ||
| expect(screen.getByLabelText('list')).toBeInTheDocument(); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('renders custom className', () => { | ||
| render(<DescriptionList aria-label="list" className="custom" />); | ||
| expect(screen.getByLabelText('list')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('renders 1Col on all breakpoints', () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| columnModifier={{ default: '1Col', sm: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }} | ||
| /> | ||
| ); | ||
| expect(screen.getByLabelText('list')).toHaveClass( | ||
| styles.modifiers['1Col'], | ||
| styles.modifiers['1ColOnSm'], | ||
| styles.modifiers['1ColOnMd'], | ||
| styles.modifiers['1ColOnLg'], | ||
| styles.modifiers['1ColOnXl'], | ||
| styles.modifiers['1ColOn_2xl'] | ||
| ); | ||
| }); | ||
|
|
||
| test('renders 2Col on all breakpoints', () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| columnModifier={{ default: '2Col', sm: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }} | ||
| /> | ||
| ); | ||
| expect(screen.getByLabelText('list')).toHaveClass( | ||
| styles.modifiers['2Col'], | ||
| styles.modifiers['2ColOnSm'], | ||
| styles.modifiers['2ColOnMd'], | ||
| styles.modifiers['2ColOnLg'], | ||
| styles.modifiers['2ColOnXl'], | ||
| styles.modifiers['2ColOn_2xl'] | ||
| ); | ||
| }); | ||
|
|
||
| test('renders 3Col on all breakpoints', () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| columnModifier={{ default: '3Col', sm: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }} | ||
| /> | ||
| ); | ||
| expect(screen.getByLabelText('list')).toHaveClass( | ||
| styles.modifiers['3Col'], | ||
| styles.modifiers['3ColOnSm'], | ||
| styles.modifiers['3ColOnMd'], | ||
| styles.modifiers['3ColOnLg'], | ||
| styles.modifiers['3ColOnXl'], | ||
| styles.modifiers['3ColOn_2xl'] | ||
| ); | ||
| }); | ||
|
|
||
| test(`renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => { | ||
| render(<DescriptionList aria-label="list" isHorizontal />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal); | ||
| }); | ||
|
|
||
| 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('renders alignment breakpoints', () => { | ||
| render( | ||
| <DescriptionList | ||
| aria-label="list" | ||
| isHorizontal | ||
| orientation={{ | ||
| sm: 'horizontal', | ||
| md: 'vertical', | ||
| lg: 'horizontal', | ||
| xl: 'vertical', | ||
| '2xl': 'horizontal' | ||
| }} | ||
| /> | ||
| ); | ||
| expect(screen.getByLabelText('list')).toHaveClass( | ||
| styles.modifiers.horizontal, | ||
| styles.modifiers.horizontalOnSm, | ||
| styles.modifiers.verticalOnMd, | ||
| styles.modifiers.horizontalOnLg, | ||
| styles.modifiers.verticalOnXl, | ||
| styles.modifiers.horizontalOn_2xl | ||
| ); | ||
| }); | ||
|
|
||
| test(`renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => { | ||
| render(<DescriptionList aria-label="list" isAutoColumnWidths />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths); | ||
| }); | ||
|
|
||
| test(`renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => { | ||
| render(<DescriptionList aria-label="list" isInlineGrid />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid); | ||
| }); | ||
|
|
||
| test(`renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => { | ||
| render(<DescriptionList aria-label="list" isAutoFit />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit); | ||
| }); | ||
|
|
||
| test(`renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => { | ||
| render(<DescriptionList aria-label="list" isFillColumns />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns); | ||
| }); | ||
|
|
||
| test(`renders ${styles.modifiers.displayLg} when displaySize = lg`, () => { | ||
| render(<DescriptionList aria-label="list" displaySize="lg" />); | ||
| expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg); | ||
| }); | ||
|
|
||
| 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('DescriptionListTerm renders to match snapshot', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListTerm key="term-id-1" aria-labelledby="term-1"> | ||
| test | ||
| </DescriptionListTerm> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('DescriptionListTerm renders custom className', () => { | ||
| render(<DescriptionListTerm className="custom">test</DescriptionListTerm>); | ||
| expect(screen.getByText('test').parentElement).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('DescriptionListTerm renders icon', () => { | ||
| render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>); | ||
| expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon); | ||
| }); | ||
|
|
||
| test('DescriptioinListTermHelpText renders to match snapshot', () => { | ||
| const { asFragment } = render( | ||
| <DescriptionListTermHelpText> | ||
| <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton> | ||
| </DescriptionListTermHelpText> | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('DescriptioinListTermHelpText renders custom className', () => { | ||
| render( | ||
| <DescriptionListTermHelpText className="custom" aria-label="help-text"> | ||
| <DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton> | ||
| </DescriptionListTermHelpText> | ||
| ); | ||
| expect(screen.getByLabelText('help-text')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('DescriptioinListTermHelpTextButton renders custom className', () => { | ||
| render( | ||
| <DescriptionListTermHelpText> | ||
| <DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton> | ||
| </DescriptionListTermHelpText> | ||
| ); | ||
| expect(screen.getByText('test')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('DescriptionListGroup renders to match snapshot', () => { | ||
| const { asFragment } = render(<DescriptionListGroup>test</DescriptionListGroup>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('DescriptionListGroup renders custom className', () => { | ||
| render(<DescriptionListGroup className="custom">test</DescriptionListGroup>); | ||
| expect(screen.getByText('test')).toHaveClass('custom'); | ||
| }); | ||
|
|
||
| test('DescriptionListDescription renders to match snapshot', () => { | ||
| const { asFragment } = render(<DescriptionListDescription>test</DescriptionListDescription>); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('DescriptionListDescription renders custom className', () => { | ||
| render(<DescriptionListDescription className="custom">test</DescriptionListDescription>); | ||
| expect(screen.getByText('test').parentElement).toHaveClass('custom'); | ||
| }); |
Oops, something went wrong.