don't forget $digest in angular directive unit test

September 27, 2015

Reading time ~1 minute

Outline

for data binding, scope.$digest() is needed in angular directive unit test

code

directive

(function() {
  'use strict';

  angular
    .module('Testapp', [])
    .directive('supert-button', superButton);

  function supertButton() {
    var directive = {
      link: link,
      restrict: 'E',
      replace: true,
      scope: {
        text: '='
      },
      template: [
        '<div class="alert-button">', 
          '<button ng-bind="text"></button>', 
        '</div>'
      ].join('')
    };
    function link(scope, element) {}
    return directive;
  }
})();

unit test

(function() {

  'use strict';

  describe('superButton', function(){

    var element, scope;
    beforeEach(module('Testapp'));
    beforeEach(inject(function ($rootScope) {
      scope = $rootScope.$new();
    }));

    describe('check text', function(){
      beforeEach(inject(function($compile){
        element = angular.element('<super-button text="I\'m super man"></super-button>');
        element = $compile(element)(scope);
        scope.$digest(); // you must need to call $digest() to bind text attribute into directive.
      }));
      afterEach(function() {
        element.remove();
        element = null;
      });
      it('test data binding', function(){
        expect(element.innerText).to.eql('I\'m super man')
      });
    });

  });

})();

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015