Unit-testing a directive with isolated scope and bidirectional value

Posted by unludo on Stack Overflow See other posts from Stack Overflow or by unludo
Published on 2014-06-03T09:15:50Z Indexed on 2014/06/03 9:24 UTC
Read the original article Hit count: 149

Filed under:
|

I want to unit test a directive which looks like this:

angular.module('myApp', [])
.directive('myTest', function () {
    return {
        restrict: 'E',
        scope: { message: '='},
        replace: true,
        template:  '<div ng-if="message"><p>{{message}}</p></div>',
        link: function (scope, element, attrs) {
        }
    };
});

Here is my failing test:

describe('myTest directive:', function () {

    var scope, compile, validHTML;

    validHTML = '<my-test message="message"></my-test>';

    beforeEach(module('myApp'));

    beforeEach(inject(function($compile, $rootScope){
        scope = $rootScope.$new();
        compile = $compile;
    }));

    function create() {
        var elem, compiledElem;
        elem = angular.element(validHTML);
        compiledElem = compile(elem)(scope);
        scope.$digest();

        return compiledElem;    
    }

    it('should have a scope on root element', function () {  
        scope.message = 'not empty';
        var el = create();
        console.log(el.text());
        expect(el.text()).toBeDefined();
        expect(el.text()).not.toBe('');
    });

});

Can you spot why it's failing?

The corresponding jsFiddle

Thanks :)

© Stack Overflow or respective owner

Related posts about angularjs

Related posts about unit-testing