github
demo
涉及
- 常用Vue ui组件的实现
- Vue单元测试实战
- 用karma做自动化测试
- travis集成测试
1.用vue-cli@3.0初始化项目
下载
npm i @vue/cli -g
初始化
vue create vue-test-demo(文件名)
选择 manually select features
2.jpeg
3.jpeg
4.jpeg
初始化后项目目录如下
5.jpeg
一开始有一个helloWorld组件
启动项目
npm run server
测试
npm run test:unit
7.jpeg
6.jpeg
2. 第一个组件
先写了一个简单的button组件 代码
实现的功能：
- 自定义文字
- 添加icon
- icon左右位置定义-
- 点击出现loading
然后根据实现的功能对其进行单元测试Vue Test Utils
这里用的是测试框架mocha + 断言库 chai
describe块称为"测试套件"(test suite), 表示一组相关的测试. 它是一个函数, 第一个参数是测试套件的名称, 第二个参数是一个实际执行的函数.
it块称为"测试用例"(test case), 表示一个单独的测试, 是测试的最小单位. 它也是一个函数, 第一个参数是测试用例的名称(通常描述你的断言结果), 第二个参数是一个实际执行的函数.
我们在最后一个测试例子中用到了sinon sinon入门
最后一个例子中我们测试 点击按钮，然后知道函数被调用（单纯用js很难做到）
it('点击 button 触发 click 事件', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'settings',
}
})
const vm = wrapper.vm
const callback = sinon.fake(); // 创建间谍函数
vm.$on('click', callback)
vm.$el.click()
expect(callback).to.have.been.called
})
3. 添加karma做自动化测试
添加如下依赖
npm i -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack chai sinon sinon-chai
在项目根目录创建karma.conf.js文件
var webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
config.set({
frameworks: ['mocha'],
files: [
'tests/**/*.spec.js'
],
preprocessors: {
'**/*.spec.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
reporters: ['spec'],
browsers: ['ChromeHeadless'] //没有界面的浏览器，为了后面配合travis使用
})
}
改写 package scripts
"scripts": {
...
"test": "karma start --single-run",
...
},
- single-run 标识告诉了 Karma 一次性运行该测试套件。
运行
npm run test
9.jpeg
4. 添加集成测试
- 在项目根目录创建travis.yml文件
language: node_js
node_js:
- "8"
- "9"
- "10"
addons:
chrome: stable
sudo: required
before_script:
- "sudo chown root /opt/google/chrome/chrome-sandbox"
- "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
- 创建github仓库后 每次远程推送都会进行测试
