一开始我是打算把数据库的测试也准备写一篇，但是发现需要创建表格之间的关系，增删查改的过程比较繁杂又多，先把前端vue的测试给写了也给自己的知识点做个备份，学而不思则、思而不学现在就开始do it。
Karma
karma测试库是一个测试管理工具，可以帮你启动一个HTTP服务器运行你的代码文件，也可以通过其插件可以快速集成到各种环境中。例如：本地环境、持续集成环境。
- karma安装
npm install karma-cli -g
npm install karma --save-dev
npm install karma-mocha --save-dev
npm install karma-chai --save-dev
- 配置文件
新建一个karma.conf.js文件粘贴以下内容，frameworks里面还包含sinon-chai是用来辅助测试的后面会讲到。
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'sinon-chai'],
client: {
chai: {
includeStack: true
}
},
// list of files / patterns to load in the browser
files: ['dist/**/*.test.js', 'dist/**/*.test.css'],
// list of files / patterns to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadless'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};
- 命令
package.json文件中添加需要的脚本
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
}
Chai
chai是一个断言库， 有多种的断言风格，目前有should、expect和assert
想熟悉语言的话推荐API中文文档里面有很多chai的用例
当然断言风格主要还是看个人的使用习惯，下面简单介绍一下expect它的断言使用语法
安装
npm i -D chai
用例
// 相等或不相等
expect(1 + 2).to.be.equal(3);
expect(1 + 2).to.be.not.equal(4);
expect(foo).to.be.deep.equal({ bar: 'baz' });
// 布尔值为true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;
// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);
// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');
// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;
// match
expect('foobar').to.match(/^foo/);
Mocha
Mocha 是一个单元测试框架，就是一个用来写测试用例的运行测试工具
先导出一个加法模块 add.js
function add(x, y) {
return x + y;
}
module.exports = add;
接下来写测试加法脚本 add.test.js，建议测试脚本和要执行的文件模块同名，
每一个 describe 描述模块相当于一个大厂房，而 it 里面信息比如成一个小机房，每个机房都有你将要执行的东西在里面。
var add = require('./add.js');
var expect = require('chai').expect;
describe('一个加法测试', function() {
it('1 加 1 应该等于 2', function() {
expect(add(1, 1)).to.be.equal(2);
});
});
文件测试
- 按钮组件 src/button.vue
<template>
<button class="default" :class="color" @click="$emit('click');">
<slot></slot>
</button>
</template>
<script>
export default {
props: {
color: {
type: String
}
}
};
</script>
<style scoped>
.default {
cursor: pointer;
width: 200px;
height: 40px;
line-height: 40px;
border-width: 0px;
border-radius: 4px;
outline: none;
font-family: Microsoft YaHei;
color: black;
font-size: 15px;
background: #f8f8f8;
}
.blue {
background: #1e90ff;
}
</style>
- 添加组件 src/App.vue
<template>
<div id="app">
<test-button color="blue" @click="counter += 1;">Click me</test-button>
</div>
</template>
<script>
import TestButton from "./button";
export default {
name: "App",
components: {
TestButton
}
};
</script>
<style></style>
- 测试文件 test/button.test.js
const expect = chai.expect;
import Vue from 'vue'
import Button from '../src/button'
Vue.config.productionTip = false
Vue.config.devtools = false
describe('Button', () => {
it('存在 button', () => {
expect(Button).to.exist // expect语法期待组件的存在
})
it('点击 button', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button) // 使用button
const vm = new Constructor({
propsData: {
color: 'blue',
}
}).$mount(div)
const callback = sinon.fake(); // sinon记录一个调用
vm.$on('click', callback) // 监听回调
vm.$el.click() // click执行
expect(callback).to.have.been.called // 期待这个事件被调用
})
})
- npm run dev 最后执行结果, 这里错误的示范就不做记录了，看到的朋友自己花时间跑一次就知道坑在哪了~
...
√ Built in 193ms.
dist\button.test.js 270.2 B 120ms
dist\button.test.map 0 KB 65ms
...
HeadlessChrome 0.0.0 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.016 secs / 0.008 secs)
