jasmine + angular ex 8

test a directive

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.4.9/angular.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-mocks.js"></script>

JavaScript

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

(function() {
  angular.module('utils', [])
    .directive('greet', function() {
      function getLastName(firstName) {
        switch (firstName) {
          case "Bob":
            return "Marley";
          case "Phill":
            return "Collins";
        }
      }
      return {
        restrict: 'E',
        template: '<div>{{greeting}}</div>',
        scope: {
          who: '='
        },
        link: function(scope, element, attrs) {

          scope.$watch('who', function(name) {
            scope.greeting = "Hello " + name + " " + getLastName(name);
          })
        }
      };
    });

})(angular);

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

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

  var element;
  beforeEach(module('utils'));

  beforeEach(inject(function($compile, $rootScope) {
    //create scope
    scope = $rootScope.$new();
    //create element
    element = angular.element('<greet who="data"></greet>');
    // Compile the element with the scope
    $compile(element)(scope);
  }));



  it('element should have "div" tag with text according to scope data', function() {
    scope.data = 'Bob';
    expect(element.find('div').html()).toEqual('Hello Bob Marley');

    scope.data = 'Phill';
    expect(element.find('div').html()).toEqual('Hello Phill Collins');
  });
});