[译]开始对Angular App进行单元测试(1)
这是一些列文章,陆续翻译整理中... 原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/ @ Bradley Braithwaite 前言在写测试之前,我们还得对基础的JS的单元测试框架和如何写测试用例等一些问题做一个简要的介绍。 先说说 jasmine ,它算作一个行为驱动开发(behaviour driven development,BBD)的 JavaSciprt的框架,会让人困惑的是,它也可以用测试驱动开发(test driven development,TBD)的思想来写测试。 开始你的第一个测试先建一个项目文件比如 <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script> </head> <body> </body> <script type="text/javascript"> // Paste in the test code here. </script> </html> 用浏览器打开该文件。界面如图:
注意specs,它实际上指的是用例,它同样也是BBD的专业术语之一。截下来我们先来点简单的逻辑判断。 describe('calculator',function () { it('1 + 1 should equal 2'); }); 将上面的代码粘贴到刚才的html文件中。 函数 由于我们实际上没有添加测试的主体,因此状态上方显示的是 it('1 + 1 should equal 2',function() { expect(1 + 1).toBe(1); });
上面的截图,实际上反应的就测试失败,因为 上面出现了两个新函数 expect(true).toBe(true); expect(false).not.toBe(true); expect(1).toEqual(1); expect('foo').toEqual('foo'); expect('foo').not.toEqual('bar'); 我们再把这段代码改成正常的。 it('1 + 1 should equal 2',function() { expect(1 + 1).toBe(2); }); 刷新浏览器,我们就可以看到正确的结果了。 前面我们大致了解了 流程大致如图三个部分,我们所写的每个测试都英国是遵循这三个流程。 <img src="https://lh5.googleusercontent.com/-2avOSLXBtRo/VVF97CVqKlI/AAAAAAAABcc/wYjDPRC0CFk/w638-h86-no/Untitled%2Bdrawing.png" />
Demo记下来我们写一些代码去体会上面的流程 写一个不通过的测试describe('calculator',function () { it('1 + 1 should equal 2',function () { expect(calculator.sum(1,1)).toBe(2); }); }); 2.使测试通过如果我们开始写足够多的代码时候,其中一些可能类似下面: var calculator = { sum: function(x,y) { return 2; // <-- note this is hardcoded } } describe('calculator',1)).toBe(2); }); }); 这样做有利于我们避免代码更多的错误 3.重构在我们确保我们的逻辑正常后,我们可以测试更多用例,直到结果能够一直和期望的一致。 var calculator = { sum: function(x,y) { return x + y; } } describe('calculator',1)).toBe(2); }); }); 小结我们初步了解了使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |