前端测试

前端测试

提及前端测试，常常会听到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

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