前端测试
说起前端测试,经常会听到assert,shouldjs,mocha,karma,travis等等,
这些是都是分别用来干什么的呢?
为什么需要前端测试
本人目前工作中,其实没有涉及到前端测试,周围的人也很少用到过前端测试,
那为什么需要前端测试呢?
通过测试的代码,安全性能高,使用放心
大的前端框架比如jquery等等,都是必须要有测试,
比如由于添加功能,要将现在的jquery版本由1.7升级到1.8,
如果没有测试,添加的新功能对以前的code有没有影响,
我们需要一步一步去手动调试,会是一个很大的工作量,
但是通过执行测试代码,可以很方便的帮助我们检测以前的功能还是不是能很好的运行。
同时通过执行测试代码,对我们的各个功能模块的代码也是一个很好的性能检测。
怎样写测试
首先需要了解如何写测试代码,可以将测试代码看成一种语言(虽然它便不是)。
它有它的语法,及框架。
写测试代码
test.js
var assert = require('assert')
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1, 2, 3].indexof('4'))
})
})
})
上面是一段非常简单的测试代码,这就是测试代码的语法。
一个测试文件中应该包含一个或者多个describe块,
一个describe块应该包含一个或者多个it块。
describe块被称为测试套件,第2个参数是实际执行的函数。
it块被称为测试用例,第2个参数是实际执行的函数。
assert模块是nodejs的断言库,主要使用了过来判断结果是否符合预期值,
比如 assert.equal(-1, [1, 2, 3].indexof('4'))
,
就是判断[1, 2, 3].indexof('4')
的值和-1
是否相等,
相等就测试通过,否则不通过。
关于assert语法可以参考这里。
shouldjs就是对assert模块的一个扩展。
运行测试代码
上面的测试代码如何运行呢,可以通过测试框架,如mocha等来运行。
先安装 npm install mocha -g
,
然后在package.js
中添加一条scripttest: mocha
;
mocha默认会去执行相同目录下中的test下的js文件,
也就是说将上面的js文件test.js放入package同目录下的test文件夹下,mocha会默认执行。
执行npm run test
,就可以看到如下的结果。
![测试结果](http://zoucz.com/blogimgs/201...)
浏览器上运行测试代码
通过mocha测试框架确实能运行测试代码了,但是在终端去查看测试结果多少有些不方便,
可以通过karma测试工具来实现在浏览器上运行测试代码,
甚至可以在浏览器上打断点来运行测试代码。
安装karma npm install -g karma-cli
,
然后在package.js
中添加一条scriptkarma: karma start
;
karma可以通过karma init
来初始化配置文件,
配置文件中可以设置浏览器,测试代码的使用框架,热更新功能等等。
执行npm run karma
后,能自动打开在karma配置文件中设置的浏览器,
以及在此浏览器上运行测试代码。
持续集成
持续集成就是,每次源码(如github上的)有更新,比如有人push了一段代码,
持续集成工具就下载源码,根据配置文件,执行相应的代码(经常是测试代码),
然后反馈执行结果。
travis对于开源项目是免费的,推荐使用。
- Travis CI 只支持 Github,不支持其他代码托管服务。
- 在Travis上添加想要持续集成的github源。
- Travis CI需要有一个配置文件
travis.yml
,用来指定travis的行为。
language: node_js
node_js:
- '8'
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
install:
- npm install -g karma
- npm install
script:
- npm run test
每当有代码更新的时候,travis先获取github对应的源码,
然后一步步根据配置执行,before_install
=>install
=> npm run test
刚涉及到前端测试,以上内容如有错误的地方,请不吝指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。