我试着用Jasmine来进行Angular的单元测试。
我会在上一次使用【Jasmine + Karma】进行JavaScript单元测试的基础上，添加AngularJS来进行测试。

自上次更改以来的内容

在Package.json文件中添加AngularJs和angular-mocks。

请注意，不是使用 angular-mock，而是使用angular-mocks 的复数形式。我之前不小心安装了 angular-mock 导致出了一些问题，所以在这里分享给大家。

+  "dependencies": {
+    "angular": "^1.6.1",
+    "angular-mocks": "^1.6.1"
+  }

在Karma读取的JS文件中添加angular库。

 files: [
 +      "node_modules/angular/angular.js",
 +      "node_modules/angular-mocks/angular-mocks.js",
        "src/script/js/*.js",
        "spec/*.js"
 ],           

既然准备工作已经完成，接下来我们将开始创建产品代码。

创建产品代码

产品代码将命名为demoAngular.js，并创建一个简单的控制器和过滤器。
测试将针对这个控制器和过滤器进行。

filter创建了一个扩展现有numberFilter的过滤器。
当值大于或等于0时，将应用现有的filter，否则将变为”-“的过滤器。

angular.module('demoApp', [])
  .controller('demoAppCtl', ['$scope', function($scope) {
      $scope.name = "angular-unit-test";

      $scope.demoFunction = function(num) {
          return num * num;
      };
  }])
  .filter('numberCustomFilter', ['$filter', function ($filter) {
     return function (num) {
         if (num != null) {
             if (num >= 0) {
                 return $filter('number')(num);
             }
         }
         return "-";
     }
  }]);

创建测试代码

对于Angular单元测试，首先需要进行angular.module的load操作。

// load the angular module
beforeEach(module('demoApp'));

创建控制器的测试代码

进行DI的模拟化

有关Directive的指令，我们会在inject()中进行模拟。
关于Directive指令，我们会通过inject()进行模拟。

在每个测试案例中，我们将共享并使用controller的模拟对象，因此我们会在beforeEach中对controller进行模拟。

// inject angular directive
beforeEach(inject(function(_$rootScope_, _$controller_) {
    var rootScope = _$rootScope_;
    $scope = rootScope.$new();
    $controller = _$controller_;

    // $controller('コントローラ名', { injectしているDirective: mock化したDirective変数名} )
    demoAppCtl = $controller('demoAppCtl', { $scope: $scope });
}));

创建测试用例

我們將根據 Controller 中定義的 $scope 參數和函數來創建以下的測試案例。

it('$scope パラメータ テスト', function() {
    expect($scope.name).toEqual("angular-unit-test");
});

it('demoFunction テスト', function() {
    expect( $scope.demoFunction(3) ).toEqual(9);
});

进行测试

  demoAngularUnitTest
    controller test
      ✓ $scope パラメータ テスト
      ✓ demoFunction テスト

最后

我已经为自定义过滤器创建了单元测试，但方法与控制器相同，所以将略去。请参阅我在GitHub上公开的源代码。