Angular JS - unit test

Posted on 2017-10-27 Edited on 2018-06-13

~~Edit~~

前端代码一直没有做unit testing，也不知道怎么做。在Yaakov Chaikin的Coursera课程中，第五章正好介绍了相关内容。所以就顺便在自己的项目中实践了一把。无数次的实践证明，看得头头是道，写起来就到处是坑。小小的内容，着实花了不少时间。

针对前端的代码，网上采用的测试框架大多是karma + jasmine + chai。因为我之前在后端代码的测试中多采用mocha + should + sinon。所以本次实践，仍然爱采用mocha框架，来搭配karma使用。

karma是一个自动化测试框架。因其丰富的配置选项，良好的扩展性能，被广泛应用，尤其是在前端。因为前端要针对各种版本的浏览器，各种框架，如果全部靠手动去适配，基本不太可能。所以大家都用karma了。

karma setup

基本配置参考前端单元测试之Karma环境搭建

配置文件简单如下：

module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: [...],
    // list of files / patterns to load in the browser
    files: [
      '...',
      {pattern: '...'}
    ],
    // list of files to exclude
    exclude: [
    ],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['...'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
    // Which plugins to enable
    plugins: []
  })
}

简单的解释目前用到的选项：

frameworks: 使用到的框架，所有使用到的，要在下面plugins中列明。比如：frameworks中包含mocha，则plugins下就要包含karma-mocha
basePath, files, exclude: 这三个指明了karma要加载的JS文件
- basePath：基础目录，会直接插入到files，exclude指定的路径前面
- files：加载文件，支持通配符和正则式，通过大括号还可以添加配置选项。通配符’**’表示所有目录，’*’表示所有文件，’**/*’表示其下所有目录所有文件。
- exclude: 可以剔除files中不想要的文件
browsers：使用的浏览器，如果想要headless测试则可用PhantomJS

karma with ES6

因为PhantomJS不支持ES6语法(网上说，PhantomJS甚至对ES5的支持都不是很好)，所以karma要测试包含ES6语法的代码，还需要一番配置。网上相关的帖子很多，列举如下：

Testing ES6 with Karma, RequireJS, and Angular - karma-es6-shim
How to Start Writing Your AngularJS Tests in ES6 - karma-babel-preprocessor
Writing Jasmine Unit Tests In ES6 - webpack

总的来说，有这么几种解决方案：

karma-es6-shim
karma-babel-preprocessor
webpack
SlimerJS
前三种有点复杂，目前的我的技术栈还无法理解。最终选择最简单的SlimerJS。在Linux上可以通过Xvfb做到headless测试，Windows上就这样吧，跳个窗口也不是什么大事。

Debug karma test using Chrome

这个在初学的时候还是很重要的，如果没有这个工具，恐怕我也跳不出自己给自己挖的大坑。
参考链接：Debugging Karma Unit Tests
按照上面的步骤打开调试页面和Chrome Dev Tool页面，刷新页面即可重新加载代码并触发断点。
将命令行写入package.json，以后调用npm就可以方便的打开该调试工具。

{
...
  "scripts": {
    "start": "node ./bin/www",
    "karma-debug": "cd public/js && karma start --browsers=Chrome --single-run=false --debug"
  },
  ...
}

ngMock

ngMock中两个最重要的关键词就是：module, inject。可以参考这个人的博客：

ngMock通过module加载已经定义了的模块，或者定义匿名module并提供新的service，或者复写已存在的service。module只是将名字，以及对应位置存入一个数组。inject将真正的加载所有module提供的service，并解决依赖关系，还可以将相应的service导出到test case中使用。其实ngMock也就是做了这两件事情。
下面简单介绍一些有助于理解的知识点。

angular.mock.module

module函数的原型是angular.mock.module(alias, obj, func)
module接受三种参数类型，每一种都可以单独使用，用来定义或加载对应模块

alias: 是module名字字符串，可以是在待测代码中定义的，也可以是在测试文件中定义的
obj: 一个普通的字典结构，他会生成一个匿名module，其中的成员会被定义成$provide.value()
function: 同样是定义一个匿名module，不同的是，function可以用$provide作为参数，来定义各种各样的service。

function() vs Object
The examples we used were similar, so what’s the key difference between the function() and Object form? As the Object type gets added as a $provider.value, it is therefore restricted to the capabilities of the value service, most importantly that a value service cannot be injected with other services.

关于$provide，可以参考Angular官方文档

The $provide service has a number of methods for registering components with the $injector. Many of these functions are also exposed on angular.Module.

它提供了下面的这些service

provider(name, provider) - registers a service provider with the $injector
constant(name, obj) - registers a value/object that can be accessed by providers and services.
value(name, obj) - registers a value/object that can only be accessed by services, not providers.
factory(name, fn) - registers a service factory function that will be wrapped in a service provider object, whose $get property will contain the given factory function.
service(name, Fn) - registers a constructor function that will be wrapped in a service provider object, whose $get property will instantiate a new object using the given constructor function.
decorator(name, decorFn) - registers a decorator function that will be able to modify or replace the implementation of another service.

angular.mock.inject

$inject是ngMock的核心，看看官方的定义

The inject function wraps a function into an injectable function. The inject() creates new instance of $injector per test, which is then used for resolving references.

inject就是定义了一个injector，那injector又是什么

$injector is used to retrieve object instances as defined by provider, instantiate types, invoke methods, and load modules.

$injector也就是AngularJS的核心。它提供了所谓的“DI” (Dependency Injection)模式。Angular的核心代码通过$injector来获取对应service的reference。
我们通常将inject放在beforeEach里，这样inject就为每个测试定义一个injector，为这个injector准备好所有的service，并能通过参数将任意已有的service导出。

Test controllers

了解了上面的两个重要组件之后，针对不同的测试组件就容易理解了。
直接上代码：

describe('main controller', function() {
  var $controller
  var mainCtrl
  beforeEach('set up module', function() {
    module(function ($provide) {
      $provide.service('MockDataService', function () {
        const service = this
        service.data = 'test data'
      })
    })
    module('MainModule')
  });
  beforeEach('set up controller', inject(function (_$controller_, MockDataService) {
    $controller = _$controller_
    mainCtrl = $controller('MainController', {
          DataService: MockDataService
    })
  }))
  it('should assemble print page URL correctly', function() {
    mainCtrl.getData().should.equal('test data')
  });
});

这里只有两个值得注意的地方，其实前文也都有提及。

第一个module中通过$provide提供了一个假的service，这个service可以通过其名字被inject。
inject中通过_$controller_来导出controller的构造函数。通过这个构造函数来构造相应的待测controller，并传入假的service达到mock的目的。

Test services

仍然直接上代码：

angular.module('PrinterData', [])
.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

describe('printer data service', function() {
  var $httpBackend
  var PrinterDataService
  beforeEach(function(){
    module(function ($provide) {
      $provide.provider('$location', function () {
        const provider = this
        const location = {}
        location.search = function (){
          return {
            id: 'test id',
          }
        }
        provider.html5Mode = sinon.stub()
        provider.$get = sinon.stub().returns(location)
      })
    })
  });
  beforeEach(function() {
    module('Data')
    inject(function ($injector) {
      $httpBackend = $injector.get('$httpBackend')
      DataService = $injector.get('DataService')
    })
  });
  it('should update if succeeds', function(done) {
    $httpBackend.whenGET(/.*/)
      .respond({
        status: 'ready'
      })
    DataService.getStatus().then(function (data) {
      data.should.deepEqual({
        status: 'ready'
      })
      done()
    }).catch(function (err) {
      should.not.exist(err)
    })
    $httpBackend.flush();
  });
})

