Skip to content

Commit 5504366

Browse files
hubvuehubvue
committed
test: add core vue tests
1 parent 8f80421 commit 5504366

File tree

5 files changed

+268
-16
lines changed

5 files changed

+268
-16
lines changed

‎packages/example/src/pages/core/unobserve.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ watch(middleEl, (el) => {
2929
if (el) {
3030
exposure.observe(el, () => {
3131
count.value++
32-
exposure.unobserve(topEl.value)
3332
})
3433
}
3534
})
@@ -38,6 +37,7 @@ watch(bottomEl, (el) => {
3837
if (el) {
3938
exposure.observe(el, () => {
4039
count.value++
40+
exposure.unobserve(topEl.value)
4141
resetExposure()
4242
})
4343
}

‎tests/core.spec.ts‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { Page } from 'puppeteer'
2+
3+
// set default timeout
4+
jest.setTimeout(1000000)
5+
6+
const getCount = async (page: Page) => {
7+
return page.$$eval('.count', (els) => {
8+
return els[0].textContent
9+
})
10+
}
11+
12+
describe('core#base', () => {
13+
let page = (global as any).page as Page
14+
beforeAll(async () => {
15+
await page.goto('http://0.0.0.0:3000/#/core-base')
16+
})
17+
18+
test('should be an element trigger at the beginning', async () => {
19+
const count = await getCount(page)
20+
expect(count).toBe('1')
21+
})
22+
23+
test('when scrolling to middle appears, count should be added by 1', async () => {
24+
await page.evaluate(() => {
25+
window.scrollTo(0, 700)
26+
})
27+
await page.waitForTimeout(1000)
28+
const count = await getCount(page)
29+
30+
expect(count).toBe('2')
31+
})
32+
33+
test('when the middle element leaves the visible area, count should be added by 1', async () => {
34+
await page.evaluate(() => {
35+
window.scrollTo(0, 1500)
36+
})
37+
await page.waitForTimeout(1000)
38+
const count = await getCount(page)
39+
expect(count).toBe('3')
40+
})
41+
42+
test('when the bottom element leaves the visible area, count should be added by 1', async () => {
43+
await page.evaluate(() => {
44+
window.scrollTo(0, 2500)
45+
})
46+
await page.waitForTimeout(1000)
47+
const count = await getCount(page)
48+
expect(count).toBe('4')
49+
})
50+
})
51+
52+
describe('core#threshold', () => {
53+
let page = (global as any).page as Page
54+
beforeAll(async () => {
55+
await page.goto('http://0.0.0.0:3000/#/core-threshold')
56+
})
57+
58+
test('when the middle element is exposed to half of the visible area, count should be added by 1', async () => {
59+
await page.evaluate(() => {
60+
window.scrollTo(0, 595)
61+
})
62+
63+
await page.waitForTimeout(1000)
64+
const count = await getCount(page)
65+
expect(count).toBe('2')
66+
})
67+
})
68+
69+
describe('core#reset', () => {
70+
let page = (global as any).page as Page
71+
beforeAll(async () => {
72+
await page.goto('http://0.0.0.0:3000/#/core-reset')
73+
})
74+
75+
test('The node state should be reset after resetExposure is triggered', async () => {
76+
await page.evaluate(() => {
77+
window.scrollTo(0, 0)
78+
})
79+
await page.waitForTimeout(1000)
80+
// 1 滚动到中间触发middle
81+
await page.evaluate(() => {
82+
window.scrollTo(0, 800)
83+
})
84+
await page.waitForTimeout(1000)
85+
86+
// 滚动到底部触发bottom
87+
await page.evaluate(() => {
88+
window.scrollTo(0, 2500)
89+
})
90+
await page.waitForTimeout(1000)
91+
92+
// 再次滚动到中间触发middle
93+
await page.evaluate(() => {
94+
window.scrollTo(0, 800)
95+
})
96+
await page.waitForTimeout(1000)
97+
98+
// 再次滚动到顶部触发top
99+
await page.evaluate(() => {
100+
window.scrollTo(0, 0)
101+
})
102+
await page.waitForTimeout(1000)
103+
104+
// // 再次滚动到中间触发middle
105+
await page.evaluate(() => {
106+
window.scrollTo(0, 800)
107+
})
108+
await page.waitForTimeout(1000)
109+
110+
const count = await getCount(page)
111+
expect(count).toBe('6')
112+
})
113+
})
114+
115+
describe('core#unobserve', () => {
116+
let page = (global as any).page as Page
117+
beforeAll(async () => {
118+
await page.goto('http://0.0.0.0:3000/#/core-unobserve')
119+
})
120+
121+
test('The node should be unlistened to after the unobserve is triggered', async () => {
122+
await page.evaluate(() => {
123+
window.scrollTo(0, 0)
124+
})
125+
await page.waitForTimeout(1000)
126+
// 1 滚动到中间触发middle
127+
await page.evaluate(() => {
128+
window.scrollTo(0, 800)
129+
})
130+
await page.waitForTimeout(1000)
131+
132+
// 滚动到底部触发bottom
133+
await page.evaluate(() => {
134+
window.scrollTo(0, 2500)
135+
})
136+
await page.waitForTimeout(1000)
137+
138+
// 再次滚动到中间触发middle
139+
await page.evaluate(() => {
140+
window.scrollTo(0, 800)
141+
})
142+
await page.waitForTimeout(1000)
143+
144+
// 再次滚动到顶部不会触发top
145+
await page.evaluate(() => {
146+
window.scrollTo(0, 0)
147+
})
148+
await page.waitForTimeout(1000)
149+
150+
const count = await getCount(page)
151+
expect(count).toBe('4')
152+
})
153+
})

‎tests/core/index.spec.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎tests/vue.spec.ts‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { Page } from 'puppeteer'
2+
3+
// set default timeout
4+
jest.setTimeout(1000000)
5+
6+
const getCount = async (page: Page) => {
7+
return page.$$eval('.count', (els) => {
8+
return els[0].textContent
9+
})
10+
}
11+
12+
describe('vue#base', () => {
13+
let page = (global as any).page as Page
14+
beforeAll(async () => {
15+
await page.goto('http://0.0.0.0:3000/#/vue-base')
16+
})
17+
18+
test('should be an element trigger at the beginning', async () => {
19+
const count = await getCount(page)
20+
expect(count).toBe('1')
21+
})
22+
23+
test('when scrolling to middle appears, count should be added by 1', async () => {
24+
await page.evaluate(() => {
25+
window.scrollTo(0, 700)
26+
})
27+
await page.waitForTimeout(1000)
28+
const count = await getCount(page)
29+
30+
expect(count).toBe('2')
31+
})
32+
33+
test('when the middle element leaves the visible area, count should be added by 1', async () => {
34+
await page.evaluate(() => {
35+
window.scrollTo(0, 1500)
36+
})
37+
await page.waitForTimeout(1000)
38+
const count = await getCount(page)
39+
expect(count).toBe('3')
40+
})
41+
42+
test('when the bottom element leaves the visible area, count should be added by 1', async () => {
43+
await page.evaluate(() => {
44+
window.scrollTo(0, 2500)
45+
})
46+
await page.waitForTimeout(1000)
47+
const count = await getCount(page)
48+
expect(count).toBe('4')
49+
})
50+
})
51+
52+
describe('vue#threshold', () => {
53+
let page = (global as any).page as Page
54+
beforeAll(async () => {
55+
await page.goto('http://0.0.0.0:3000/#/vue-threshold')
56+
})
57+
58+
test('when the middle element is exposed to half of the visible area, count should be added by 1', async () => {
59+
await page.evaluate(() => {
60+
window.scrollTo(0, 595)
61+
})
62+
63+
await page.waitForTimeout(1000)
64+
const count = await getCount(page)
65+
expect(count).toBe('2')
66+
})
67+
})
68+
69+
describe('vue#reset', () => {
70+
let page = (global as any).page as Page
71+
beforeAll(async () => {
72+
await page.goto('http://0.0.0.0:3000/#/vue-reset')
73+
})
74+
75+
test('The node state should be reset after resetExposure is triggered', async () => {
76+
await page.evaluate(() => {
77+
window.scrollTo(0, 0)
78+
})
79+
await page.waitForTimeout(1000)
80+
// 1 滚动到中间触发middle
81+
await page.evaluate(() => {
82+
window.scrollTo(0, 800)
83+
})
84+
await page.waitForTimeout(1000)
85+
86+
// 滚动到底部触发bottom
87+
await page.evaluate(() => {
88+
window.scrollTo(0, 2500)
89+
})
90+
await page.waitForTimeout(1000)
91+
92+
// 再次滚动到中间触发middle
93+
await page.evaluate(() => {
94+
window.scrollTo(0, 800)
95+
})
96+
await page.waitForTimeout(1000)
97+
98+
// 再次滚动到顶部触发top
99+
await page.evaluate(() => {
100+
window.scrollTo(0, 0)
101+
})
102+
await page.waitForTimeout(1000)
103+
104+
// // 再次滚动到中间触发middle
105+
await page.evaluate(() => {
106+
window.scrollTo(0, 800)
107+
})
108+
await page.waitForTimeout(1000)
109+
110+
const count = await getCount(page)
111+
expect(count).toBe('6')
112+
})
113+
})

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"baseUrl": ".",
44
"outDir": "dist",
55
"sourceMap": false,
6-
"target": "ES2016",
6+
"target": "ES2017",
77
"module": "ESNext",
88
"moduleResolution": "node",
99
"allowJs": false,

0 commit comments

Comments
 (0)