Skip to content

Commit f887232

Browse files
drewamunat2Drew Amunategui IIDrew Amunategui II
authored
chore(Title): update tests to new RTL standards (#8156)
* chore(Title): update tests to new RTL standards * chore(Title): update tests to new RTL standards * chore(Title): update tests to new RTL standards Co-authored-by: Drew Amunategui II <[email protected]> Co-authored-by: Drew Amunategui II <[email protected]>
1 parent 8cea2e5 commit f887232

File tree

2 files changed

+160
-91
lines changed

2 files changed

+160
-91
lines changed

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

Lines changed: 156 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,159 @@
11
import * as React from 'react';
22
import { render, screen } from '@testing-library/react';
3-
import { Title, TitleSizes } from '..';
4-
5-
describe('Title', () => {
6-
Object.values(TitleSizes).forEach(size => {
7-
test(`${size} Title`, () => {
8-
const { asFragment } = render(
9-
<Title size={size} headingLevel="h1">
10-
{size} Title
11-
</Title>
12-
);
13-
expect(asFragment()).toMatchSnapshot();
14-
});
15-
});
16-
17-
test('Heading level can be set using a string value', () => {
18-
render(
19-
<Title size="lg" headingLevel="h3">
20-
H3 Heading
21-
</Title>
22-
);
23-
expect(screen.getByRole('heading').parentElement.querySelector('h3')).toBeInTheDocument();
24-
});
3+
import { Title } from '../Title';
4+
5+
test('Renders without children', () => {
6+
render(
7+
<div data-testid="title">
8+
<Title headingLevel="h1" />
9+
</div>
10+
);
11+
expect(screen.getByTestId('title').firstChild).toBeVisible();
12+
});
13+
14+
test('Renders children', () => {
15+
render(<Title headingLevel="h1">Test</Title>);
16+
expect(screen.getByText('Test')).toBeVisible();
17+
});
18+
19+
test('Renders with the pf-c-title', () => {
20+
render(<Title headingLevel="h1">Test</Title>);
21+
expect(screen.getByRole('heading')).toHaveClass('pf-c-title');
22+
});
23+
24+
test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => {
25+
render(<Title headingLevel="h1">Test</Title>);
26+
expect(screen.getByRole('heading')).toHaveClass('pf-c-title pf-m-2xl', { exact: true });
27+
});
28+
29+
test('Renders with custom class name when className prop is passed', () => {
30+
render(
31+
<Title headingLevel="h1" className="test-class">
32+
Test
33+
</Title>
34+
);
35+
expect(screen.getByRole('heading')).toHaveClass('test-class');
36+
});
37+
38+
test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => {
39+
render(<Title headingLevel="h1">Test</Title>);
40+
expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
41+
});
42+
43+
test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => {
44+
render(<Title headingLevel="h2">Test</Title>);
45+
expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
46+
});
47+
48+
test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => {
49+
render(<Title headingLevel="h3">Test</Title>);
50+
expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
51+
});
52+
53+
test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => {
54+
render(<Title headingLevel="h4">Test</Title>);
55+
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
56+
});
57+
58+
test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => {
59+
render(<Title headingLevel="h5">Test</Title>);
60+
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
61+
});
62+
63+
test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => {
64+
render(<Title headingLevel="h6">Test</Title>);
65+
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
66+
});
67+
68+
test('Renders with class name pf-m-md when "md" is passed as title size', () => {
69+
render(
70+
<Title headingLevel="h1" size="md">
71+
Test
72+
</Title>
73+
);
74+
expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
75+
});
76+
77+
test('Renders with class name pf-m-lg when "lg" is passed as title size', () => {
78+
render(
79+
<Title headingLevel="h1" size="lg">
80+
Test
81+
</Title>
82+
);
83+
expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
84+
});
85+
86+
test('Renders with class name pf-m-xl when "xl" is passed as title size', () => {
87+
render(
88+
<Title headingLevel="h1" size="xl">
89+
Test
90+
</Title>
91+
);
92+
expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
93+
});
94+
95+
test('Renders with class name pf-m-2xl when "2xl" is passed as title size', () => {
96+
render(
97+
<Title headingLevel="h1" size="2xl">
98+
Test
99+
</Title>
100+
);
101+
expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
102+
});
103+
104+
test('Renders with class name pf-m-3xl when "3xl" is passed as title size', () => {
105+
render(
106+
<Title headingLevel="h1" size="3xl">
107+
Test
108+
</Title>
109+
);
110+
expect(screen.getByRole('heading')).toHaveClass('pf-m-3xl');
111+
});
112+
113+
test('Renders with class name pf-m-4xl when "4xl" is passed as title size', () => {
114+
render(
115+
<Title headingLevel="h1" size="4xl">
116+
Test
117+
</Title>
118+
);
119+
expect(screen.getByRole('heading')).toHaveClass('pf-m-4xl');
120+
});
121+
122+
test('Renders with tag name "h1" when "h1" is passed as heading level', () => {
123+
render(<Title headingLevel="h1">Test</Title>);
124+
expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
125+
});
126+
127+
test('Renders with tag name "h2" when "h2" is passed as heading level', () => {
128+
render(<Title headingLevel="h2">Test</Title>);
129+
expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
130+
});
131+
132+
test('Renders with tag name "h3" when "h3" is passed as heading level', () => {
133+
render(<Title headingLevel="h3">Test</Title>);
134+
expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
135+
});
136+
137+
test('Renders with tag name "h4" when "h4" is passed as heading level', () => {
138+
render(<Title headingLevel="h4">Test</Title>);
139+
expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
140+
});
141+
142+
test('Renders with tag name "h5" when "h5" is passed as heading level', () => {
143+
render(<Title headingLevel="h5">Test</Title>);
144+
expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
145+
});
146+
147+
test('Renders with tag name "h6" when "h6" is passed as heading level', () => {
148+
render(<Title headingLevel="h6">Test</Title>);
149+
expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
150+
});
151+
152+
test('Matches the snapshot', () => {
153+
const { asFragment } = render(
154+
<Title data-ouia-component-id="ouia-id" headingLevel="h1">
155+
Test
156+
</Title>
157+
);
158+
expect(asFragment()).toMatchSnapshot();
25159
});

