Skip to content

Commit 2d2fb42

Browse files
dohooodohooo
committed
feat: add comprehensive E2E tests for carousel functionality
1 parent 84c90c2 commit 2d2fb42

16 files changed

Lines changed: 1904 additions & 6 deletions

‎e2e/01-basic-swipe.yaml‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
appId: com.react-native-reanimated-carousel.example
2+
name: Basic Swipe Navigation
3+
---
4+
5+
# Navigate to E2E test page
6+
- runFlow: helpers/navigate-to-e2e.yaml
7+
8+
# === Test: Swipe LEFT to go to next slide ===
9+
10+
- swipe:
11+
start: "80%, 30%"
12+
end: "20%, 30%"
13+
duration: 400
14+
15+
- waitForAnimationToEnd:
16+
timeout: 3000
17+
18+
- assertVisible: "Slide 1"
19+
- assertVisible: "Current Index: 1"
20+
21+
# === Test: Swipe LEFT again to go to slide 2 ===
22+
23+
- swipe:
24+
start: "80%, 30%"
25+
end: "20%, 30%"
26+
duration: 400
27+
28+
- waitForAnimationToEnd:
29+
timeout: 3000
30+
31+
- assertVisible: "Slide 2"
32+
- assertVisible: "Current Index: 2"
33+
34+
# === Test: Swipe LEFT to go to slide 3 ===
35+
36+
- swipe:
37+
start: "80%, 30%"
38+
end: "20%, 30%"
39+
duration: 400
40+
41+
- waitForAnimationToEnd:
42+
timeout: 3000
43+
44+
- assertVisible: "Slide 3"
45+
- assertVisible: "Current Index: 3"
46+
47+
# === Test: Swipe RIGHT to go back to slide 2 ===
48+
49+
- swipe:
50+
start: "20%, 30%"
51+
end: "80%, 30%"
52+
duration: 400
53+
54+
- waitForAnimationToEnd:
55+
timeout: 3000
56+
57+
- assertVisible: "Slide 2"
58+
- assertVisible: "Current Index: 2"
59+
60+
# === Test: Swipe RIGHT again to go back to slide 1 ===
61+
62+
- swipe:
63+
start: "20%, 30%"
64+
end: "80%, 30%"
65+
duration: 400
66+
67+
- waitForAnimationToEnd:
68+
timeout: 3000
69+
70+
- assertVisible: "Slide 1"
71+
- assertVisible: "Current Index: 1"
72+
73+
# === Test: Swipe RIGHT to go back to slide 0 ===
74+
75+
- swipe:
76+
start: "20%, 30%"
77+
end: "80%, 30%"
78+
duration: 400
79+
80+
- waitForAnimationToEnd:
81+
timeout: 3000
82+
83+
- assertVisible: "Slide 0"
84+
- assertVisible: "Current Index: 0"

