Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 08d4cdf

Browse files
tangbctangbc
committedMay 2, 2020
Add test
1 parent dc00222 commit 08d4cdf

10 files changed

+332
-10
lines changed
 

‎jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@ module.exports = {
2020
'.*\\.(vue)$': 'vue-jest',
2121
'^.+\\.js$': '<rootDir>/node_modules/babel-jest'
2222
},
23-
// testRegex: 'slot.test.js?$'
23+
// testRegex: 'scroll.test.js?$'
2424
}

‎test/base.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('base', () => {
3535
})
3636

3737
it('check list build by default', () => {
38-
const InstanceData = Instance.vm.$data
38+
const vmData = Instance.vm.$data
3939
const vslVm = Instance.find('.my-list').vm
4040
const rootEl = vslVm.$el
4141
expect(rootEl.tagName.toLowerCase()).toBe(VirtualProps.rootTag.default)
@@ -61,7 +61,7 @@ describe('base', () => {
6161
const itemInnerEl = itemEl.firstElementChild
6262
expect(itemInnerEl.className).toBe('inner')
6363
expect(itemInnerEl.querySelector('.index').textContent).toBe(`${i}`)
64-
expect(itemInnerEl.querySelector('.source').textContent).toBe(InstanceData.items[i].text)
64+
expect(itemInnerEl.querySelector('.source').textContent).toBe(vmData.items[i].text)
6565
}
6666
})
6767
})

‎test/element.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ describe('element', () => {
4646
})
4747

4848
it('check element tag and class', () => {
49-
const InstanceData = Instance.vm.$data
49+
const vmData = Instance.vm.$data
5050
const vslVm = Instance.find('.my-list').vm
5151
const rootEl = vslVm.$el
5252
expect(rootEl.tagName.toLowerCase()).toBe('article')
@@ -73,7 +73,7 @@ describe('element', () => {
7373
const itemInnerEl = itemEl.firstElementChild
7474
expect(itemInnerEl.className).toBe('inner')
7575
expect(itemInnerEl.querySelector('.index').textContent).toBe(`${i}`)
76-
expect(itemInnerEl.querySelector('.source').textContent).toBe(InstanceData.items[i].text)
76+
expect(itemInnerEl.querySelector('.source').textContent).toBe(vmData.items[i].text)
7777
}
7878
})
7979
})

‎test/extra-props.test.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { mount } from '@vue/test-utils'
2+
import VirtualList from '../src/index'
3+
import Item from './item.vue'
4+
import { getDatas } from './util'
5+
import Vue from 'vue'
6+
7+
describe('extra-props', () => {
8+
const Instance = mount({
9+
name: 'test',
10+
components: {
11+
'virtual-list': VirtualList
12+
},
13+
template: `
14+
<div id="app">
15+
<virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
16+
:data-key="'id'"
17+
:data-sources="items"
18+
:data-component="item"
19+
:extra-props="extraProps"
20+
/>
21+
</div>
22+
`,
23+
data () {
24+
return {
25+
items: getDatas(1000),
26+
item: Item,
27+
extraProps: {
28+
otherProp: '123'
29+
}
30+
}
31+
}
32+
})
33+
34+
it('check mount', () => {
35+
expect(Instance.name()).toBe('test')
36+
expect(Instance.is('div')).toBe(true)
37+
expect(Instance.isVueInstance()).toBe(true)
38+
expect(Instance.find('.my-list').exists()).toBe(true)
39+
})
40+
41+
it('check extra props render and data reactive', () => {
42+
const vmData = Instance.vm.$data
43+
const vslVm = Instance.find('.my-list').vm
44+
const rootEl = vslVm.$el
45+
const wrapperEl = rootEl.firstElementChild
46+
47+
const checkProps = (otherProp) => {
48+
// items render content
49+
for (let i = 0; i < wrapperEl.childNodes.length; i++) {
50+
const itemEl = wrapperEl.childNodes[i]
51+
const itemInnerEl = itemEl.firstElementChild
52+
expect(itemInnerEl.className).toBe('inner')
53+
expect(itemInnerEl.querySelector('.index').textContent).toBe(`${i}`)
54+
expect(itemInnerEl.querySelector('.source').textContent).toBe(vmData.items[i].text)
55+
expect(itemInnerEl.querySelector('.other').textContent).toBe(otherProp)
56+
}
57+
}
58+
59+
checkProps(vmData.extraProps.otherProp)
60+
61+
vmData.extraProps.otherProp = '789'
62+
Vue.nextTick(() => {
63+
checkProps('789')
64+
})
65+
})
66+
})

