带有输入的 AngularJS 单元测试指令

Question

我正在将 Angular v1.6 与 Jasmine 一起使用，我正在尝试通过输入输入值在我们的 angular 应用程序中对工作指令进行单元测试，但我无法让指令正确触发。

命令

.directive('percentage', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attr, ngModel) {
                function fromUser(value) {
                    return value / 100;
                }
                function toUser(value) {
                    return Math.round(value * 100);
                }
                ngModel.$parsers.push(fromUser);
                ngModel.$formatters.push(toUser);
            }
        };
    })

单元测试

describe('percentageDirective', function() {
  beforeEach(module('app'));
      // Inject $rootScope and $compile
      var scope, element;
      beforeEach(inject(function($rootScope, $compile) {
        // Set up the scope with test data
        scope = $rootScope.$new();
        scope.value = 0;
        // Create an element
        element = angular.element('<input type="number" percentage ng-model="value"></input>');
        // Compile that element with your scope
        element = $compile(element)(scope);
        // Run the digest cycle to compile the element
        $rootScope.$digest();
        // Find the input control: 
        var dirElementInput = element.find('input');
        // Set some text
        angular.element(dirElementInput).val('25').triggerHandler('input');
        scope.$apply();
      }));
      it("should display the decimal value", function() {
        expect(scope.value).toEqual('0.25');
      });
});

范围值永远不会更改，并保持为 0。有人可以帮助如何触发输入更改吗？

Answer 1

看起来您对element.find('input')有问题，find搜索给定元素的子元素，它不会因此返回元素本身。因此，您的所有操作都是在空的角度元素包装器上进行的。

如果您尝试console.log(dirElementInput.length)，您将看到此包装器是空的。

您可以将其更改为var dirElementInput = element[0];，测试将通过。

工作示例：https://embed.plnkr.co/DVUoMAUcDXcMl6tp521D/