Skip to content

Commit fa1fd81

Browse files
sidram05sidram05
authored
test(Page): rewrite test using react-testing-library (#818)
[ci skip]
1 parent 11c8684 commit fa1fd81

File tree

2 files changed

+99
-90
lines changed

2 files changed

+99
-90
lines changed

‎packages/main/src/components/Page/Page.test.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1+
import { render } from '@shared/tests';
12
import { createPassThroughPropsTest } from '@shared/tests/utils';
2-
import { mount } from 'enzyme';
33
import { Page } from '@ui5/webcomponents-react/lib/Page';
44
import React from 'react';
55

66
describe('Page', () => {
77
test('Basic Page', () => {
8-
const wrapper = mount(
8+
const { asFragment } = render(
99
<div style={{ height: '100vh', width: '100vw' }}>
1010
<Page title="Page Demo" showFooter showHeader>
1111
Page Content
1212
</Page>
1313
</div>
1414
);
15-
expect(wrapper.render()).toMatchSnapshot();
15+
expect(asFragment()).toMatchSnapshot();
1616
});
1717

1818
test('Basic Page w/o back button', () => {
19-
const wrapper = mount(
19+
const { asFragment } = render(
2020
<div style={{ height: '100vh', width: '100vw' }}>
2121
<Page title="Page Demo" showFooter showHeader showBackButton={false}>
2222
Page Content
2323
</Page>
2424
</div>
2525
);
26-
expect(wrapper.render()).toMatchSnapshot();
26+
expect(asFragment()).toMatchSnapshot();
2727
});
2828

2929
test('Without footer and Header', () => {
30-
const wrapper = mount(
30+
const { asFragment } = render(
3131
<Page title="Page Demo" showFooter={false} showHeader={false}>
3232
Page Content
3333
</Page>
3434
);
35-
expect(wrapper.render()).toMatchSnapshot();
35+
expect(asFragment()).toMatchSnapshot();
3636
});
3737

3838
createPassThroughPropsTest(Page);

‎packages/main/src/components/Page/__snapshots__/Page.test.tsx.snap

Lines changed: 92 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,127 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Page Basic Page 1`] = `
4-
<div
5-
style="height: 100vh; width: 100vw;"
6-
>
4+
<DocumentFragment>
75
<div
8-
class="Page-pageContainer-0 Page-pageWithHeader-0 Page-pageWithFooter-0 Page-backgroundStandard-0"
6+
style="height: 100vh; width: 100vw;"
97
>
10-
<header
11-
class="Page-pageHeader-0 Page-baseBar-0"
8+
<div
9+
class="Page-pageContainer Page-pageWithHeader Page-pageWithFooter Page-backgroundStandard"
1210
>
13-
<div
14-
class="Bar-bar-0 Bar-auto-0"
15-
data-bar-part="Root"
11+
<header
12+
class="Page-pageHeader Page-baseBar"
1613
>
1714
<div
18-
class="Bar-left-0"
19-
data-bar-part="Left"
20-
>
21-
<ui5-button
22-
design="Transparent"
23-
icon="navigation-left-arrow"
24-
/>
25-
</div>
26-
<div
27-
class="Bar-center-0"
28-
data-bar-part="Center"
15+
class="Bar-bar Bar-auto"
16+
data-bar-part="Root"
2917
>
3018
<div
31-
class="Bar-inner-0"
19+
class="Bar-left"
20+
data-bar-part="Left"
3221
>
33-
<ui5-title
34-
level="H5"
22+
<ui5-button
23+
design="Transparent"
24+
icon="navigation-left-arrow"
25+
ui5-button=""
26+
/>
27+
</div>
28+
<div
29+
class="Bar-center"
30+
data-bar-part="Center"
31+
>
32+
<div
33+
class="Bar-inner"
3534
>
36-
Page Demo
37-
</ui5-title>
35+
<ui5-title
36+
level="H5"
37+
ui5-title=""
38+
>
39+
Page Demo
40+
</ui5-title>
41+
</div>
3842
</div>
43+
<div
44+
class="Bar-right"
45+
data-bar-part="Right"
46+
/>
3947
</div>
40-
<div
41-
class="Bar-right-0"
42-
data-bar-part="Right"
43-
/>
44-
</div>
45-
</header>
46-
<section
47-
class="Page-contentSection-0"
48-
>
49-
Page Content
50-
</section>
51-
<footer
52-
class="Page-pageFooter-0 Page-baseBar-0"
53-
/>
48+
</header>
49+
<section
50+
class="Page-contentSection"
51+
>
52+
Page Content
53+
</section>
54+
<footer
55+
class="Page-pageFooter Page-baseBar"
56+
/>
57+
</div>
5458
</div>
55-
</div>
59+
</DocumentFragment>
5660
`;
5761

5862
exports[`Page Basic Page w/o back button 1`] = `
59-
<div
60-
style="height: 100vh; width: 100vw;"
61-
>
63+
<DocumentFragment>
6264
<div
63-
class="Page-pageContainer-0 Page-pageWithHeader-0 Page-pageWithFooter-0 Page-backgroundStandard-0"
65+
style="height: 100vh; width: 100vw;"
6466
>
65-
<header
66-
class="Page-pageHeader-0 Page-baseBar-0"
67+
<div
68+
class="Page-pageContainer Page-pageWithHeader Page-pageWithFooter Page-backgroundStandard"
6769
>
68-
<div
69-
class="Bar-bar-0 Bar-auto-0"
70-
data-bar-part="Root"
70+
<header
71+
class="Page-pageHeader Page-baseBar"
7172
>
7273
<div
73-
class="Bar-left-0"
74-
data-bar-part="Left"
75-
/>
76-
<div
77-
class="Bar-center-0"
78-
data-bar-part="Center"
74+
class="Bar-bar Bar-auto"
75+
data-bar-part="Root"
7976
>
8077
<div
81-
class="Bar-inner-0"
78+
class="Bar-left"
79+
data-bar-part="Left"
80+
/>
81+
<div
82+
class="Bar-center"
83+
data-bar-part="Center"
8284
>
83-
<ui5-title
84-
level="H5"
85+
<div
86+
class="Bar-inner"
8587
>
86-
Page Demo
87-
</ui5-title>
88+
<ui5-title
89+
level="H5"
90+
ui5-title=""
91+
>
92+
Page Demo
93+
</ui5-title>
94+
</div>
8895
</div>
96+
<div
97+
class="Bar-right"
98+
data-bar-part="Right"
99+
/>
89100
</div>
90-
<div
91-
class="Bar-right-0"
92-
data-bar-part="Right"
93-
/>
94-
</div>
95-
</header>
96-
<section
97-
class="Page-contentSection-0"
98-
>
99-
Page Content
100-
</section>
101-
<footer
102-
class="Page-pageFooter-0 Page-baseBar-0"
103-
/>
101+
</header>
102+
<section
103+
class="Page-contentSection"
104+
>
105+
Page Content
106+
</section>
107+
<footer
108+
class="Page-pageFooter Page-baseBar"
109+
/>
110+
</div>
104111
</div>
105-
</div>
112+
</DocumentFragment>
106113
`;
107114

108115
exports[`Page Without footer and Header 1`] = `
109-
<div
110-
class="Page-pageContainer-0 Page-backgroundStandard-0"
111-
>
112-
<section
113-
class="Page-contentSection-0"
116+
<DocumentFragment>
117+
<div
118+
class="Page-pageContainer Page-backgroundStandard"
114119
>
115-
Page Content
116-
</section>
117-
</div>
120+
<section
121+
class="Page-contentSection"
122+
>
123+
Page Content
124+
</section>
125+
</div>
126+
</DocumentFragment>
118127
`;

0 commit comments

Comments
 (0)