Javascript 带外部模板的茉莉花角度定向单元测试

我正在尝试单元测试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();
        });
    });

//
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
/// 
描述（“带有loginid和密码的LoginTest”，函数（）{
var$rootScope，$compile，元素，作用域，状态，控制器；
angular.module（“vs login”、[“vsLogin”]）；
beforeach（函数（）{
模块（“stateMock”）；
模块（'uiFormValidation.services'）；
模块（功能（$提供）{
$provide.value（'vsLoginService'，vsLoginService）；
$provide.value（'dataService'，dataService）；
$provide.value（'applicationService'，applicationService）；
$provide.value（'viewService'，viewService）；
$PROFECT.value（'vsModaldialogService'，vsModaldialogService'）；
});
注入（函数（$injector、$rootScope、$controller、$httpBackend、$templateCache）{
var template=jQuery（“.merch登录表单”）[0].outerHTML；
$templateCache.put（“/Login.cshtml”，template）；
$compile=$injector.get（“$compile”）；
scope=$rootScope.$new（）；
元素=角度。元素（“”）；
元素=$compile（元素）（范围）；
范围。$digest（）；
控制器=element.controller；
var html=element.html（）；
var directiveScope=element.isolateScope（）；
});
});

这里的问题是isolateScope总是未定义，无法在范围内测试方法[即scope.login方法]

---

请提出建议。

您希望jQuery（“.merch login form”）[0]返回什么。outerHTML返回？在单元测试期间，您没有（或至少不应该）工作的DOM，它应该是空的

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

e、 g:如果你真正的模板是

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

由于两者具有相同的行为，但第二种行为更容易用javscript解析，因此我解决了这个问题。

---

我已将控制器与指令分离，并将指定的控制器传递给测试，以在测试用例中获取作用域。

尝试了$httpBackend.expectGET（'template/address'）。Response（'template mock'））如果可能的话，请向我推荐一个工作样本。模板太大了，所以我不确定如何将整个模板内容传递到Mock中。模板太大确实意味着我应该为您做这件事？至少尝试一下！谢谢，但还是不走运：(

{{title}},{{subtitle}}