angular directive unit testing with jasmine with external template

Question

I am trying to unit test angular directive which has an external template. Sample code is given below.

var vsLogin = angular.module('vs-login', []);

vsLogin.directive('vsLogin', function (vsLoginService, dataService, applicationService, $state, viewService, vsModaldialogService, utilsService) {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            templateurl: "@",
            loginDomain: "=?",
            loginid: "=?",
            loggedInUser: "=?"
        },
        controller: ['$scope', function ($scope) {
            $scope.errorMsg = '';
            $scope.status = {};

            applicationService.clearLocalCache();

            $scope.login = function (domain, loginid, password) {

                if ( loginid === undefined || password === undefined || loginid.trim() === ''|| password.trim() === '') {
                    $scope.errorMsg = 'The login ID or password entered is invalid. Please try again.';
                }

                // verify the form is valid
                if (!utilsService.isFormValid('merchant-login-form')) {
                    return;
                }

                var promise = vsLoginService.login(domain, loginid, password);

                promise.then(function (res) {
                    // success
                }
                , function (res) {
                    // fail
                });

            }
        }],
        templateUrl: function (element, attrs) {
            if (attrs.templateurl) {
                return attrs.templateurl;
            }

            return viewService.getWidgetTemplateUrl("Login");
        }
    }
})

The test code using Jasmine + Chutz-pah is as follows.

/// <template path="./Login.cshtml" /> 
/// <reference path="./jquery-2.1.4.js" />
/// <chutzpah_reference path="./angular.min.js" />
/// <chutzpah_reference path="./angular-mock.js" />
/// <chutzpah_reference path="./jasmine.js" />
/// <chutzpah_reference path="./jasmine-html.js" />
/// <chutzpah_reference path="./blanket.js" />
/// <chutzpah_reference path="./Application.js" />
/// <chutzpah_reference path="./DataService.js" />
/// <chutzpah_reference path="./LoginService.js" />
/// <chutzpah_reference path="./ModalDialogService.js" />
/// <chutzpah_reference path="./uiFormValidation.js" />
/// <chutzpah_reference path="./utilsService.js" />
/// <chutzpah_reference path="./ViewService.js" />
/// <chutzpah_reference path="./stateMock.js" />
/// <chutzpah_reference path="./Login.js" />

describe("LoginTest with loginid and password", function () {
    var $rootScope, $compile, element, scope, state, controller;

    angular.module("vs-login", ["vsLogin"]);
    beforeEach(function () {

        module('stateMock');
        module('uiFormValidation.services');
        module(function ($provide) {
            $provide.value('vsLoginService', vsLoginService);
            $provide.value('dataService', dataService);
            $provide.value('applicationService', applicationService); 
            $provide.value('viewService', viewService);
            $provide.value('vsModaldialogService', vsModaldialogService);
        });
        inject(function ($injector, $rootScope, $controller, $httpBackend, $templateCache) {

            var template = jQuery(".merch-login-form")[0].outerHTML;
            $templateCache.put("/Login.cshtml", template);

            $compile = $injector.get('$compile');
            scope = $rootScope.$new();
            element = angular.element("<div ng-app='appname'><vs-login loginDomain='somedomain' loginid='someuser'></vs-login></div>");
            element = $compile(element)(scope);
            scope.$digest();
            controller = element.controller;
            var html = element.html();
            var directiveScope = element.isolateScope();
        });
    });

The issue here is the isolateScope always coming undefined and not able to test the method inside scope [i.e. scope.login method] .

Please suggest.

tried $httpBackend.expectGET('template/address').respond('template mock'); ?? — Gianmarco, Dec 04 '15 at 08:29
Please suggest me a working sample, if possible. The template is large , so I am not sure how can I pass the whole template content into mock — arupc, Dec 05 '15 at 23:14
The template is large does mean that I should do it for you? At least try! — Gianmarco, Dec 06 '15 at 00:33

score 0 · Answer 1 · answered Dec 06 '15 at 15:25

What do you expect jQuery(".merch-login-form")[0].outerHTML to return? During unit testing you don't have (or at least you shouldn't) a working DOM, it should just be an empty one.

However, you don't need to send the whole template over your unit test, you can cache a mocked template that can give you a simple and fast way to test the directive.

e.g.: if your real template is something like

<h1>This is my title: {{title}}!!!!</h1>
<h2>This is my subtitle: {{subtitle}}!!!!</h2>

you could just test the directive with a template like

{{title}},{{subtitle}}

since both have the same behaviour but the second is easier to parse with javscript

score 0 · Answer 2 · answered Dec 11 '15 at 07:36

0

I have solved the problem. I have separated the controller from directive and pass the named controller to test to get the scope inside test case.

answered Dec 11 '15 at 07:36

arupc

356
1
3
12

angular directive unit testing with jasmine with external template

2 Answers2