‎test/extra-props2.test.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { mount } from '@vue/test-utils'
2+
import VirtualList from '../src/index'
3+
import Item from './item.vue'
4+
import { getDatas } from './util'
5+
import Vue from 'vue'
6+
7+
describe('extra-props inline', () => {
8+
const Instance = mount({
9+
name: 'test',
10+
components: {
11+
'virtual-list': VirtualList
12+
},
13+
template: `
14+
<div id="app">
15+
<virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
16+
:data-key="'id'"
17+
:data-sources="items"
18+
:data-component="item"
19+
:extra-props="{ otherProp }"
20+
/>
21+
</div>
22+
`,
23+
data () {
24+
return {
25+
items: getDatas(1000),
26+
item: Item,
27+
otherProp: 'abc'
28+
}
29+
}
30+
})
31+
32+
it('check mount', () => {
33+
expect(Instance.name()).toBe('test')
34+
expect(Instance.is('div')).toBe(true)
35+
expect(Instance.isVueInstance()).toBe(true)
36+
expect(Instance.find('.my-list').exists()).toBe(true)
37+
})
38+
39+
it('check extra props render and data reactive', () => {
40+
const vmData = Instance.vm.$data
41+
const vslVm = Instance.find('.my-list').vm
42+
const rootEl = vslVm.$el
43+
const wrapperEl = rootEl.firstElementChild
44+
45+
const checkProps = (otherProp) => {
46+
// items render content
47+
for (let i = 0; i < wrapperEl.childNodes.length; i++) {
48+
const itemEl = wrapperEl.childNodes[i]
49+
const itemInnerEl = itemEl.firstElementChild
50+
expect(itemInnerEl.className).toBe('inner')
51+
expect(itemInnerEl.querySelector('.index').textContent).toBe(`${i}`)
52+
expect(itemInnerEl.querySelector('.source').textContent).toBe(vmData.items[i].text)
53+
expect(itemInnerEl.querySelector('.other').textContent).toBe(otherProp)
54+
}
55+
}
56+
57+
checkProps(vmData.otherProp)
58+
59+
vmData.otherProp = 'xyz'
60+
Vue.nextTick(() => {
61+
checkProps('xyz')
62+
})
63+
})
64+
})

‎test/horizontal.test.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { mount } from '@vue/test-utils'
2+
import VirtualList from '../src/index'
3+
import Item from './item.vue'
4+
import { getDatas } from './util'
5+
6+
describe('horizontal', () => {
7+
const Instance = mount({
8+
name: 'test',
9+
components: {
10+
'virtual-list': VirtualList
11+
},
12+
template: `
13+
<div id="app">
14+
<virtual-list class="my-list" style="height: 200px; overflow-y: hidden; width: 400px; overflow-x: auto;"
15+
:data-key="'id'"
16+
:data-sources="items"
17+
:data-component="item"
18+
:direction="'horizontal'"
19+
:wrap-style="{ 'display': 'flex', 'flex-direction': 'row' }"
20+
/>
21+
</div>
22+
`,
23+
data () {
24+
return {
25+
items: getDatas(1000),
26+
item: Item
27+
}
28+
}
29+
})
30+
31+
it('check mount', () => {
32+
expect(Instance.name()).toBe('test')
33+
expect(Instance.is('div')).toBe(true)
34+
expect(Instance.isVueInstance()).toBe(true)
35+
expect(Instance.find('.my-list').exists()).toBe(true)
36+
})
37+
38+
// @TODO scrollHeight scrollWidth is both 0
39+
it('check scroll direction', () => {
40+
const vslVm = Instance.find('.my-list').vm
41+
const rootEl = vslVm.$el
42+
// const wrapperEl = rootEl.querySelector('[role="group"]')
43+
44+
expect(rootEl.scrollHeight === rootEl.clientHeight).toBe(true)
45+
// expect(rootEl.scrollWidth > rootEl.clientWidth).toBe(true)
46+
})
47+
})

