Question

在针对Angular.js指令的Karma.js单元测试中，我在Chrome和Firefox之间的行为中遇到了奇怪的不一致。

指令有一个模板，此模板包含一些带有输入的表单。我想单元测试在第一次输入丢失焦点后是否会调用一些范围方法。

所以，我有这个测试：

describe('Firefox weirdness.', function() {
  var $scope, compiled;
  var template = '<dir></dir>';

  beforeEach(function() {
    module('templates');
    module('App');

    inject(function($compile, $rootScope) {
      $scope = $rootScope.$new();
      compiled = $compile(template)($scope);
      angular.element(compiled).appendTo(document.body);
      $scope.$apply();
    });
  });

  it('Shows weirdness.', function() {
    var i1 = compiled.find('input[name="i1"]'),
        i2 = compiled.find('input[name="i2"]'),
        executed = false;

    // This method is never called on Firefox.
    // On Chrome it works flawlessly.
    $scope.doStuff = function() {
      executed = true;
    };

    // Focus first input, then second.
    // It doesn't help if I delay them via setTimeouts,
    // or by digesting the scope.
    angular.element(i1).focus();
    angular.element(i2).focus();

    // This line fails.
    expect(executed).to.be.true;
  });
});

该指令看起来像这样（它的玉）：

form(name="form")
  input(name="i1", ng-blur="doStuff()")
  input(name="i2")

虽然我的JS代码是：

describe('Firefox weirdness.', function() {
var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {
   $scope.doStuff = function() {
     console.log('Stuff done!');
   };
});

app.directive('dir', function() {
  return {
    restrict: 'E',
    templateUrl: 'dir.html'
  };
});

有什么问题？该测试将通过Chrome，但在Firefox上 - 它失败了。我试图使用一些超时等来排除一些时间问题，但它仍然会失败。有人可以解释为什么并暗示如何解决这个问题吗？

我使用Angular.js 1.2，Mocha + Chai和karma-ng-jade2js-preprocessor将模板作为单独的Angular模块放置（用于测试，以避免Angular尝试异步加载它们）。

我在这个回购中加了一个小例子：https://github.com/kamituel/firefox-blur-weirdness。您可以通过克隆，安装npm依赖项和运行./karma start karma.conf来尝试。因此，您会看到Chrome测试通过，而Firefox则会失败。

Answer 1

您实际上可以触发模糊事件

    angular.element(i1).focus();

在另一个输入上触发焦点事件可能不会触发Firefox中先前聚焦输入的模糊事件

如果你忘了Angular，这在Firefox中也会失败

it('Shows weirdness.', function () {
    var i1 = compiled.find('input[name="i1"]'),
        i2 = compiled.find('input[name="i2"]'),
        executed = false;

    angular.element(i1).bind('blur', function () {
        executed = true;
    });

    angular.element(i1).focus();
    angular.element(i2).focus();

    expect(executed).to.be.true;
});

而这不是

it('Shows weirdness.', function () {
        var i1 = compiled.find('input[name="i1"]'),
        i2 = compiled.find('input[name="i2"]'),
        executed = false;

    angular.element(i1).bind('blur', function () {
        executed = true;
    });

    angular.element(i1).blur();


    expect(executed).to.be.true;
});

在Firefox上的Karma中使用ng-blur

1 个答案: