Testing for focus an AngularJS directive

Question

How can you test for focus in an AngularJS directive? I would expect the following to work:

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

However, this only works in IE, it fails in Firefox and Chrome

Update: The solution by @S McCrohan works. Using this I created a 'toHaveFocus' matcher:

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

Which is used as follows:

expect(myElement).toHaveFocus(); 

Note that for focus related tests, the compiled element has to be attached to the DOM, which can be done like this:

myElement.appendTo(document.body); 

Answer 1

Try 'document.activeElement' instead of ':focus'. I haven't tested it in karma, but $('document.activeElement') behaves as desired under standard jQuery.