AngularJS1.x + Karma + Mocha自动化单元测试

简介

mocha是一个js的测试框架，Karma是一个驱动测试的Runner。也就是说，karma为测试框架准备运行环境，可以让这些测试在真正的浏览器里运行，而且，karma运行测试的过程是自动化的。自动化并非理所当然的事。想起之前用Jasmine的时候，需要在一个html文件里引入各种js文件，然后用某个浏览器来打开这个html文件，使js在浏览器中运行起来。当测试内容发生变化时，需要刷新页面，并时不时地清空缓存。有了karma，就省事多啦~而且不需要额外的配置，karma就会自己找到系统已经装好的浏览器并启动。karma支持的测试框架还有Jasmine和Qunit。

假设现在已经搭建好了node环境。

1. 安装mocha和chai：
   mocha 是一个测试框架，自己已经提供了一套断言，但是，我们通常会需要使用类似 Jasmine 风格的断言，通过 chai 这个断言库，可以提供 expect 风格的断言支持。所以，我们需要安装这两个库。
   npm i -D chai mocha
   i 表示 install，-D 表示这是一个开发的依赖库。

2. 安装karam：
   npm i -D karma

3. 安装karma的mocha插件和chai插件：
   npm i -D karma-mocha karma-chai

4. 安装chrome-launcher：
   npm i -D karma-chrome-launcher

5. karma 的命令
   karma 支持三个命令：

• start [] [] 启动 Karma 持续执行，也可以执行单次的测试，然后直接收集测试结果.
• init [] 初始化配置文件.
• run [] [ -- ] Trigger a test run.

6. 创建 karma 配置文件
   Karma 需要进行配置，配置文件比较复杂，可以使用 karma 提供的 init 命令来直接创建基础的配置文件。在处理过程中，我们可以使用交互方式提供测试的信息，Karma 根据这些信息生成一个基本的配置文件。配置文件的默认名称是 karma.conf.js。如果你提供了配置文件的名称，karma 会将配置信息写入到你提供的文件名中。
   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.
    > js/*.js
    > js/**/*.js
    > test/**/*.spec.js
    29 09 2016 02:31:03.959:WARN [init]: There is no file matching this pattern.
   
    > 
   
    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
   
    Config file generated at "/xxx/karma.conf.js".
   

7. 配置 Karma
   在你的 Karma 配置文件中，配置使用 mocha 和 chai。
   frameworks: ['mocha', 'chai'],

8. 启动 Karma
   由于已经有了 karma 配置文件，现在可以使用 karma start 启动 karma 了，由于还没有测试，所以看不到测试结果是正常的。
   需要注意的是 karma 配置中的 singleRun 这个参数，设置为 false 的话，karma 会自动监控测试环境，默认是 Chrome, 如果你关掉了，karma 会自动重新启动一个。如果配置为 true，执行一次测试之后，karma 会自动停掉。
   在项目文件夹中，创建一个名为 test 的子文件夹来保存测试用例。然后在 test 文件夹中创建一个 unit 的文件夹来保存单元测试用例。在这个文件夹中创建一个名为 hello.spec.js 的测试文件。
   一般来说，我们会为测试用例的文件名称提供一个特定的模式，以便对测试用例进行统一处理，这里我们约定测试用例的文件名以 .spec.js 为结尾。

hello.spec.js

    describe('unit test.', function(){
        var expect = chai.expect;
        it('should also be able to test', function(){
            expect(true).to.equal(true);
        });
        it('should be failed', function(){
            expect(true).to.equal(false);
        })
    });

运行karma start:

    29 09 2016 02:46:41.281:WARN [watcher]: Pattern "/xxx/test/**/*.spec.js" does not match any file.
    29 09 2016 02:46:41.331:WARN [karma]: No captured browser, open http://localhost:9876/
    29 09 2016 02:46:41.341:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
    29 09 2016 02:46:41.341:INFO [launcher]: Launching browser Chrome with unlimited concurrency
    29 09 2016 02:46:41.348:INFO [launcher]: Starting browser Chrome
    29 09 2016 02:46:43.493:INFO [Chrome 53.0.2785 (Mac OS X 10.12.0)]: Connected on socket /#z9PyojXXsr8BMBe6AAAA with id 36868858
    Chrome 53.0.2785 (Mac OS X 10.12.0) ERROR
      Uncaught ReferenceError: angular is not defined
      at js/app.js:7

给出的错误信息是没有找到angular，在karma.conf.js中配置angular.js：

   files: [

      'lib/angular-1.5.5/angular.min.js',
      'js/*.js',
      'js/**/*.js',
      'test/**/*.spec.js'
   ],

重新运行karma start:
Chrome 53.0.2785 (Mac OS X 10.12.0) add unit test. should be failed FAILED
AssertionError: expected true to equal false
at Context. (test/unit/hello.spec.js:8:25)
Chrome 53.0.2785 (Mac OS X 10.12.0): Executed 2 of 2 (1 FAILED) (0.024 secs / 0.003 secs)

这个测试包含了两个测试用例，一个一定成功，一个一定失败。
可以看到执行了两个测试，其中一个失败了，失败的测试为hello.spec.js中的should be failed测试用例。

这里只是简单的js代码测试，要支持angular代码的测试，还需要进一步配置karma.conf.js:

 files: [

    //3rd Party Code
    'lib/angular-1.5.5/angular.min.js',
    'distJS/lib.all.js',
    //App-specific Code
    'js/*.js',
    'js/**/*.js',
    //extra testing code
    'lib/angular-mocks/angular-mocks.js',
    //test files
    'test/**/*.spec.js'
    ],

9. 引入angular-mocks

Angular also provides the ngMock
module, which provides mocking for your tests. This is used to inject and mock Angular services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend
, which lets us mock XHR requests in tests, and return sample data instead.

执行npm命令：
npm i -D angular-mocks

10. angular模块单元测试
    angular单元测试示例给出的是基于jasmine的单元测试，mocha的语法基本上差不多。
    describe('format filter', function () {
    var expect = chai.expect;
    beforeEach(angular.mock.module('app'));
    var $filter;
    beforeEach(inject(function ($filter) {
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $filter = $filter;
    }));
    it('format success', function () {
    var formatFilter = $filter('formatFilter');
    expect(formatFilter('123456789098765432')).to.equal('1234567890****5432');
    });
    });

参考：

1. Javascript测试之karma + mocha
2. 集成 Karma 和 mocha 进行单元测试
3. AngularJS: Developer Guide: Unit Testing
4. Full-Spectrum Testing with AngularJS and Karma