使用 templateUrl 和 WITHOUT Karma 对 Angular 指令进行单元测试答案

【问题标题】：Unit testing of Angular directives with templateUrl and WITHOUT Karma使用 templateUrl 和 WITHOUT Karma 对 Angular 指令进行单元测试
【发布时间】：2016-03-02 16:31:33
【问题描述】：

我找到了一个解决方案here，说明如何在不使用 Karma 的情况下从 templateUrl 加载模板，因此我将此代码粘贴到我的 beforeEach() 并添加了一个检查测试：

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("");
    });

但它等于“”。我究竟做错了什么？我在测试指令和 angularjs 本身方面是全新的，所以我认为我在使用 templateCache 时误解了一些东西。

指令代码：

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

    }

}

和模板网址：

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

提前致谢！

【问题讨论】：

我也一直在玩这个，但我得到了) ReferenceError: XMLHttpRequest is not defined ReferenceError: XMLHttpRequest is not defined。你在用jsdom之类的东西吗？
@stevek 不，这对我来说是新的。看起来 jsdom 也没有在主项目中使用。重要吗，应该在测试中使用吗？因为我没有收到此错误...

标签： javascript angularjs unit-testing jasmine

【解决方案1】：

通过将element 更改为<div questionnaire-list="" questionnaires = "questionnaires" touch-disabled = "touchDisabled()" on-change = "onChange()" rendering-finished = "renderingFinished()"></div> 解决了这个问题。现在items 不为空并且包含正确的结果。

【讨论】：