下面罗列一些实际使用中碰到的一些问题，以及自己的一些理解。

使用$injector

我们说过inject函数就是用来创建$injector，所以$injector也是可以直接被导出使用的。这时需要什么service，就可以直接调用$injector.get。为什么不直接通过参数来inject呢？当然是因为参数太长了，不好看。。。

mock $http

为了测试稳定性，我们在unit test中并不真正的访问服务器，而通常采用假的服务器响应来mock。这就需要用到$httpBackend service。那么$http和$httpBackend之间的关系是什么？

HTTP backend used by the service that delegates to XMLHttpRequest object or JSONP and deals with browser incompatibilities.
You should never need to use this service directly, instead use the higher-level abstractions: $http or $resource.
During testing this implementation is swapped with mock $httpBackend which can be trained with responses.

具体做法，上面的代码中已有，节录如下：

beforeEach(function() {
    module('Data')
    inject(function ($injector) {
      $httpBackend = $injector.get('$httpBackend')
      DataService = $injector.get('DataService')
    })
  });
  it('should update if succeeds', function(done) {
    $httpBackend.whenGET(/.*/)
      .respond({
        status: 'ready'
      })
    DataService.getStatus().then(function (data) {
      data.should.deepEqual({
        status: 'ready'
      })
      done()
    }).catch(function (err) {
      should.not.exist(err)
    })
    $httpBackend.flush();
  });

通过$httpBackend.wheGET(...).respond(...)来设置mock response。whenGET还支持正则式。
调用完请求函数后要记得$httpBackend.flush()将请求真正的发出。否则请求并不会发出，直到调用flush()函数，或者测试超时失败。

如何mock $location & $locationProvider

很惭愧的说，在这个问题上我花了很久很久的时间，搜索了大量的google网页，最后还是依靠chrome追踪angular核心代码才发现原来是自己给自己挖的坑，对service, factory和provider理解不透彻。
首先来就事论事，说一下到底怎么完成我的这个测试。

因为我要测试DataService，而DataService定义在Data moduleDataService调用了$location service。需要将之mock掉。最简单的想法就是通过inject来获得$location service reference。并通过sinon.stub来设置需要的返回值。

inject(function ($injector, $location) {
  sinon.stub($location, 'search').returns({
    id: 'test id'
  })
  DataService = $injector.get('DataService')
})

但是我倒霉催的，竟然是用$provide做了：