‎packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap‎

Lines changed: 4 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,14 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Title 2xl Title 1`] = `
3+
exports[`Matches the snapshot 1`] = `
44
<DocumentFragment>
55
<h1
66
class="pf-c-title pf-m-2xl"
7-
data-ouia-component-id="OUIA-Generated-Title-4"
7+
data-ouia-component-id="ouia-id"
88
data-ouia-component-type="PF4/Title"
99
data-ouia-safe="true"
1010
>
11-
2xl Title
11+
Test
1212
</h1>
1313
</DocumentFragment>
14-
`;
15-
16-
exports[`Title 3xl Title 1`] = `
17-
<DocumentFragment>
18-
<h1
19-
class="pf-c-title pf-m-3xl"
20-
data-ouia-component-id="OUIA-Generated-Title-5"
21-
data-ouia-component-type="PF4/Title"
22-
data-ouia-safe="true"
23-
>
24-
3xl Title
25-
</h1>
26-
</DocumentFragment>
27-
`;
28-
29-
exports[`Title 4xl Title 1`] = `
30-
<DocumentFragment>
31-
<h1
32-
class="pf-c-title pf-m-4xl"
33-
data-ouia-component-id="OUIA-Generated-Title-6"
34-
data-ouia-component-type="PF4/Title"
35-
data-ouia-safe="true"
36-
>
37-
4xl Title
38-
</h1>
39-
</DocumentFragment>
40-
`;
41-
42-
exports[`Title lg Title 1`] = `
43-
<DocumentFragment>
44-
<h1
45-
class="pf-c-title pf-m-lg"
46-
data-ouia-component-id="OUIA-Generated-Title-2"
47-
data-ouia-component-type="PF4/Title"
48-
data-ouia-safe="true"
49-
>
50-
lg Title
51-
</h1>
52-
</DocumentFragment>
53-
`;
54-
55-
exports[`Title md Title 1`] = `
56-
<DocumentFragment>
57-
<h1
58-
class="pf-c-title pf-m-md"
59-
data-ouia-component-id="OUIA-Generated-Title-1"
60-
data-ouia-component-type="PF4/Title"
61-
data-ouia-safe="true"
62-
>
63-
md Title
64-
</h1>
65-
</DocumentFragment>
66-
`;
67-
68-
exports[`Title xl Title 1`] = `
69-
<DocumentFragment>
70-
<h1
71-
class="pf-c-title pf-m-xl"
72-
data-ouia-component-id="OUIA-Generated-Title-3"
73-
data-ouia-component-type="PF4/Title"
74-
data-ouia-safe="true"
75-
>
76-
xl Title
77-
</h1>
78-
</DocumentFragment>
79-
`;
14+
`;

0 commit comments

Comments
 (0)