javascript - 使用 $parsers 的 Jasmine 单元测试 Angular Directive(指令)

Question

我在为接受输入并将非数字的任何内容替换为空字符串的指令找出单元测试时遇到问题。我收到错误 undefined is not a constructor (evaluating 'input.val('1').trigger('input')')

问题就在触发器上。 input.val 返回一个空字符串。如果我不执行触发器，则不会调用我的 $parser 函数代码。

它在我的应用程序中测试时有效，只是我不知道如何测试它。

我知道它正在使用指令，因为当我取出 ng-model 时，测试失败并显示 number-only requires ngModel

我想进行两个测试:

• 输入一个数字，查看值为一个数字
• 输入一个字母，查看值为空字符串。

这是我的指令

/**
 * @ngdoc object
 * @name components-helpers-number-only
 * @description
 *
 * Catch the value before it reaches the model in the parsers phase
 * replace any non digit (0-9) and replace with an empty string.  
 * This works for any input method.  Copy and paste / Dragon etc.
 *
 */
angular.module('components-helpers-number-only', [])
    /**
     * @ngdoc directive
     * @name components-helpers-number-only.directive:numberOnly
     * @restrict E
     * @replace true
     * @element ANY
     *
     * @description
     * Directive to display a standard number field,
     * along with binding and validation, link function initialises the controller passing references to all required resources
     *
     */
    .directive('numberOnly', function() {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                // The parsers are before assigning a value to a model
                ngModel.$parsers.push(function (inputValue) {
                    // Replace anything apart from a value 0-9 with an empty string
                    var transformedInput = inputValue.toLowerCase().replace(/[^0-9]/g, '');

                    // If the values are the same no need to change the value.
                    if (transformedInput!=inputValue) {
                        ngModel.$setViewValue(transformedInput);
                        ngModel.$render();
                    }

                    return transformedInput;
                });
            }
        };
    });

这是我的单元测试

describe('Directive: numberOnlyDirective', function () {
    'use strict';

    var scope;
    var dummyElement1;
    var input;
    var ngModel;

    beforeEach(module('components-helpers-number-only'));

    beforeEach(inject(function ($compile, $rootScope) {
        scope = $rootScope.$new();

        dummyElement1 = angular.element(
            '<input type="text" ng-model="model" value="1" number-only />'
        );

        input = $compile(dummyElement1)(scope);

        ngModel = input.controller('ngModel');

    }))


    it('should define an input with number only directive', function () {
        expect(input).toBeDefined()



    });

    it('should set the value to 1 and set the view value to 1', function () {
        input.val('1').trigger('input');
        scope.$apply()
    });

})

Answer 1

我认为这是因为 Angular 的 jqLit​​e 没有 .trigger() , 它只支持 .triggerHandler() .比较在 angular.element documentation page 上实现了哪些 jQ 方法.

仔细检查是否属于这种情况的一种潜在方法是在您的测试中临时包含 jQuery。如果可用，AngularJS 将使用完整的 jQuery 而不是 jqLit​​e。如果此时您的测试有效，那么这很可能是问题所在，在这种情况下您可以查看 .triggerHandler() 是否仍能满足您的需求。