[unit test] add test/ and travis CI

Ken Berkeley · Ken Berkeley · commit ce8d9d48424f · 2017-09-20T12:46:26.000+08:00
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,8 @@
 // http://eslint.org/docs/user-guide/configuring
 {
+  parserOptions: {
+    ecmaVersion: 2017 // support async/await
+  },
   globals: {
     $: false // for jQuery
   },
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,3 @@
+sudo: false
+language: node_js
+node_js: stable
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 
 [![npm version][npm-v-img]][npm-url]
 [![npm download][npm-dl-img]][npm-url]
+[![build][build-img]][build-url]
 
 > The best Datatable for Vue.js 2.x which never sucks  
 > `npm i -S vue2-datatable-component`
@@ -12,3 +13,5 @@
 [npm-url]: https://www.npmjs.com/package/vue2-datatable-component
 [npm-v-img]: https://img.shields.io/npm/v/vue2-datatable-component.svg
 [npm-dl-img]: https://img.shields.io/npm/dm/vue2-datatable-component.svg
+[build-img]: https://travis-ci.org/onewaytech/vue-datatable-component.svg?branch=master
+[build-url]: https://travis-ci.org/onewaytech/vue-datatable-component
diff --git a/dist/min.js b/dist/min.js
diff --git a/doc/_coverpage.md b/doc/_coverpage.md
@@ -2,9 +2,12 @@
 
 [![npm version][npm-v-img]][npm-url]
 [![npm download][npm-dl-img]][npm-url]
+[![build][build-img]][build-url]
 
 [The best Datatable for Vue.js 2.x which never sucks ↓](README)
 
 [npm-url]: https://www.npmjs.com/package/vue2-datatable-component
 [npm-v-img]: https://img.shields.io/npm/v/vue2-datatable-component.svg
 [npm-dl-img]: https://img.shields.io/npm/dm/vue2-datatable-component.svg
+[build-img]: https://travis-ci.org/onewaytech/vue-datatable-component.svg?branch=master
+[build-url]: https://travis-ci.org/onewaytech/vue-datatable-component
diff --git a/doc/en/i18n.md b/doc/en/i18n.md
@@ -66,13 +66,13 @@ Apply to [`src/LimitSelect.vue`](https://github.com/OneWayTech/vue2-datatable/bl
 <template>
   <label name="LimitSelect">
     {{ $i18nForDatatable('show') }}
-    <select class="form-control input-sm -limit-select" v-model="limit">
+    <select class="form-control input-sm -limit-select" v-model="query.limit"
+      @change="query.offset = 0 /* reset to the first page */">
       <option v-for="i in options" :value="i">{{ i }}</option>
     </select>
     {{ $i18nForDatatable('items per page') }}
   </label>
 </template>
-...
 ```
 
 Easy, right?
diff --git a/doc/zh-cn/i18n.md b/doc/zh-cn/i18n.md
@@ -66,13 +66,13 @@ export default Datatable
 <template>
   <label name="LimitSelect">
     {{ $i18nForDatatable('show') }}
-    <select class="form-control input-sm -limit-select" v-model="limit">
+    <select class="form-control input-sm -limit-select" v-model="query.limit"
+      @change="query.offset = 0 /* reset to the first page */">
       <option v-for="i in options" :value="i">{{ i }}</option>
     </select>
     {{ $i18nForDatatable('items per page') }}
   </label>
 </template>
-...
 ```
 
 很简单吧？
diff --git a/examples/dist/client.05dc68df.js b/examples/dist/client.05dc68df.js
diff --git a/examples/dist/index.html b/examples/dist/index.html
@@ -12,5 +12,5 @@
   
 <script src="//unpkg.com/jquery@2.1.4/dist/jquery.min.js"></script>
 <script src="//unpkg.com/bootstrap@3.3.5/dist/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="client.e57b87a6.js"></script></body>
+<script type="text/javascript" src="client.05dc68df.js"></script></body>
 </html>
diff --git a/examples/src/_mockData/dataSource.js b/examples/src/_mockData/dataSource.js
@@ -6,9 +6,9 @@ const total = 120 // how many rows to generate
 const getRandomUid = () => Random.integer(1, total)
 
 const users = Array(total).fill().map((item, idx) => ({
-  uid: idx,
+  uid: idx + 1,
   name: Random.name(),
-  age: Random.integer(0, 100),
+  age: Random.integer(1, 100),
   email: Random.email().substr(0, 22),
   friends: without(
     uniq(Array(getRandomUid()).fill().map(() => getRandomUid())),
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue2-datatable-component",
   "description": "The best Datatable for Vue.js 2.x which never sucks",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "main": "dist/min.js",
   "module": "src/index.js",
   "author": "Ken Berkeley <kenberkeley@foxmail.com>",
@@ -15,8 +15,11 @@
     "build": "npm run build:examples && npm run build:lib",
     "build:examples": "vue build --config build/examples.js --prod",
     "build:lib": "vue build --config build/lib.js --prod",
-    "doc": "docsify serve doc",
-    "lint": "eslint -f node_modules/eslint-friendly-formatter build/** examples/src/** locale/** src/**"
+    "prebuild": "npm run lint",
+    "lint": "eslint -f node_modules/eslint-friendly-formatter build/** examples/src/** locale/** src/** test/**",
+    "test": "ava",
+    "pretest": "npm run lint",
+    "doc": "docsify serve doc"
   },
   "repository": {
     "type": "git",
@@ -32,7 +35,10 @@
     "replace-with": "^1.0.0"
   },
   "devDependencies": {
+    "ava": "^0.22.0",
+    "avoriaz": "^4.1.0",
     "babel-polyfill": "^6.23.0",
+    "browser-env": "^3.2.0",
     "clean-webpack-plugin": "^0.1.16",
     "docsify-cli": "^4.1.10",
     "eslint": "^4.6.1",
@@ -43,9 +49,20 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-vue": "^3.13.0",
+    "jquery": "^3.2.1",
+    "localstorage-polyfill": "^1.0.1",
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.18.1",
+    "p-immediate": "^2.1.0",
+    "require-extension-hooks": "^0.3.0",
+    "require-extension-hooks-babel": "^0.1.1",
+    "require-extension-hooks-vue": "^0.4.0",
     "vue-cli": "^2.8.2"
   },
+  "ava": {
+    "require": [
+      "./test/.setup.js"
+    ]
+  },
   "license": "MIT"
 }
diff --git a/src/LimitSelect.vue b/src/LimitSelect.vue
@@ -1,7 +1,8 @@
 <template>
   <label name="LimitSelect">
     {{ $i18nForDatatable('show') }}
-    <select class="form-control input-sm -limit-select" v-model="limit">
+    <select class="form-control input-sm -limit-select" v-model="query.limit"
+      @change="query.offset = 0 /* reset to the first page */">
       <option v-for="i in options" :value="i">{{ i }}</option>
     </select>
     {{ $i18nForDatatable('items per page') }}
@@ -12,18 +13,9 @@ export default {
   props: {
     query: { type: Object, required: true }
   },
-  data () {
-    return {
-      limit: this.query.limit,
-      options: [10, 20, 40, 80, 100]
-    }
-  },
-  watch: {
-    limit (v) {
-      this.query.limit = v
-      this.query.offset = 0 // reset to the first page
-    }
-  }
+  data: () => ({
+    options: [10, 20, 40, 80, 100]
+  })
 }
 </script>
 <style>
diff --git a/test/.setup.js b/test/.setup.js
@@ -0,0 +1,24 @@
+// mainly refers to https://github.com/eddyerburgh/avoriaz-ava-example
+// also thanks to https://knpw.rs/blog/testing-vue-in-node/
+require('babel-polyfill')
+require('browser-env')()
+require('localstorage-polyfill')
+
+// eliminate verbose info in examples/src/_mockData/index.js
+function noop() {}
+['group', 'groupEnd', 'info', 'clear'].forEach(fn => {
+  console[fn] = noop
+})
+
+global.$ = require('jquery')
+
+global.Vue = require('vue')
+Vue.config.silent = true
+Vue.config.productionTip = false
+Vue.use(require('../dist/min').default) // Vue.use(Datatable)
+
+const hooks = require('require-extension-hooks')
+// Setup vue files to be processed by `require-extension-hooks-vue`
+hooks('vue').plugin('vue').push()
+// Setup vue and js files to be processed by `require-extension-hooks-babel`
+hooks(['vue', 'js']).plugin('babel').push()
diff --git a/test/Advanced.spec.js b/test/Advanced.spec.js
@@ -0,0 +1,75 @@
+import test from 'ava'
+import { mount } from 'avoriaz'
+import nextTick from 'p-immediate'
+import Advanced from '../examples/src/Advanced/index.vue'
+import isColVisible from '../src/_utils/isColVisible'
+
+test.beforeEach(t => {
+  const wrapper = mount(Advanced)
+  const { vm } = wrapper
+  Object.assign(t.context, { vm, wrapper })
+})
+
+test('HeaderSettings: the visible columns should be checked', t => {
+  const { wrapper, vm } = t.context
+
+  const labelsOfvisibleColumns = vm.columns.filter(isColVisible).map(col => col.label || col.title)
+
+  const labelsOfRenderVisibleColumns = wrapper
+    .find('div[name=HeaderSettings] ul[name=ColumnGroup] > li > input[type=checkbox]:checked + label')
+    .map(el => el.text().trim())
+
+  t.deepEqual(labelsOfvisibleColumns.sort(), labelsOfRenderVisibleColumns.sort())
+})
+
+test('HeaderSettings: if column[i].visible\'s type is String, then it could not be toggled', t => {
+  const { wrapper, vm } = t.context
+
+  const labelsOfColumnsNotAllowToToggle = vm.columns
+    .filter(col => typeof col.visible === 'string')
+    .map(col => col.label || col.title)
+
+  const labelsOfRenderColumnsNotAllowToToggle = wrapper
+    .find('div[name=HeaderSettings] ul[name=ColumnGroup] > li > input[type=checkbox]:disabled + label')
+    .map(el => el.text().trim())
+
+  t.deepEqual(labelsOfColumnsNotAllowToToggle.sort(), labelsOfRenderColumnsNotAllowToToggle.sort())
+})
+
+test('MultiSelect', async t => {
+  const { wrapper, vm } = t.context
+  await nextTick() // wait for mockData
+
+  const [$master, ...$slaves] = wrapper.find('input[name=MultiSelect]')
+
+  /* *** user behaviors *** */
+  $master.trigger('click') // select all
+  t.is(vm.selection.length, vm.query.limit) // 10
+
+  $slaves[0].trigger('change')
+  $slaves[1].trigger('change')
+  t.is(vm.selection.length, 8)
+
+  /* *** programmatic behavior  *** */
+  vm.selection = vm.data.slice(0, 3)
+  await nextTick()
+  t.is(wrapper.find('input[name=MultiSelect]:checked').length, 3)
+})
+
+// TODO: wrapper.contains() must be passed a valid CSS selector or a Vue constructor
+// test('thComp / tdComp / nested components', async t => {
+//   const { wrapper, vm } = t.context
+//   await nextTick() // wait for mockData
+
+//   const { FilterTh, Opt, DisplayRow } = vm.$options.components
+  
+//   // thComp
+//   t.true(wrapper.contains(FilterTh))
+
+//   // tdComp
+//   t.true(wrapper.contains(tdComp))
+
+//   // nested-DisplayRow.vue
+//   wrapper.find('td i.fa-list-ul')[0].trigger('click')
+//   t.true(wrapper.contains(DisplayRow))
+// })
diff --git a/test/Basic.spec.js b/test/Basic.spec.js
@@ -0,0 +1,100 @@
+import test from 'ava'
+import { pick } from 'lodash'
+import { mount } from 'avoriaz'
+import nextTick from 'p-immediate'
+import Basic from '../examples/src/Basic/index.vue'
+
+test.beforeEach(t => {
+  const wrapper = mount(Basic)
+  const { vm } = wrapper
+  Object.assign(t.context, { vm, wrapper })
+})
+
+test('render properly', async t => {
+  const { wrapper, vm } = t.context
+
+  const renderTitles = wrapper.find('th').map(el => el.text().trim())
+  const origTitles = vm.columns.map(col => col.title)
+  t.deepEqual(renderTitles, origTitles)
+
+  await nextTick()
+
+  const origFields = vm.columns.map(col => col.field)
+  wrapper.find('tbody > tr').forEach((tr, idx) => {
+    // e.g. [ '1', 'Jennifer Robinson', '34', 'h.fmx@pedfgjpwe.gl', 'Russia' ]
+    let renderRowData = tr.find('td').map(td => {
+      let text = td.text().trim()
+      return ~~text ? +text : text // convert to number if possible
+    })
+    let origRowData = Object.values(pick(vm.data[idx], origFields))
+
+    t.deepEqual(renderRowData.sort(), origRowData.sort())
+  })
+})
+
+test('sort', async t => {
+  const { wrapper, vm } = t.context
+
+  const [uidSortBtn, ageSortBtn] = wrapper.find('a[name=HeadSort]')
+  const [uidSort, ageSort] = wrapper.find('a[name=HeadSort] > i')
+
+  /* *** user behaviors *** */
+  uidSortBtn.trigger('click')
+  t.deepEqual(
+    { limit: 10, offset: 0, sort: 'uid', order: 'desc' },
+    vm.query
+  )
+  await nextTick()
+  t.true(uidSort.hasClass('fa-sort-desc'))
+
+  ageSortBtn.trigger('click')
+  t.deepEqual(
+    { limit: 10, offset: 0, sort: 'age', order: 'desc' },
+    vm.query
+  )
+  await nextTick()
+  t.true(ageSort.hasClass('fa-sort-desc'))
+
+  ageSortBtn.trigger('click')
+  t.deepEqual(
+    { limit: 10, offset: 0, sort: 'age', order: 'asc' },
+    vm.query
+  )
+  await nextTick()
+  t.true(ageSort.hasClass('fa-sort-asc'))
+
+  /* *** programmatic behavior  *** */
+  Object.assign(vm.query, { sort: 'uid', order: 'asc' })
+  await nextTick()
+  t.true(uidSort.hasClass('fa-sort-asc'))
+})
+
+test('pagination relevant', async t => {
+  const { wrapper, vm } = t.context
+  const $LimitSelect = wrapper.find('label[name=LimitSelect] > select')[0]
+
+  /* *** programmatic behaviors  *** */
+  Object.assign(vm.query, { limit: 20, offset: 20 })
+  await nextTick()
+  t.is(
+    +$LimitSelect.value(),
+    20
+  )
+  t.is(
+    +wrapper.find('ul[name=Pagination] > li.active > a')[0].text().trim(),
+    2
+  )
+  
+  /* *** user behaviors *** */
+  vm.query.limit = 10 // TODO：simulate change event on select (vnode)
+  t.is(vm.query.limit, 10)
+  // t.is(vm.query.offset, 0) // reset to the first page
+
+  wrapper.find('ul[name=Pagination] > li > a').forEach(el => {
+    // click the 3rd page
+    if (+el.text().trim() === 3) {
+      el.trigger('click')
+    }
+  })
+  t.is(vm.query.offset, 20)
+})

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,8 @@`
`1`	`1`	`// http://eslint.org/docs/user-guide/configuring`
`2`	`2`	`{`
	`3`	`+ parserOptions: {`
	`4`	`+ ecmaVersion: 2017 // support async/await`
	`5`	`+ },`
`3`	`6`	`globals: {`
`4`	`7`	`$: false // for jQuery`
`5`	`8`	`},`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+sudo: false`
	`2`	`+language: node_js`
	`3`	`+node_js: stable`