Angular Karma Directive Test Case not compiling html

Question

Below is my directive--

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

Below is my Unit Test--

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');
        });

    })
})

It is not building my templateURL mentioned in the directive. console o/p is

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

Coverage report shows that it is not even going inside the directive 2nd line. Any help please!

Answer 1

The html variable is not an angular element so it is not giving desired result.

---

Try changing

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

to

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