1.Karma介绍
Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透!
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。
2.Jasmine介绍
Jasmine (茉莉)是一款 JavaScript BDD(行为驱动开发)测试框架,它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法,让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说,它是一款不错的测试框架选择。
3.jasmine基础语法
describe
Your Tests)
Suite表示一个测试集,以函数describe(string, function)
封装,它包含2个参数:string
:测试组名称,function
:测试组函数。
一个Suite(describe
)包含多个Specs(it
),一个Specs(it
)包含多个断言(expect
)。
2)Specs : 规范
1 describe("A suite",function(){ 2 it("contains spec with an expectation",function(){ 3 expect(true).toBe(true); 4 }); 5 });
3)方法
4)Expectations :期望值
5)Matchers : 匹配器
1 it("and can have a negative case",function(){ 2 expect(false).not.toBe(true); 3 });
1 describe("Included matchers:",function(){ 2 it("The 'toBe' matcher compares with ===",function(){ 3 var a =12; 4 var b = a; 5 expect(a).toBe(b); 6 expect(a).not.toBe(null); 7 }); 8 }
1 it("The 'toMatch' matcher is for regular expressions",function(){ 2 var message ='foo bar baz'; 3 expect(message).toMatch(/bar/); 4 expect(message).toMatch('bar'); 5 expect(message).not.toMatch(/quux/); 6 });
1 it("The 'toBeDefined' matcher compares against `undefined`",function(){ 2 var a ={ 3 foo:'foo' 4 }; 5 expect(a.foo).toBeDefined(); 6 expect(a.bar).not.toBeDefined(); 7 }); 8 9 it("The `toBeUndefined` matcher compares against `undefined`",function(){ 10 var a ={ 11 foo:'foo' 12 }; 13 expect(a.foo).not.toBeUndefined(); 14 expect(a.bar).toBeUndefined(); 15 }); 16
1 it("The 'toBeNull' matcher compares against null",function(){ 2 var a =null; 3 var foo ='foo'; 4 expect(null).toBeNull(); 5 expect(a).toBeNull(); 6 expect(foo).not.toBeNull(); 7 });
1 describe("The 'toContain' matcher",function(){ 2 it("works for finding an item in an Array",function(){ 3 var a =["foo","bar","baz"]; 4 expect(a).toContain("bar"); 5 expect(a).not.toContain("quux"); 6 }); 7 it("also works for finding a substring",function(){ 8 var a ="foo bar baz"; 9 expect(a).toContain("bar"); 10 expect(a).not.toContain("quux"); 11 }); 12 });
1 it("The 'toBeLessThan' matcher is for mathematical comparisons",function(){ 2 var pi =3.1415926, e =2.78; 3 expect(e).toBeLessThan(pi); 4 expect(pi).not.toBeLessThan(e); 5 }); 6 7 it("The 'toBeGreaterThan' is for mathematical comparisons",function(){ 8 var pi =3.1415926, e =2.78, c =3; 9 expect(c).toBeGreaterThan(e); 10 expect(c).not.toBeGreaterThan(pi); 11 });
1 it("The 'toBeCloseTo' matcher is for precision math comparison",function(){ 2 var pi =3.1415926, e =2.78; 3 expect(pi).not.toBeCloseTo(e,2); 4 expect(pi).toBeCloseTo(e,0); 5 });
1 it("The 'toThrow' matcher is for testing if a function throws an exception",function(){ 2 var foo =function(){ 3 return1+2; 4 }; 5 var bar =function(){ 6 return a +1; 7 }; 8 expect(foo).not.toThrow(); 9 expect(bar).toThrow(); 10 });
4.基本实现
1 // Karma configuration 2 // Generated on Fri Oct 21 2016 12:00:54 GMT+0800 (中国标准时间) 3 module.exports =function(config){ 4 config.set({ 5 // base path that will be used to resolve all patterns (eg. files, exclude) 6 basePath:'', 7 // frameworks to use 8 // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 9 frameworks:['jasmine'], 10 // list of files / patterns to load in the browser。!!!这个数组是用来存放被测试代码和测试代码的,默认为空!!! 11 files:[ 12 ], 13 // list of files to exclude 14 exclude:[ 15 ], 16 // preprocess matching files before serving them to the browser 17 // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 18 preprocessors:{ 19 }, 20 // test results reporter to use 21 // possible values: 'dots', 'progress' 22 // available reporters: https://npmjs.org/browse/keyword/karma-reporter 23 reporters:['progress'], 24 // web server port 25 port:9876, 26 // enable / disable colors in the output (reporters and logs) 27 colors:true, 28 // level of logging 29 // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 30 logLevel: config.LOG_INFO, 31 // enable / disable watching file and executing tests whenever any file changes 32 autoWatch:true, 33 // start these browsers 34 // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 35 browsers:['Chrome'], 36 // Continuous Integration mode 37 // if true, Karma captures browsers, runs the tests and exits 38 singleRun:false, 39 // Concurrency level 40 // how many browser should be started simultaneous 41 concurrency:Infinity 42 }) 43 };
这两个参数不需要修改,使用默认值就好。
karma 支持三个命令。
- start [<configFile>] [<options>] 启动 Karma 持续执行,也可以执行单次的测试,然后直接收集测试结果.
- init [<configFile>] 初始化配置文件.
- run [<options>] [ -- <clientArgs>] Trigger a test run.
4)新建测试用例
在项目文件夹中,创建一个名为 test 的子文件夹来保存测试用例。然后在 test 文件夹中创建一个 unit 的文件夹来保存单元测试用例。一般来说,我们会为测试用例的文件名称提供一个特定的模式,以便对测试用例进行统一处理,这里我们约定测试用例的文件名以 .spec.js 为结尾。
(1)自定义测试
1 describe('hello',function(){ 2 it('test hello',function(){ 3 var a ='hello'; 4 expect(a).toEqual('hello'); 5 }); 6 });
1 function add(a,b){ 2 return a + b; 3 }
1 describe('hello',function(){ 2 it('test add',function(){ 3 var a = add(3,6); 4 expect(a).toEqual(9); 5 }); 6 7 it('test add',function(){ 8 var a = add(3,6); 9 expect(a).toEqual(10); 10 }); 11 });
5)修改karma配置文件
确认你的 karma 配置文件中,包含了被测试代码和测试代码。
// list of files / patterns to load in the browser files: [ 'src/**/*.js', 'test/**/*.spec.js' ], // list of files to exclude exclude: [ 'karma.conf.js' ],
![](https://i-blog.csdnimg.cn/blog_migrate/cbef55e91170f68aede06816d078d768.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a970a2a48c5b2b6b88b1409678b5b39c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/16348a45947cf995a9a6c7b7bf5111a9.png)
点击 DEBUG 按钮,可以进入实际的测试页面。
这个页面看起来是空白的,但是执行了实际的测试脚本,右击鼠标点击检查,可以看到实际的内容:
![](https://i-blog.csdnimg.cn/blog_migrate/aff680ef6bb276bb6d3251b96f242678.png)