‎e2e/02-loop-mode.yaml‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
appId: com.react-native-reanimated-carousel.example
2+
name: Loop Mode - Wrapping Navigation
3+
---
4+
5+
# Navigate to E2E test page
6+
- runFlow: helpers/navigate-to-e2e.yaml
7+
8+
# Verify loop is ON by default
9+
- assertVisible: "Loop: ON"
10+
11+
# === Test: Swipe RIGHT from slide 0 should wrap to last slide ===
12+
13+
- swipe:
14+
start: "20%, 30%"
15+
end: "80%, 30%"
16+
duration: 400
17+
18+
- waitForAnimationToEnd:
19+
timeout: 3000
20+
21+
# With 6 items and loop ON, swiping right from 0 wraps to slide 5
22+
- assertVisible: "Slide 5"
23+
- assertVisible: "Current Index: 5"
24+
25+
# === Test: Swipe LEFT to go back to slide 0 (wrapping forward) ===
26+
27+
- swipe:
28+
start: "80%, 30%"
29+
end: "20%, 30%"
30+
duration: 400
31+
32+
- waitForAnimationToEnd:
33+
timeout: 3000
34+
35+
- assertVisible: "Slide 0"
36+
- assertVisible: "Current Index: 0"
37+
38+
# === Test: Navigate to last slide and wrap forward ===
39+
40+
# Go to slide 5 via button
41+
- tapOn:
42+
id: "btn-goto-5"
43+
44+
- waitForAnimationToEnd:
45+
timeout: 3000
46+
47+
- assertVisible: "Current Index: 5"
48+
49+
# Swipe LEFT from slide 5 should wrap to slide 0
50+
- swipe:
51+
start: "80%, 30%"
52+
end: "20%, 30%"
53+
duration: 400
54+
55+
- waitForAnimationToEnd:
56+
timeout: 3000
57+
58+
- assertVisible: "Slide 0"
59+
- assertVisible: "Current Index: 0"
60+
61+
# === Test: Continuous loop - swipe through all slides ===
62+
63+
- swipe:
64+
start: "80%, 30%"
65+
end: "20%, 30%"
66+
duration: 400
67+
- waitForAnimationToEnd:
68+
timeout: 3000
69+
- assertVisible: "Current Index: 1"
70+
71+
- swipe:
72+
start: "80%, 30%"
73+
end: "20%, 30%"
74+
duration: 400
75+
- waitForAnimationToEnd:
76+
timeout: 3000
77+
- assertVisible: "Current Index: 2"
78+
79+
- swipe:
80+
start: "80%, 30%"
81+
end: "20%, 30%"
82+
duration: 400
83+
- waitForAnimationToEnd:
84+
timeout: 3000
85+
- assertVisible: "Current Index: 3"
86+
87+
- swipe:
88+
start: "80%, 30%"
89+
end: "20%, 30%"
90+
duration: 400
91+
- waitForAnimationToEnd:
92+
timeout: 3000
93+
- assertVisible: "Current Index: 4"
94+
95+
- swipe:
96+
start: "80%, 30%"
97+
end: "20%, 30%"
98+
duration: 400
99+
- waitForAnimationToEnd:
100+
timeout: 3000
101+
- assertVisible: "Current Index: 5"
102+
103+
# One more swipe wraps back to 0
104+
- swipe:
105+
start: "80%, 30%"
106+
end: "20%, 30%"
107+
duration: 400
108+
- waitForAnimationToEnd:
109+
timeout: 3000
110+
- assertVisible: "Current Index: 0"

‎e2e/03-non-loop-boundary.yaml‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
appId: com.react-native-reanimated-carousel.example
2+
name: Non-Loop Mode - Boundary Behavior
3+
---
4+
5+
# Navigate to E2E test page
6+
- runFlow: helpers/navigate-to-e2e.yaml
7+
8+
# === Setup: Turn off loop mode ===
9+
10+
- scrollUntilVisible:
11+
element: "Loop: ON"
12+
direction: DOWN
13+
timeout: 5000
14+
15+
- tapOn:
16+
id: "btn-loop"
17+
18+
- waitForAnimationToEnd:
19+
timeout: 2000
20+
21+
- assertVisible: "Loop: OFF"
22+
23+
# Scroll back to top
24+
- swipe:
25+
start: "50%, 30%"
26+
end: "50%, 90%"
27+
duration: 200
28+
- swipe:
29+
start: "50%, 30%"
30+
end: "50%, 90%"
31+
duration: 200
32+
- swipe:
33+
start: "50%, 30%"
34+
end: "50%, 90%"
35+
duration: 200
36+
37+
- waitForAnimationToEnd:
38+
timeout: 2000
39+
40+
# === Test: Swipe RIGHT at slide 0 should NOT wrap (stays at 0) ===
41+
42+
- assertVisible: "Current Index: 0"
43+
44+
- swipe:
45+
start: "20%, 30%"
46+
end: "80%, 30%"
47+
duration: 400
48+
49+
- waitForAnimationToEnd:
50+
timeout: 3000
51+
52+
# Should still be at slide 0
53+
- assertVisible: "Current Index: 0"
54+
55+
# === Test: Swipe RIGHT again - still stays at 0 ===
56+
57+
- swipe:
58+
start: "20%, 30%"
59+
end: "80%, 30%"
60+
duration: 400
61+
62+
- waitForAnimationToEnd:
63+
timeout: 3000
64+
65+
- assertVisible: "Current Index: 0"
66+
67+
# === Test: Navigate to last slide ===
68+
69+
- tapOn:
70+
id: "btn-goto-5"
71+
72+
- waitForAnimationToEnd:
73+
timeout: 3000
74+
75+
- assertVisible: "Current Index: 5"
76+
77+
# === Test: Swipe LEFT at last slide should NOT wrap ===
78+
79+
- swipe:
80+
start: "80%, 30%"
81+
end: "20%, 30%"
82+
duration: 400
83+
84+
- waitForAnimationToEnd:
85+
timeout: 3000
86+
87+
# Should still be at slide 5
88+
- assertVisible: "Current Index: 5"
89+
90+
# === Test: Can still navigate backward from last slide ===
91+
92+
- swipe:
93+
start: "20%, 30%"
94+
end: "80%, 30%"
95+
duration: 400
96+
97+
- waitForAnimationToEnd:
98+
timeout: 3000
99+
100+
- assertVisible: "Current Index: 4"
101+
102+
# === Test: Navigate back to first slide ===
103+
104+
- tapOn:
105+
id: "btn-goto-0"
106+
107+
- waitForAnimationToEnd:
108+
timeout: 3000
109+
110+
- assertVisible: "Current Index: 0"
111+
112+
# === Test: Can still navigate forward from first slide ===
113+
114+
- swipe:
115+
start: "80%, 30%"
116+
end: "20%, 30%"
117+
duration: 400
118+
119+
- waitForAnimationToEnd:
120+
timeout: 3000
121+
122+
- assertVisible: "Current Index: 1"

