Question

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

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，它应该是一个空的。

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

例如：如果您的真实模板类似于

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

您可以使用类似

的模板测试指令

{{title}},{{subtitle}}

因为两者都有相同的行为，但第二种更容易用javscript解析

Answer 2

我已经解决了这个问题。我已将控制器与指令分开，并将指定的控制器传递给test以在示例中获取范围。

使用jasmine和外部模板进行角度指令单元测试

2 个答案: