Skip to content

Commit ca098c1

Browse files
stipsanstipsan
authored
fix(scrollMode: if-needed): cover more edge cases (#27)
* expand test cases * update snapshot * setup junit * safer reports setup * fix jest-junit config * fix failing test case * improve test coverage * add nested overflow test case * update test case * fix nested edge case
1 parent 90c5971 commit ca098c1

File tree

13 files changed

+250
-72
lines changed

13 files changed

+250
-72
lines changed

‎.circleci/config.yml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ jobs:
4747
command: 'sh .circleci/setup_puppeteer.sh'
4848
- *install
4949
- run: yarn build:umd
50-
- run: yarn test
50+
- run:
51+
command: yarn test --ci --runInBand
52+
- store_test_results:
53+
path: reports
54+
5155

5256
Semantic Release:
5357
docker:

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,6 @@ lerna-debug.log
6868
dist
6969
es
7070
umd
71+
reports
7172
/index.js
7273
/types.js

‎integration/__snapshots__/nested_overflow.test.js.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`scrollMode: if-needed target in view, container out of view 1`] = `
4+
Array [
5+
Object {
6+
"el": Object {},
7+
"left": 250,
8+
"top": 250,
9+
},
10+
Object {
11+
"el": Object {},
12+
"left": 1250,
13+
"top": 1000,
14+
},
15+
]
16+
`;

‎integration/__snapshots__/overflow_auto.test.js.snap‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,171 +2,171 @@
22

33
exports[`scrollMode: always block: center, inline: center 1`] = `
44
Object {
5-
"left": 150,
6-
"top": 150,
5+
"left": 250,
6+
"top": 250,
77
}
88
`;
99

1010
exports[`scrollMode: always block: center, inline: end 1`] = `
1111
Object {
12-
"left": 100,
13-
"top": 150,
12+
"left": 200,
13+
"top": 250,
1414
}
1515
`;
1616

1717
exports[`scrollMode: always block: center, inline: nearest 1`] = `
1818
Object {
19-
"left": 100,
20-
"top": 150,
19+
"left": 200,
20+
"top": 250,
2121
}
2222
`;
2323

2424
exports[`scrollMode: always block: center, inline: nearest 2`] = `
2525
Object {
26-
"left": 200,
27-
"top": 150,
26+
"left": 300,
27+
"top": 250,
2828
}
2929
`;
3030

3131
exports[`scrollMode: always block: center, inline: start 1`] = `
3232
Object {
33-
"left": 200,
34-
"top": 150,
33+
"left": 300,
34+
"top": 250,
3535
}
3636
`;
3737

3838
exports[`scrollMode: always block: end, inline: center 1`] = `
3939
Object {
40-
"left": 150,
41-
"top": 100,
40+
"left": 250,
41+
"top": 200,
4242
}
4343
`;
4444

4545
exports[`scrollMode: always block: end, inline: end 1`] = `
4646
Object {
47-
"left": 100,
48-
"top": 100,
47+
"left": 200,
48+
"top": 200,
4949
}
5050
`;
5151

5252
exports[`scrollMode: always block: end, inline: nearest 1`] = `
5353
Object {
54-
"left": 100,
55-
"top": 100,
54+
"left": 200,
55+
"top": 200,
5656
}
5757
`;
5858

5959
exports[`scrollMode: always block: end, inline: nearest 2`] = `
6060
Object {
61-
"left": 200,
62-
"top": 100,
61+
"left": 300,
62+
"top": 200,
6363
}
6464
`;
6565

6666
exports[`scrollMode: always block: end, inline: start 1`] = `
6767
Object {
68-
"left": 200,
69-
"top": 100,
68+
"left": 300,
69+
"top": 200,
7070
}
7171
`;
7272

7373
exports[`scrollMode: always block: nearest, inline: center 1`] = `
7474
Object {
75-
"left": 150,
76-
"top": 100,
75+
"left": 250,
76+
"top": 200,
7777
}
7878
`;
7979

8080
exports[`scrollMode: always block: nearest, inline: center 2`] = `
8181
Object {
82-
"left": 150,
83-
"top": 200,
82+
"left": 250,
83+
"top": 300,
8484
}
8585
`;
8686

8787
exports[`scrollMode: always block: nearest, inline: end 1`] = `
8888
Object {
89-
"left": 100,
90-
"top": 100,
89+
"left": 200,
90+
"top": 200,
9191
}
9292
`;
9393

9494
exports[`scrollMode: always block: nearest, inline: end 2`] = `
9595
Object {
96-
"left": 100,
97-
"top": 200,
96+
"left": 200,
97+
"top": 300,
9898
}
9999
`;
100100

101101
exports[`scrollMode: always block: nearest, inline: nearest 1`] = `
102102
Object {
103-
"left": 100,
104-
"top": 100,
103+
"left": 200,
104+
"top": 200,
105105
}
106106
`;
107107

108108
exports[`scrollMode: always block: nearest, inline: nearest 2`] = `
109109
Object {
110-
"left": 200,
111-
"top": 200,
110+
"left": 300,
111+
"top": 300,
112112
}
113113
`;
114114

115115
exports[`scrollMode: always block: nearest, inline: start 1`] = `
116116
Object {
117-
"left": 200,
118-
"top": 100,
117+
"left": 300,
118+
"top": 200,
119119
}
120120
`;
121121

122122
exports[`scrollMode: always block: nearest, inline: start 2`] = `
123123
Object {
124-
"left": 200,
125-
"top": 200,
124+
"left": 300,
125+
"top": 300,
126126
}
127127
`;
128128

129129
exports[`scrollMode: always block: start, inline: center 1`] = `
130130
Object {
131-
"left": 150,
132-
"top": 200,
131+
"left": 250,
132+
"top": 300,
133133
}
134134
`;
135135

136136
exports[`scrollMode: always block: start, inline: end 1`] = `
137137
Object {
138-
"left": 100,
139-
"top": 200,
138+
"left": 200,
139+
"top": 300,
140140
}
141141
`;
142142

143143
exports[`scrollMode: always block: start, inline: nearest 1`] = `
144144
Object {
145-
"left": 100,
146-
"top": 200,
145+
"left": 200,
146+
"top": 300,
147147
}
148148
`;
149149

150150
exports[`scrollMode: always block: start, inline: nearest 2`] = `
151151
Object {
152-
"left": 200,
153-
"top": 200,
152+
"left": 300,
153+
"top": 300,
154154
}
155155
`;
156156

157157
exports[`scrollMode: always block: start, inline: start 1`] = `
158158
Object {
159-
"left": 200,
160-
"top": 200,
159+
"left": 300,
160+
"top": 300,
161161
}
162162
`;
163163

164164
exports[`scrollMode: if-needed horizontal completely overflowing 1`] = `
165165
Array [
166166
Object {
167167
"el": Object {},
168-
"left": 100,
169-
"top": 150,
168+
"left": 200,
169+
"top": 250,
170170
},
171171
]
172172
`;
@@ -175,8 +175,8 @@ exports[`scrollMode: if-needed horizontal partially overflowing 1`] = `
175175
Array [
176176
Object {
177177
"el": Object {},
178-
"left": 100,
179-
"top": 150,
178+
"left": 200,
179+
"top": 250,
180180
},
181181
]
182182
`;
@@ -185,8 +185,8 @@ exports[`scrollMode: if-needed vertical completely below the fold 1`] = `
185185
Array [
186186
Object {
187187
"el": Object {},
188-
"left": 100,
189-
"top": 150,
188+
"left": 200,
189+
"top": 250,
190190
},
191191
]
192192
`;
@@ -195,8 +195,8 @@ exports[`scrollMode: if-needed vertical partially below the fold 1`] = `
195195
Array [
196196
Object {
197197
"el": Object {},
198-
"left": 100,
199-
"top": 150,
198+
"left": 200,
199+
"top": 250,
200200
},
201201
]
202202
`;

‎integration/__snapshots__/viewport.test.js.snap‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,26 @@ Array [
171171
]
172172
`;
173173

174+
exports[`scrollMode: if-needed horizontal fully negative overflowing 1`] = `
175+
Array [
176+
Object {
177+
"el": Object {},
178+
"left": 1600,
179+
"top": 950,
180+
},
181+
]
182+
`;
183+
184+
exports[`scrollMode: if-needed horizontal partially negative overflowing 1`] = `
185+
Array [
186+
Object {
187+
"el": Object {},
188+
"left": 1600,
189+
"top": 950,
190+
},
191+
]
192+
`;
193+
174194
exports[`scrollMode: if-needed horizontal partially overflowing 1`] = `
175195
Array [
176196
Object {
@@ -181,6 +201,16 @@ Array [
181201
]
182202
`;
183203

204+
exports[`scrollMode: if-needed vertical completely above the fold 1`] = `
205+
Array [
206+
Object {
207+
"el": Object {},
208+
"left": 1200,
209+
"top": 950,
210+
},
211+
]
212+
`;
213+
184214
exports[`scrollMode: if-needed vertical completely below the fold 1`] = `
185215
Array [
186216
Object {
@@ -191,6 +221,16 @@ Array [
191221
]
192222
`;
193223

224+
exports[`scrollMode: if-needed vertical partially above the fold 1`] = `
225+
Array [
226+
Object {
227+
"el": Object {},
228+
"left": 1200,
229+
"top": 950,
230+
},
231+
]
232+
`;
233+
194234
exports[`scrollMode: if-needed vertical partially below the fold 1`] = `
195235
Array [
196236
Object {

‎integration/jest.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
module.exports = {
22
preset: 'jest-puppeteer',
33
testRegex: './*\\.test\\.js$',
4+
reporters: [
5+
'default',
6+
['jest-junit', { output: 'reports/jest/results.xml' }],
7+
],
48
}

‎integration/nested_overflow.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
4+
<script src="../umd/compute-scroll-into-view.js"></script>
5+
<style>
6+
html, body {
7+
margin: 0;
8+
padding: 0;
9+
height: 100vh;
10+
width: 100vw;
11+
}
12+
body {
13+
padding: 0 200vw;
14+
}
15+
.container {
16+
margin: 200vh auto;
17+
height: 200px;
18+
width: 200px;
19+
overflow: auto;
20+
}
21+
.inner {
22+
padding: 300px;
23+
background: whitesmoke;
24+
}
25+
.target {
26+
background: crimson;
27+
height: 100px;
28+
width: 100px;
29+
}
30+
</style>
31+
<div class="container">
32+
<div class="inner">
33+
<div class="target"></div>
34+
</div>
35+
</div>

0 commit comments

Comments
 (0)