Skip to content

Commit 3da3d94

Browse files
author
Eric Olkowski
committed
chore(List): updated unit tests
1 parent 4ea82f7 commit 3da3d94

File tree

4 files changed

+101
-363
lines changed

4 files changed

+101
-363
lines changed

‎packages/react-core/src/components/List/List.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,14 @@ export const List: React.FunctionComponent<ListProps> = ({
4949
type = OrderType.number,
5050
ref = null,
5151
component = ListComponent.ul,
52+
'aria-label': ariaLabel,
5253
...props
5354
}: ListProps) =>
5455
component === ListComponent.ol ? (
5556
<ol
5657
ref={ref as React.Ref<HTMLOListElement>}
5758
type={type}
59+
aria-label={ariaLabel}
5860
{...(isPlain && { role: 'list' })}
5961
{...props}
6062
className={css(
@@ -71,6 +73,7 @@ export const List: React.FunctionComponent<ListProps> = ({
7173
) : (
7274
<ul
7375
ref={ref as React.Ref<HTMLUListElement>}
76+
aria-label={ariaLabel}
7477
{...(isPlain && { role: 'list' })}
7578
{...props}
7679
className={css(

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

Lines changed: 92 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,107 @@
11
import { render, screen } from '@testing-library/react';
2-
3-
import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
4-
import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
5-
import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
62
import { List, ListVariant, ListComponent, OrderType } from '../List';
7-
import { ListItem } from '../ListItem';
8-
9-
const ListItems = () => (
10-
<List>
11-
<ListItem>First</ListItem>
12-
<ListItem>Second</ListItem>
13-
<ListItem>Third</ListItem>
14-
</List>
15-
);
16-
17-
describe('List', () => {
18-
test('simple list', () => {
19-
const { asFragment } = render(
20-
<List>
21-
<ListItems />
22-
</List>
23-
);
24-
expect(asFragment()).toMatchSnapshot();
25-
});
3+
import styles from '@patternfly/react-styles/css/components/List/list';
264

27-
test('inline list', () => {
28-
const { asFragment } = render(
29-
<List variant={ListVariant.inline}>
30-
<ListItems />
31-
</List>
32-
);
33-
expect(asFragment()).toMatchSnapshot();
34-
});
5+
describe('Shared tests between ol and ul lists', () => {
6+
Object.values(ListComponent).forEach((component) => {
7+
test(`Renders without children for ${component} list`, () => {
8+
render(<List component={component}></List>);
359

36-
test('ordered list', () => {
37-
const { asFragment } = render(
38-
<List component={ListComponent.ol}>
39-
<ListItem>Apple</ListItem>
40-
<ListItem>Banana</ListItem>
41-
<ListItem>Orange</ListItem>
42-
</List>
43-
);
44-
expect(asFragment()).toMatchSnapshot();
45-
});
10+
expect(screen.getByRole('list')).toBeVisible();
11+
});
4612

47-
test('ordered list starts with 2nd item', () => {
48-
render(
49-
<List component={ListComponent.ol} start={2}>
50-
<ListItem>Banana</ListItem>
51-
<ListItem>Orange</ListItem>
52-
</List>
53-
);
54-
expect(screen.getByRole('list')).toHaveAttribute('start', '2');
55-
});
13+
test(`Renders children for ${component} list`, () => {
14+
render(<List component={component}>Children content</List>);
5615

57-
test('ordered list items will be numbered with uppercase letters', () => {
58-
render(
59-
<List component={ListComponent.ol} type={OrderType.uppercaseLetter}>
60-
<ListItem>Banana</ListItem>
61-
<ListItem>Orange</ListItem>
62-
</List>
63-
);
64-
expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
65-
});
16+
expect(screen.getByRole('list')).toHaveTextContent('Children content');
17+
});
6618

67-
test('inlined ordered list', () => {
68-
render(
69-
<List variant={ListVariant.inline} component={ListComponent.ol}>
70-
<ListItem>Apple</ListItem>
71-
<ListItem>Banana</ListItem>
72-
<ListItem>Orange</ListItem>
73-
</List>
74-
);
75-
expect(screen.getByRole('list')).toHaveClass('pf-m-inline');
76-
});
19+
test(`Renders with ${component} tag`, () => {
20+
render(<List component={component}></List>);
7721

78-
test('bordered list', () => {
79-
render(
80-
<List isBordered>
81-
<ListItems />
82-
</List>
83-
);
84-
expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered');
85-
});
22+
expect(screen.getByRole('list').tagName).toBe(component.toUpperCase());
23+
});
24+
25+
test(`Renders with only class ${styles.list} by default for ${component} list`, () => {
26+
render(<List component={component}></List>);
27+
28+
expect(screen.getByRole('list')).toHaveClass(styles.list, { exact: true });
29+
});
30+
31+
test(`Renders with custom class when className is passed for ${component} list`, () => {
32+
render(<List component={component} className="custom-class"></List>);
33+
34+
expect(screen.getByRole('list')).toHaveClass('custom-class');
35+
});
36+
37+
test(`Renders with variant class ${styles.modifiers.inline} when variant prop is inline for ${component} list`, () => {
38+
render(<List component={component} variant={ListVariant.inline}></List>);
39+
40+
expect(screen.getByRole('list')).toHaveClass(styles.modifiers.inline);
41+
});
42+
43+
test(`Renders with class ${styles.modifiers.bordered} when isBordered is true for ${component} list`, () => {
44+
render(<List component={component} isBordered></List>);
45+
46+
expect(screen.getByRole('list')).toHaveClass(styles.modifiers.bordered);
47+
});
48+
49+
test(`Renders with class ${styles.modifiers.plain} when isPlain is true for ${component} list`, () => {
50+
render(<List component={component} isPlain></List>);
8651

87-
test('plain list', () => {
88-
render(
89-
<List isPlain>
90-
<ListItems />
91-
</List>
92-
);
93-
expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain');
52+
expect(screen.getByRole('list')).toHaveClass(styles.modifiers.plain);
53+
});
54+
55+
test(`Renders with class ${styles.modifiers.iconLg} when iconSize is "large" for ${component} list`, () => {
56+
render(<List component={component} iconSize="large"></List>);
57+
58+
expect(screen.getByRole('list')).toHaveClass(styles.modifiers.iconLg);
59+
});
60+
61+
test(`Renders with aria-label for ${component} list`, () => {
62+
render(<List component={component} aria-label="Testing stuff"></List>);
63+
64+
expect(screen.getByRole('list')).toHaveAccessibleName('Testing stuff');
65+
});
66+
67+
test(`Renders with spread props for ${component} list`, () => {
68+
render(<List component={component} id="Test ID"></List>);
69+
70+
expect(screen.getByRole('list')).toHaveAttribute('id', 'Test ID');
71+
});
72+
73+
test(`Does not render with role attribute when isPlain is false for ${component} list`, () => {
74+
render(<List component={component}></List>);
75+
76+
expect(screen.getByRole('list')).not.toHaveAttribute('role');
77+
});
78+
79+
test(`Renders with role attribute of "list" when isPlain is true for ${component} list`, () => {
80+
render(<List component={component} isPlain></List>);
81+
82+
expect(screen.getByRole('list')).toHaveAttribute('role', 'list');
83+
});
84+
85+
test(`Matches snapshot for ${component} list`, () => {
86+
const { asFragment } = render(<List component={component}></List>);
87+
88+
expect(asFragment()).toMatchSnapshot();
89+
});
9490
});
91+
});
92+
93+
describe('Ol component list', () => {
94+
test(`Renders with type attribute when type is passed`, () => {
95+
render(<List component={ListComponent.ol} type={OrderType.lowercaseRomanNumber}></List>);
9596

96-
test('icon list', () => {
97-
const { asFragment } = render(
98-
<List isPlain>
99-
<ListItem icon={<BookOpen />}>Apple</ListItem>
100-
<ListItem icon={<Key />}>Banana</ListItem>
101-
<ListItem icon={<Desktop />}>Orange</ListItem>
102-
</List>
103-
);
104-
expect(asFragment()).toMatchSnapshot();
97+
expect(screen.getByRole('list')).toHaveAttribute('type', 'i');
10598
});
99+
});
100+
101+
describe('Ul component list', () => {
102+
test(`Does not render with type attribute when type is passed`, () => {
103+
render(<List type={OrderType.lowercaseRomanNumber}></List>);
106104

107-
test('icon large list', () => {
108-
const { asFragment } = render(
109-
<List iconSize="large">
110-
<ListItem icon={<BookOpen />}>Apple</ListItem>
111-
<ListItem icon={<Key />}>Banana</ListItem>
112-
<ListItem icon={<Desktop />}>Orange</ListItem>
113-
</List>
114-
);
115-
expect(asFragment()).toMatchSnapshot();
105+
expect(screen.getByRole('list')).not.toHaveAttribute('type');
116106
});
117107
});

0 commit comments

Comments
 (0)