前端单元测试(待补充)

单元测试的好处

语言：
javascript动态性，缺少类型检查；javascript宿主兼容性问题，比如Dom操作在不同浏览器上的表现不同。
其他：
测试可快速反馈功能输出，验证想法；可以保证代码重构的安全性；测试用例可以堪称代码api的使用文档，对API使用者友好；易于测试的代码说明代码设计良好。

开发驱动方式：ATDD TDD BDD

ATDD： Acceptance Test Driven Development（验收测试驱动开发）
TDD： Test-driven development （测试驱动开发）
BDD:Behavior-Driven Development (行为驱动开发)

单元测试框架和工具

断言库

断言库。断言指“用彼代码断定测试此代码的正确性，检验并暴露此代码的错误”。
常见断言库：

Node assert
should.js
expect.js
chai.js

前端测试框架

前端测试框架，运行测试的工具

Mocha
Jasmine
Jest
QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!

Karma

基于node.js的Javascript测试任务管理工具。主要目标在于为开发人员提供高效的测试环境，无需设置大量配置。
本质上是产生web服务器的工具，该服务器针对连接的每个浏览器执行测试代码，检查每个浏览器的每个测试结果，并通过命令行显示给开发人员。

Karma特点：

在真实环境中测试
支持远程控制
用Jasmine, Mocha, QUnit描述测试，或为这些框架编写简单的适配器
支持CI（简单的与Jenkins, Travis, Semaphore集成）
支持调试
扩展性
高效

工作原理：
http://taobaofed.org/blog/2016/01/08/karma-origin/
https://karma-runner.github.io/3.0/intro/how-it-works.html

安装：

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

运行：

# Run Karma:
$ ./node_modules/karma/bin/karma start

# Or
$ npm install -g karma-cli
$ karma start

配置：
安装好Karma后，需要配置。执行Karma Init，根据需要填写，填写完毕之后会在当前目录下生成karma.conf.js文件，同时根据我们的配置情况，package.json中会多一些依赖项。
下面是karma init的时候填写的，eg:

Which testing framework do you want to use ? (mocha)

Do you want to use Require.js ? (no)

Do you want to capture any browsers automatically ? Chrome

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)

Should any of the files included by the previous patterns be excluded ? ()

Do you want Karma to watch all the files and run the tests on change ? (yes)

karma.conf.js文件格式

module.exports = function(config) {
  config.set({
    basePath: '../..',
    frameworks: ['jasmine'],
    //...
  });
};

Karma configuration也可以用CoffeeScript或者TypeScript编写，并作为常规nodeJs模块加载。除非作为参数提供，否则Karma CLI将会按顺序查找config文件。

跟其他的方案对比
在这里插入图片描述

Travis CI

提供持续集成服务，简称CI。
持续集成指代码变更会自动构建和测试，反馈运行结果，确保符合预期之后，再将新代码集成到主干, 甚至自动部署到测试环境。持续集成的好处是每次代码的小幅变更，就能看到运行结果，不断累积小的变更，而不是在开发周期结束时一下子合并一大块代码。

Travis
Travis CI只支持github, 不支持其他的代码托管服务。对开源项目免费，不用GitHub虽然也能用Travis，但是配置起来太麻烦。

使用Travis登入Travis CI网站，Travis会列出github上你所有的仓库，以及所属的组织。此时，选择需要Travis帮你构建的仓库，打开开关激活仓库，Travis会监听仓库的所有变化。
在这里插入图片描述
.travis.yml
项目的根目录下必须有一个.travis.yml配置文件，当代码有新的commit时，Travis会找到这个文件并执行里面的命令。

#简单的travis.ymal:
#指定默认运行环境
language: python
#script为true不执行任何脚本，状态直接设为成功
script: true

运行流程：

install 阶段，安装指定脚本
一旦command1失败，整个install结束
```
# install: ./install.sh
install:
	- command1
	- command2	
```

script阶段，指定构建或测试脚本

#script: bundle exec thor build

#command2在command1成功后才能执行
# script: command1 && command2 

#如果command1失败，command2继续执行。但是整个构建阶段失败。
script:
	- command1
	- command2

通知和部署
可以部署到很多环境中，例如Github, npm等。例如部署到github，.travis.yml可以写成：

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
  keep-history: true
  on:
    branch: master

运行状态
passed: 运行成功
canceled：取消执行
errored：before_install, install, before_script有非零退出码，运行立即停止
failed：script有非零退出码，会继续执行

配置

钩子方法

before_install,
before_script,
after_failure, //script阶段失败执行
after_success, //script阶段成功执行
before_deploy,
after_deploy,
after_script

完整的生命周期应该是：

before_install, install, before_script, script, after_success/after_failure, before_deploy, deploy, after_deploy, after_script

环境变量
.travis.yml的env字段

env:
- DB=postgres
- SH=bash
- PACKAGE_VERSION='1.0.*'

本文是个人笔记，参考自下面链接：
http://taobaofed.org/blog/2016/01/08/karma-origin/
http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html

// TODO:
https://zhuanlan.zhihu.com/p/32702421
PhantomJS
casperJS
Jenkins