开始前端自动化测试的学习，这篇文章主要介绍我搭建Mocha+Travis-CI+Karma自动化测试环境的过程，GitHub项目搭建源码
工具介绍
Mocha
mocha一个JavaScript测试框架，通过它，可以为JavaScript应用添加测试，从而保证代码的质量。
关于mocha的使用教程，我从阮一峰老师的博客获益颇多，这里放上博客链接，测试框架 Mocha 实例教程
Travis CI
Travis CI是一个构建和测试的自动化工具，它可以直接连接我们的GitHub项目，每一次我们push到GitHub的代码更新，Travis可以自动帮我们自动拉取更新并且自动运行测试，甚至自动部署到测试环境。具体Travis CI使用教程 可以看廖雪峰老师官网
Karma
karma的主要目标是为我们提供高效的测试环境，使我们只需编写代码，并可以从测试中获得即时反馈。有了karma，我们只需要编写测试用例和功能代码，karma会检测文件的变化，自动运行测试。
- 首先在项目中安装karma包
npm i karma --save-dev - 然后全局安装karma-cli
npm i karma-cli -g
之后可以在命令行里直接调用karma命令，它会自动调用项目里的karma版本 - 开始初始化本项目的karma配置
karma init - 会跳出初始化配置项填写，我的配置项如下：
$ karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> 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
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next
question.
> 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.
> test/*.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
- 至此会在项目中生成一个karma.conf.js文件，这个就是karma的全部配置项了，之后可以直接在这个文件中更改配置
- 启动karma
karma start
会自动开启一个chrome窗口，选择debug模式，可以直接在浏览器中调试错误
集成测试框架
1. 集成karma和mocha
- 安装karma-mocha 插件
- 安装karma-chrome-launcher 插件，为了使karma自启动chrome
- 安装自己习惯的断言库，我使用should.js
2.集成karma和travis
第一次将配好的测试项目上传到GitHub，然后想通过Travis CI进行集成测试，但是Travis并没有对项目进行构建，排查原因如下：
- travis 默认不支持chrome，执行项目的时候发生失败
- karma是持续监听的机制，而travis只需要做一次构建，所以在travis环境下，要使脚本只执行一次
解决方案：
- 在.travis.yml文件中加入
before_script:
- "export DISPLAY=:99.0"
- "sh -e /etc/init.d/xvfb start"
根据官网文档，要在Travis CI上运行需要图形用户界面的测试，请使用xvfb（X Virtual Framebuffer）模拟显示。 如果您的项目需要运行要测试的Web应用程序，则需要在运行测试之前启动它。
-在.travis.yml文件中加入
script: karma start karma.conf.js --single-run
或者在karma.conf.js文件中，配置环境变量，设置在Travis环境下，karma只执行一次
var configuration = {...};
if (process.env.TRAVIS) {
configuration.singleRun = true;
}
config.set(configuration);
至此环境搭建成功
另：我在网上有看到别人的博客教程，其中有提到，Travis默认不是支持chrome，如果想要开启支持，需要同时在karma.conf.js和.travis.yml配置chrome的支持，代码如下：
karma.conf.js文件配置
// 配置travis_ci的默认浏览器为chrome 但是似乎注释这段代码也没有报错
configuration.browsers = ['Chrome_travis_ci'];
configuration.customLaunchers = {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
};
.travis.yml文件配置
# 其实这里我不明白这行代码有没有作用
#before_install:
# - "export CHROME_BIN=chromium-browser"
但是我在实际过程中并没有使用这两段代码，程序也运行成功了。
