test: add unit test

Author: laomao800

.gitignore

@@ -5,6 +5,9 @@ node_modules
 .env.local
 .env.*.local
 
+# Dev/Build Artifacts
+/tests/unit/coverage/
+
 # Log files
 npm-debug.log*
 yarn-debug.log*

babel.config.js

@@ -1,5 +1,18 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ]
+  ],
+  env: {
+    test: {
+      presets: [
+        [
+          '@vue/app',
+          {
+            useBuiltIns: 'usage',
+            modules: 'commonjs'
+          }
+        ]
+      ]
+    }
+  }
 }

jest.config.js

@@ -14,5 +14,6 @@ module.exports = {
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
   ],
   collectCoverageFrom: ['src/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
   testURL: 'http://localhost/'
 }

package.json

@@ -16,7 +16,7 @@
     "build:example": "vue-cli-service build --dest demo",
     "build:lib": "vue-cli-service build --target lib --name vue-item-list-selector src/index.vue",
     "lint": "cross-env NODE_ENV=production vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit --coverage",
     "release": "node scripts/release.js"
   },
   "author": "laomao800 <[email protected]>",

src/index.vue

@@ -108,13 +108,8 @@ export default {
         )
       }
     },
-    selectionArr: {
-      get() {
-        return this.multiple ? this.selection : [this.selection]
-      },
-      set(val) {
-        this.syncSelection(val)
-      }
+    selectionArr() {
+      return this.multiple ? this.selection : [this.selection]
     }
   },
 