‎test/offset.test.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { mount } from '@vue/test-utils'
2+
import VirtualList from '../src/index'
3+
import Item from './item.vue'
4+
import { getDatas } from './util'
5+
import Vue from 'vue'
6+
7+
describe('offset', () => {
8+
const Instance = mount({
9+
name: 'test',
10+
components: {
11+
'virtual-list': VirtualList
12+
},
13+
template: `
14+
<div id="app">
15+
<virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
16+
:data-key="'id'"
17+
:data-sources="items"
18+
:data-component="item"
19+
:offset="offset"
20+
/>
21+
</div>
22+
`,
23+
data () {
24+
return {
25+
items: getDatas(1000),
26+
item: Item,
27+
offset: 0
28+
}
29+
}
30+
})
31+
32+
it('check mount', () => {
33+
expect(Instance.name()).toBe('test')
34+
expect(Instance.is('div')).toBe(true)
35+
expect(Instance.isVueInstance()).toBe(true)
36+
expect(Instance.find('.my-list').exists()).toBe(true)
37+
})
38+
39+
// @TODO
40+
it('check offset and data reactive', () => {
41+
const vmData = Instance.vm.$data
42+
const vslVm = Instance.find('.my-list').vm
43+
expect(vslVm.virtual.offset).toBe(0)
44+
45+
vmData.offset = 100
46+
// Vue.nextTick(() => {
47+
// expect(vslVm.virtual.offset).toBe(100)
48+
// })
49+
})
50+
})

‎test/scroll.test.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { mount } from '@vue/test-utils'
2+
import VirtualList from '../src/index'
3+
import Item from './item.vue'
4+
import { getDatas } from './util'
5+
import Vue from 'vue'
6+
7+
describe('scroll', () => {
8+
const Instance = mount({
9+
name: 'test',
10+
components: {
11+
'virtual-list': VirtualList
12+
},
13+
template: `
14+
<div id="app">
15+
<virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
16+
:data-key="'id'"
17+
:data-sources="items"
18+
:data-component="item"
19+
/>
20+
</div>
21+
`,
22+
data () {
23+
return {
24+
items: getDatas(1000),
25+
item: Item
26+
}
27+
}
28+
})
29+
30+
it('check mount', () => {
31+
expect(Instance.name()).toBe('test')
32+
expect(Instance.is('div')).toBe(true)
33+
expect(Instance.isVueInstance()).toBe(true)
34+
expect(Instance.find('.my-list').exists()).toBe(true)
35+
})
36+
37+
// @TODO
38+
it('check scroll behavior', () => {
39+
const myList = Instance.find('.my-list')
40+
const vslVm = myList.vm
41+
const rootEl = vslVm.$el
42+
43+
rootEl.scrollTop = 2000
44+
myList.trigger('scroll')
45+
46+
Vue.nextTick(() => {
47+
// console.log(vslVm.$data.range.start)
48+
})
49+
})
50+
})

‎test/slot.test.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ describe('slot', () => {
3030
items: getDatas(1000),
3131
item: Item
3232
}
33-
},
34-
methods: {
35-
addItemClass (index) {
36-
return 'extra-item-' + index
37-
}
3833
}
3934
})
4035

‎test/start.test.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { mount } from '@vue/test-utils'
2+
import VirtualList from '../src/index'
3+
import Item from './item.vue'
4+
import { getDatas } from './util'
5+
import Vue from 'vue'
6+
7+
describe('start', () => {
8+
const Instance = mount({
9+
name: 'test',
10+
components: {
11+
'virtual-list': VirtualList
12+
},
13+
template: `
14+
<div id="app">
15+
<virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
16+
:data-key="'id'"
17+
:data-sources="items"
18+
:data-component="item"
19+
:start="start"
20+
/>
21+
</div>
22+
`,
23+
data () {
24+
return {
25+
items: getDatas(1000),
26+
item: Item,
27+
start: 0
28+
}
29+
}
30+
})
31+
32+
it('check mount', () => {
33+
expect(Instance.name()).toBe('test')
34+
expect(Instance.is('div')).toBe(true)
35+
expect(Instance.isVueInstance()).toBe(true)
36+
expect(Instance.find('.my-list').exists()).toBe(true)
37+
})
38+
39+
// @TODO
40+
it('check start and data reactive', () => {
41+
const vmData = Instance.vm.$data
42+
const vslVm = Instance.find('.my-list').vm
43+
expect(vslVm.virtual.range.start).toBe(0)
44+
45+
vmData.start = 100
46+
// Vue.nextTick(() => {
47+
// expect(vslVm.virtual.range.start).toBe(100)
48+
// })
49+
})
50+
})

0 commit comments

Comments
 (0)
Please sign in to comment.