使用Karma作端到端测试

Karma是什么：

下面是Karma官网的描述：

The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.

简单来讲，Karma就是一个用于运行端到端的测试环境，Karma能够用来运行Jasmine写的单元测试和AngularJS提供的Angular_scenario写的端到端测试。

Karma的优点：

• Concordion搭配Selenium：

在之前的项目中都是使用的Concordion搭配Selenium作的端到端的测试，这种搭配好处在于描述性很强，Concordion写出来的测试就是一本活的用户文档和需求文档。

很差的地方也很明显，要求测试人员的开发能力，从零开始到第一个测试运行起来，这种方法须要很大的花费来配置环境以及搭建测试框架。这种模式是分层的，最下面是Page Object，每一个页面的方法, 中间的是Test class，最上面的是UI描述，下面两层都是须要使用到Selenium，Selenium才能提供web driver去操做浏览器，Concordion是html语法的，因此可以有不少表现样式在测试中，所以能带来质量很高的测试描述性，Concordion的测试能够做为需求和用户文档的所在。

使用Concordion和Selenium搭配须要更多的花费来配置好端到端的测试环境和框架。我认为选用哪一种方式作端到端的测试是能够衡量的项目须要的。

更多的关于Concordion和Selenium搭配的端到端测试请参考官网。

• Karma搭配AngularJS:

Karma配置简单，对于前端是使用AngularJS的项目来讲尤为如此，由于大多数的依赖都已经在项目中了。其余的web项目也可使用Karma来作测试，须要额外引入AngularJS的一些文件，使用Karma作测试的优点是显而易见的。

• 运行方便：一条命令便可以运行测试，且Karma有Maven插件和Gradle插件，能够方便地与其余的构建工具集成。
• 调试方便：支持快速写好测试，当即检验，还能够对测试进行调试，反馈周期短，能更快地定位出问题所在。
• 花费少：使用Karma运行完全部测试，花费的时间少，若是使用PhantomJS运行测试，时间会更短。因为Angular-scenario的语法很简单，学习花费就不高，而且不须要写不少代码就能够运行了，写测试的时间花费就少。

Karma的环境配置（在Windows和Mac下都试验过）：

方式一：

• 安装NodeJS，直接去官网<http://nodejs.org/ >下载最新的安装包进行安装。
• 安装Karma，使用nodeJS提供的npm(node package manager)来安装。在命令行下（其中的-g是指全局安装，karma-ng-scenario是运行端到端测试所需的插件）:

• npm install -g karma
  npm install -g karma-ng-scenario

• 安装PhantomJS，有两种方式：

1. 使用npm来安装:

   npm install -g phantomjs

2. 从官网上下载最新的安装包自行安装。地址是http://phantomjs.org/ 。

方式二：

1. 拷贝上面已经安装好的那些文件从别的机器上面，放在一个目录下，例如c:dev/software/node
2. 而后将该目录加入系统环境变量的path中，放在最前面比较好。
3. 运行karma命令在命令行中，检验配置是否正确。

方式三：

一样将已经安装好的文件拷贝出来，放到项目的目录中，在讲运行karma的时候能够讲到怎么将这些文件配置进去。

 

如何用Karma作端到端的测试：

• 须要一个配置文件，用于配置karma怎么运行测试：

1. unit测试的配置文件，我通常命名为：karma.unit.config.js放在config目录下，其中files配置的是测试代码放的位置

    module.exports = function(config) {
        config.set({
            basePath : '',
            frameworks : ['jasmine'],
            files:[      
                '/unit/*.spec.js'
            ],
            port : 9876,
            browsers : ["PhantomJS"],
            singleRun : true,
            reporters : ["progress"],
            plugins : [
                'karma-jasmine'
                'karma-chrome-launcher',
            ],
        });
      };

