Question

以下是我的指示 -

define(['jquery', 'angular'],function($, angular){

    var publishToolSummaryDirective = angular.module('sdm.publishTool.directives').directive('krnPublishToolSummary',
        function($compile){
            return {
                restrict: 'EA',
                templateUrl: "apps/sdm/pages/partials/publishToolSummary.html",
                link : function(scope, element){
                    var elem =$(element);
                    scope.previousComment = "";
                    scope.displayPublishingCommentText = false;
                    scope.displayCommentBox = function(event){
                        event.preventDefault();
                        scope.displayPublishingCommentText = true;
                    };
                    scope.displayCommentLink = function(event){
                        if(event.target.textContent === "cancel"){
                             scope.publishingCommentText = scope.previousComment;

                        }else{
                            scope.previousComment = scope.publishingCommentText;
                        }
                        scope.displayPublishingCommentText = false;
                    }
                }
            }

        });
    return publishToolSummaryDirective;
})

以下是我的单元测试 -

define([
    'apps/sdm/app',
    'angular',
    'jquery',
    'angular-mocks'
], function ($, angular) {
    describe("Unit testing Summary directive", function() {
        angular.mock.module('sdm.publishTool.directives');
        var compile,scope, q,url,elm;
        beforeEach(inject(["$templateCache", "$compile","$rootScope", "$q","$httpBackend",function($templateCache, $compile, $rootScope, $q, $httpBackend) {
            q = $q;
            compile = $compile;
            scope = $rootScope.$new();
            var html='<krn-publish-tool-summary></krn-publish-tool-summary>';
            elm = compile(html)(scope);
            scope.$digest();
            console.log(elm);
        }]));

        it("should compile", function(){
            expect(elm.find('button').length).toEqual(3);
            expect(elm.className).toContain('publishTool-summary');
        });

    })
})

它没有构建指令中提到的templateURL。控制台o / p是

Object{0: <krn-publish-tool-summary class="ng-scope"></krn-publish-tool-summary>, length: 1}

覆盖率报告显示它甚至没有进入指令第二行。请帮忙！

Answer 1

html变量不是角度元素，因此它没有给出期望的结果。

尝试更改

var html='<krn-publish-tool-summary></krn-publish-tool-summary>';

到

var html=angular.element('<krn-publish-tool-summary></krn-publish-tool-summary>');

Angular Karma指令测试用例不编译html

1 个答案: