Skip to content

Commit b957f2f

Browse files
kmcfaulkmcfaul
authored
chore(DescriptionList): update tests (#9753)
* chore(DescriptionList): update tests * break out tests, pr feedback * updates * add autofit width mod test
1 parent 18c140a commit b957f2f

12 files changed

+332
-259
lines changed

‎packages/react-core/src/components/DescriptionList/__tests__/DescriptionList.test.tsx

Lines changed: 128 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,156 @@
11
import React from 'react';
2-
import { render } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
33
import { DescriptionList } from '../DescriptionList';
4-
import { DescriptionListGroup } from '../DescriptionListGroup';
5-
import { DescriptionListTerm } from '../DescriptionListTerm';
6-
import { DescriptionListDescription } from '../DescriptionListDescription';
7-
import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText';
8-
import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton';
9-
10-
describe('Description List', () => {
11-
test('default', () => {
12-
const { asFragment } = render(<DescriptionList />);
13-
expect(asFragment()).toMatchSnapshot();
14-
});
154

16-
test('1 col on all breakpoints', () => {
17-
const { asFragment } = render(
18-
<DescriptionList columnModifier={{ default: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }} />
19-
);
20-
expect(asFragment()).toMatchSnapshot();
21-
});
5+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
226

23-
test('2 col on all breakpoints', () => {
24-
const { asFragment } = render(
25-
<DescriptionList columnModifier={{ default: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }} />
26-
);
27-
expect(asFragment()).toMatchSnapshot();
28-
});
7+
test('Renders to match snapshot', () => {
8+
const { asFragment } = render(<DescriptionList />);
9+
expect(asFragment()).toMatchSnapshot();
10+
});
2911

30-
test('3 col on all breakpoints', () => {
31-
const { asFragment } = render(
32-
<DescriptionList columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }} />
33-
);
34-
expect(asFragment()).toMatchSnapshot();
35-
});
12+
test(`Renders default class ${styles.descriptionList}`, () => {
13+
render(<DescriptionList aria-label="list" />);
14+
expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList, { exact: true });
15+
});
3616

37-
test('Horizontal Description List', () => {
38-
const { asFragment } = render(<DescriptionList isHorizontal />);
39-
expect(asFragment()).toMatchSnapshot();
40-
});
17+
test('Renders custom className', () => {
18+
render(<DescriptionList aria-label="list" className="custom" />);
19+
expect(screen.getByLabelText('list')).toHaveClass('custom');
20+
});
4121

42-
test('Compact Description List', () => {
43-
const { asFragment } = render(<DescriptionList isCompact />);
44-
expect(asFragment()).toMatchSnapshot();
22+
Object.values(['1Col', '2Col', '3Col']).forEach((_col) => {
23+
const col = _col as '1Col' | '2Col' | '3Col';
24+
test(`Renders ${col} on all breakpoints`, () => {
25+
render(
26+
<DescriptionList
27+
aria-label="list"
28+
columnModifier={{ default: col, sm: col, md: col, lg: col, xl: col, '2xl': col }}
29+
/>
30+
);
31+
expect(screen.getByLabelText('list')).toHaveClass(
32+
styles.modifiers[col],
33+
styles.modifiers[`${col}OnSm`],
34+
styles.modifiers[`${col}OnMd`],
35+
styles.modifiers[`${col}OnLg`],
36+
styles.modifiers[`${col}OnXl`],
37+
styles.modifiers[`${col}On_2xl`]
38+
);
4539
});
40+
});
4641

47-
test('Compact Horizontal Description List', () => {
48-
const { asFragment } = render(<DescriptionList isCompact isHorizontal />);
49-
expect(asFragment()).toMatchSnapshot();
50-
});
42+
test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
43+
render(<DescriptionList aria-label="list" isHorizontal />);
44+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
45+
});
5146

