Ng-blur in Karma in Firefox

In Karma.js unit test for Angular.js directive, I ran into strange incompatibility in behavior between Chrome and Firefox.

The directive has a template and this template contains a form with some inputs. I want to unit test whether some scope method is called after the first input loses focus.

So, I have this test:

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;
  });
});

      

        
        
        
      

    

And the directive looks like this (it's jade):

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

      

        
        
        
      

    

So far my JS code is:

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'
  };
});

      

        
        
        
      

    

What's wrong? The test will pass on Chrome, but on Firefox - it fails. I tried to use some timeouts, etc. to rule out some sync issues, but that would still fail. Can someone please explain why and a hint on how to fix this?

I am using Angular.js 1.2, Mocha + Chai and karma-ng-jade2js-preprocessor to host templates as a separate Angular module (for testing to avoid Angular trying to load them asynchronously).

I've provided a small example in this repo: https://github.com/kamituel/firefox-blur-weirdness . You can try it out by cloning, installing npm dependencies and running ./karma start karma.conf

. As a result, you will see the Chrome test passing and Firefox crashing.