npm init -y
(sudo) npm install karma-cli -g
npm install karma karma-jasmine karma-chrome-launcher jasmine-core --save-dev
npm install karma-phantomjs-launcher --save-dev

karma init

> 请问你要用哪种测试框架呢？
> 按tab键选择，按回车键进入下一个问题。
> jasmine
(因为我们安装的是jasmine，选什么断言库都别忘了安装一下)> 您想要使用Require.js么？
> 选择yes的话，会安装Require.js插件。
> 按tab键选择，按回车键进入下一个问题。
> no
(这里我们选择no)> 你想要在什么浏览器中测试呢？
> 按tab键选择，输入空字符串进入下一个问题。
> Chrome
> PhantomJS
>注：上面的选择这两个浏览器的原因是我们之前安装了这两个浏览器的启动器（launcher）> 需要测试的源文件和测试命令文件放在哪呢？
你可以使用通配符(glob patterns)来匹配文件，比如："js/*.js" 或 "test/**/*Spec.js"
输入空字符串进入下一个问题。
>
(这里先留空，可根据测试情况灵活配置)>在符合匹配的文件中有哪些文件可以排除在外呢？
你可以使用通配符来匹配文件，比如："**/*.swp"
输入空字符串进入下一个问题。
> > 你想要Karma根据文件的变化立即做出响应么？
> yes

module.exports = function(config) {basePath: '', // 根路径将会同files和excluede项中的相对路径相关联frameworks: ['jasmine'], // 所使用的测试框架files: [], // 这里是需要测试的文件列表，有多种配置方式exclude: [], // 测试过程中排除在外的文件列表reporters: ['progress'], // 测试结果的汇报方式，port: 9876, // web服务器接口colors: true, // 是否使用彩色报告logLevel: config.LOG_INFO, // 日志级别，可配置的值有: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUGautoWatch: true, // 是否自动观测文档改变并执行测试命令browsers: ["Chrome", "PhantomJS"], // 用哪些浏览器测试呢singleRun: false, // 持续集成模式，如果设置成true，Karma将自行捕获浏览器，运行测试并根据结果退出,concurrency: Infinity // 并发数，同时跑多少个浏览器进行测试，默认无上限
}

files: ["src/srcTest/**/*.js", "test/unit/**/*.js"]

// 减法函数
function minus(x) {return function(y) {return x - y;};
}

// 加法函数
function add(x) {return function(y) {return x + y;};
}// 乘法函数
function multi(x) {return function(y) {return x * y;};
}//if函数测试
function ifTest(boolean) {if (boolean) {return "热热";} else {return "凉凉";}
}// 反转字符串
function reverseStr (string) {return string.split("").reverse().join("");
}

describe("newBee单元测试", function() {it("减法函数测试", function() {var minus7 = minus(7);expect(minus7(6)).toBe(0);});
});

describe("testKarma单元测试", function() {it("如果函数测试", function() {expect(ifTest(true)).toBe(true);expect(ifTest(false)).toBe("凉凉");});it("回文函数测试", function() {expect(reverseStr('abc')).toEqual('cba');})});

// 分组describe(), 这个是可以嵌套的，并且每个单独的测试都有beforeAll, afterAll, beforeEach和afterEach
describe("这里写测试群组的名称", function(){// 具体的测试，it(), 当其中所有的断言都为true时，则通过；否则失效。it('这里写具体测试的名称', function(){var a = true;// 期望, expect()。 匹配，to*()// 每个匹配方法在期望值和实际值之间执行逻辑比较// 它负责告诉jasmine断言的真假，从而决定测试的成功或失败// 木有错，老子/老娘说啥就是啥expect(a).toBe(true); // 这是肯定断言expect(!a).not.toBe(true); // 这是否定断言// jasmine内置的匹配方法有很多，亦可自定义匹配方法// toBe()// toEqual()// toMatch()// toBeUndefined()// toBeNull()// toBeTruthy()// toContain()// toBeLessThan()// toBeCloseTo()// toThrowError()// 等等等等})
})

karma start

describe("newBee单元测试", function() {it("减法函数测试", function() {var minus7 = minus(7);expect(minus7(6)).toBe(1);});
});

it("如果函数测试", function() {expect(ifTest(true)).toBe("热热");expect(ifTest(false)).toBe("凉凉");
});

npm install karma-coverage --save-dev

// 这里配置哪些文件需要统计测试覆盖率，例如，如果你的所有代码文件都在src文件夹中，你就需要如下配置
preprocessors: {"src/srcTest/*.js": "coverage"
},
// 新增coverageReporter选项
// 配置覆盖率报告的查看方式，type查看类型，可以取值html、text等等，dir输出目录
coverageReporter: {dir: "docs/unit",reporters: [{type: "html",subdir: "report-html"}]
},
reporters: ['progress', "coverage"] // 没错，reporters里面新增了一个coverage

git clone https://github.com/vuejs/vue.git
npm install
npm run test unit // 这里可以看到单元测试
npm run test // 这里就看全部的测试

// import Vue from 'vue'describe('Directive v-show', () => {it('should check show value is truthy', () => {const vm = new Vue({template: '<div><span v-show="foo">hello</span></div>',data: { foo: true }}).$mount()expect(vm.$el.firstChild.style.display).toBe('')})it('should check show value is falsy', () => {const vm = new Vue({template: '<div><span v-show="foo">hello</span></div>',data: { foo: false }}).$mount()expect(vm.$el.firstChild.style.display).toBe('none')})it('should update show value changed', done => {const vm = new Vue({template: '<div><span v-show="foo">hello</span></div>',data: { foo: true }}).$mount()expect(vm.$el.firstChild.style.display).toBe('')vm.foo = falsewaitForUpdate(() => {expect(vm.$el.firstChild.style.display).toBe('none')vm.foo = {}}).then(() => {expect(vm.$el.firstChild.style.display).toBe('')vm.foo = 0}).then(() => {expect(vm.$el.firstChild.style.display).toBe('none')vm.foo = []}).then(() => {expect(vm.$el.firstChild.style.display).toBe('')vm.foo = null}).then(() => {expect(vm.$el.firstChild.style.display).toBe('none')vm.foo = '0'}).then(() => {expect(vm.$el.firstChild.style.display).toBe('')vm.foo = undefined}).then(() => {expect(vm.$el.firstChild.style.display).toBe('none')vm.foo = 1}).then(() => {expect(vm.$el.firstChild.style.display).toBe('')}).then(done)})it('should respect display value in style attribute', done => {const vm = new Vue({template: '<div><span v-show="foo" style="display:block">hello</span></div>',data: { foo: true }}).$mount()expect(vm.$el.firstChild.style.display).toBe('block')vm.foo = falsewaitForUpdate(() => {expect(vm.$el.firstChild.style.display).toBe('none')vm.foo = true}).then(() => {expect(vm.$el.firstChild.style.display).toBe('block')}).then(done)})it('should support unbind when reused', done => {const vm = new Vue({template:'<div v-if="tester"><span v-show="false"></span></div>' +'<div v-else><span @click="tester=!tester">show</span></div>',data: { tester: true }}).$mount()expect(vm.$el.firstChild.style.display).toBe('none')vm.tester = falsewaitForUpdate(() => {expect(vm.$el.firstChild.style.display).toBe('')vm.tester = true}).then(() => {expect(vm.$el.firstChild.style.display).toBe('none')}).then(done)})
})