Question

（我正在使用Karma来运行Jasmine单元测试。）

我的单元测试在编译时中断，甚至在我有机会使用断言之前。由于指令的控制器逻辑所依赖的未定义范围变量而发生中断：

TypeError: Cannot read property 'setValid' of undefined

在此错误中，有一个名为“labelCalls”的对象应具有此“setValid”函数。（当然，名字是任意的。）

以下测试：

describe("A suite for testing field_label.js directive", function() {

var element, scope;
var formsMock;

beforeEach(
    angular.mock.module('portalApp', function ($provide) {
        $provide.value('TextManip');

        formsMock = {};
        $provide.factory('Forms', function() {
            formsMock.useShorterFieldWidths = function () {
                return true;
            }
            return formsMock;
        });
    })
);

beforeEach(inject(function($rootScope,$compile){
    scope = $rootScope.$new();
    scope.labelCalls = {};
    element = angular.element('<field-label></field-label>');
    element = $compile(element)(scope);
    scope.$digest();
}));

it('should...',function(){

});


});

所以，我的问题是，如何模拟这些范围变量的值，以便我的指令可以在运行断言之前编译？

这是完整的指令：

'use strict';

 portalApp.directive("fieldLabel", function () {
return {
    restrict: "E",
    scope: {formId: '@', fieldDef: '=', isFieldDefEditable: '@', isInvalid: '=', labelCalls: '='},
    template: '<span style="margin-left:0px;">' +
    '<label class="app-form-detail-field tips {{isInvalid ? \' app-form-detail-field-invalid\' : \'\'}}" title="{{tooltip}}">{{labelText}}<sup class="app-form-required-asterisk" ng-show="isRequired">*</sup></label>' +
    '<img class="app-form-detail-img-btn" ng-show="{{editableFieldDefs && !isReadOnly}}" src="framework/images/delete_field.png" ng-click="deleteFieldIcon_Clicked()">' +
    '<img class="app-form-detail-img-btn" ng-show="{{editableFieldDefs && !isReadOnly}}" src="framework/images/edit_field.png" ng-click="editFieldIcon_Clicked()">' +
    '</span>',
    replace: true,
    controller: function ($scope, TextManip, Forms, FieldComponent) {
        var fieldDef = $scope.fieldDef;
        var useShorterFieldWidths = Forms.useShorterFieldWidths($scope.formId);

        $scope.editFieldIcon_Clicked = function () {
            Forms.showEditFieldDialog($scope.formId, fieldDef.field_name);
        };

        $scope.deleteFieldIcon_Clicked = function () {
            Forms.deleteField($scope.formId, fieldDef.field_name);
        };

        $scope.labelCalls.setValid = function (isValid) {
            $scope.isInvalid = !isValid;
        };

        $scope.labelCalls.setNewFieldDef = function (fieldDef) {
            loadScopeBindings(fieldDef);
        };

        var loadScopeBindings = function (def) {
            $scope.fieldDef = def;
            fieldDef = def;

            $scope.editableFieldDefs = ($scope.isFieldDefEditable === 'true');
            $scope.isRequired = (fieldDef.required === 'Y');
            $scope.isReadOnly = (fieldDef.read_only === 'Y');

            var display_name = fieldDef.display_name;
            var abbrev = TextManip.abbreviate(display_name, $scope.editableFieldDefs, $scope.isRequired, useShorterFieldWidths), tooltip = '';

            if (abbrev !== display_name) {
                tooltip = display_name;
                display_name = abbrev;
            }

            $scope.labelText = display_name;
            $scope.tooltip = tooltip;
        };

        loadScopeBindings(fieldDef);
    }
};
});

Answer 1

您可以将声明更改为

controller: function ($scope:any, TextManip, Forms, FieldComponent)

查看此问题：karma TypeError "Cannot read property 'subscribe' of undefined"

单元测试 - 为测试指令设置范围变量？

1 个答案: