How do I check if my element has been focussed in a unit test

Question

I have the following directive to autofocus a field:

.directive('ngAutofocus', function ($timeout) {     return {         restrict: 'A',         link: function (scope, elm) {                 $timeout(function () {                 elm[0].focus();             });         }     }; } 

How would I unit test this? I tried several things like the following selector but they all return errors or false:

console.log($(elm[0]).is(':focus')); 

My unit test is set up like this:

elm = angular.element('<input type="text"  name="textfield1" ng-autofocus>'); $scope.$digest(); $compile(elm)($scope); 

Answer 1

I figured it out, and it was pretty obvious actually;

it('should set the focus on timeout', function () {     spyOn(elm[0],'focus');     $timeout.flush();     expect(elm[0].focus).toHaveBeenCalled(); }) 

My problem was two-fold:

1. I wasn't calling the timeout flush function so timeout wasn't occuring, and
2. I was trying to look at the focus attribute of the element whereas just looking at the call of the focus() function is much more like unit-testing. The focus attribute is something that really belongs to the e2e testing territory.

Answer 2

You can use document.activeElement to check focus. The only downside being that the HTML needs to be added to the document body for this to work.

https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement