使用Karma自动化测试
自动刷新，自动打开浏览器，就能把测试结果告诉我们，不需要手动去打开浏览器刷新看控制台错误
工具介绍
- Karma（
[ˈkɑrmə]卡玛）是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例 - Mocha（
[ˈmoʊkə]摩卡）是一个单元测试框架/库，它可以用来写测试用例 - Sinon（西农）是一个 spy / stub / mock 库，用以辅助测试（使用后才能理解）
步骤
1. 安装工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
2.创建 karma配置 （新建karma.conf.js)
.创建 karma配置 (新建 karma.conf.js)
files
- 告诉karma 测试用例在哪
**/*指的是dist/x/下面所有文件。没有写css为什么也要加载css，如果没有写会报错，在打包的时候有产生css，它会把css和js分开打包。
module.exports = function (config) {
config.set({
// 基础路径，用在files，exclude属性上
basePath: '',
//引入 mocha 和 sinon-chai
frameworks: ['mocha', 'sinon-chai'],
client: {
chai: {
includeStack: true
}
},
// 需要加载到浏览器的文件列表
files: [
'dist/**/*.test.js',
'dist/**/*.test.css'
],
// 排除的文件列表
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
使用测试结果报告者
// 可能的值: "dots", "progress"
// 可用的报告者：https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// 服务端口号
port: 9876,
// 启用或禁用输出报告或者日志中的颜色
colors: true,
// 日志等级
// 可能的值: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// 启用/禁用监视文件并在任何文件更改时执行测试
autoWatch: true,
// 启动浏览器
browsers: ['ChromeHeadless'],
// 持续集成模式
// 为 true, Karma会捕获浏览器，运行测试并退出
singleRun: false,
// 并发级别
// 应该同时启动多少个浏览器
concurrency: Infinity
})
}
3.创建测试脚本 （package.json找到scripts并改写 scripts)
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-minify && karma start --single-run"
},
parcel build test/*打包test里所有一级文件，打包后会生成dist文件，然后打包的文件在dist里面， 为什么要打包呢？因为很多语法例：import xx from xxx，浏览器是不认识的，打包就是翻译成浏览器认识的语言--no-minify不要 minify,不加会经常出bugkarma start启动karma--single-run只运行一次
4.创建 用例测试文件 test/xxx.test.js
使用的是 BDD，行为驱动测试
如何写测试用例？
每个it 代表新的测试用例。参数一：名字是什么，参数二：代码是什么。
expect(xxx).to.equal(yyy)期待xxx等于yyy 或 expect(xxx).to.eq(yyy)
详细可参考 chai官网 文档
describe it是Mocha提供的，是直接挂在window上的全局函数，不需要引入
sinon 提供可假函数。为什么要有假函数呢？因为当我们需要测试点击一个事件确定它是否被调用时，需要创建一个函数，看他是否被调用。但是在技术层面我们这样创建
const callback = function(){}，我们不知道它是否被调用了。所以用假函数，它知道自己是否被调用了。chai提供的expect
案列：
//使用chai提供的expect
const expect = chai.expect;
import Vue from 'vue'
//引入测试的组件
import Button from '../src/button'
Vue.config.productionTip = false
Vue.config.devtools = false
//描述 Button
describe('Button', () => {
//它存在，实现的它的代码
it('存在.', () => {
expect(Button).to.exist
})
it('可以设置icon.', () => {
//构建Button
const Constructor = Vue.extend(Button)
//创建实例
const vm = new Constructor({
//传入props ，并挂载到页面
propsData: {
icon: 'settings'
}
}).$mount()
//找到实例上的'use'标签
const useElement = vm.$el.querySelector('use')
//期待它的属性等于#i-settings
expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
//销毁实例
vm.$destroy()
})
//测试order， 是css，css是当页面出现才会进行渲染的，所以必须在页面上出现才能测试到
it('icon 默认的 order 是 1', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
}
}).$mount(div)
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('1')
vm.$el.remove()
vm.$destroy()
})
it('点击 button 触发 click 事件', () => {
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'settings',
}
}).$mount()
// 用sinon提供的假函数
const callback = sinon.fake();
vm.$on('click', callback)
vm.$el.click()
//期待cllback 被调用了
expect(callback).to.have.been.called
})
})
5.运行测试
**1.npm run test 一次性运行 **
当运行 npm run test 它就会去运行，我们在package.json里运行scriptes- test命令 ，run 就是等运行什么命令
-
当运行这行命令，它会对js进行打包，然后打开Chrome浏览器，然后在chorme运行网页，运行完网页自动关闭浏览器，然后把浏览器的输出显示在终端
-
如果不使用
rm -rf .cache dist将可能出现 这样的错误
-
不想每次都
rm -rf .cache dist修改下脚本,添加--no-cache不要缓存，每次都重新打包，添加完后每次只需要npm run test即可"test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
2.npm run dev-test
进行watch 运行，改了代码后，会自动帮你测试
