Test pour focus une directive AngularJS

Comment Pouvez-vous tester la mise au point dans une directive AngularJS? Je m'attendrais à ce que ce qui suit fonctionne: 

describe('focus test', function(){
    it('should focus element', function(){
        var element = $('<input type="text" />');
        // Append to body because otherwise it can't be foccused
        element.appendTo(document.body);
        element.focus();
        expect(element.is(':focus')).toBe(true);
    });
});

Cependant, cela ne fonctionne que dans IE, il échoue dans Firefox et Chrome

Mise à jour: La solution par @ S McCrohan fonctionne. En utilisant cela, j'ai créé un matcher' toHaveFocus': 

beforeEach(function(){
    this.addMatchers({
        toHaveFocus: function(){
            this.message = function(){
                return 'Expected '' + angular.mock.dump(this.actual) + '' to have focus';
            };

            return document.activeElement === this.actual[0];
        }
    });
});

Qui est utilisé comme suit: 

expect(myElement).toHaveFocus();

Notez que pour les tests liés au focus, l'élément compilé doit être attaché au DOM, ce qui peut être fait comme ceci: 

myElement.appendTo(document.body);
22
demandé sur Mark Lagendijk 2013-09-17 16:44:01

2 réponses

Essayez 'document.activeElement' au lieu de ':focus'. Je ne l'ai pas testé dans karma, mais $('document.activeElement') se comporte comme souhaité sous jQuery standard.

10
répondu S McCrohan 2013-12-17 23:58:31

Dans Jasmine 2, Voici maintenant: 

beforeEach(function() {
  jasmine.addMatchers({
    toHaveFocus: function() {
      return {
        compare: function(actual) {
          return {
            pass: document.activeElement === actual[0]
          };
        }
      };
    }
  });
});
7
répondu Christian Iacullo 2014-04-17 03:50:29