2. 端到端测试的配置文件，我通常命名为：karma.e2e.config.js一样放在config目录下，其中files配置的是测试代码放的位置

   module.exports = function(config) {
       config.set({
           basePath : '/',
           frameworks : ['ng-scenario'],
           files:[      
               'e2e/*.spec.js'
           ],
           proxies: {
               '/' : 'http://localhost:8080/'
           },
           port : 9876,
           browsers : ["Chrome"],
           singleRun : true,
           reporters : ["progress"],
           plugins : [
               'karma-ng-scenario',
               'karma-phantomjs-launcher',
           ],
       });
     };

   若是运行karma时发现问题时，能够参考更多配置文件的属性官网介绍。毕竟每一个人的项目结构也不同。

• 运行测试，项目目录下在命令行下运行以下命令(unit测试也是同样的，只是更改下配置文件就行)：

  karma start config/karma.e2e.config.js

• 如何写端到端的测试请参考AngularJS E2E Testing有详细的介绍，很是简单就能够构建好本身的单元和端到端测试。

Karma与Maven的集成：

• 在pom.xml文件中配置karma插件，不少状况下，由于咱们要在远程服务器上面运行咱们的全部测试，或者由于不想其余组员都去本机配置一下karma的环境，每每将karma的文件放在项目代码中，workingDirectory就是指定karma文件所在位置的，在个人项目中，我将karma等文件直接放在lib目录下面的。

  <build>
          <plugins>
              <plugin>
                  <groupId>com.kelveden</groupId>
                  <artifactId>maven-karma-plugin</artifactId>
                  <version>1.5</version>
                  <executions>
                      <execution>
                          <goals>
                              <goal>start</goal>
                          </goals>
                          <configuration>
                              <workingDirectory>${basedir}/lib</workingDirectory>
                              <configFile>config/karma.e2e.config.js</configFile>
                          </configuration>
                      </execution>
                  </executions>
              </plugin>
          </plugins>
      </build>

   

• 怎样将js的单元测试也加入karma，配置以下：

  <build>
          <plugins>
              <plugin>
                  <groupId>com.kelveden</groupId>
                  <artifactId>maven-karma-plugin</artifactId>
                  <version>1.5</version>
                  <executions>
                      <execution>
                          <goals>
                              <goal>start</goal>
                          </goals>
                          <configuration>
                              <workingDirectory>${basedir}/lib</workingDirectory>
                              <configFile>config/karma.unit.config.js</configFile>
                          </configuration>
                      </execution>
                      <execution>
                          <goals>
                              <goal>start</goal>
                          </goals>
                          <configuration>
                              <workingDirectory>${basedir}/lib</workingDirectory>
                              <configFile>config/karma.e2e.config.js</configFile>
                          </configuration>
                      </execution>
                  </executions>
              </plugin>
          </plugins>
      </build>            

   

 

• 若是在lib目录下除了karma的文件夹外，还有一些批处理文件的话，例如karma.cmd以及karma文件，也能够将上面配置中的以下行：

  <workingDirectory>${basedir}/lib</workingDirectory>

  替换为(使用Windows的cmd.exe运行mvn clean install时)：

  <karmaExecutable>${basedir}/lib/karma.cmd</karmaExecutable>

  或者替换为(使用Windows的powershell或者其余平台运行mvn clean install时):

  <karmaExecutable>${basedir}/lib/karma</karmaExecutable>

• 请注意大多数状况下，在运行karma前须要启动服务器哦~将web项目运行起来，对于server的启动和中止的配置就不赘述了。

• 有了上面的配置，那么可使用Maven去运行测试了

  mvn clean install

有什么能够提升的部分：

从上面的配置能够看出使用karma来构建咱们的测试是很方便，容易，快捷的，优点显而易见，测试的语法也很简单，很是容易上手，与后台代码是彻底解耦和的。可是和Concordion比起来，测试代码的描述性并不强，还有就是每每容易忘记更新测试的描述在改了测试的意图后。但愿在写测试的时候，也多考虑下测试的描述语句，但愿能弥补下这点不足。

 

示例代码，放在Github：Karma-Test

更多的单元测试的资料：AngularJS Unit Test