Skip to content

Commit 583ce4e

Browse files
fix: failing unit tests after swiper upgrade
1 parent 2dd2205 commit 583ce4e

File tree

2 files changed

+51
-168
lines changed

2 files changed

+51
-168
lines changed

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1-
import { createElement } from "react";
1+
import { createElement, ReactNode } from "react";
22
import { Carousel, CarouselProps } from "../Carousel";
33
import { render } from "@testing-library/react";
44
import { GUID } from "mendix";
55

6+
jest.mock("swiper/react", () => ({
7+
Swiper: ({ children }: { children: ReactNode }) => <div data-testid="swiper-testid">{children}</div>,
8+
SwiperSlide: ({ children }: { children: ReactNode }) => <div data-testid="swiper-slide-testid">{children}</div>
9+
}));
10+
11+
jest.mock("swiper/modules", () => ({
12+
Navigation: (_props: any) => null,
13+
Pagination: (_props: any) => null,
14+
Scrollbar: (_props: any) => null,
15+
A11y: (_props: any) => null
16+
}));
17+
18+
jest.mock("swiper/css", () => jest.fn());
19+
jest.mock("swiper/css/bundle", () => jest.fn());
20+
621
describe("Carousel", () => {
722
beforeEach(() => {
823
jest.resetAllMocks();

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

Lines changed: 35 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -6,77 +6,22 @@ exports[`Carousel renders correctly 1`] = `
66
class="widget-carousel"
77
>
88
<div
9-
class="swiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress"
9+
data-testid="swiper-testid"
1010
>
11-
<ul
12-
aria-live="off"
13-
class="swiper-wrapper"
14-
id="swiper-wrapper-2222222222222222"
15-
style="transition-duration: 0ms;"
16-
>
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-
/>
4911
<div
50-
aria-controls="swiper-wrapper-2222222222222222"
51-
aria-label="Next slide"
52-
class="swiper-button-next"
53-
role="button"
54-
tabindex="0"
55-
/>
12+
data-testid="swiper-slide-testid"
13+
>
14+
<div>
15+
test1
16+
</div>
17+
</div>
5618
<div
57-
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
19+
data-testid="swiper-slide-testid"
5820
>
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-
/>
21+
<div>
22+
test2
23+
</div>
7424
</div>
75-
<span
76-
aria-atomic="true"
77-
aria-live="assertive"
78-
class="swiper-notification"
79-
/>
8025
</div>
8126
</div>
8227
</DocumentFragment>
@@ -88,63 +33,22 @@ exports[`Carousel renders correctly without navigation 1`] = `
8833
class="widget-carousel"
8934
>
9035
<div
91-
class="swiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress"
36+
data-testid="swiper-testid"
9237
>
93-
<ul
94-
aria-live="off"
95-
class="swiper-wrapper"
96-
id="swiper-wrapper-2222222222222222"
97-
style="transition-duration: 0ms;"
38+
<div
39+
data-testid="swiper-slide-testid"
9840
>
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>
41+
<div>
42+
test1
43+
</div>
44+
</div>
12445
<div
125-
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
46+
data-testid="swiper-slide-testid"
12647
>
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-
/>
48+
<div>
49+
test2
50+
</div>
14251
</div>
143-
<span
144-
aria-atomic="true"
145-
aria-live="assertive"
146-
class="swiper-notification"
147-
/>
14852
</div>
14953
</div>
15054
</DocumentFragment>
@@ -156,58 +60,22 @@ exports[`Carousel renders correctly without pagination 1`] = `
15660
class="widget-carousel"
15761
>
15862
<div
159-
class="swiper swiper-fade swiper-initialized swiper-horizontal swiper-watch-progress"
63+
data-testid="swiper-testid"
16064
>
161-
<ul
162-
aria-live="off"
163-
class="swiper-wrapper"
164-
id="swiper-wrapper-2222222222222222"
165-
style="transition-duration: 0ms;"
166-
>
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>
19265
<div
193-
aria-controls="swiper-wrapper-2222222222222222"
194-
aria-label="Previous slide"
195-
class="swiper-button-prev"
196-
role="button"
197-
tabindex="0"
198-
/>
66+
data-testid="swiper-slide-testid"
67+
>
68+
<div>
69+
test1
70+
</div>
71+
</div>
19972
<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-
/>
73+
data-testid="swiper-slide-testid"
74+
>
75+
<div>
76+
test2
77+
</div>
78+
</div>
21179
</div>
21280
</div>
21381
</DocumentFragment>

0 commit comments

Comments
 (0)