單元測試-為測試指令設置范圍變量嗎？

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) 

簽出以下問題： 因果類型錯誤“無法讀取未定義的屬性'subscribe'”