module(function ($provide) {
  $provide.service('$location', function () {
    const location = this
    location.search = sinon.stub().returns({
      device_id: 'test id',
    })
  })
})

这样就会有问题了，当ngMock加载这个模块的时候，会先定义一个$locationProvider，这就会覆盖其自带的$locationProvider。而如下的module.config方法中对$locationProvider的操作就会出现问题：

angular.module('PrinterData', [])
.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

因为新定义的$locationProvider中没有html5Mode成员。于是想了各种办法来mock $locationProvider。结果因为对service，factory，provider的理解不正确，都失败了。放一段错误的代码：

beforeEach(function(){
  module(function ($provide) {
    $provide.service('$locationProvider', function () {
      const location = this
      location.html5Mode = function(){}
    })
    $provide.factory('$location', function () {
      const locationProvider = this
      locationProvider.html5Mode = function(){}
    })
})

第一个用$provide.service会定义一个$locationProviderProvider
第二个用$provide.factory定义了一个$locationProvider，但是没有返回，所以$location service不会被实例化，也就没有$location service了。
如果想通过mock $locationProvider来mock $location service的话，正确的做法应当是：

$provide.provider('$location', function () {
  const provider = this
  const location = {}
  location.search = function (){
    return {
       device_id: 'test id'
    }
  }
  provider.html5Mode = sinon.stub()
  provider.$get = sinon.stub().returns(location)
})

mock掉provider.$get函数，提供假的location服务。其实还有很多办法，例如获得$locationProvider再对$get函数进行stub，也可以。没有再一一尝试了。理解了错误和正确的做法，想再去实现就得心应手了。

测试.config/.run块

Data module有一个.config块，因为模块加载的时候会先运行其.config块，然后是.run块。因其特殊性，所以在对其中使用到的服务进行mock要注意顺序。可以参考这个链接：Testing config and run blocks in AngularJS
How to easily test an often neglected part of your application

如何mock $interval

在单元测试中，我们通常要采用mock的手段，而不真正的使用时间服务。在sinon中，可以使用fake timer来取代JS中标准的setTimeout和setInterval。不过这个在Angular JS中并不起作用，如果我们使用$interval服务的话。
因为在对Angular JS做单元测试的时候，$interval并不会调用setInterval。原因是这里的$interval其实是ngMock中的$interval。此时可以使用$interval.flush(ms)来将时钟推进若干时间。当然如果愿意，也可以用sinon来mock从$injector中get出来的$interval service。$timeout service也类似，有同样的方法对付单元测试。

Promise not resolve

在Angular JS中，我们往往调用$q service来使用Promise，而$q.defer().promise只在$scope的digest cycle才会判定resolve还是reject，所以要触发$q产生的promise，一定要调用对应的$scope.$apply()或者$scope.$digest()。stack overflow中也有大把类似问题的解答。具体也可以参考这篇博客，讲得很透彻：

Unit Testing with $q Promises in AngularJS

在Angular JS中，也可以使用标准的Promise，例如: var promise = new Promise(resolve, reject)。但是貌似，标准的Promise和\q兼容的并不很好，下面的code并不会工作：

var promise = $q.all([promise1, promise2])
$scope.$apply()

promise并不会在promise1和promise2返回之后返回，实际上是他根本就不会返回，直到测试超时失败。

“Unexpected request: GET …/.html” on Karma tests

这是Yaakov在视频中提到的需要使用$templateCache的情形。Yaakov提到用karma是解决该问题最好的办法，但是因为视频并不涉及介绍karma，所以并没有说应该怎么做。
当我们的karma test加载了route.js，并在其中定义了component，则测试在实例化该Angular component的时候回去用$http service来GET该template html文件，于是产生了该unexpected request错误。Yaakov在教程中的解决办法是，通过一次真正的AJAX从服务器上请求该html，并将之存入$templateCache中，之后就不会再有真正的GET AJAX产生了。其实这一段可以通过配置karma来实现。具体做法如下：

安装ng-html2js，karma-ng-html2js-preprocessor
使用ng-html2js将对应的template html转成js模块，并在测试代码中引入。

看下面具体代码
karma.conf.js

// list of files / patterns to load in the browser
files: [
  '../html/templates/*.html',
  ...
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  '../html/templates/home.template.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
  moduleName: 'templates',
  stripPrefix: '.*/',
  prependPrefix: '/html/templates/'
},

test.js

describe(function(){
  beforeEach(module('templates'))
})

特别要注意的是对ng-html2js的配置

ngHtml2JsPreprocessor: {
  moduleName: 'templates',
  stripPrefix: '.*/',
  prependPrefix: '/html/templates/'
},

当没有stripPrefix选项时，通过Chrome debug可以看到，所有的template都被转化成了js模块，但是其模块名是类似c:\path\to\template\template.html的结构，而我在route中的指定路径是web路径templateUrl: '/html/templates/home.template.html'。就对不上号了。做法是通过stripPrefix将所有的前缀全部剥去，然后用prependPrefix加上需要的前缀。这样就可以工作了。网上有很多帖子讨论这个问题。列两个有启发性的：