Skip to content

Commit feab1a0

Browse files
samuelatefahsamuelatefah
authored
chore(Text): update tests to new react testing library standards (#8280)
* chore(Text): update tests to new react testing library standards * removed data-pf-content attribute and tests * added tests to check for no class names
1 parent f32c51f commit feab1a0

File tree

12 files changed

+293
-441
lines changed

12 files changed

+293
-441
lines changed

‎packages/react-core/src/components/Text/TextList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const TextList: React.FunctionComponent<TextListProps> = ({
2525
const Component: any = component;
2626

2727
return (
28-
<Component {...props} data-pf-content className={css(className)}>
28+
<Component {...props} className={css(className)}>
2929
{children}
3030
</Component>
3131
);

‎packages/react-core/src/components/Text/TextListItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const TextListItem: React.FunctionComponent<TextListItemProps> = ({
2525
const Component: any = component;
2626

2727
return (
28-
<Component {...props} data-pf-content className={css(className)}>
28+
<Component {...props} className={css(className)}>
2929
{children}
3030
</Component>
3131
);

‎packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`TextList should match snapshot (auto-generated) 1`] = `
44
<DocumentFragment>
55
<ul
66
class="''"
7-
data-pf-content="true"
87
>
98
ReactNode
109
</ul>

‎packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`TextListItem should match snapshot (auto-generated) 1`] = `
44
<DocumentFragment>
55
<li
66
class="''"
7-
data-pf-content="true"
87
>
98
ReactNode
109
</li>

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

Lines changed: 98 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,101 @@
1-
import React from 'react';
2-
import { render } from '@testing-library/react';
3-
import { TextContent } from '../TextContent';
4-
import { Text, TextVariants } from '../Text';
5-
import { TextList, TextListVariants } from '../TextList';
6-
import { TextListItem, TextListItemVariants } from '../TextListItem';
7-
8-
test('Text example should match snapshot', () => {
9-
const { asFragment } = render(
10-
<TextContent>
11-
<Text component={TextVariants.h1}>Hello World</Text>
12-
<Text component={TextVariants.p}>
13-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
14-
nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
15-
erat vel, interdum mattis neque. Sub works as well!
16-
</Text>
17-
<Text component={TextVariants.h2}>Second level</Text>
18-
<Text component={TextVariants.p}>
19-
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit
20-
amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
21-
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
22-
</Text>
23-
<TextList>
24-
<TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
25-
<TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
26-
<TextListItem>
27-
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
28-
<TextList>
29-
<TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
30-
<TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
31-
</TextList>
32-
</TextListItem>
33-
<TextListItem>Ut non enim metus.</TextListItem>
34-
</TextList>
35-
<Text component={TextVariants.h3}>Third level</Text>
36-
<Text component={TextVariants.p}>
37-
Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
38-
<Text component={TextVariants.a} href="#">
39-
non ante
40-
</Text>
41-
. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
42-
</Text>
43-
<TextList component={TextListVariants.ol}>
44-
<TextListItem>Donec blandit a lorem id convallis.</TextListItem>
45-
<TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
46-
<TextListItem>Integer in volutpat libero.</TextListItem>
47-
<TextListItem>Donec a diam tellus.</TextListItem>
48-
<TextListItem>Aenean nec tortor orci.</TextListItem>
49-
<TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
50-
<TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
51-
</TextList>
52-
<Text component={TextVariants.blockquote}>
53-
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit
54-
amet turpis.
55-
</Text>
56-
<Text component={TextVariants.p}>
57-
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas
58-
ultrices lacus quis neque consectetur, et lobortis nisi molestie.
59-
</Text>
60-
<Text component={TextVariants.p}>
61-
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
62-
vestibulum interdum commodo.
63-
</Text>
64-
<TextList component={TextListVariants.dl}>
65-
<TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
66-
<TextListItem component={TextListItemVariants.dd}>
67-
The part of the Internet that contains websites and web pages
68-
</TextListItem>
69-
<TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
70-
<TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
71-
<TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
72-
<TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
73-
</TextList>
74-
<Text component={TextVariants.p}>
75-
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
76-
malesuada nulla. Nulla facilisi. Nullam ac erat ante.
77-
</Text>
78-
<Text component={TextVariants.h4}>Fourth level</Text>
79-
<Text component={TextVariants.p}>
80-
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at
81-
elementum ex efficitur.
82-
</Text>
83-
<Text component={TextVariants.p}>
84-
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
85-
vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
86-
</Text>
87-
<Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
88-
<Text component={TextVariants.p}>
89-
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis.
90-
Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam
91-
tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est.
92-
Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam
93-
nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra
94-
varius metus non pellentesque.
95-
</Text>
96-
<Text component={TextVariants.h5}>Fifth level</Text>
97-
<Text component={TextVariants.p}>
98-
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent
99-
aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
100-
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
101-
</Text>
102-
<Text component={TextVariants.h6}>Sixth level</Text>
103-
<Text component={TextVariants.p}>
104-
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros
105-
accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae,
106-
malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum
107-
commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
108-
</Text>
109-
</TextContent>
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { Text } from '../Text';
4+
5+
test('Renders without children', () => {
6+
render(
7+
<div data-testid="test-content">
8+
<Text />
9+
</div>
10+
);
11+
expect(screen.getByTestId('test-content').firstChild).toBeVisible();
12+
});
13+
14+
test('Renders children', () => {
15+
render(<Text>Test</Text>);
16+
expect(screen.getByText('Test')).toBeVisible();
17+
});
18+
19+
test('Renders without class name by default', () => {
20+
render(<Text>Test</Text>);
21+
expect(screen.getByText('Test')).not.toHaveClass();
22+
});
23+
24+
test('Renders with custom class name when className prop is provided', () => {
25+
render(<Text className="custom-class">Test</Text>);
26+
expect(screen.getByText('Test')).toHaveClass('custom-class');
27+
});
28+
29+
test('Renders as "p" element by default', () => {
30+
render(<Text>Test</Text>);
31+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'P');
32+
});
33+
34+
test('Renders as "h1" element when component="h1"', () => {
35+
render(<Text component="h1">Test</Text>);
36+
expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
37+
});
38+
39+
test('Renders as "h2" element when component="h2"', () => {
40+
render(<Text component="h2">Test</Text>);
41+
expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
42+
});
43+
44+
test('Renders as "h3" element when component="h3"', () => {
45+
render(<Text component="h3">Test</Text>);
46+
expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
47+
});
48+
49+
test('Renders as "h4" element when component="h4"', () => {
50+
render(<Text component="h4">Test</Text>);
51+
expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
52+
});
53+
54+
test('Renders as "h5" element when component="h5"', () => {
55+
render(<Text component="h5">Test</Text>);
56+
expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
57+
});
58+
59+
test('Renders as "h6" element when component="h6"', () => {
60+
render(<Text component="h6">Test</Text>);
61+
expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
62+
});
63+
64+
test('Renders as "a" element when component="a"', () => {
65+
render(<Text component="a">Test</Text>);
66+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A');
67+
});
68+
69+
test('Renders as "blockquote" element when component="blockquote"', () => {
70+
render(<Text component="blockquote">Test</Text>);
71+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE');
72+
});
73+
74+
test('Renders as "pre" element when component="pre"', () => {
75+
render(<Text component="pre">Test</Text>);
76+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE');
77+
});
78+
79+
test('Renders without class name pf-m-visited by default', () => {
80+
render(<Text>Test</Text>);
81+
expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
82+
});
83+
84+
test('Renders with class name pf-m-visited when isVisited=true and component="a"', () => {
85+
render(
86+
<Text isVisitedLink={true} component="a">
87+
Test
88+
</Text>
11089
);
90+
expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
91+
});
92+
93+
test('Renders with inherited element props spread to the component', () => {
94+
render(<Text aria-label="Test label">Test</Text>);
95+
expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
96+
});
97+
98+
test('Matches the snapshot', () => {
99+
const { asFragment } = render(<Text ouiaId="ouia-id">Test</Text>);
111100
expect(asFragment()).toMatchSnapshot();
112101
});

‎packages/react-core/src/components/Text/__tests__/TextContent.text.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { TextContent } from '../TextContent';
4+
5+
test('Renders without children', () => {
6+
render(
7+
<div data-testid="test-content">
8+
<TextContent />
9+
</div>
10+
);
11+
expect(screen.getByTestId('test-content').firstChild).toBeVisible();
12+
});
13+
14+
test('Renders children', () => {
15+
render(<TextContent>Test</TextContent>);
16+
expect(screen.getByText('Test')).toBeVisible();
17+
});
18+
19+
test('Renders with class name pf-c-content', () => {
20+
render(<TextContent>Test</TextContent>);
21+
expect(screen.getByText('Test')).toHaveClass('pf-c-content', { exact: true });
22+
});
23+
24+
test('Renders with custom class name when className prop is provided', () => {
25+
render(<TextContent className="custom-class">Test</TextContent>);
26+
expect(screen.getByText('Test')).toHaveClass('custom-class');
27+
});
28+
29+
test('Renders without class name pf-m-visited by default', () => {
30+
render(<TextContent>Test</TextContent>);
31+
expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
32+
});
33+
34+
test('Renders with class name pf-m-visited when isVisited=true', () => {
35+
render(<TextContent isVisited={true}>Test</TextContent>);
36+
expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
37+
});
38+
39+
test('Renders with inherited element props spread to the component', () => {
40+
render(<TextContent aria-label="Test label">Test</TextContent>);
41+
expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
42+
});
43+
44+
test('Matches the snapshot', () => {
45+
const { asFragment } = render(<TextContent>Test</TextContent>);
46+
expect(asFragment()).toMatchSnapshot();
47+
});

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { TextList } from '../TextList';
4+
5+
test('Renders without children', () => {
6+
render(
7+
<div data-testid="test-list">
8+
<TextList />
9+
</div>
10+
);
11+
expect(screen.getByTestId('test-list').firstChild).toBeVisible();
12+
});
13+
14+
test('Renders children', () => {
15+
render(<TextList>Test</TextList>);
16+
expect(screen.getByText('Test')).toBeVisible();
17+
});
18+
19+
test('Renders without class name by default', () => {
20+
render(<TextList>Test</TextList>);
21+
expect(screen.getByText('Test')).not.toHaveClass();
22+
});
23+
24+
test('Renders with custom class name when className prop is provided', () => {
25+
render(<TextList className="custom-class">Test</TextList>);
26+
expect(screen.getByText('Test')).toHaveClass('custom-class');
27+
});
28+
29+
test('Renders as "ul" element by default', () => {
30+
render(<TextList>Test</TextList>);
31+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL');
32+
});
33+
34+
test('Renders as "ol" element when component="ol"', () => {
35+
render(<TextList component="ol">Test</TextList>);
36+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL');
37+
});
38+
39+
test('Renders as "dl" element when component="dl"', () => {
40+
render(<TextList component="dl">Test</TextList>);
41+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
42+
});
43+
44+
test('Renders with inherited element props spread to the component', () => {
45+
render(<TextList aria-label="Test label">Test</TextList>);
46+
expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
47+
});
48+
49+
test('Matches the snapshot', () => {
50+
const { asFragment } = render(<TextList>Test</TextList>);
51+
expect(asFragment()).toMatchSnapshot();
52+
});

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { TextListItem } from '../TextListItem';
4+
5+
test('Renders without children', () => {
6+
render(
7+
<div data-testid="test-list-item">
8+
<TextListItem />
9+
</div>
10+
);
11+
expect(screen.getByTestId('test-list-item').firstChild).toBeVisible();
12+
});
13+
14+
test('Renders children', () => {
15+
render(<TextListItem>Test</TextListItem>);
16+
expect(screen.getByText('Test')).toBeVisible();
17+
});
18+
19+
test('Renders without class name by default', () => {
20+
render(<TextListItem>Test</TextListItem>);
21+
expect(screen.getByText('Test')).not.toHaveClass();
22+
});
23+
24+
test('Renders with custom class name when className prop is provided', () => {
25+
render(<TextListItem className="custom-class">Test</TextListItem>);
26+
expect(screen.getByText('Test')).toHaveClass('custom-class');
27+
});
28+
29+
test('Renders as "li" element by default', () => {
30+
render(<TextListItem>Test</TextListItem>);
31+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI');
32+
});
33+
34+
test('Renders as "dt" element when component="dt"', () => {
35+
render(<TextListItem component="dt">Test</TextListItem>);
36+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT');
37+
});
38+
39+
test('Renders as "dd" element when component="dd"', () => {
40+
render(<TextListItem component="dd">Test</TextListItem>);
41+
expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD');
42+
});
43+
44+
test('Renders with inherited element props spread to the component', () => {
45+
render(<TextListItem aria-label="Test label">Test</TextListItem>);
46+
expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
47+
});
48+
49+
test('Matches the snapshot', () => {
50+
const { asFragment } = render(<TextListItem>Test</TextListItem>);
51+
expect(asFragment()).toMatchSnapshot();
52+
});

0 commit comments

Comments
 (0)