@@ -135,7 +130,7 @@ export default {
 
     // 重置组件状态
     reset() {
-      this.debounceKeyword = ''
+      this.keyword = ''
       this.syncSelection([])
     },
 
@@ -170,14 +165,18 @@ export default {
     },
 
     activePrevOptions() {
-      if (this.optionActiveIndex > 0) {
+      if (this.optionActiveIndex === 0) {
+        this.optionActiveIndex = this.filtedData.length - 1
+      } else {
         this.optionActiveIndex--
       }
     },
 
     activeNextOptions() {
       if (this.optionActiveIndex < this.filtedData.length - 1) {
         this.optionActiveIndex++
+      } else {
+        this.optionActiveIndex = 0
       }
     },
 
@@ -217,6 +216,7 @@ export default {
 
     // 添加当前组件选项值，在原有已选项上添加
     addSelection(filterFunc) {
+      // istanbul ignore if
       if (!this.multiple) {
         // 单选模式下无法使用本方法
         throw Error(

tests/unit/basic.spec.js

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils'
+import ItemListSelector from '@/index.vue'
+
+describe('Basic', () => {
+  it('Data check', () => {
+    const wrapper = mount(ItemListSelector)
+    expect(wrapper.vm.keyword).toEqual('')
+    expect(wrapper.vm.optionActiveIndex).toEqual(-1)
+  })
+
+  it('Reset data check', () => {
+    const wrapper = mount(ItemListSelector)
+    wrapper.setData({
+      keyword: 'test'
+    })
+    wrapper.setProps({
+      selection: ['test']
+    })
+    wrapper.vm.reset()
+    const emitted = wrapper.emittedByOrder()
+    expect(wrapper.vm.keyword).toEqual('')
+    expect(emitted.length).toEqual(1)
+    expect(emitted[0].name).toEqual('selection-change')
+    expect(emitted[0].args[0]).toEqual([])
+  })
+
+  it('无数据空白组件', () => {
+    const wrapper = mount(ItemListSelector)
+    expect(wrapper.findAll('.item-selector__option').length).toEqual(0)
+  })
+})

tests/unit/event.spec.js

@@ -0,0 +1,77 @@
+import { mount } from '@vue/test-utils'
+import ItemListSelector from '@/index.vue'
+import getTestData from './getTestData.js'
+
+describe('Events', () => {
+  const wrapper = mount(ItemListSelector, {
+    propsData: {
+      data: getTestData(),
+      selection: []
+    }
+  })
+  const $input = wrapper.find('.item-selector__searchbar input')
+
+  it('鼠标点击选项', () => {
+    wrapper
+      .findAll('.item-selector__option')
+      .at(0)
+      .element.click()
+    wrapper.setProps({ selection: wrapper.emitted()['selection-change'][0][0] })
+    wrapper
+      .findAll('.item-selector__option')
+      .at(1)
+      .element.click()
+    wrapper.setProps({ selection: wrapper.emitted()['selection-change'][1][0] })
+    wrapper
+      .findAll('.item-selector__option')
+      .at(1)
+      .element.click()
+    wrapper.setProps({ selection: wrapper.emitted()['selection-change'][2][0] })
+    expect(wrapper.vm.selection.length).toEqual(1)
+    expect(wrapper.vm.selection[0]).toEqual(wrapper.vm.data[0])
+    expect(wrapper.emittedByOrder().map(r => r.name)).toEqual([
+      'selection-change',
+      'selection-change',
+      'selection-change'
+    ])
+  })
+
+  it('下箭头移动高亮选项', () => {
+    wrapper.setData({
+      optionActiveIndex: 2
+    })
+    expect(wrapper.findAll('.item-selector__option--active').length).toEqual(1)
+    $input.trigger('keyup.down')
+    expect(wrapper.vm.optionActiveIndex).toEqual(3)
+    $input.trigger('keyup.down')
+    expect(wrapper.vm.optionActiveIndex).toEqual(4)
+  })
+
+  it('在底部选项边缘，下箭头移动高亮选项到第一项', () => {
+    wrapper.setData({
+      optionActiveIndex: wrapper.vm.filtedData.length - 1
+    })
+    $input.trigger('keyup.down')
+    expect(wrapper.vm.optionActiveIndex).toEqual(0)
+  })
+
+  it('上箭头移动高亮选项', () => {
+    wrapper.setData({
+      optionActiveIndex: 2
+    })
+    $input.trigger('keyup.up')
+    expect(wrapper.vm.optionActiveIndex).toEqual(1)
+    $input.trigger('keyup.up')
+    expect(wrapper.vm.optionActiveIndex).toEqual(0)
+  })
+
+  it('在底部选项边缘，上箭头移动高亮选项到第一项', () => {
+    wrapper.setData({
+      optionActiveIndex: 0
+    })
+    $input.trigger('keyup.up')
+    expect(wrapper.vm.optionActiveIndex).toEqual(
+      wrapper.vm.filtedData.length - 1
+    )
+  })
+})

tests/unit/example.spec.js

@@ -0,0 +1,24 @@
+export default function getTestData() {
+  return [
+    { label: 'data-01', value: '01' },
+    { label: 'data-02', value: '02' },
+    { label: 'data-03', value: '03' },
+    { label: 'data-04', value: '04' },
+    { label: 'data-05', value: '05' },
+    { label: 'data-06', value: '06' },
+    { label: 'data-07', value: '07' },
+    { label: 'data-08', value: '08' },
+    { label: 'data-09', value: '09' },
+    { label: 'data-10', value: '10' },
+    { label: 'data-11', value: '11' },
+    { label: 'data-12', value: '12' },
+    { label: 'data-13', value: '13' },
+    { label: 'data-14', value: '14' },
+    { label: 'data-15', value: '15' },
+    { label: 'data-16', value: '16' },
+    { label: 'data-17', value: '17' },
+    { label: 'data-18', value: '18' },
+    { label: 'data-19', value: '19' },
+    { label: 'data-20', value: '20' }
+  ]
+}

tests/unit/getTestData.js

@@ -0,0 +1,27 @@
+describe('markMatch', () => {
+  const markMatch = require('@/markMatch').default
+  const testText = '1234567890'
+
+  it('Empty keyword', () => {
+    const markResult = markMatch(testText, '')
+    expect(markResult).toEqual(testText)
+  })
+
+  it('Unmatch', () => {
+    const markResult = markMatch(testText, 'a')
+    expect(markResult).toEqual(testText)
+  })
+
+  it('Mark match', () => {
+    const markResult = markMatch(testText, '3')
+    expect(markResult).toEqual('12<span class="match">3</span>4567890')
+  })
+
+  it('Config', () => {
+    const markResult = markMatch(testText, '3', {
+      tag: 'div',
+      className: 'keyword'
+    })
+    expect(markResult).toEqual('12<div class="keyword">3</div>4567890')
+  })
+})

tests/unit/markMatch.spec.js

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils'
+import ItemListSelector from '@/index.vue'
+import getTestData from './getTestData.js'
+
+describe('Methods', () => {
+  it('setSelection', () => {
+    const wrapper = mount(ItemListSelector, {
+      propsData: {
+        data: getTestData()
+      }
+    })
+    const filterFunc = r => r.value.toString()[0] === '0'
+    wrapper.vm.setSelection(filterFunc)
+    expect(wrapper.emittedByOrder().length).toEqual(1)
+    expect(wrapper.emittedByOrder()[0].name).toEqual('selection-change')
+    expect(wrapper.emittedByOrder()[0].args[0].every(filterFunc)).toBeTruthy()
+  })
+
+  it('addSelection', () => {
+    const wrapper = mount(ItemListSelector, {
+      propsData: {
+        data: getTestData()
+      }
+    })
+    wrapper.vm.addSelection(r => r.value.toString() === '10')
+    wrapper.vm.addSelection(r => r.value.toString() === '20')
+    expect(wrapper.emitted()['selection-change'].length).toEqual(2)
+    expect(
+      wrapper.emitted()['selection-change'][0][0][0].value.toString()
+    ).toEqual('10')
+    expect(
+      wrapper.emitted()['selection-change'][1][0][0].value.toString()
+    ).toEqual('20')
+  })
+
+  it('removeSelection', () => {
+    const wrapper = mount(ItemListSelector, {
+      propsData: {
+        data: getTestData()
+      }
+    })
+    wrapper.vm.addSelection(r => r.value.toString() === '10')
+    wrapper.setProps({
+      selection: wrapper.emitted()['selection-change'][0][0]
+    })
+    wrapper.vm.removeSelection(r => r.value.toString() === '10')
+    expect(wrapper.emitted()['selection-change'].length).toEqual(2)
+    expect(
+      wrapper.emitted()['selection-change'][0][0][0].value.toString()
+    ).toEqual('10')
+    expect(wrapper.emitted()['selection-change'][1][0]).toEqual([])
+  })
+})