Skip to content

Commit ea0c4f3

Browse files
r0b1nr0b1n
authored
chore: remove react test renderer, rewrite carousel tests (#1798)
2 parents 6a4c621 + ff425e4 commit ea0c4f3

File tree

5 files changed

+202
-123
lines changed

5 files changed

+202
-123
lines changed

‎packages/pluggableWidgets/carousel-web/jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const base = require("@mendix/pluggable-widgets-tools/test-config/jest.config");
1+
const base = require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js");
22

33
module.exports = {
44
...base,

‎packages/pluggableWidgets/carousel-web/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@
4343
},
4444
"dependencies": {
4545
"@mendix/widget-plugin-component-kit": "workspace:*",
46-
"@types/react-test-renderer": "^18.0.7",
4746
"classnames": "^2.5.1",
48-
"react-test-renderer": "^18.2.0",
4947
"swiper": "^9.4.1"
5048
},
5149
"devDependencies": {

‎packages/pluggableWidgets/carousel-web/src/components/__tests__/Carousel.spec.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { createElement } from "react";
22
import { Carousel, CarouselProps } from "../Carousel";
3-
import renderer from "react-test-renderer";
3+
import { render } from "@testing-library/react";
44
import { GUID } from "mendix";
55

6-
beforeEach(() => {
7-
jest.resetAllMocks();
8-
});
96
describe("Carousel", () => {
7+
beforeEach(() => {
8+
jest.resetAllMocks();
9+
jest.spyOn(Math, "random").mockReturnValue(0.123456789);
10+
});
1011
const defaultCarouselProps: CarouselProps = {
1112
id: "Carousel",
1213
className: "",
@@ -24,18 +25,21 @@ describe("Carousel", () => {
2425
};
2526

2627
it("renders correctly", () => {
27-
const carousel = renderer.create(<Carousel {...defaultCarouselProps} />);
28+
const { asFragment } = render(<Carousel {...defaultCarouselProps} />);
2829

29-
expect(carousel).toMatchSnapshot();
30+
expect(asFragment()).toMatchSnapshot();
3031
});
3132
it("renders correctly without pagination", () => {
32-
const carousel = renderer.create(<Carousel {...defaultCarouselProps} pagination={false} />);
33+
const { asFragment } = render(<Carousel {...defaultCarouselProps} pagination={false} />);
3334

34-
expect(carousel).toMatchSnapshot();
35+
expect(asFragment()).toMatchSnapshot();
3536
});
3637
it("renders correctly without navigation", () => {
37-
const carousel = renderer.create(<Carousel {...defaultCarouselProps} navigation={false} />);
38+
const { asFragment } = render(<Carousel {...defaultCarouselProps} navigation={false} />);
3839

39-
expect(carousel).toMatchSnapshot();
40+
expect(asFragment()).toMatchSnapshot();
41+
});
42+
afterEach(() => {
43+
jest.restoreAllMocks();
4044
});
4145
});

‎packages/pluggableWidgets/carousel-web/src/components/__tests__/__snapshots__/Carousel.spec.tsx.snap‎

Lines changed: 187 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,214 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Carousel renders correctly 1`] = `
4-
<div
5-
className="widget-carousel"
6-
>
4+
<DocumentFragment>
75
<div
8-
className="swiper"
6+
class="widget-carousel"
97
>
10-
<ul
11-
className="swiper-wrapper"
8+
<div
9+
class="swiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress"
1210
>
13-
<li
14-
aria-hidden={false}
15-
className="swiper-slide"
16-
id="carousel-slide-Carousel-1"
17-
onLoad={[Function]}
11+
<ul
12+
aria-live="off"
13+
class="swiper-wrapper"
14+
id="swiper-wrapper-2222222222222222"
15+
style="transition-duration: 0ms;"
1816
>
19-
<div>
20-
test1
21-
</div>
22-
</li>
23-
<li
24-
aria-hidden={true}
25-
className="swiper-slide"
26-
id="carousel-slide-Carousel-2"
27-
onLoad={[Function]}
17+
<li
18+
aria-hidden="false"
19+
aria-label="1 / 2"
20+
class="swiper-slide"
21+
data-swiper-slide-index="0"
22+
id="carousel-slide-Carousel-1"
23+
role="listitem"
24+
>
25+
<div>
26+
test1
27+
</div>
28+
</li>
29+
<li
30+
aria-hidden="true"
31+
aria-label="2 / 2"
32+
class="swiper-slide"
33+
data-swiper-slide-index="1"
34+
id="carousel-slide-Carousel-2"
35+
role="listitem"
36+
>
37+
<div>
38+
test2
39+
</div>
40+
</li>
41+
</ul>
42+
<div
43+
aria-controls="swiper-wrapper-2222222222222222"
44+
aria-label="Previous slide"
45+
class="swiper-button-prev"
46+
role="button"
47+
tabindex="0"
48+
/>
49+
<div
50+
aria-controls="swiper-wrapper-2222222222222222"
51+
aria-label="Next slide"
52+
class="swiper-button-next"
53+
role="button"
54+
tabindex="0"
55+
/>
56+
<div
57+
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
2858
>
29-
<div>
30-
test2
31-
</div>
32-
</li>
33-
</ul>
34-
<div
35-
className="swiper-button-prev"
36-
/>
37-
<div
38-
className="swiper-button-next"
39-
/>
40-
<div
41-
className="swiper-pagination"
42-
/>
59+
<span
60+
aria-controls="carousel-slide-Carousel-1"
61+
aria-current="true"
62+
aria-label="Go to slide 0"
63+
class="swiper-pagination-bullet swiper-pagination-bullet-active"
64+
role="button"
65+
tabindex="0"
66+
/>
67+
<span
68+
aria-controls="carousel-slide-Carousel-2"
69+
aria-label="Go to slide 1"
70+
class="swiper-pagination-bullet"
71+
role="button"
72+
tabindex="0"
73+
/>
74+
</div>
75+
<span
76+
aria-atomic="true"
77+
aria-live="assertive"
78+
class="swiper-notification"
79+
/>
80+
</div>
4381
</div>
44-
</div>
82+
</DocumentFragment>
4583
`;
4684

4785
exports[`Carousel renders correctly without navigation 1`] = `
48-
<div
49-
className="widget-carousel"
50-
>
86+
<DocumentFragment>
5187
<div
52-
className="swiper"
88+
class="widget-carousel"
5389
>
54-
<ul
55-
className="swiper-wrapper"
90+
<div
91+
class="swiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress"
5692
>
57-
<li
58-
aria-hidden={false}
59-
className="swiper-slide"
60-
id="carousel-slide-Carousel-1"
61-
onLoad={[Function]}
93+
<ul
94+
aria-live="off"
95+
class="swiper-wrapper"
96+
id="swiper-wrapper-2222222222222222"
97+
style="transition-duration: 0ms;"
6298
>
63-
<div>
64-
test1
65-
</div>
66-
</li>
67-
<li
68-
aria-hidden={true}
69-
className="swiper-slide"
70-
id="carousel-slide-Carousel-2"
71-
onLoad={[Function]}
99+
<li
100+
aria-hidden="false"
101+
aria-label="1 / 2"
102+
class="swiper-slide"
103+
data-swiper-slide-index="0"
104+
id="carousel-slide-Carousel-1"
105+
role="listitem"
106+
>
107+
<div>
108+
test1
109+
</div>
110+
</li>
111+
<li
112+
aria-hidden="true"
113+
aria-label="2 / 2"
114+
class="swiper-slide"
115+
data-swiper-slide-index="1"
116+
id="carousel-slide-Carousel-2"
117+
role="listitem"
118+
>
119+
<div>
120+
test2
121+
</div>
122+
</li>
123+
</ul>
124+
<div
125+
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
72126
>
73-
<div>
74-
test2
75-
</div>
76-
</li>
77-
</ul>
78-
<div
79-
className="swiper-pagination"
80-
/>
127+
<span
128+
aria-controls="carousel-slide-Carousel-1"
129+
aria-current="true"
130+
aria-label="Go to slide 0"
131+
class="swiper-pagination-bullet swiper-pagination-bullet-active"
132+
role="button"
133+
tabindex="0"
134+
/>
135+
<span
136+
aria-controls="carousel-slide-Carousel-2"
137+
aria-label="Go to slide 1"
138+
class="swiper-pagination-bullet"
139+
role="button"
140+
tabindex="0"
141+
/>
142+
</div>
143+
<span
144+
aria-atomic="true"
145+
aria-live="assertive"
146+
class="swiper-notification"
147+
/>
148+
</div>
81149
</div>
82-
</div>
150+
</DocumentFragment>
83151
`;
84152

85153
exports[`Carousel renders correctly without pagination 1`] = `
86-
<div
87-
className="widget-carousel"
88-
>
154+
<DocumentFragment>
89155
<div
90-
className="swiper"
156+
class="widget-carousel"
91157
>
92-
<ul
93-
className="swiper-wrapper"
158+
<div
159+
class="swiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress"
94160
>
95-
<li
96-
aria-hidden={false}
97-
className="swiper-slide"
98-
id="carousel-slide-Carousel-1"
99-
onLoad={[Function]}
100-
>
101-
<div>
102-
test1
103-
</div>
104-
</li>
105-
<li
106-
aria-hidden={true}
107-
className="swiper-slide"
108-
id="carousel-slide-Carousel-2"
109-
onLoad={[Function]}
161+
<ul
162+
aria-live="off"
163+
class="swiper-wrapper"
164+
id="swiper-wrapper-2222222222222222"
165+
style="transition-duration: 0ms;"
110166
>
111-
<div>
112-
test2
113-
</div>
114-
</li>
115-
</ul>
116-
<div
117-
className="swiper-button-prev"
118-
/>
119-
<div
120-
className="swiper-button-next"
121-
/>
167+
<li
168+
aria-hidden="false"
169+
aria-label="1 / 2"
170+
class="swiper-slide"
171+
data-swiper-slide-index="0"
172+
id="carousel-slide-Carousel-1"
173+
role="listitem"
174+
>
175+
<div>
176+
test1
177+
</div>
178+
</li>
179+
<li
180+
aria-hidden="true"
181+
aria-label="2 / 2"
182+
class="swiper-slide"
183+
data-swiper-slide-index="1"
184+
id="carousel-slide-Carousel-2"
185+
role="listitem"
186+
>
187+
<div>
188+
test2
189+
</div>
190+
</li>
191+
</ul>
192+
<div
193+
aria-controls="swiper-wrapper-2222222222222222"
194+
aria-label="Previous slide"
195+
class="swiper-button-prev"
196+
role="button"
197+
tabindex="0"
198+
/>
199+
<div
200+
aria-controls="swiper-wrapper-2222222222222222"
201+
aria-label="Next slide"
202+
class="swiper-button-next"
203+
role="button"
204+
tabindex="0"
205+
/>
206+
<span
207+
aria-atomic="true"
208+
aria-live="assertive"
209+
class="swiper-notification"
210+
/>
211+
</div>
122212
</div>
123-
</div>
213+
</DocumentFragment>
124214
`;

0 commit comments

Comments
 (0)