jasmine + angular ex 9

test a directive with attrs

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) {

    function greetDirective() {
        return {
            restrict: 'E',
            template: '<div>{{greeting}}</div>',
            link: function(scope, element, attrs) {
                scope.greeting = 'Hello ' + attrs.who;
            }
        };
    }
    angular.module('utils', []).directive('greet', greetDirective);

})(angular);

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

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

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

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

    it('element should have "div" tag with text: "Hello Alice"', function() {
        expect(element.find('div').html()).toEqual('Hello Alice');
    });

});