使用$ parsers进行茉莉单元测试angular指令

Question

我在确定单元测试中是否存在指令的问题，该指令接受输入并用空字符串替换不是数字的任何内容。 我收到undefined is not a constructor (evaluating 'input.val('1').trigger('input')')的错误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文档页面上实现的jQ方法。

仔细检查是否存在这种情况的一种可能方法是在测试中暂时包括jQuery。 如果可用，AngularJS将使用完整的jQuery而不是jqLit​​e。 如果您的测试在那时有效，那么很可能是这种情况，您可以查看.triggerHandler()是否仍然可以满足您的需求。