前端动手开始试着写单元测试

单元测试分为 TDD（测试驱动开发）和 BDD（行为驱动开发）两种类型
两者的区别是驱动者、主导者不同

断言库

node是内置断言模块assert的，也有一些其他的断言库，如should.js expect.js

下面是assert， should.js, expect.js的一些写法

let a = 10, obj = {a: '1'}
// assert
assert.equal(a, 10, 'a != 10啊老铁')

// should.js
a.should.equal(10, 'a != 10啊老铁')
should(a).equal(10, 'a != 10啊老铁')
obj.should.have.key('a').be.a.Number()

// expect.js
expect(a).to.equal(10, 'a != 10啊老铁')
expect(obj).to.have.property('a').to.be.a('number')

断言库各有优缺点，可根据实际情况，选择使用哪种断言

测试框架

Mocha

Mocha是一个能够运行在Node和浏览器中的多功能的js测试框架

首先在我们测试的项目中安装Mocha
npm i mocha -D

然后在我们的项目中新建一个test文件夹，Mocha会自动检索这个目录下的测试文件并运行。

test/hello-test.js

const should = require('should')
let a = 10
describe('it is test', function() {
  it('a should equal 10', () => {
    should(a).equal(10, 'a != 10啊老铁')
  });
  it('a should equal 11', () => {
    should(a).equal(11, 'a != 11啊老铁')
  });
})

在控制台中输入mocha，即可看到运行结果

it is test
  ✓ a should equal 10
  1) a should equal 11


1 passing (11ms)
1 failing

1) it is test a should equal 11:

    AssertionError: a != 11啊老铁
    + expected - actual

    -10
    +11

describe用来描述你要测的主体是什么,可以多层嵌套
it 描述具体的一条测试用例的内容

Karma

Karma是个将我们的测试用例跑在浏览器上的框架

karma的使用

首先安装karma

npm i -g karma-cli
npm i --save-dev karma

然后在测试项目里输入karma init来初始化karma项目

$ karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
// 是选择你所用的测试框架 这里我们选择mocha(按tab健切换至mocha,敲回车)
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
// 是否在测试项目里使用require.js， 这里我们选择no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
// 默认打开的浏览器，选择chrome
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
// 哪些是需要引入的文件，这里除了本地文件，也可以引入cdn文件，和听过npm安装在依赖包里的文件，比如https://cdn.bootcss.com/jquery/2.2.4/jquery.js   node_modules/should/should.js
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
// 加载的目标文件不需要测试的文件
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
// 是否watch所有的文件
Config file generated at "/mocha_lean/karma.conf.js".
// 会生成karma.conf.js在测试的项目里，刚才所有的选项都可以在这里就行修改

在命令行中输入 karma start就会起一个端口默认为9876的服务，并且自动打开chrome，命令行中也出现了测试结果

09 11 2018 20:03:53.283:WARN [karma]: No captured browser, open http://localhost:9876/
09 11 2018 20:03:53.312:INFO [karma-server]: Karma v3.1.1 server started at http://0.0.0.0:9876/
09 11 2018 20:03:53.312:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
09 11 2018 20:03:53.320:INFO [launcher]: Starting browser Chrome
09 11 2018 20:03:56.367:INFO [Chrome 70.0.3538 (Mac OS X 10.14.0)]: Connected on socket gUMQo5IzqR60ZdIVAAAA with id 35123873

如何在浏览器中查看当前运行的测试结果呢？

http://localhost:9876页面的右上角有一个debug按钮，点开后，在打开的页面中打开控制台，测试结果会输出在控制台中

karma.conf.js的内容
// Karma configuration
// Generated on Fri Nov 09 2018 19:57:45 GMT+0800 (CST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '', //基础路径


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],//测试框架


    // list of files / patterns to load in the browser
    files: [ //引入的文件，这里的文件会被karma以标签移入到html中,所以需要注意文件的顺序
      'test/hello-test.js',
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876, //端口号


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false, // 持续集成模式 如果该值为true，karma将会启动和捕获配置的浏览器，运行测试然后退出 这里需要注意的是如果配置了travis-ci的话，需要设置为true，不然travis-ci会一直跑下去，没法自动结束

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

框架适配器（framework adapters）比如：Karma-mocha, Karma-chai ，reporters 比如 Karma-spec-reporter （后面我们还会介绍 Karma-coverage），以及预处理器，比如 Karma-webpack, Karma-sourcemap-loader，还有加载器（launchers），比如 Karma-chrome-launcher，都是作为 Karma 插件工作的。

针对这些 Karma 插件 我们都要安装对应的 npm 包，这些插件一般是以 karma- 开头，而 Karma 默认会自动加载 karma- 开头的 npm 包。因此我们没有在配置文件中明确指定 plugins 配置项（实际上它的默认配置项为 karma-*），但是一定要记得安装相应的 npm 包，特别是框架适配器和加载器，框架指定 Mocha 就要安装 Karma-mocha，浏览器指定 Chrome ，就要安装 Karma-chrome-launcher。

更多karma.conf.js的配置

Travis CI

Travis CI 提供的是持续集成服务 它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。

首先我们需要进入Travis CI官网
用我们的github账号登录，并将我们github上的一个项目关联到travis-ci上，并加以配置

之后在我们的项目的根目录下新建一个.travis.yml文件，这是配置文件，指定了 Travis 的行为。之后我们每次向github提交代码时都会在travis-ci中跑一遍我们的测试脚本

Travis 提供了7个钩子。

before_install：install 阶段之前执行
before_script：script 阶段之前执行
after_failure：script 阶段失败时执行
after_success：script 阶段成功时执行
before_deploy：deploy 步骤之前执行
after_deploy：deploy 步骤之后执行
after_script：script 阶段之后执行

.travis.yml文件

language: node_js // 指定运行的语言
script: npm run test // 所需要跑的script命令， 如果不需要运行，可设置为true
# 缓存 node_modules 文件夹，不需要每次都下载安装全部 npm 包。
cache:
  directories:
    - node_modules
# 指定 node 版本
node_js:
  - "11"
os: osx // 指定跑的测试脚本的环境
before_install: //在运行之前所需要运行的脚本，这里是安装karma-cli
- npm install karma-cli -g
// 可能会报没有chrome的错，需要加这两条命令
sudo: required 
addons:
  chrome: stable
// 如果travis-ci测试脚本一直跑，无法终结，可以通过配置karma的singleRun为true即可解决

配置好后把项目代码提交至github上，就可以去Travis CI官网查看是否运行通过了。
Travis-CI 还可以做很多事情，想要了解更多有关 Travis-CI 的使用方式，可以自行去 Travis-CI 官网 查看文档。我们只是使用了它的自动化测试的功能