add test and update webpack config

[new] add test config
[new] add breadcrumb test
[change] update package.json
[new] util.js copied from  element
[unresolved] see test/unit/index.js @todo
This commit is contained in:
huixisheng 2017-03-04 00:09:02 +08:00
parent c9c5e751ae
commit 9b6ff1ce28
10 changed files with 222 additions and 4 deletions

0
test
View file

18
test/unit/index.js Normal file
View file

@ -0,0 +1,18 @@
import Vue from 'vue';
Vue.config.productionTip = false;
// Polyfill fn.bind() for PhantomJS
/* eslint-disable no-extend-native */
Function.prototype.bind = require('function-bind');
// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/);
testsContext.keys().forEach(testsContext);
// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
// const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
// @todo
const srcContext = require.context('../../src/components/breadcrumb', true, /^\.\/(?!styles.*?(\.less)?$)/);
srcContext.keys().forEach(srcContext);

33
test/unit/karma.conf.js Normal file
View file

@ -0,0 +1,33 @@
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var webpackConfig = require('../../build/webpack.test.config.js');
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['PhantomJS'],
frameworks: ['mocha', 'sinon-chai'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};

View file

@ -0,0 +1,24 @@
import { createVue, destroyVM } from '../util';
describe('Breadcrumb.vue', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('create', done => {
vm = createVue(`
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
<Breadcrumb-item href="/">Home4</Breadcrumb-item>
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
`);
expect(vm.$el.querySelectorAll('.ivu-breadcrumb-item-link').length).to.equal(3);
vm.$nextTick(_ => {
// console.log(vm.$el.querySelector('.ivu-breadcrumb-item-separator').innerHTML);
expect(vm.$el.querySelector('.ivu-breadcrumb-item-separator').innerHTML).to.equal('<b class="demo-breadcrumb-separator">=&gt;</b>');
done();
});
});
});

85
test/unit/util.js Normal file
View file

@ -0,0 +1,85 @@
import Vue from 'vue';
import iView from '../../src/index';
Vue.use(iView);
let id = 0;
const createElm = function() {
const elm = document.createElement('div');
elm.id = 'app' + ++id;
document.body.appendChild(elm);
return elm;
};
/**
* 回收 vm
* @param {Object} vm
*/
exports.destroyVM = function(vm) {
vm.$el &&
vm.$el.parentNode &&
vm.$el.parentNode.removeChild(vm.$el);
};
/**
* 创建一个 Vue 的实例对象
* @param {Object|String} Compo 组件配置可直接传 template
* @param {Boolean=false} mounted 是否添加到 DOM
* @return {Object} vm
*/
exports.createVue = function(Compo, mounted = false) {
const elm = createElm();
if (Object.prototype.toString.call(Compo) === '[object String]') {
Compo = { template: Compo };
}
return new Vue(Compo).$mount(mounted === false ? null : elm);
};
/**
* 创建一个测试组件实例
* @link http://vuejs.org/guide/unit-testing.html#Writing-Testable-Components
* @param {Object} Compo - 组件对象
* @param {Object} propsData - props 数据
* @param {Boolean=false} mounted - 是否添加到 DOM
* @return {Object} vm
*/
exports.createTest = function(Compo, propsData = {}, mounted = false) {
if (propsData === true || propsData === false) {
mounted = propsData;
propsData = {};
}
const elm = createElm();
const Ctor = Vue.extend(Compo);
return new Ctor({ propsData }).$mount(mounted === false ? null : elm);
};
/**
* 触发一个事件
* mouseenter, mouseleave, mouseover, keyup, change, click
* @param {Element} elm
* @param {String} name
* @param {*} opts
*/
exports.triggerEvent = function(elm, name, ...opts) {
let eventName;
if (/^mouse|click/.test(name)) {
eventName = 'MouseEvents';
} else if (/^key/.test(name)) {
eventName = 'KeyboardEvent';
} else {
eventName = 'HTMLEvents';
}
const evt = document.createEvent(eventName);
evt.initEvent(name, ...opts);
elm.dispatchEvent
? elm.dispatchEvent(evt)
: elm.fireEvent('on' + name, evt);
return elm;
};