jasmine + angular ex 9

test a component

by ronapelbaum

HTML

<script src="https://jasmine.github.io/2.4/lib/jasmine.js"></script>
<script src="https://jasmine.github.io/2.4/lib/jasmine-html.js"></script>
<script src="https://jasmine.github.io/2.4/lib/boot.js"></script>
<link rel="stylesheet" href="https://jasmine.github.io/2.4/lib/jasmine.css">
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-mocks.js"></script>

JavaScript

//--------------BL------------

(function() {
  angular.module('utils', [])
    .component('greet', {
      template: '<div>{{$ctrl.greeting}}</div>',
      bindings: {
        who: '<'
      },
      controller: function() {
        this.greeting = "Hello " + this.who;
      }
    });

})(angular);

//--------------specs------------

describe('greet component spec', function() {

  beforeEach(module('utils'));

  it('controller state should be correct',
    inject(function($componentController) {
      var bindings = {
        who: 'Bob'
      };
      var ctrl = $componentController('greet', null, bindings);
      expect(ctrl.greeting).toEqual('Hello Bob');
    })
  );

  it('element should have "div" tag with text according to scope data',
    inject(function($compile, $rootScope) {
      var element = angular.element('<greet who="data"></greet>');
      var scope = $rootScope.$new();
      scope.data = 'Bob';
      $compile(element)(scope);
      scope.$digest();

      expect(element.find('div').html()).toEqual('Hello Bob');
    })
  );
});