Skip to content

Commit 3cb7df4

Browse files
kmcfaulkmcfaul
committed
chore(DescriptionList): update tests
1 parent 5b4cbf4 commit 3cb7df4

2 files changed

Lines changed: 218 additions & 240 deletions

File tree

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

Lines changed: 198 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,207 @@
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';
44
import { DescriptionListGroup } from '../DescriptionListGroup';
55
import { DescriptionListTerm } from '../DescriptionListTerm';
66
import { DescriptionListDescription } from '../DescriptionListDescription';
77
import { DescriptionListTermHelpText } from '../DescriptionListTermHelpText';
88
import { DescriptionListTermHelpTextButton } from '../DescriptionListTermHelpTextButton';
99

10-
describe('Description List', () => {
11-
test('default', () => {
12-
const { asFragment } = render(<DescriptionList />);
13-
expect(asFragment()).toMatchSnapshot();
14-
});
15-
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-
});
22-
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-
});
29-
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-
});
36-
37-
test('Horizontal Description List', () => {
38-
const { asFragment } = render(<DescriptionList isHorizontal />);
39-
expect(asFragment()).toMatchSnapshot();
40-
});
41-
42-
test('Compact Description List', () => {
43-
const { asFragment } = render(<DescriptionList isCompact />);
44-
expect(asFragment()).toMatchSnapshot();
45-
});
46-
47-
test('Compact Horizontal Description List', () => {
48-
const { asFragment } = render(<DescriptionList isCompact isHorizontal />);
49-
expect(asFragment()).toMatchSnapshot();
50-
});
51-
52-
test('Fluid Horizontal Description List', () => {
53-
const { asFragment } = render(<DescriptionList isFluid isHorizontal />);
54-
expect(asFragment()).toMatchSnapshot();
55-
});
56-
57-
test('alignment breakpoints', () => {
58-
const { asFragment } = render(
59-
<DescriptionList
60-
isHorizontal
61-
orientation={{
62-
sm: 'horizontal',
63-
md: 'vertical',
64-
lg: 'horizontal',
65-
xl: 'vertical',
66-
'2xl': 'horizontal'
67-
}}
68-
/>
69-
);
70-
expect(asFragment()).toMatchSnapshot();
71-
});
72-
73-
test('Auto Column Widths Description List', () => {
74-
const { asFragment } = render(<DescriptionList isAutoColumnWidths />);
75-
expect(asFragment()).toMatchSnapshot();
76-
});
77-
78-
test('Inline Grid Description List', () => {
79-
const { asFragment } = render(<DescriptionList isInlineGrid />);
80-
expect(asFragment()).toMatchSnapshot();
81-
});
82-
83-
test('Auto fit Description List', () => {
84-
const { asFragment } = render(<DescriptionList isAutoFit />);
85-
expect(asFragment()).toMatchSnapshot();
86-
});
87-
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-
});
94-
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-
});
103-
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-
});
112-
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();
120-
});
121-
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();
129-
});
10+
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
11+
12+
test('renders to match snapshot', () => {
13+
const { asFragment } = render(<DescriptionList aria-label="list" />);
14+
expect(screen.getByLabelText('list')).toBeInTheDocument();
15+
expect(asFragment()).toMatchSnapshot();
16+
});
17+
18+
test('renders custom className', () => {
19+
render(<DescriptionList aria-label="list" className="custom" />);
20+
expect(screen.getByLabelText('list')).toHaveClass('custom');
21+
});
22+
23+
test('renders 1Col on all breakpoints', () => {
24+
render(
25+
<DescriptionList
26+
aria-label="list"
27+
columnModifier={{ default: '1Col', sm: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }}
28+
/>
29+
);
30+
expect(screen.getByLabelText('list')).toHaveClass(
31+
styles.modifiers['1Col'],
32+
styles.modifiers['1ColOnSm'],
33+
styles.modifiers['1ColOnMd'],
34+
styles.modifiers['1ColOnLg'],
35+
styles.modifiers['1ColOnXl'],
36+
styles.modifiers['1ColOn_2xl']
37+
);
38+
});
39+
40+
test('renders 2Col on all breakpoints', () => {
41+
render(
42+
<DescriptionList
43+
aria-label="list"
44+
columnModifier={{ default: '2Col', sm: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }}
45+
/>
46+
);
47+
expect(screen.getByLabelText('list')).toHaveClass(
48+
styles.modifiers['2Col'],
49+
styles.modifiers['2ColOnSm'],
50+
styles.modifiers['2ColOnMd'],
51+
styles.modifiers['2ColOnLg'],
52+
styles.modifiers['2ColOnXl'],
53+
styles.modifiers['2ColOn_2xl']
54+
);
55+
});
56+
57+
test('renders 3Col on all breakpoints', () => {
58+
render(
59+
<DescriptionList
60+
aria-label="list"
61+
columnModifier={{ default: '3Col', sm: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }}
62+
/>
63+
);
64+
expect(screen.getByLabelText('list')).toHaveClass(
65+
styles.modifiers['3Col'],
66+
styles.modifiers['3ColOnSm'],
67+
styles.modifiers['3ColOnMd'],
68+
styles.modifiers['3ColOnLg'],
69+
styles.modifiers['3ColOnXl'],
70+
styles.modifiers['3ColOn_2xl']
71+
);
72+
});
73+
74+
test(`renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
75+
render(<DescriptionList aria-label="list" isHorizontal />);
76+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
77+
});
78+
79+
test(`renders ${styles.modifiers.compact} when isCompact = true`, () => {
80+
render(<DescriptionList aria-label="list" isCompact />);
81+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
82+
});
83+
84+
test(`renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
85+
render(<DescriptionList aria-label="list" isFluid />);
86+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fluid, styles.modifiers.horizontal);
87+
});
88+
89+
test('renders alignment breakpoints', () => {
90+
render(
91+
<DescriptionList
92+
aria-label="list"
93+
isHorizontal
94+
orientation={{
95+
sm: 'horizontal',
96+
md: 'vertical',
97+
lg: 'horizontal',
98+
xl: 'vertical',
99+
'2xl': 'horizontal'
100+
}}
101+
/>
102+
);
103+
expect(screen.getByLabelText('list')).toHaveClass(
104+
styles.modifiers.horizontal,
105+
styles.modifiers.horizontalOnSm,
106+
styles.modifiers.verticalOnMd,
107+
styles.modifiers.horizontalOnLg,
108+
styles.modifiers.verticalOnXl,
109+
styles.modifiers.horizontalOn_2xl
110+
);
111+
});
112+
113+
test(`renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
114+
render(<DescriptionList aria-label="list" isAutoColumnWidths />);
115+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
116+
});
117+
118+
test(`renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
119+
render(<DescriptionList aria-label="list" isInlineGrid />);
120+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
121+
});
122+
123+
test(`renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
124+
render(<DescriptionList aria-label="list" isAutoFit />);
125+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
126+
});
127+
128+
test(`renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
129+
render(<DescriptionList aria-label="list" isFillColumns />);
130+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
131+
});
132+
133+
test(`renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
134+
render(<DescriptionList aria-label="list" displaySize="lg" />);
135+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
136+
});
137+
138+
test(`renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
139+
render(<DescriptionList aria-label="list" displaySize="2xl" />);
140+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
141+
});
142+
143+
test('DescriptionListTerm renders to match snapshot', () => {
144+
const { asFragment } = render(
145+
<DescriptionListTerm key="term-id-1" aria-labelledby="term-1">
146+
test
147+
</DescriptionListTerm>
148+
);
149+
expect(asFragment()).toMatchSnapshot();
150+
});
151+
152+
test('DescriptionListTerm renders custom className', () => {
153+
render(<DescriptionListTerm className="custom">test</DescriptionListTerm>);
154+
expect(screen.getByText('test').parentElement).toHaveClass('custom');
155+
});
156+
157+
test('DescriptionListTerm renders icon', () => {
158+
render(<DescriptionListTerm icon={<div>icon</div>}>test</DescriptionListTerm>);
159+
expect(screen.getByText('icon').parentElement).toHaveClass(styles.descriptionListTermIcon);
160+
});
161+
162+
test('DescriptioinListTermHelpText renders to match snapshot', () => {
163+
const { asFragment } = render(
164+
<DescriptionListTermHelpText>
165+
<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
166+
</DescriptionListTermHelpText>
167+
);
168+
expect(asFragment()).toMatchSnapshot();
169+
});
170+
171+
test('DescriptioinListTermHelpText renders custom className', () => {
172+
render(
173+
<DescriptionListTermHelpText className="custom" aria-label="help-text">
174+
<DescriptionListTermHelpTextButton>test</DescriptionListTermHelpTextButton>
175+
</DescriptionListTermHelpText>
176+
);
177+
expect(screen.getByLabelText('help-text')).toHaveClass('custom');
178+
});
179+
180+
test('DescriptioinListTermHelpTextButton renders custom className', () => {
181+
render(
182+
<DescriptionListTermHelpText>
183+
<DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>
184+
</DescriptionListTermHelpText>
185+
);
186+
expect(screen.getByText('test')).toHaveClass('custom');
187+
});
188+
189+
test('DescriptionListGroup renders to match snapshot', () => {
190+
const { asFragment } = render(<DescriptionListGroup>test</DescriptionListGroup>);
191+
expect(asFragment()).toMatchSnapshot();
192+
});
193+
194+
test('DescriptionListGroup renders custom className', () => {
195+
render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
196+
expect(screen.getByText('test')).toHaveClass('custom');
197+
});
198+
199+
test('DescriptionListDescription renders to match snapshot', () => {
200+
const { asFragment } = render(<DescriptionListDescription>test</DescriptionListDescription>);
201+
expect(asFragment()).toMatchSnapshot();
202+
});
203+
204+
test('DescriptionListDescription renders custom className', () => {
205+
render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
206+
expect(screen.getByText('test').parentElement).toHaveClass('custom');
130207
});

0 commit comments

Comments
 (0)