角度コントローラーのES6クラスを模擬してカスタム$ filterを単体テストする方法

Question

角度コントローラー用のESクラスがあり、角度モックを使ってジャスミンテストを作成しようとしています。

コンストラクタでは、$ filterをthis.i18n = $ filter（ 'i18n）に初期化します。これは基本的に、キー、値を受け取り、キーのローカライズされた値を返すローカライゼーションフィルタです。

私の問題は、クラスのコンストラクタが$フィルタを持ち、後でクラスメソッドで使用されるためです。私のユニットテストは失敗します。どうすれば私のテストが失敗しないように$ filterを使ってテストできますか？私は私がここで

TypeError: this.i18n is not a function 
    at UsersCtrl.$onInit (test-context.js:35081:41) 
    at Object.<anonymous> (test-context.js:35031:31) 

を取得し、例外がES6クラス

はここ

class UsersCtrl { 
    constructor($filter) { 
     this.i18n = $filter('i18n'); 
     this.users = []; 
    } 
    //Life cycle Hooks: Initialization 
    $onInit() { 
     this.users = [ 
      {name: this.i18n('USERS')} 
     ]; 
     } 
} 
UsersCtrl.$inject = ['$filter']; 

angular.module('app', []).controller('UsersCtrl',UsersCtrl); 

export default UsersCtrl; 

である。ここでカスタムフィルタ

を模擬するために探しています私は

Import UsersCtrl from './users-controller.js'; 

    describe("given a new User Page",() => { 
     var UserController; 
     beforeEach(() => { 
      angular.mock.module('app'); 
     }); 

    describe("when initialising has completed",() => { 
     beforeEach(() => { 
     inject(($rootScope, $controller, $filter) => { 
      const scope = $rootScope.$new(); 
      const filter = $filter 
      UserController = $controller("UsersCtrl", { $scope: scope, $filter: filter}); 
      }); 
     }); 
    it("then users array for tab content should be empty initially",() => { 
     const expectedActive = [];  
     expect(UserController.users).toEqual(expectedActive); 
    }); 
    }); 
    }); 

を持つユニットテストです

問題はテストを実行しますが、this.i18n = $ filter（ 'i18n）で初期化できないという問題があります。 ould私はテストに$ filterを渡すためにテストを初期化しますか？私は本当にここフィルター

Answer 1

をテストしたいいけないと私は、フィルタを模擬でしたあなたは可能性が次のいずれか

• モック全体$filterサービス、あなたのテストでそれをインスタンス化し、コントローラにそのを注入します。または
• 個々のフィルタをモックします。モジュールをロードするときに、$provide.value(key, value)を使用することができます。ここで、キーにはフィルタ名と接尾辞「Filter」（これはフィルタの登録時に角度があります）です。

両方の例：

/* Angular App */ 
 
(function() { 
 
    "use strict"; 
 

 
    class UsersCtrl { 
 
    constructor($filter) { 
 
     this.i18n = $filter('i18n'); 
 
     this.users = []; 
 
    } 
 

 
    $onInit() { 
 
     this.users = [{ 
 
     name: this.i18n('USERS') 
 
     }]; 
 
    } 
 
    } 
 

 
    UsersCtrl.$inject = ['$filter']; 
 

 
    angular 
 
    .module('app', []) 
 
    .controller('UsersCtrl', UsersCtrl); 
 

 
})(); 
 

 
/* Unit Test */ 
 
(function() { 
 
    "use strict"; 
 

 
    describe('given a new User Page',() => { 
 
    let UsersController; 
 

 
    describe('MOCK entire $filter service: when initialising has completed',() => { 
 
     beforeEach(() => { 
 
     module('app'); 
 

 
     inject(($rootScope, $controller) => { 
 
      UsersController = $controller("UsersCtrl", { 
 
      $scope: $rootScope.$new(), 
 
      $filter:() => { 
 
       // $filter will be a function that returns a noop function (or whatever we want) 
 
       return angular.noop; 
 
      } 
 
      }); 
 
     }); 
 
     }); 
 

 
     it('then users array for tab content should be empty initially',() => { 
 
     const expectedActive = []; 
 
     expect(UsersController.users).toEqual(expectedActive); 
 
     }); 
 
    }); 
 

 
    describe('MOCK individual \'i18n\' filter: when initialising has completed',() => { 
 
     beforeEach(() => { 
 
     module('app', ($provide) => { 
 
      // provide a mock (noop function) for our filter. 
 
      // Note naming convention, our filter name + 'Filter' suffix. 
 
      $provide.value('i18nFilter', angular.noop); 
 
     }); 
 

 
     inject(($rootScope, $controller, $filter) => { 
 
      UsersController = $controller("UsersCtrl", { 
 
      $scope: $rootScope.$new(), 
 
      $filter: $filter 
 
      }); 
 
     }); 
 
     }); 
 

 
     it('then users array for tab content should be empty initially',() => { 
 
     const expectedActive = []; 
 
     expect(UsersController.users).toEqual(expectedActive); 
 
     }); 
 
    }); 
 

 
    }); 
 

 
})();

<link rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" /> 
 
<script src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script> 
 
<script src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script> 
 
<script src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-mocks.js"></script>