前端自动化测试环境搭建(Mocha+Travis-CI+Karma)

开始前端自动化测试的学习，这篇文章主要介绍我搭建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会检测文件的变化，自动运行测试。

1. 首先在项目中安装karma包
   npm i karma --save-dev
2. 然后全局安装karma-cli
   npm i karma-cli -g
   之后可以在命令行里直接调用karma命令，它会自动调用项目里的karma版本
3. 开始初始化本项目的karma配置
   karma init
4. 会跳出初始化配置项填写，我的配置项如下：

$ 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

5. 至此会在项目中生成一个karma.conf.js文件，这个就是karma的全部配置项了，之后可以直接在这个文件中更改配置
6. 启动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);

karma官网文档关于配置Travis的指南

至此环境搭建成功

image.png

另：我在网上有看到别人的博客教程，其中有提到，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"

但是我在实际过程中并没有使用这两段代码，程序也运行成功了。