Unit testing of Angular directives with templateUrl and WITHOUT Karma

Question

I've found a solution here of how to load template from templateUrl without using Karma, so I've pasted this code to my beforeEach() and added a checking test:

beforeEach(inject(function ($templateCache,_$compile_, _$rootScope_, $injector, _config_, _$timeout_) {
    var directiveTemplate = null;
    var req = new XMLHttpRequest();
    req.onload = function () {
        directiveTemplate = this.responseText;
    };

    req.open("get", "js/directives/views/questionnaire-list.html", false);
    req.send();
    $templateCache.put("js/directives/views/questionnaire-list.html", directiveTemplate);

    $compile = _$compile_;
    $rootScope = _$rootScope_.$new();
    $rootScope.questionnaires = questionnaire;
    $rootScope.touchDisabled = jasmine.createSpy('touchDisabled');;
    $rootScope.onChange = jasmine.createSpy('onChange');;
    $rootScope.renderingFinished = jasmine.createSpy('renderingFinished');;

    $httpBackend = $injector.get('$httpBackend');
    config = _config_;
}));
it('compiled should not be empty', function () {

        element = angular.element('<questionnaire-list questionnaires = "questionnaires" touch-disabled = "touchDisabled()" on-change = "onChange()" rendering-finished = "renderingFinished()"></questionnaire-list>');
        var result = $compile(element)($rootScope); // Compile the directive
        $rootScope.$digest(); // Update the HTML
        var items = result.html();

        expect(items).not.toEqual("");
    });

But it is equals to "". What am I doing wrong? I'm totally new in testing directives and angularjs itself, so I think I've misunderstood something in using of templateCache.

directive code:

angular.module('app.directives')
    .directive('questionnaireList', questionnaireList);

questionnaireList.$inject = ['$timeout'];

function questionnaireList($timeout) {
    return {
        restrict: 'A',
        templateUrl: 'js/directives/views/questionnaire-list.html',
        scope: {
            questionnaires: '=',
            touchDisabled: '&',
            onChange: '&',
            renderingFinished: '&'
        },
        link: link
    }

    function link(scope, element, attrs) {
        // some code goes here

    }

}

and templateUrl:

<div ng-repeat="questionnaire in questionnaires" children-same-size on-render="onContentRendered">

{{questionnaire.Title}}

<div ng-repeat="item in questionnaire.Questions" class="questions-list-item">
    <div class="question-control"><!--some text--></div>
    <div class="captions">
        <span ng-repeat="label in ::getQuestionLabels(item)">{{::label}}</span>
    </div>
</div>

Thanks in advance!

I have been playing with this as well, but am getting ) ReferenceError: XMLHttpRequest is not defined ReferenceError: XMLHttpRequest is not defined. Are you using anything like jsdom? — Winnemucca, Mar 03 '16 at 00:37
@stevek nope, it's new to me. And it looks like jsdom was not used in the main project also. Is it important, should it be used in tests? because I'm not getting this error... — AlenSv, Mar 03 '16 at 05:55

score 0 · Accepted Answer · answered Mar 04 '16 at 06:05

Fixed this issue by changing element to <div questionnaire-list="" questionnaires = "questionnaires" touch-disabled = "touchDisabled()" on-change = "onChange()" rendering-finished = "renderingFinished()"></div>. Now items is not empty and contains a correct result.

Unit testing of Angular directives with templateUrl and WITHOUT Karma

1 Answers1