chore: update test deps and conf (#14735)

* test: run in headless chrome

* chore: update travis node version

* chore: upgrade test deps

* test: fix tests

* test: support async await

* test: fix tree test case

* test: fix tree test cases

* test: fix popper test case

.eslintrc

 {
-  "env": {
-    "mocha": true
-  },
   "globals": {
-    "ga": true,
-    "expect": true,
-    "sinon": true
+    "ga": true
   },
   "plugins": ["html", "json"],
   "extends": "elemefe",

.travis.yml

 sudo: false
 language: node_js
-node_js: 8
+node_js: 10
+addons:
+  chrome: stable
 before_install:
-- export CHROME_BIN=chromium-browser
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
 - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
 - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
 - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"

package.json

@@ -81,10 +81,11 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",
-    "chai": "^3.5.0",
+    "babel-regenerator-runtime": "^6.5.0",
+    "chai": "^4.2.0",
     "chokidar": "^1.7.0",
     "copy-webpack-plugin": "^5.0.0",
-    "coveralls": "^2.11.14",
+    "coveralls": "^3.0.3",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
     "css-loader": "^2.1.0",
@@ -104,20 +105,20 @@
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",
     "json-templater": "^1.0.4",
-    "karma": "^1.3.0",
+    "karma": "^4.0.1",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.2.0",
-    "karma-sinon-chai": "^1.2.4",
+    "karma-coverage": "^1.1.2",
+    "karma-mocha": "^1.3.0",
+    "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^3.0.0",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-webpack": "^3.0.5",
     "markdown-it": "^8.4.1",
     "markdown-it-anchor": "^5.0.2",
     "markdown-it-chain": "^1.3.0",
     "markdown-it-container": "^2.0.0",
     "mini-css-extract-plugin": "^0.4.1",
-    "mocha": "^3.1.1",
+    "mocha": "^6.0.2",
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "perspective.js": "^1.0.0",
@@ -126,8 +127,8 @@
     "rimraf": "^2.5.4",
     "sass-loader": "^7.1.0",
     "select-version-cli": "^0.0.2",
-    "sinon": "^1.17.6",
-    "sinon-chai": "^2.8.0",
+    "sinon": "^7.2.7",
+    "sinon-chai": "^3.3.0",
     "style-loader": "^0.23.1",
     "transliteration": "^1.1.11",
     "uglifyjs-webpack-plugin": "^2.1.1",

test/.eslintrc

+{
+  "env": {
+    "mocha": true,
+    "es6": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017
+  }
+}

test/unit/index.js

-// Polyfill fn.bind() for PhantomJS
-/* eslint-disable no-extend-native */
-Function.prototype.bind = require('function-bind');
+require('babel-regenerator-runtime'); // add regenerator support for async await
 require('packages/theme-chalk/lib/index.css');
 
 // require all test files (files that ends with .spec.js)

test/unit/karma.conf.js

@@ -2,13 +2,7 @@ const webpackConfig = require('../../build/webpack.test');
 
 module.exports = function(config) {
   const configuration = {
-    browsers: ['Chrome'],
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
+    browsers: ['ChromeHeadless'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
@@ -33,9 +27,5 @@ module.exports = function(config) {
     }
   };
 
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
   config.set(configuration);
 };

test/unit/specs/dialog.spec.js

@@ -100,14 +100,14 @@ describe('Dialog', () => {
         };
       }
     }, true);
-    const dialog = vm.$children[0];
-    expect(dialog.$el.style.display).to.equal('none');
+    const dialogEl = vm.$children[0].$el;
+    expect(getComputedStyle(dialogEl).display).to.equal('none');
     vm.visible = true;
     setTimeout(() => {
-      expect(dialog.$el.style.display).to.not.equal('none');
+      expect(getComputedStyle(dialogEl).display).to.not.equal('none');
       vm.visible = false;
       setTimeout(() => {
-        expect(dialog.$el.style.display).to.equal('none');
+        expect(getComputedStyle(dialogEl).display).to.equal('none');
         done();
       }, 400);
     }, 50);

test/unit/specs/input.spec.js

-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, wait, waitImmediate } from '../util';
 
 describe('Input', () => {
   let vm;
@@ -100,7 +100,7 @@ describe('Input', () => {
   });
 
   // Github issue #2836
-  it('resize', done => {
+  it('resize', async() => {
     vm = createVue({
       template: `
         <div>
@@ -111,17 +111,14 @@ describe('Input', () => {
         resize: 'none'
       }
     }, true);
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
-      vm.resize = 'horizontal';
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
-        done();
-      });
-    });
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
+    vm.resize = 'horizontal';
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
   });
 
-  it('autosize', done => {
+  it('autosize', async() => {
     vm = createVue({
       template: `
         <div>
@@ -154,14 +151,13 @@ describe('Input', () => {
     expect(limitlessSizeInput.textareaStyle.height).to.be.equal('201px');
 
     vm.textareaValue = '';
-    setTimeout(_ => {
-      expect(limitSizeInput.textareaStyle.height).to.be.equal('75px');
-      expect(limitlessSizeInput.textareaStyle.height).to.be.equal('33px');
-      done();
-    }, 200);
+
+    await wait();
+    expect(limitSizeInput.textareaStyle.height).to.be.equal('75px');
+    expect(limitlessSizeInput.textareaStyle.height).to.be.equal('33px');
   });
 
-  it('focus', done => {
+  it('focus', async() => {
     vm = createVue({
       template: `
         <el-input ref="input">
@@ -174,13 +170,11 @@ describe('Input', () => {
     vm.$refs.input.$on('focus', spy);
     vm.$refs.input.focus();
 
-    vm.$nextTick(_ => {
-      expect(spy.calledOnce).to.be.true;
-      done();
-    });
+    await waitImmediate();
+    expect(spy.calledOnce).to.be.true;
   });
 
-  it('Input contains Select and append slot', (done) => {
+  it('Input contains Select and append slot', async() => {
     vm = createVue({
       template: `
       <el-input v-model="value" clearable class="input-with-select" ref="input">
@@ -200,15 +194,14 @@ describe('Input', () => {
       }
     }, true);
     vm.$refs.input.hovering = true;
-    setTimeout(() => {
-      const suffixEl = document.querySelector('.input-with-select > .el-input__suffix');
-      expect(suffixEl).to.not.be.null;
-      expect(suffixEl.style.transform).to.not.be.empty;
-      done();
-    }, 20);
+
+    await wait();
+    const suffixEl = document.querySelector('.input-with-select > .el-input__suffix');
+    expect(suffixEl).to.not.be.null;
+    expect(suffixEl.style.transform).to.not.be.empty;
   });
 
-  it('validateEvent', done => {
+  it('validateEvent', async() => {
     const spy = sinon.spy();
     vm = createVue({
       template: `
@@ -238,10 +231,8 @@ describe('Input', () => {
     }, true);
 
     vm.model.input = '123';
-    vm.$nextTick(() => {
-      expect(spy.called).to.be.false;
-      done();
-    });
+    await waitImmediate();
+    expect(spy.called).to.be.false;
   });
 
   describe('Input Events', () => {

test/unit/specs/loading.spec.js

@@ -257,8 +257,8 @@ describe('Loading', () => {
             expect(masks.length).to.equal(0);
             done();
           }, 350);
-        }, 10);
-      }, 10);
+        }, 50);
+      }, 50);
     });
 
     it('lock', () => {

test/unit/specs/popover.spec.js

@@ -162,7 +162,8 @@ describe('Popover', () => {
       vm.$el.querySelector('button').click();
       expect(compo.popperElm).to.not.exist;
       vm.$nextTick(_ => {
-        expect(compo).to.have.deep.property('popperElm.style.display').not.equal('none');
+        const popperElm = compo.popperElm;
+        expect(getComputedStyle(popperElm).display).to.not.equal('none');
         done();
       });
     });
@@ -194,7 +195,8 @@ describe('Popover', () => {
       vm.$el.querySelector('button').click();
       expect(compo.popperElm).to.not.exist;
       vm.$nextTick(_ => {
-        expect(compo).to.have.deep.property('popperElm.style.display').not.equal('none');
+        const popperElm = compo.popperElm;
+        expect(getComputedStyle(popperElm).display).to.not.equal('none');
         done();
       });
     });

test/unit/specs/slider.spec.js

-import { createTest, createVue, triggerEvent, destroyVM } from '../util';
+import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';
 import Slider from 'packages/slider';
 
 describe('Slider', () => {
@@ -81,11 +81,11 @@ describe('Slider', () => {
     expect(slider.$refs.tooltip.disabled).to.true;
   });
 
-  it('format tooltip', () => {
+  it('format tooltip', async() => {
     vm = createVue({
       template: `
         <div>
-          <el-slider v-model="value" :format-tooltip="formatTooltip">
+          <el-slider ref="slider" v-model="value" :format-tooltip="formatTooltip">
           </el-slider>
         </div>
       `,
@@ -101,11 +101,9 @@ describe('Slider', () => {
         }
       }
     }, true);
-    const slider = vm.$children[0].$children[0];
-    expect(slider.formatTooltip).to.function;
-    vm.$nextTick(() => {
-      expect(slider.formatValue).to.equal('$0');
-    });
+    const sliderButton = vm.$refs.slider.$children[0];
+    await waitImmediate();
+    expect(sliderButton.formatValue).to.equal('$0');
   });
 
   it('drag', done => {

test/unit/specs/steps.spec.js

-import { createVue, destroyVM } from '../util';
-import Vue from 'vue';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 describe('Steps', () => {
   let vm;
@@ -19,14 +18,14 @@ describe('Steps', () => {
     expect(vm.$el.querySelectorAll('.el-step')).to.length(3);
   });
 
-  it('space', done => {
+  it('space', async() => {
     vm = createVue(`
       <el-steps>
         <el-step title="step1"></el-step>
         <el-step title="step2"></el-step>
         <el-step title="step3"></el-step>
       </el-steps>
-    `);
+    `, true);
 
     const vm2 = createVue(`
       <el-steps :space="100">
@@ -35,13 +34,13 @@ describe('Steps', () => {
         <el-step title="step3"></el-step>
         <el-step title="step4"></el-step>
       </el-steps>
-    `);
+    `, true);
 
-    Vue.nextTick(_ => {
-      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('50%');
-      expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('100px');
-      done();
-    });
+    await waitImmediate();
+    const stepElm = vm.$el.querySelector('.el-step');
+    const stepElm2 = vm2.$el.querySelector('.el-step');
+    expect(getComputedStyle(stepElm).flexBasis).to.equal('50%');
+    expect(getComputedStyle(stepElm2).flexBasis).to.equal('100px');
   });
 
   it('processStatus', done => {
@@ -131,18 +130,17 @@ describe('Steps', () => {
     expect(vm.$el.querySelector('.is-vertical')).to.exist;
   });
 
-  it('vertical:height', done => {
+  it('vertical:height', async() => {
     vm = createVue(`
       <el-steps direction="vertical" :space="200">
         <el-step title="aaa"></el-step>
         <el-step title="bbb"></el-step>
       </el-steps>
-    `);
+    `, true);
 
-    vm.$nextTick(_ => {
-      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('200px');
-      done();
-    });
+    await waitImmediate();
+    const stepElm = vm.$el.querySelector('.el-step');
+    expect(getComputedStyle(stepElm).flexBasis).to.equal('200px');
   });
 
   it('step:status=error', done => {

test/unit/specs/tree.spec.js

-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 const DELAY = 10;
 
@@ -353,12 +353,10 @@ describe('Tree', () => {
   });
 
   it('check', done => {
+    const spy = sinon.spy();
     vm = getTreeVm(':props="defaultProps" show-checkbox @check="handleCheck"', {
       methods: {
-        handleCheck(data, args) {
-          this.data = data;
-          this.args = args;
-        }
+        handleCheck: spy
       }
     });
     const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
@@ -366,8 +364,10 @@ describe('Tree', () => {
     expect(nodeCheckbox).to.be.exist;
     nodeCheckbox.click();
     setTimeout(() => {
-      expect(vm.args.checkedNodes.length).to.equal(3);
-      expect(vm.data.id).to.equal(2);
+      expect(spy.calledOnce).to.be.true;
+      const [data, args] = spy.args[0];
+      expect(data.id).to.equal(2);
+      expect(args.checkedNodes.length).to.equal(3);
       done();
     }, 10);
   });
@@ -389,31 +389,31 @@ describe('Tree', () => {
     }, 10);
   });
 
-  it('setCheckedKeys', () => {
+  it('setCheckedKeys', async() => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([111]);
+    await waitImmediate();
     expect(tree.getCheckedNodes().length).to.equal(3);
     expect(tree.getCheckedKeys().length).to.equal(3);
 
     tree.setCheckedKeys([1]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(3);
-      expect(tree.getCheckedKeys().length).to.equal(3);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(3);
+    expect(tree.getCheckedKeys().length).to.equal(3);
 
     tree.setCheckedKeys([2]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(3);
-      expect(tree.getCheckedKeys().length).to.equal(3);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(3);
+    expect(tree.getCheckedKeys().length).to.equal(3);
 
     tree.setCheckedKeys([21]);
+    await waitImmediate();
     expect(tree.getCheckedNodes().length).to.equal(1);
     expect(tree.getCheckedKeys().length).to.equal(1);
   });
 
-  it('setCheckedKeys with checkStrictly', () => {
+  it('setCheckedKeys with checkStrictly', async() => {
     vm = getTreeVm(':props="defaultProps" checkStrictly show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([111]);
@@ -421,18 +421,17 @@ describe('Tree', () => {
     expect(tree.getCheckedKeys().length).to.equal(1);
 
     tree.setCheckedKeys([1]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(1);
-      expect(tree.getCheckedKeys().length).to.equal(1);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(1);
+    expect(tree.getCheckedKeys().length).to.equal(1);
 
     tree.setCheckedKeys([2]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(1);
-      expect(tree.getCheckedKeys().length).to.equal(1);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(1);
+    expect(tree.getCheckedKeys().length).to.equal(1);
 
     tree.setCheckedKeys([21, 22]);
+    await waitImmediate();
     expect(tree.getCheckedNodes().length).to.equal(2);
     expect(tree.getCheckedKeys().length).to.equal(2);
   });
@@ -449,24 +448,22 @@ describe('Tree', () => {
     expect(tree.getCheckedKeys().length).to.equal(0);
   });
 
-  it('setCheckedKeys with leafOnly=false', () => {
+  it('setCheckedKeys with leafOnly=false', async() => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([1, 11, 111, 2], false);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(6);
-      expect(tree.getCheckedKeys().length).to.equal(6);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(6);
+    expect(tree.getCheckedKeys().length).to.equal(6);
   });
 
-  it('setCheckedKeys with leafOnly=true', () => {
+  it('setCheckedKeys with leafOnly=true', async() => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([2], true);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(2);
-      expect(tree.getCheckedKeys().length).to.equal(2);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(2);
+    expect(tree.getCheckedKeys().length).to.equal(2);
   });
 
   it('setCurrentKey', (done) => {

test/unit/specs/upload.spec.js

@@ -4,6 +4,7 @@ const noop = () => {
 };
 const option = {
   onSuccess: noop,
+  onProgress: noop,
   data: { a: 'abc', b: 'bcd' },
   filename: 'file.png',
   file: 'foo',

test/unit/specs/util.vue-popper.spec.js

@@ -139,7 +139,7 @@ describe('Utils:VuePopper', () => {
     const vm = createTest(Popper, {
       visibleArrow: true
     });
-    expect(vm.appended).to.empty;
+    expect(vm.appended).to.be.undefined;
     vm.createPopper();
     expect(vm.appended).to.true;
     vm.appendArrow();
@@ -155,7 +155,7 @@ describe('Utils:VuePopper', () => {
       visibleArrow: true,
       popper
     });
-    expect(vm.appended).to.empty;
+    expect(vm.appended).to.be.undefined;
     vm.createPopper();
     expect(vm.popperJS._popper.querySelector('[x-arrow][_v-110]')).to.exist;
   });

test/unit/util.js

@@ -106,3 +106,16 @@ export const triggerKeyDown = function(el, keyCode) {
   evt.keyCode = keyCode;
   el.dispatchEvent(evt);
 };
+
+/**
+ * 等待 ms 毫秒，返回 Promise
+ * @param {Number} ms
+ */
+export const wait = function(ms = 50) {
+  return new Promise(resolve => setTimeout(() => resolve(), ms));
+};
+
+/**
+ * 等待一个 Tick，代替 Vue.nextTick，返回 Promise
+ */
+export const waitImmediate = () => wait(0);