Add unit tests.

Author: tangbc

.babelrc

@@ -1,5 +1,5 @@
 {
     "presets": [
-        ["@babel/preset-env", { "modules": false }]
+        ["@babel/preset-env"]
     ]
-}
+}

.gitignore

@@ -1,6 +1,7 @@
 dev
 node_modules
 npm-debug.log
+coverage
 demos/dev/
 demos/dev*/
 demos/**/*.map

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    transformIgnorePatterns: [
+        'node_modules'
+    ],
+    collectCoverage: true,
+    coverageReporters: [
+        'html',
+        'text-summary'
+    ],
+    collectCoverageFrom: [
+        '**/index.js',
+        '!**/node_modules/**',
+        '!**/test/**',
+    ],
+    // testRegex: '/test/base.test.js?$'
+}

package.json

@@ -7,7 +7,9 @@
     "index.js"
   ],
   "scripts": {
+    "test": "jest",
     "lint": "eslint index.js",
+    "ci": "npm run lint && npm run test",
     "dev": "npm run server & npm run demo:dev",
     "server": "node node_modules/@tangbc/tiny-node-server",
     "demo:dev": "cross-env NODE_ENV=development webpack --config ./demos/webpack.conf.js",
@@ -37,6 +39,8 @@
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
     "@tangbc/tiny-node-server": "^1.0.4",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "babel-jest": "^24.7.0",
     "babel-loader": "^8.0.5",
     "babel-preset-env": "^1.7.0",
     "cross-env": "^5.2.0",
@@ -48,6 +52,7 @@
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
+    "jest": "^24.7.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
     "vue": "^2.6.10",

test/base.test.js

@@ -0,0 +1,76 @@
+import VirtualList from '../index'
+import { mount } from '@vue/test-utils'
+import { getIndexList } from './util'
+
+// for testing base build.
+const theme = 'base-test'
+
+describe(theme, () => {
+    const listCount = 1000
+    const wrapper = mount({
+        template: `
+            <div id="app" style="width: 300px;">
+                <virtual-list class="list"
+                    :size="40"
+                    :remain="6"
+                >
+                    <div class="for-item"
+                        v-for="(item, index) in items"
+                        :key="index"
+                        style="height: 40px; line-height: 40px;"
+                    >
+                        <span class="for-item-text">{{ item }}</span>
+                    </div>
+                </virtual-list>
+            </div>
+        `,
+
+        name: 'test',
+
+        components: {
+            'virtual-list': VirtualList
+        },
+
+        data () {
+            return {
+                items: getIndexList(listCount)
+            }
+        }
+    })
+
+    it(`[${theme}] check mount success.`, () => {
+        expect(wrapper.name()).toBe('test')
+        expect(wrapper.is('div')).toBe(true)
+        expect(wrapper.isEmpty()).toBe(false)
+        expect(wrapper.isVueInstance()).toBe(true)
+    })
+
+    it(`[${theme}] check list build success.`, () => {
+        expect(wrapper.find('.for-item').exists()).toBe(true)
+        expect(wrapper.find('.for-item-text').exists()).toBe(true)
+
+        // list wraper height is remain * size.
+        const expectOutsideHeight = 40 * 6
+        const listEl = wrapper.find('.list').vm.$el
+        expect(listEl.style.height).toBe(`${expectOutsideHeight}px`)
+
+        const listWraperEl = listEl.querySelector('div')
+        const expectPaddingBottom = listCount * 40 - expectOutsideHeight * 2
+        expect(listWraperEl.style['padding-top']).toBe('0px')
+        expect(listWraperEl.style['padding-bottom']).toBe(`${expectPaddingBottom}px`)
+    })
+
+    it(`[${theme}] check build item count correct.`, () => {
+        const itemFrags = wrapper.findAll('.for-item')
+
+        // default real dom count is remain + default bench.
+        expect(itemFrags.length).toBe(6 + 6)
+
+        // check every item render content.
+        for (let i = 0; i < itemFrags.length; i++) {
+            const item = itemFrags.at(i)
+            expect(item.text()).toBe('#' + i)
+            expect(item.classes('for-item')).toBe(true)
+        }
+    })
+})

test/element.test.js

@@ -0,0 +1,66 @@
+import VirtualList from '../index'
+import { mount } from '@vue/test-utils'
+import { getIndexList } from './util'
+
+// for testing props: rtag, wtag wclass.
+const theme = 'element-test'
+
+describe(theme, () => {
+    const initSize = 40
+    const initRemian = 6
+    const listCount = 1000
+
+    const wrapper = mount({
+        template: `
+            <div id="app" style="width: 300px;">
+                <virtual-list class="list"
+                    :size="size"
+                    :remain="remian"
+                    rtag="div"
+                    wtag="ul"
+                    wclass="conetnt-box"
+                >
+                    <li class="for-item"
+                        v-for="(item, index) in items"
+                        :key="index"
+                        :style="itemStyle"
+                    >
+                        <span class="for-item-text">{{ item }}</span>
+                    </li>
+                </virtual-list>
+            </div>
+        `,
+
+        name: 'test',
+
+        components: {
+            'virtual-list': VirtualList
+        },
+
+        data () {
+            return {
+                size: initSize,
+                remian: initRemian,
+                items: getIndexList(listCount)
+            }
+        },
+
+        computed: {
+            itemStyle () {
+                return {
+                    'height': this.size + 'px',
+                    'line-height': this.size + 'px'
+                }
+            }
+        }
+    })
+
+    it(`[${theme}] check element tag and classname.`, () => {
+        const listEl = wrapper.find('.list').vm.$el
+        const listWraperEl = listEl.firstElementChild
+
+        expect(listEl.tagName).toBe('DIV')
+        expect(listWraperEl.tagName).toBe('UL')
+        expect(listWraperEl.className).toBe('conetnt-box')
+    })
+})

test/event.test.js

@@ -0,0 +1,106 @@
+import VirtualList from '../index'
+import { mount } from '@vue/test-utils'
+import { getIndexList } from './util'
+import jest from 'jest-mock'
+
+// for testing props: totop, tobottom and onscroll.
+const theme = 'event-test'
+
+const mockReachTopCallback = jest.fn(() => {})
+const mockReachBottomCallback = jest.fn(() => {})
+const mockScrollCallback = jest.fn(() => {})
+
+describe(theme, () => {
+    const initSize = 40
+    const initRemian = 6
+    const listCount = 100
+
+    const wrapper = mount({
+        template: `
+            <div id="app" style="width: 300px;">
+                <virtual-list class="list"
+                    :size="size"
+                    :remain="remian"
+                    :totop="onReachTop"
+                    :tobottom="onReachBottom"
+                    :onscroll="onScroll"
+                >
+                    <div class="for-item"
+                        v-for="(item, index) in items"
+                        :key="index"
+                        :style="itemStyle"
+                    >
+                        <span class="for-item-text">{{ item }}</span>
+                    </div>
+                </virtual-list>
+            </div>
+        `,
+
+        name: 'test',
+
+        components: {
+            'virtual-list': VirtualList
+        },
+
+        data () {
+            return {
+                size: initSize,
+                remian: initRemian,
+                items: getIndexList(listCount)
+            }
+        },
+
+        methods: {
+            onReachTop () {
+                mockReachTopCallback()
+            },
+
+            onReachBottom () {
+                mockReachBottomCallback()
+            },
+
+            onScroll (e, info) {
+                mockScrollCallback(e, info)
+            }
+        },
+
+        computed: {
+            itemStyle () {
+                return {
+                    'height': this.size + 'px',
+                    'line-height': this.size + 'px'
+                }
+            }
+        }
+    })
+
+    it(`[${theme}] check event fire and call params.`, () => {
+        const list = wrapper.find('.list')
+        const listEl = list.vm.$el
+
+        expect(mockReachTopCallback.mock.calls.length).toBe(0)
+        expect(mockReachBottomCallback.mock.calls.length).toBe(0)
+        expect(mockScrollCallback.mock.calls.length).toBe(0)
+
+        listEl.scrollTop = 100
+        list.trigger('scroll')
+        const callArgs = mockScrollCallback.mock.calls[0]
+        expect(callArgs[0] instanceof Event).toBe(true)
+        expect(Object.keys(callArgs[1])).toEqual(['offset', 'offsetAll', 'start', 'end'])
+        expect(mockReachTopCallback.mock.calls.length).toBe(0)
+        expect(mockReachBottomCallback.mock.calls.length).toBe(0)
+        expect(mockScrollCallback.mock.calls.length).toBe(1)
+
+        listEl.scrollTop = 0
+        list.trigger('scroll')
+        expect(mockReachTopCallback.mock.calls.length).toBe(1)
+        expect(mockReachBottomCallback.mock.calls.length).toBe(0)
+        expect(mockScrollCallback.mock.calls.length).toBe(2)
+
+        listEl.scrollTop = listCount * initSize
+        list.trigger('scroll')
+        expect(mockReachTopCallback.mock.calls.length).toBe(1)
+        expect(mockReachBottomCallback.mock.calls.length).toBe(1)
+        expect(mockScrollCallback.mock.calls.length).toBe(3)
+    })
+})

test/pos.conflict.test.js

@@ -0,0 +1,75 @@
+import VirtualList from '../index'
+import { mount } from '@vue/test-utils'
+import { getIndexList } from './util'
+
+// for testing props: start and offset conflict.
+const theme = 'position-conflict-test'
+
+describe(theme, () => {
+    const initSize = 40
+    const initRemian = 6
+    const initStart = 30
+    const initOffset = 5678
+    const listCount = 1000
+
+    const wrapper = mount({
+        template: `
+            <div id="app" style="width: 300px;">
+                <virtual-list class="list"
+                    :size="size"
+                    :remain="remian"
+                    :offset="offset"
+                    :start="start"
+                >
+                    <div class="for-item"
+                        v-for="(item, index) in items"
+                        :key="index"
+                        :style="itemStyle"
+                    >
+                        <span class="for-item-text">{{ item }}</span>
+                    </div>
+                </virtual-list>
+            </div>
+        `,
+
+        name: 'test',
+
+        components: {
+            'virtual-list': VirtualList
+        },
+
+        data () {
+            return {
+                size: initSize,
+                remian: initRemian,
+                offset: initOffset,
+                start: initStart,
+                items: getIndexList(listCount)
+            }
+        },
+
+        computed: {
+            itemStyle () {
+                return {
+                    'height': this.size + 'px',
+                    'line-height': this.size + 'px'
+                }
+            }
+        }
+    })
+
+    it(`[${theme}] check conflict.`, () => {
+        const listEl = wrapper.find('.list').vm.$el
+        const listWraperEl = listEl.querySelector('div')
+
+        const expectOutsideHeight = `${initRemian * initSize}px`
+        expect(listEl.style.height).toBe(expectOutsideHeight)
+
+        // offset will not work.
+        expect(listEl.scrollTop === initOffset).toBe(false)
+
+        // start works well.
+        const expectPaddingTop = initStart * initSize
+        expect(listWraperEl.style['padding-top']).toBe(`${expectPaddingTop}px`)
+    })
+})