Skip to content

Commit 0f4e45d

Browse files
kmcfaulkmcfaul
committed
break out tests, pr feedback
1 parent 7788ea2 commit 0f4e45d

12 files changed

+239
-217
lines changed

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

Lines changed: 62 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +1,110 @@
11
import React from 'react';
22
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';
94

105
import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
116

12-
test('renders to match snapshot', () => {
13-
const { asFragment } = render(<DescriptionList aria-label="list" />);
14-
expect(screen.getByLabelText('list')).toBeInTheDocument();
7+
test('Renders to match snapshot', () => {
8+
const { asFragment } = render(<DescriptionList />);
159
expect(asFragment()).toMatchSnapshot();
1610
});
1711

18-
test('renders custom className', () => {
19-
render(<DescriptionList aria-label="list" className="custom" />);
20-
expect(screen.getByLabelText('list')).toHaveClass('custom');
12+
test(`Renders default class ${styles.descriptionList}`, () => {
13+
render(<DescriptionList aria-label="list" />);
14+
expect(screen.getByLabelText('list')).toHaveClass(styles.descriptionList);
2115
});
2216

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-
);
17+
test('Renders custom className', () => {
18+
render(<DescriptionList aria-label="list" className="custom" />);
19+
expect(screen.getByLabelText('list')).toHaveClass('custom');
7220
});
7321

74-
test(`renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
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+
);
39+
});
40+
});
41+
42+
test(`Renders ${styles.modifiers.horizontal} when isHorizontal = true`, () => {
7543
render(<DescriptionList aria-label="list" isHorizontal />);
7644
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.horizontal);
7745
});
7846

79-
test(`renders ${styles.modifiers.compact} when isCompact = true`, () => {
47+
test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
8048
render(<DescriptionList aria-label="list" isCompact />);
8149
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
8250
});
8351

84-
test(`renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
52+
test(`Renders ${styles.modifiers.horizontal} and ${styles.modifiers.fluid} when isFluid = true`, () => {
8553
render(<DescriptionList aria-label="list" isFluid />);
8654
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fluid, styles.modifiers.horizontal);
8755
});
8856

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`, () => {
57+
Object.values(['horizontal', 'vertical']).forEach((_align) => {
58+
const align = _align as 'horizontal' | 'vertical';
59+
test(`Renders ${align} on all breakpoints`, () => {
60+
render(
61+
<DescriptionList
62+
aria-label="list"
63+
orientation={{
64+
sm: align,
65+
md: align,
66+
lg: align,
67+
xl: align,
68+
'2xl': align
69+
}}
70+
/>
71+
);
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+
);
79+
});
80+
});
81+
82+
test(`Renders ${styles.modifiers.autoColumnWidths} when isAutoColumnWidths = true`, () => {
11483
render(<DescriptionList aria-label="list" isAutoColumnWidths />);
11584
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoColumnWidths);
11685
});
11786

118-
test(`renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
87+
test(`Renders ${styles.modifiers.inlineGrid} when isInlineGrid = true`, () => {
11988
render(<DescriptionList aria-label="list" isInlineGrid />);
12089
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.inlineGrid);
12190
});
12291

123-
test(`renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
92+
test(`Renders ${styles.modifiers.autoFit} when isAutoFit = true`, () => {
12493
render(<DescriptionList aria-label="list" isAutoFit />);
12594
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.autoFit);
12695
});
12796

128-
test(`renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
97+
test(`Renders ${styles.modifiers.fillColumns} when isFillColumns = true`, () => {
12998
render(<DescriptionList aria-label="list" isFillColumns />);
13099
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.fillColumns);
131100
});
132101

133-
test(`renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
102+
test(`Renders ${styles.modifiers.displayLg} when displaySize = lg`, () => {
134103
render(<DescriptionList aria-label="list" displaySize="lg" />);
135104
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.displayLg);
136105
});
137106

138-
test(`renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
107+
test(`Renders ${styles.modifiers.display_2xl} when displaySize = 2xl`, () => {
139108
render(<DescriptionList aria-label="list" displaySize="2xl" />);
140109
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.display_2xl);
141110
});
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');
207-
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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);
15+
});
16+
17+
test('Renders custom className', () => {
18+
render(<DescriptionListDescription className="custom">test</DescriptionListDescription>);
19+
expect(screen.getByText('test').parentElement).toHaveClass('custom');
20+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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);
15+
});
16+
17+
test('Renders custom className', () => {
18+
render(<DescriptionListGroup className="custom">test</DescriptionListGroup>);
19+
expect(screen.getByText('test')).toHaveClass('custom');
20+
});

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

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

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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);
15+
});
16+
17+
test('Renders custom className', () => {
18+
render(<DescriptionListTermHelpTextButton className="custom">test</DescriptionListTermHelpTextButton>);
19+
expect(screen.getByText('test')).toHaveClass('custom');
20+
});

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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);
15+
});
16+
17+
test(`Renders default class ${styles.descriptionListText}`, () => {
18+
render(<DescriptionListTerm>test</DescriptionListTerm>);
19+
expect(screen.getByText('test')).toHaveClass(styles.descriptionListText);
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+
});

0 commit comments

Comments
 (0)