Unit Test - $componentController

Angular1.5+のcomponent文法は素晴らしいですが、ユニットテストをするときは困りました.
命令のテストは従来煩雑で、$compileでelementを取得し、elementでcontrollerを取得する必要がある.

beforeEach(angular.mock.inject($injector => {
    $compile = $injector.get('$compile');
    $rootScope = $injector.get('$rootScope');
    scope = $rootScope.$new();
    element = $compile(`
        
    `)(scope);
    $rootScope.$apply();
    controller = element.controller('ngModel');
}));

componentはdirectiveの構文糖ですが、そのテストは少し違います.component docでは、ngMockに含まれる$componentControllerサービスについて言及しています.このサービスの利点は、DOM要素を作成することなくcontroller.をテストできることです.

Componentテストの例

次のように仮定します.

export const FormRenderComponent = {
    template,
    controller,
    bindings: {
        data:   '

---Magic Is Here---
このコンポーネントのコントローラを得るために、コードは非常に簡単である.

let $componentController, controller;
let bindings = {
    data:   [],
    name:   'form name',
    onSave: angular.noop
};
beforeEach(angular.mock.inject($injector => {
    $componentController = $injector.get('$componentController');
    controller = $componentController('formRender', null, bindings);
}));

$componentControllerの最初のパラメータは、テストが必要なコンポーネント名です.componentはモジュールに登録する、2番目のパラメータはlocalsが$scope,$attr,$elementを提供するために使用することができ、3番目のパラメータはbindingsの値である.詳細については、公式ドキュメントを参照してください.localsのいくつかのオブジェクトがすべて使用され、複雑になったら、$compileでcontroller.を取ることをお勧めします.

.component('formRender', FormRenderComponent)

テストコードは勝手に発揮され、簡単な例を挙げてbindingsのデータの付与に成功したかどうかをテストする.

it('bindings should work', () => {
    expect(controller.data).toEqual(bindings.data);
    expect(controller.name).toEqual(bindings.name);
});

忘れないで$onInit()

コンポーネントに$onInitライフサイクル関数が実装されている場合は、テストを行うときに手動で呼び出されることを確認する必要があります.そうしないとトリガーされません.

it('$onInit() should init data and events', () => {
    spyOn(controller, 'initData');
    spyOn(controller, 'initEvents');
    controller.$onInit();
    expect(controller.initData).toHaveBeenCalled();
    expect(controller.initEvents).toHaveBeenCalled();
});

コードの品質と可読性のために、ユニットテストは必要です.もしあなたがまだユニットテストを書く習慣を身につけていないなら、今から始めましょう.