Add base test

Author: tangbc

test/base.test.js

@@ -1,30 +1,69 @@
 import { mount } from '@vue/test-utils'
+
 import VirtualList from '../src/index'
+import { VirtualProps } from '../src/props'
+
+import Item from './item.vue'
+import { getDatas } from './util'
 
 describe('base', () => {
-  const wrapper = mount({
+  const Instance = mount({
     name: 'test',
+    components: {
+      'virtual-list': VirtualList
+    },
     template: `
       <div id="app">
-        <virtual-list class="list" style="height: 300px; overflow-y: auto;"
-          :size="50"
-          :keeps="20"
+        <virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
+          :data-key="'id'"
+          :data-sources="items"
+          :data-component="item"
         />
       </div>
     `,
-    components: {
-      'virtual-list': VirtualList
-    },
     data () {
       return {
-        items: []
+        items: getDatas(1000),
+        item: Item
       }
     }
   })
 
-  it('check mount success', () => {
-    expect(wrapper.name()).toBe('test')
-    expect(wrapper.is('div')).toBe(true)
-    expect(wrapper.isVueInstance()).toBe(true)
+  it('check mount', () => {
+    expect(Instance.name()).toBe('test')
+    expect(Instance.is('div')).toBe(true)
+    expect(Instance.isVueInstance()).toBe(true)
+    expect(Instance.find('.my-list').exists()).toBe(true)
+  })
+
+  it('check list build by default', () => {
+    const InstanceData = Instance.vm.$data
+    const vslVm = Instance.find('.my-list').vm
+    const rootEl = vslVm.$el
+    expect(rootEl.tagName.toLowerCase()).toBe(VirtualProps.rootTag.default)
+
+    const wrapperEl = rootEl.querySelector('div')
+
+    // wrapper element and padding style
+    expect(wrapperEl.getAttribute('role')).toBe('group')
+    expect(!!rootEl.style.padding).toBe(false)
+    expect(!!wrapperEl.style.padding).toBe(true)
+    expect(wrapperEl.tagName.toLowerCase()).toBe(VirtualProps.wrapTag.default)
+
+    // render number keeps by default
+    expect(wrapperEl.childNodes.length).toBe(VirtualProps.keeps.default)
+
+    // items render content
+    for (let i = 0; i < wrapperEl.childNodes.length; i++) {
+      const itemEl = wrapperEl.childNodes[i]
+      expect(itemEl.className).toBe('')
+      expect(itemEl.tagName.toLowerCase()).toBe(VirtualProps.itemTag.default)
+
+      // item inner render (see ./item.vue)
+      const itemInnerEl = itemEl.firstElementChild
+      expect(itemInnerEl.className).toBe('inner')
+      expect(itemInnerEl.querySelector('.index').textContent).toBe(`${i}`)
+      expect(itemInnerEl.querySelector('.source').textContent).toBe(InstanceData.items[i].text)
+    }
   })
 })

test/item.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="inner">
+    <span class="index">{{ index }}</span>
+    <span class="source">{{ source.text }}</span>
+    <span class="other">{{ otherProp }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'item',
+
+  props: {
+    index: {
+      type: Number
+    },
+    source: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    otherProp: {
+      type: String
+    }
+  }
+}
+</script>

test/util.js

@@ -0,0 +1,10 @@
+export function getDatas (counts) {
+  const data = []
+  for (let index = 0; index < counts; index++) {
+    data.push({
+      id: String(index),
+      text: Math.random().toString(16).substr(8)
+    })
+  }
+  return data
+}