‎e2e/04-pagination.yaml‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
appId: com.react-native-reanimated-carousel.example
2+
name: Pagination Dot Navigation
3+
---
4+
5+
# Navigate to E2E test page
6+
- runFlow: helpers/navigate-to-e2e.yaml
7+
8+
# === Test: Tap pagination dot 3 to navigate to slide 3 ===
9+
10+
- tapOn:
11+
id: "pagination-dot-3"
12+
13+
- waitForAnimationToEnd:
14+
timeout: 3000
15+
16+
- assertVisible: "Slide 3"
17+
- assertVisible: "Current Index: 3"
18+
19+
# === Test: Tap pagination dot 0 to go back to start ===
20+
21+
- tapOn:
22+
id: "pagination-dot-0"
23+
24+
- waitForAnimationToEnd:
25+
timeout: 3000
26+
27+
- assertVisible: "Slide 0"
28+
- assertVisible: "Current Index: 0"
29+
30+
# === Test: Tap pagination dot 5 to go to last slide ===
31+
32+
- tapOn:
33+
id: "pagination-dot-5"
34+
35+
- waitForAnimationToEnd:
36+
timeout: 3000
37+
38+
- assertVisible: "Slide 5"
39+
- assertVisible: "Current Index: 5"
40+
41+
# === Test: Tap pagination dot 2 to go to middle ===
42+
43+
- tapOn:
44+
id: "pagination-dot-2"
45+
46+
- waitForAnimationToEnd:
47+
timeout: 3000
48+
49+
- assertVisible: "Slide 2"
50+
- assertVisible: "Current Index: 2"
51+
52+
# === Test: Sequential dot navigation ===
53+
54+
- tapOn:
55+
id: "pagination-dot-1"
56+
57+
- waitForAnimationToEnd:
58+
timeout: 3000
59+
60+
- assertVisible: "Current Index: 1"
61+
62+
- tapOn:
63+
id: "pagination-dot-4"
64+
65+
- waitForAnimationToEnd:
66+
timeout: 3000
67+
68+
- assertVisible: "Current Index: 4"
69+
70+
# === Test: Tap current dot (should stay in place) ===
71+
72+
- tapOn:
73+
id: "pagination-dot-4"
74+
75+
- waitForAnimationToEnd:
76+
timeout: 2000
77+
78+
- assertVisible: "Current Index: 4"

0 commit comments

Comments
 (0)