前端测试

前端测试

说起前端测试，经常会听到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对于开源项目是免费的,推荐使用。

1. Travis CI 只支持 Github，不支持其他代码托管服务。
2. 在Travis上添加想要持续集成的github源。
3. 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

刚涉及到前端测试，以上内容如有错误的地方，请不吝指正。