茉莉花与外部模板的角度指令单元测试

Question

我正在尝试对具有外部模板的angular指令进行单元测试。 示例代码如下。

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

使用Jasmine + Chutz-pah的测试代码如下。

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

这里的问题是IsolateScope总是不确定，并且无法测试范围内的方法[即scope.login方法]。

请提出建议。

Answer 1

您期望jQuery(".merch-login-form")[0].outerHTML返回什么？ 在单元测试期间，您没有（或者至少您不应该）有一个有效的DOM，它应该只是一个空的DOM。

但是，您不需要通过单元测试发送整个模板，您可以缓存一个模拟的模板，该模板可以为您提供一种简单，快速的方法来测试指令。

例如：如果您的真实模板是这样的

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

您可以使用类似模板的指令来测试指令

{{title}},{{subtitle}}

因为两者具有相同的行为，但是第二个更易于使用javscript进行解析

Answer 2

我已经解决了问题。 我已经将控制器与指令分开，并通过命名的控制器进行测试，以在测试用例中获得作用域。