单元测试框架karma 学习
单元测试的好处:
1、提高代码可靠性,单元测试覆盖越全,说明代码越可靠
2、保证重构质量,有效的单元测试能降低重构的风险
Karma:前端测试运行框架,karma会运行一个web服务器,将js源代码和测试脚本放到 PhantomJs或Chrome上执行。它可以监控文件的
变化,然后自动执行,通过console.log显式测试结果。Karma为前端自动化测试提供了跨浏览器测试的能力,它集成了Jasmine、
PhantomJS 这些测试套件。
Jasmine:一个行为驱动开发测试框架,不依赖浏览器、dom或者其他JS框架。
使用
分组 describe
用于群组相关的测试,接受两个参数:string和function
string是这个测试套件的标题
function 就是用于实现这个测试套件
示例:
1 2 3 4 5 6
| describe('a suite', function(){ it('suite', function(){ expect(true).toBe(true) }) })
|
测试it
it代表具体的测试,当所有的断言都为true时,则该测试通过,否则测试失败
1 2 3 4 5 6 7
| describe("a suit is just a function", function () { var a = 10; it("and here is a test", function () { var a = true; expect(a).toBe(true); }); });
|
期望expect
通过链式Matcher方法来比较实际值是否和预期值一致,如果一致就是测试通过。
1 2 3 4 5 6 7 8 9
| desribe('the "toBe" matcher compares with "===" ', function () { it("positive expect", function () { expect(true).toBe(true); });
it("negative expect", function () { expect(false).not.toBe(true); }); });
|
Matchers
都是作为期望的链式调用而使用,用于比较期望值和实际值。其中可以使用 not 进行期望结果的否定。
每个匹配方法在期望值和实际值之间执行逻辑比较,它负责告诉 jasmine 断言的真假,从而决定测试的成功或失败。
- 肯定断言
expect(true).toBe(true);
- 否定断言
expect(false).not.toBe(true);
编写第一个测试用例
创建一个 src 目录和一个 test 目录,在其中分别创建 index.js 和 index.spec.js 文件。
我要做的测试内容比较简单,对 index.js 中的两个函数(一个加法函数,一个乘法函数)进行测试。
index.js 文件如下:
1 2 3 4 5 6 7 8 9 10 11 12 13
| // 加法函数 function add(x){ return function(y){ return x + y; } }
// 乘法函数 function multi(x){ return function(y){ return x * y + 1; } }
|
index.spec.js 文件如下:
1 2 3 4 5 6 7 8 9 10 11
| describe("运算功能单元测试",function(){ it("加法函数测试",function(){ var add5 = add(5) expect(add5(5)).toBe(10) })
it("乘法函数测试",function(){ var multi5 = multi(5) expect(multi5(5)).toBe(25) }) })
|
单测的代码写好后,就可以使用 karma start 来运行单元测试。由于我们的乘法代码中有错误,因此测试结果是这样的:
1 2 3 4 5 6 7 8 9 10
| 23 07 2018 15:28:06.122:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js". 23 07 2018 15:28:06.334:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js". 23 07 2018 15:28:06.570:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js". PhantomJS 2.1.1 (Windows 8 0.0.0) 运算功能单元测试 乘法函数测试 FAILED Expected 26 to be 25. <Jasmine> test/index.spec.js:9:31 <Jasmine> PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.004 secs / 0.003 secs) TOTAL: 1 FAILED, 1 SUCCESS
|
将乘法函数的代码改为正常,再次启用 karma start 进行测试:
1 2 3
| 23 07 2018 15:30:39.779:INFO [watcher]: Changed file "D:/test/karma-test/test/index.spec.js". PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.003 secs) TOTAL: 2 SUCCESS
|
测试覆盖率
karma 的插件 karma-coverage 提供了测试代码覆盖率的支持。
首先你需要安装这个 Karma 插件,然后需要在配置文件的三个地方进行配置。
1
| $ npm install karma-coverage --save-dev
|
修改karma.conf.js配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| // Karma configuration
module.exports = function(config) { config.set({ ... // 这里配置哪些文件需要统计测试覆盖率,例如,如果你的所有代码文件都在 src文件夹中,你就需要如下配置。 preprocessors: { 'src/*.js': 'coverage' }, // 新增 coverageReporter选项 // 配置覆盖率报告的查看方式,type查看类型,可取值html、text等等,dir输出目录 coverageReporter: { type: 'html', dir: 'coverage/' },
// 添加配置报告选择 reporters: ['progress','coverage'], ... }) }
|
再次执行karma start,我们能看到生成了coverage目录,在浏览器中打开目录中的index.html我们能看到覆盖率已经生成。