componentのユニットテストを書く

component

AngularJS 1.5から、componentが使えるようになっています。
デフォルトで$scopeが独立していたり、one-way bindingなどが使えるので、積極的に活用したいところです。

ユニットテストの書き方

以下のようなcomponentをテストする場合を想定します。

class GreetingCtrl {

  constructor() {
    this.title = '';

    if (this.gender === 'male') {
      this.title = 'Mr.';
    }
    if (this.gender === 'female') {
      this.title = 'Ms.';
    }

    this.name = this.title + this.surname;
  }
}

angular.module('myApp').component('greet', {
    bindings: {
      gender: '@',
      surname: '@'
    },
    template: '<p>Hello, {{$ctrl.name}}</p>',
    controller:GreetingCtrl
  });

componentのcontrollerであるGreetingCtrlは、$_componentController_というサービスを使用することで取得できます。

describe('greetコンポーネントのテスト',() => {
  let $controller;
  let setComponent;

  beforeEach(function() {
    angular.mock.module('myApp');

    inject(function(_$componentController_) {
      $controller = _$componentController_;

      setComponent = function(bindings) {
        return $controller('greet', null, bindings);
      };
    });

    it('genderがmaleの場合は、surnameの先頭にMr.がついている',()=>{
      const cp = setComponent({
        gender: 'male',
        surname: 'Test'
      });
      expect(cp.name).toEqual('Mr.Test');
    });
  });

_$componentController_()の第一引数が呼び出したいcomponent名、
第二引数はinjectしたいscope（nullの場合は独立scopeになります）、
第三引数がbindingsしたい値になります。