Add test

Author: tangbc

jest.config.js

@@ -20,5 +20,5 @@ module.exports = {
     '.*\\.(vue)$': 'vue-jest',
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
   },
-  testRegex: 'base.test.js?$'
+  // testRegex: 'slot.test.js?$'
 }

test/base.test.js

@@ -1,8 +1,6 @@
 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'
 
@@ -42,7 +40,7 @@ describe('base', () => {
     const rootEl = vslVm.$el
     expect(rootEl.tagName.toLowerCase()).toBe(VirtualProps.rootTag.default)
 
-    const wrapperEl = rootEl.querySelector('div')
+    const wrapperEl = rootEl.firstElementChild
 
     // wrapper element and padding style
     expect(wrapperEl.getAttribute('role')).toBe('group')

test/element.test.js

@@ -0,0 +1,79 @@
+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('element', () => {
+  const Instance = mount({
+    name: 'test',
+    components: {
+      'virtual-list': VirtualList
+    },
+    template: `
+      <div id="app">
+        <virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
+          :data-key="'id'"
+          :data-sources="items"
+          :data-component="item"
+          :root-tag="'article'"
+          :wrap-tag="'section'"
+          :wrap-class="'wrap-class-aaa'"
+          :item-tag="'p'"
+          :item-class="'item-class-bbb'"
+          :item-class-add="addItemClass"
+        />
+      </div>
+    `,
+    data () {
+      return {
+        items: getDatas(1000),
+        item: Item
+      }
+    },
+    methods: {
+      addItemClass (index) {
+        return 'extra-item-' + index
+      }
+    }
+  })
+
+  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 element tag and class', () => {
+    const InstanceData = Instance.vm.$data
+    const vslVm = Instance.find('.my-list').vm
+    const rootEl = vslVm.$el
+    expect(rootEl.tagName.toLowerCase()).toBe('article')
+
+    const wrapperEl = rootEl.firstElementChild
+
+    // 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.className).toBe('wrap-class-aaa')
+    expect(wrapperEl.tagName.toLowerCase()).toBe('section')
+
+    // 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(`item-class-bbb extra-item-${i}`)
+      expect(itemEl.tagName.toLowerCase()).toBe('p')
+
+      // 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/slot.test.js

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils'
+import VirtualList from '../src/index'
+import Item from './item.vue'
+import { getDatas } from './util'
+
+describe('slot', () => {
+  const Instance = mount({
+    name: 'test',
+    components: {
+      'virtual-list': VirtualList
+    },
+    template: `
+      <div id="app">
+        <virtual-list class="my-list" style="height: 300px; overflow-y: auto;"
+          :data-key="'id'"
+          :data-sources="items"
+          :data-component="item"
+          :header-tag="'section'"
+          :header-class="'head1'"
+          :footer-tag="'article'"
+          :footer-class="'foot1'"
+        >
+          <div slot="header">Header</div>
+          <div slot="footer">Footer</div>
+        </virtual-list>
+      </div>
+    `,
+    data () {
+      return {
+        items: getDatas(1000),
+        item: Item
+      }
+    },
+    methods: {
+      addItemClass (index) {
+        return 'extra-item-' + index
+      }
+    }
+  })
+
+  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 slot build', () => {
+    const vslVm = Instance.find('.my-list').vm
+    const rootEl = vslVm.$el
+    const wrapperEl = rootEl.querySelector('[role="group"]')
+    const headerEl = rootEl.querySelector('[role="header"]')
+    const footerEl = rootEl.querySelector('[role="footer"]')
+
+    // wrapper shoud be in middle between header and footer
+    expect(wrapperEl.previousElementSibling).toBe(headerEl)
+    expect(wrapperEl.nextElementSibling).toBe(footerEl)
+
+    expect(!!headerEl).toBe(true)
+    expect(!!footerEl).toBe(true)
+
+    expect(headerEl.className).toBe('head1')
+    expect(headerEl.tagName.toLowerCase()).toBe('section')
+    expect(headerEl.firstElementChild.textContent).toBe('Header')
+
+    expect(footerEl.className).toBe('foot1')
+    expect(footerEl.tagName.toLowerCase()).toBe('article')
+    expect(footerEl.firstElementChild.textContent).toBe('Footer')
+  })
+})