Added coverage but not sure how to test window scrolling

Stormtv · Stormtv · commit c823d0664dc5 · 2019-05-07T19:17:29.000-04:00
diff --git a/demos/page-mode/App.vue b/demos/page-mode/App.vue
@@ -0,0 +1,80 @@
+<template>
+<div class="app">
+    <GithubCorner path="/item-mode" />
+    <div class="container">
+        <Header title="item-mode"
+            :desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
+            :start-index="start"
+            :on-data-change="onHeaderDataChange"
+        />
+        <div class="main">
+            <virtual-list class="list"
+                :size="size"
+                :remain="remain"
+                :bench="30"
+                :start="start"
+                :pagemode="true"
+                :item="item"
+                :itemcount="itemCount"
+                :itemprops="getItemProps"
+            />
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import Item from '../common/Item.vue'
+import VirtualList from 'vue-virtual-scroll-list'
+import { countStorage, getRandomUser } from '../common/util'
+
+const remain = 6
+const itemSize = 80
+const itemCount = countStorage.get()
+
+let userInfoList = []
+for (let i = 0; i < itemCount; i++) {
+    userInfoList.push(getRandomUser())
+}
+
+export default {
+    name: 'App',
+
+    components: {
+        'virtual-list': VirtualList
+    },
+
+    data () {
+        return {
+            remain,
+            start: 0,
+            size: itemSize,
+            item: Item,
+            itemCount: itemCount
+        }
+    },
+
+    methods: {
+        getItemProps (itemIndex) {
+            return {
+                key: itemIndex,
+                props: {
+                    height: itemSize,
+                    index: itemIndex,
+                    info: userInfoList[itemIndex] || {}
+                }
+            }
+        },
+
+        onHeaderDataChange (type, value) {
+            if (type === 'start') {
+                this.start = value
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import '../common/app.less';
+</style>
diff --git a/demos/page-mode/build.js b/demos/page-mode/build.js
diff --git a/demos/page-mode/index.html b/demos/page-mode/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <title>item-mode demo of vue-virtual-scroll-list</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="build.js"></script>
+</body>
+</html>
diff --git a/demos/page-mode/main.js b/demos/page-mode/main.js
@@ -0,0 +1,4 @@
+import App from './App.vue'
+import createApp from '../common/createApp'
+
+createApp(App)
diff --git a/test/pagemode.test.js b/test/pagemode.test.js
@@ -0,0 +1,68 @@
+import VirtualList from '../src/index'
+import { mount } from '@vue/test-utils'
+import { getIndexList } from './util'
+
+// for testing pagemode build.
+const theme = 'pagemode-test'
+
+describe(theme, () => {
+    const listCount = 1000
+    const wrapper = mount({
+        template: `
+            <div id="app" style="width: 300px;">
+                <virtual-list class="list"
+                    :size="40"
+                    :remain="6"
+                    ref="vlist"
+                    :pagemode="true"
+                >
+                    <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 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
+        const expectPaddingBottom = listCount * 40 - expectOutsideHeight * 2
+        expect(listEl.style['padding-top']).toBe(`0px`)
+        expect(listEl.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)
+        }
+    })
+})
