前端单元测试以及自动化构建入门

写在开头

本文涉及的知识点会比较广，因此每一个知识点不会很深刻，都有有对象的资料和demo,须要读者本身查漏补缺。学习最好的方法就是本身动手查阅资料的过程。但愿这篇文章可以帮助到你。

所涉及的知识

• Node assert
• mocha
• should.js
• karma
• Travis CI

先了解两个知识点

TDD

测试驱动开发是敏捷开发中的一箱核心实践和技术，也是一种设计方法论。在开发项目以前，先编写单元测试用例，基本思路是经过测试用例来推进整个项目开发，但也不只仅只是单纯的测试工做，咱们依然能够在整个项目的需求分析、设计以及质量控制中灵活运用。

BDD

行为驱动其实在测试驱动开发上面的拓展，是着眼于想要实现的业务行为，核心是设计，并引导整个团队更好的前进。

Node assert的api你们本身看一下，仍是掌握其中几个常常用到的，好比assert.strictEqual、assert.fail以及assert.throws

简单讲一下mocha

mocha是个测试框架工具，浏览器和Node环境均可以运行。 mocha的官网文档写的真的是，阅读起来实在太痛苦了，可能做者喜欢这种流水式的写法。

先来看一个简单的例子，一下代码的运行环境需求node,还须要全局安装mocha。具体代码能够查看个人github里的exercise1

var assert = require('assert')

  describe('#indexOf()', function () {
    it('should return -1 when the value is not present', function () {
      assert.equal(-1, [1, 2, 3].indexOf(4)) 
    })
  })

上面是其中一个测试用例，它能够单独执行，先引入一个断言库asset，断言库还有不少，好比chai;

基本写法就一个describe块包含至少一个it块。

describe块被称为"测试套件"(test suite),表示一组单元测试。第一个参数用来编写描述用例的功能和结果，第二个参数实际执行的函数。

it块被称为"测试用例"(test case),表示一个单独的测试，第一个参数是测试用例的名称，第二个参数是一个实际执行的函数。

mocha 基本用法
在控制台经过一下语法运行脚本

mocha test/test.js

就会获得以下结果：

mocha 命令后面能够紧跟多个测试脚本的路径

mocha url1 url2 url3

mocha也有属于本身生命周期,看取名基本就明白意思了。

describe('hooks', function() {
  before(function() {
    //全部测试用例的统一前置动做
  });

  after(function() {
    //全部测试用例的统一后置动做
  });

  beforeEach(function() {
    // 每一个测试用例的前置动做
  });

  afterEach(function() {
    // 每一个测试用例的后置动做
  });
});

还有不少方法，具体能够看下阮大神的mocha教程,更加通俗易懂，固然看官网文档仍是最全面的。

should.js 简读

should.js的api就多了，我是没有所有用过，平时用的最好的也就那么几个，这种链式写法是否是有中JQ的感受。写起来如行云流水，真舒服。在环境运行是最多见到的就是明明装了should模块，却报错说cannot find module 'should',以下图。心中有一万只草泥马奔过，路骂，你是否是瞎呀。。。哈哈。小伙子不要急躁，所谓代码虐我千百遍，我待代码如初恋。找不到should模块是有缘由的，通常尝试下降些版本。毕竟外国鵀用的linux多，对于windows仍是支持没那么快。或者换个淘宝镜像再从新npm下。也许就跑通了。

项目例子在这里，下面展现部分代码

var should = require('should');
var add = require('../lib/add');

describe('大数相加add方法', function () {

  it('字符串"42329"加上字符串"21532"等于"63861"', function () {
    add('9987', '987')
      .should.equal('10974')
  })

  it('"843529812342341234"加上"236124361425345435"等于"1079654173767686669"', function () {
    add('843529812342341234', '236124361425345435')
      .should.equal('1079654173767686669')
  })
})

单元测试实现的一个大数相加的功能，涉及的知识点仍是蛮多的。你们仔细解题仍是会有不少收获的。至于哪些知识点，就靠你本身去挖掘了。

最后经过后以下图所示：

karma是个什么东东

karma是google angular团队开源的产品，主要目的就是给开发人员提供一个高效的测试环境。就如同一个脚手架，你只须要设置简单的配置便可，而后编写测试代码就能得到你想要的结果，是一个提升团队生产力和创造力的强有力的工具。

安装步骤

//选全局安装karma-cli
npm install -g karma-cli

//而后在你的项目里安装karma
npm i karma -D

//安装一些插件
npm i npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

接下里初始化karma

在上面项目的根目录下使用下面命令

karma init

按照以下配置选择配置项

1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
5. Should any of the files included by the previous patterns be excluded ? ()
6. Do you want Karma to watch all the files and run the tests on change ? (yes)

最后一步结束后就会在项目根目录中出现一个karma.conf.js的配置文件。咱们来看下几个比较重要的配置项。

• frameworks

所依赖的测试工具，我这里是用了mocha,你也可使用默认的 jasmine.

• files

项目中文件的本地地址，数组的形式展开，也能够是服务器地址，这里面的配置将会所有以js的形式经过script从浏览器里加载出来。放到页面底部。

• browsers

所依赖的浏览器环境，通常是填写Chrome,个人Chrome浏览器是须要填写Chrome_travis_ci才行。并安装karma-chrome-launcher插件。

• singleRun

默认是false,若是是true，运行karma start只会测试一次测试用例，而后返回结果并退出。

• autoWatch

默认为true,实时监听文件的修改，当有修改时就会重加加载测试用例，有点热加载的意味。

经过下面命令跑起整个项目

karma start

你会发现浏览器自动打开了一个以下图所示的页面

而后点击DEBUG按钮，跳转到另一个页面，这时候打开控制台，你就会看到一个配置加载好的页面，这时候你就惊讶原来karma的设计思想是这样的。

项目地址,最后要是运行成功，就会出现下面的结果。

Travis CI 的做用又是什么。

咱们先了解下什么持续集成

通俗点讲，就是天天都要向老板报告一天的工做状况，而且还要反思总结。专业性点讲就是天天将代码集成到主干。

• 优势

一、快速发现错误，能够说当日问题当日解决，不留隐患。
二、由于集成的频繁，因此分支并不会大幅度偏离主干。

若是想详细解读，请参考阮大神的文章

Travis CI就是一个持续集成的工具，而且集成了GitHub,可以自动化的构建和测试操做，而且对公有的仓库free,这是极大的有利于开源项目的健康发展呀，咱们就能够很方便，高效的维护开源项目

要使用这么强大的功能，第一步是配置文件，在咱们项目的根目录中建立一个.travis.yml文件。这个文件就包含了Travis CI须要用到的配置和指令。好比项目中经常使用的几个配置。具体请自行查看

//编程语言所需的环境
language: node_js 
node_js:
- "10"
- "8"
//执行的脚本
script: node_modules/karma/bin/karma start karma.conf.js --single-run
//脚本运行前不要安装的内容
before_install:
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

项目中配置好.travis.yml文件后，提交代码到远程github仓库，而后打开travis-cli上和你的github已经关联好的仓库,以下图所示：

页面上那个taggle按钮就是是否开启自动化构建，这时候把exercise3项目打开，并点击进去详情，就会看到一个已经构建成功的项目。若是想从新构建也能够点击more options选择tiragger build,见下图：

到这里，一个简单的项目算是构建成功了。更多深刻的学习，请持续关注。

若是大神您想继续探讨或者学习更多知识，欢迎加入QQ或者微信一块儿探讨：854280588