Skip to content

Commit 946278d

Browse files
sidram05sidram05
authored
test(Grid): rewrite test using react-testing-library (#822)
[ci skip]
1 parent c7f1492 commit 946278d

File tree

2 files changed

+107
-97
lines changed

2 files changed

+107
-97
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { render } from '@shared/tests';
12
import { createPassThroughPropsTest } from '@shared/tests/utils';
2-
import { mount } from 'enzyme';
33
import { Grid } from '@ui5/webcomponents-react/lib/Grid';
44
import React from 'react';
55
import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition';
@@ -39,25 +39,25 @@ const GridContent = () => (
3939

4040
describe('Grid', () => {
4141
test('Renders Children', () => {
42-
const wrapper = mount(
42+
const { asFragment } = render(
4343
<Grid>
4444
<GridContent />
4545
</Grid>
4646
);
47-
expect(wrapper.render()).toMatchSnapshot();
47+
expect(asFragment()).toMatchSnapshot();
4848
});
4949

5050
test('Custom Class Names and Styling', () => {
51-
const wrapper = mount(
51+
const { asFragment } = render(
5252
<Grid style={{ backgroundColor: 'purple' }} className="customClassName" hSpacing={0}>
5353
<GridContent />
5454
</Grid>
5555
);
56-
expect(wrapper.render()).toMatchSnapshot();
56+
expect(asFragment()).toMatchSnapshot();
5757
});
5858

5959
test('Renders Children with custom layout data', () => {
60-
const wrapper = mount(
60+
const { asFragment } = render(
6161
<Grid>
6262
<div
6363
style={{
@@ -77,24 +77,24 @@ describe('Grid', () => {
7777
/>
7878
</Grid>
7979
);
80-
expect(wrapper.render()).toMatchSnapshot();
80+
expect(asFragment()).toMatchSnapshot();
8181
});
8282

8383
test('Grid Position Center', () => {
84-
const wrapper = mount(
84+
const { asFragment } = render(
8585
<Grid style={{ width: '60%' }} position={GridPosition.Center}>
8686
<GridContent />
8787
</Grid>
8888
);
89-
expect(wrapper.render()).toMatchSnapshot();
89+
expect(asFragment()).toMatchSnapshot();
9090
});
9191
test('Grid Position Right', () => {
92-
const wrapper = mount(
92+
const { asFragment } = render(
9393
<Grid style={{ width: '60%' }} position={GridPosition.Right}>
9494
<GridContent />
9595
</Grid>
9696
);
97-
expect(wrapper.render()).toMatchSnapshot();
97+
expect(asFragment()).toMatchSnapshot();
9898
});
9999

100100
createPassThroughPropsTest(Grid);

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

Lines changed: 96 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,132 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Grid Custom Class Names and Styling 1`] = `
4-
<div
5-
class="Grid-grid-0 customClassName"
6-
style="background-color: purple;"
7-
>
4+
<DocumentFragment>
85
<div
9-
class="Grid-gridSpan3-0"
6+
class="Grid-grid customClassName"
7+
style="background-color: purple;"
108
>
119
<div
12-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
13-
/>
14-
<div
15-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
16-
/>
17-
<div
18-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
19-
/>
20-
<div
21-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
22-
/>
10+
class="Grid-gridSpan3"
11+
>
12+
<div
13+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
14+
/>
15+
<div
16+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
17+
/>
18+
<div
19+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
20+
/>
21+
<div
22+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
23+
/>
24+
</div>
2325
</div>
24-
</div>
26+
</DocumentFragment>
2527
`;
2628

2729
exports[`Grid Grid Position Center 1`] = `
28-
<div
29-
class="Grid-grid-0 Grid-positionCenter-0"
30-
style="width: 60%;"
31-
>
30+
<DocumentFragment>
3231
<div
33-
class="Grid-gridSpan3-0"
32+
class="Grid-grid Grid-positionCenter"
33+
style="width: 60%;"
3434
>
3535
<div
36-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
37-
/>
38-
<div
39-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
40-
/>
41-
<div
42-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
43-
/>
44-
<div
45-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
46-
/>
36+
class="Grid-gridSpan3"
37+
>
38+
<div
39+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
40+
/>
41+
<div
42+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
43+
/>
44+
<div
45+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
46+
/>
47+
<div
48+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
49+
/>
50+
</div>
4751
</div>
48-
</div>
52+
</DocumentFragment>
4953
`;
5054

5155
exports[`Grid Grid Position Right 1`] = `
52-
<div
53-
class="Grid-grid-0 Grid-positionRight-0"
54-
style="width: 60%;"
55-
>
56+
<DocumentFragment>
5657
<div
57-
class="Grid-gridSpan3-0"
58+
class="Grid-grid Grid-positionRight"
59+
style="width: 60%;"
5860
>
5961
<div
60-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
61-
/>
62-
<div
63-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
64-
/>
65-
<div
66-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
67-
/>
68-
<div
69-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
70-
/>
62+
class="Grid-gridSpan3"
63+
>
64+
<div
65+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
66+
/>
67+
<div
68+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
69+
/>
70+
<div
71+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
72+
/>
73+
<div
74+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
75+
/>
76+
</div>
7177
</div>
72-
</div>
78+
</DocumentFragment>
7379
`;
7480

7581
exports[`Grid Renders Children 1`] = `
76-
<div
77-
class="Grid-grid-0"
78-
>
82+
<DocumentFragment>
7983
<div
80-
class="Grid-gridSpan3-0"
84+
class="Grid-grid"
8185
>
8286
<div
83-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
84-
/>
85-
<div
86-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
87-
/>
88-
<div
89-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
90-
/>
91-
<div
92-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
93-
/>
87+
class="Grid-gridSpan3"
88+
>
89+
<div
90+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
91+
/>
92+
<div
93+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
94+
/>
95+
<div
96+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
97+
/>
98+
<div
99+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
100+
/>
101+
</div>
94102
</div>
95-
</div>
103+
</DocumentFragment>
96104
`;
97105

98106
exports[`Grid Renders Children with custom layout data 1`] = `
99-
<div
100-
class="Grid-grid-0"
101-
>
102-
<div
103-
class="Grid-gridSpan12-0"
104-
>
105-
<div
106-
data-layout-span="XL12 L12 M12 S12"
107-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
108-
/>
109-
</div>
110-
<span
111-
class="Grid-gridSpan1-0"
112-
/>
107+
<DocumentFragment>
113108
<div
114-
class="Grid-gridSpan3-0"
109+
class="Grid-grid"
115110
>
116111
<div
117-
data-layout-indent="XL1 L1 M1 S1"
118-
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
119-
/>
112+
class="Grid-gridSpan12"
113+
>
114+
<div
115+
data-layout-span="XL12 L12 M12 S12"
116+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
117+
/>
118+
</div>
119+
<span
120+
class="Grid-gridSpan1"
121+
/>
122+
<div
123+
class="Grid-gridSpan3"
124+
>
125+
<div
126+
data-layout-indent="XL1 L1 M1 S1"
127+
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
128+
/>
129+
</div>
120130
</div>
121-
</div>
131+
</DocumentFragment>
122132
`;

0 commit comments

Comments
 (0)