52-
test('Fluid Horizontal Description List', () => {
53-
const { asFragment } = render(<DescriptionList isFluid isHorizontal />);
54-
expect(asFragment()).toMatchSnapshot();
55-
});
47+
test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
48+
render(<DescriptionList aria-label="list" isCompact />);
49+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
50+
});
51+
52+
test(`Renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
53+
render(<DescriptionList aria-label="list" isFluid />);
54+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fluid, styles.modifiers.horizontal);
55+
});
5656

57-
test('alignment breakpoints', () => {
58-
const { asFragment } = render(
57+
Object.values(['horizontal', 'vertical']).forEach((_align) => {
58+
const align = _align as 'horizontal' | 'vertical';
59+
test(`Renders ${align} on all breakpoints`, () => {
60+
render(
5961
<DescriptionList
60-
isHorizontal
62+
aria-label="list"
6163
orientation={{
62-
sm: 'horizontal',
63-
md: 'vertical',
64-
lg: 'horizontal',
65-
xl: 'vertical',
66-
'2xl': 'horizontal'
64+
sm: align,
65+
md: align,
66+
lg: align,
67+
xl: align,
68+
'2xl': align
6769
}}
6870
/>
6971
);
70-
expect(asFragment()).toMatchSnapshot();
72+
expect(screen.getByLabelText('list')).toHaveClass(
73+
styles.modifiers[`${align}OnSm`],
74+
styles.modifiers[`${align}OnMd`],
75+
styles.modifiers[`${align}OnLg`],
76+
styles.modifiers[`${align}OnXl`],
77+
styles.modifiers[`${align}On_2xl`]
78+
);
7179
});
80+
});
7281

73-
test('Auto Column Widths Description List', () => {
74-
const { asFragment } = render(<DescriptionList isAutoColumnWidths />);
75-
expect(asFragment()).toMatchSnapshot();
76-
});
82+
test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
83+
render(<DescriptionList aria-label="list" isAutoColumnWidths />);
84+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
85+
});
7786

78-
test('Inline Grid Description List', () => {
79-
const { asFragment } = render(<DescriptionList isInlineGrid />);
80-
expect(asFragment()).toMatchSnapshot();
81-
});
87+
test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
88+
render(<DescriptionList aria-label="list" isInlineGrid />);
89+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
90+
});
8291

83-
test('Auto fit Description List', () => {
84-
const { asFragment } = render(<DescriptionList isAutoFit />);
85-
expect(asFragment()).toMatchSnapshot();
86-
});
92+
test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
93+
render(<DescriptionList aria-label="list" isAutoFit />);
94+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
95+
});
8796

88-
test('Auto fit with responsive grid Description List', () => {
89-
const { asFragment } = render(
90-
<DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }} />
91-
);
92-
expect(asFragment()).toMatchSnapshot();
93-
});
97+
test(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
98+
render(<DescriptionList aria-label="list" isFillColumns />);
99+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
100+
});
94101

95-
test('Term default', () => {
96-
const { asFragment } = render(
97-
<DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
98-
test
99-
</DescriptionListTerm>
100-
);
101-
expect(asFragment()).toMatchSnapshot();
102-
});
102+
test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
103+
render(<DescriptionList aria-label="list" displaySize="lg" />);
104+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
105+
});
103106

104-
test('Term helper text', () => {
105-
const { asFragment } = render(
106-
<DescriptionListTermHelpText key="term-id-1" aria-labelledby="term-1">
107-
<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
108-
</DescriptionListTermHelpText>
109-
);
110-
expect(asFragment()).toMatchSnapshot();
111-
});
107+
test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
108+
render(<DescriptionList aria-label="list" displaySize="2xl" />);
109+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
110+
});
112111

113-
test('Group', () => {
114-
const { asFragment } = render(
115-
<DescriptionListGroup className="custom-description-list-group" aria-labelledby="group-1">
116-
test
117-
</DescriptionListGroup>
118-
);
119-
expect(asFragment()).toMatchSnapshot();
112+
test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, () => {
113+
render(
114+
<DescriptionList
115+
aria-label="list"
116+
isHorizontal
117+
horizontalTermWidthModifier={{
118+
default: '12ch',
119+
sm: '15ch',
120+
md: '20ch',
121+
lg: '28ch',
122+
xl: '30ch',
123+
'2xl': '35ch'
124+
}}
125+
/>
126+
);
127+
expect(screen.getByLabelText('list')).toHaveStyle({
128+
'--pf-v5-c-description-list--m-horizontal__term--width': '12ch',
129+
'--pf-v5-c-description-list--m-horizontal__term--width-on-sm': '15ch',
130+
'--pf-v5-c-description-list--m-horizontal__term--width-on-md': '20ch',
131+
'--pf-v5-c-description-list--m-horizontal__term--width-on-lg': '28ch',
132+
'--pf-v5-c-description-list--m-horizontal__term--width-on-xl': '30ch',
133+
'--pf-v5-c-description-list--m-horizontal__term--width-on-2xl': '35ch'
120134
});
135+
});
121136

122-
test('Description', () => {
123-
const { asFragment } = render(
124-
<DescriptionListDescription className="custom-description-list-description" aria-labelledby="description-1">
125-
test
126-
</DescriptionListDescription>
127-
);
128-
expect(asFragment()).toMatchSnapshot();
137+
test(`Renders style when termWidth is set`, () => {
138+
render(<DescriptionList aria-label="list" isHorizontal termWidth="30px" />);
139+
expect(screen.getByLabelText('list')).toHaveStyle({
140+
'--pf-v5-c-description-list__term--width': '30px'
129141
});
130142
});
143+
144+
test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () => {
145+
render(
146+
<DescriptionList
147+
aria-label="list"
148+
isAutoFit
149+
autoFitMinModifier={{ default: '50px', sm: '50px', md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}
150+
/>
151+
);
152+
expect(screen.getByLabelText('list')).toHaveAttribute(
153+
'style',
154+
'--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;'
155+
);
156+
});

‎packages/react-core/src/components/DescriptionList/__tests__/DescriptionListDescription.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { DescriptionListDescription } from '../DescriptionListDescription';
4+
5+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
6+
7+
test('Renders to match snapshot', () => {
8+
const { asFragment } = render(<DescriptionListDescription>test</DescriptionListDescription>);
9+
expect(asFragment()).toMatchSnapshot();
10+
});
11+
12+
test(`Renders default class ${styles.descriptionListDescription}`, () => {
13+
render(<DescriptionListDescription>test</DescriptionListDescription>);
14+
expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListDescription, { exact: true });
15+
});
16+
17+
test('Renders custom className', () => {
18+
render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
19+
expect(screen.getByText('test').parentElement).toHaveClass('custom');
20+
});
21+
22+
test('Renders spread props', () => {
23+
render(<DescriptionListDescription id="id">test</DescriptionListDescription>);
24+
expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id');
25+
});

‎packages/react-core/src/components/DescriptionList/__tests__/DescriptionListGroup.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { DescriptionListGroup } from '../DescriptionListGroup';
4+
5+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
6+
7+
test('Renders to match snapshot', () => {
8+
const { asFragment } = render(<DescriptionListGroup>test</DescriptionListGroup>);
9+
expect(asFragment()).toMatchSnapshot();
10+
});
11+
12+
test(`Renders default class ${styles.descriptionListGroup}`, () => {
13+
render(<DescriptionListGroup>test</DescriptionListGroup>);
14+
expect(screen.getByText('test')).toHaveClass(styles.descriptionListGroup, { exact: true });
15+
});
16+
17+
test('Renders custom className', () => {
18+
render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
19+
expect(screen.getByText('test')).toHaveClass('custom');
20+
});
21+
22+
test('Renders spread props', () => {
23+
render(<DescriptionListGroup id="id">test</DescriptionListGroup>);
24+
expect(screen.getByText('test')).toHaveAttribute('id', 'id');
25+
});

‎packages/react-core/src/components/DescriptionList/__tests__/DescriptionListHelpTextButton.test.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton';
4+
5+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
6+
7+
test('Renders to match snapshot', () => {
8+
const { asFragment } = render(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>);
9+
expect(asFragment()).toMatchSnapshot();
10+
});
11+
12+
test(`Renders default class ${styles.descriptionListText}`, () => {
13+
render(<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>);
14+
expect(screen.getByText('test')).toHaveClass(`${styles.descriptionListText} ${styles.modifiers.helpText}`, {
15+
exact: true
16+
});
17+
});
18+
19+
test('Renders custom className', () => {
20+
render(<DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>);
21+
expect(screen.getByText('test')).toHaveClass('custom');
22+
});
23+
24+
test('Renders spread props', () => {
25+
render(<DescriptionListTermHelpTextButton id="id">test</DescriptionListTermHelpTextButton>);
26+
expect(screen.getByText('test')).toHaveAttribute('id', 'id');
27+
});

‎packages/react-core/src/components/DescriptionList/__tests__/DescriptionListTerm.test.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { DescriptionListTerm } from '../DescriptionListTerm';
4+
5+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
6+
7+
test('Renders to match snapshot', () => {
8+
const { asFragment } = render(<DescriptionListTerm>test</DescriptionListTerm>);
9+
expect(asFragment()).toMatchSnapshot();
10+
});
11+
12+
test(`Renders default class ${styles.descriptionListTerm}`, () => {
13+
render(<DescriptionListTerm>test</DescriptionListTerm>);
14+
expect(screen.getByText('test').parentElement).toHaveClass(styles.descriptionListTerm, { exact: true });
15+
});
16+
17+
test(`Renders default class ${styles.descriptionListText}`, () => {
18+
render(<DescriptionListTerm>test</DescriptionListTerm>);
19+
expect(screen.getByText('test')).toHaveClass(styles.descriptionListText, { exact: true });
20+
});
21+
22+
test('Renders custom className', () => {
23+
render(<DescriptionListTerm className="custom">test</DescriptionListTerm>);
24+
expect(screen.getByText('test').parentElement).toHaveClass('custom');
25+
});
26+
27+
test('Renders icon', () => {
28+
render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>);
29+
expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
30+
});
31+
32+
test('Renders spread props', () => {
33+
render(<DescriptionListTerm id="id">test</DescriptionListTerm>);
34+
expect(screen.getByText('test').parentElement).toHaveAttribute('id', 'id');
35+
});

0 commit comments

Comments
 (0)