Comment puis-je vérifier si mon élément a été concentrée dans un test unitaire

J'ai la directive suivante à l'autofocus d'un champ:

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

Comment aurais-je de l'unité de tester cela? J'ai essayé plusieurs choses comme le sélecteur suivant, mais qu'ils reviennent tous des erreurs ou faux:

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

Mon unité de test est mis en place comme ceci:

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

En plus des remarques que vous faites dans votre réponse, le lecteur doit prendre note que votre directive définition devrait lire: .directive('ngAutofocus', '$timeout', function ($timeout) { -- sinon $timeout n'est pas transcluded par Angulaire.
Êtes-vous sûr? Tu veux sans doute dire avec un [ ajouté trop, et pas parce que transclusion, mais en raison de minification provoquant l'injection de pause sans certaines minimizers. Voir github.com/johnpapa/...
oui pour le [ - je modifier à l'extérieur de la zone de commentaire.
alors encore, l'injection d'aider n'est nécessaire que dans certains cas, et n'est pas requise pour la question

InformationsquelleAutor Maarten | 2014-03-11

34

J'ai pensé à elle, et c'était assez évident en fait;
```
it('should set the focus on timeout', function () {
    spyOn(elm[0],'focus');
    $timeout.flush();
    expect(elm[0].focus).toHaveBeenCalled();
})
```
Mon problème était double:
1. Je n'étais pas d'appeler le délai d'attente la fonction d'injection de sorte délai d'attente n'était pas produit, et
2. J'étais en train de regarder à la mise au point de l'attribut de l'élément, alors que juste à la recherche, à l'appel de la focus() la fonction est beaucoup plus comme des tests unitaires. L'attribut de focus est quelque chose qui appartient vraiment à la e2e tests territoire.
InformationsquelleAutor Maarten
3

Vous pouvez utiliser document.activeElement pour vérifier la mise au point. Le seul inconvénient étant que le code HTML doit être ajouté dans le corps du document pour que cela fonctionne.

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

InformationsquelleAutor Hanne Olsen

Plus détaillé de la solution ci-dessous, ce qui permet de tester (l'espionnage) qui s'exécute immédiatement (c'est à dire pas de $timeout ou tout autre événement). La clé est d'abord de rendre un DOM element avant $compile pistes:

'use strict';

describe('Testing the focus call from the link function', function () {

    var $compile;
    var $rootScope;

    beforeEach(angular.mock.module('auto-focus-module'));

    beforeEach(inject(function (_$compile_, _$rootScope_) {

        $compile = _$compile_;
        $rootScope = _$rootScope_;

    }));

    it('should automatically focus when calling the link function', function () {

        var $scope = $rootScope.$new();

        //create an uncompiled DOM element so we can bind the focus spy
        var rawEl = angular.element('<input auto-focus-directive>');

        //set the spy
        spyOn(rawEl[0], 'focus');

        //compile the rawEl so that compile and link functions run
        $compile(rawEl)($scope);

        expect(rawEl[0].focus).toHaveBeenCalled();

    });

});

Avec un directive et link fonction qui pourrait ressembler à:

(function () {

    'use strict';

    angular.module('auto-focus-module')
        .directive('autoFocusDirective', autoFocusDirective);

    function autoFocusDirective () {

        return {
            link: link
        };

        function link (scope, elem) {

            elem[0].focus();

        }

    }

})();

InformationsquelleAutor KrekkieD

-3

Vous devez utiliser l'angulaire.élément à l'api de jQuery lite - et d'utiliser la méthode triggerHandler().
```
it('should have focus', function() {
    elm.triggerHandler('focus');
    expect(elm).toBeInFocus() //PSEUDO CODE - you will need to see how this can be tested
}
```
http://docs.angularjs.org/api/ng/function/angular.element

http://api.jquery.com/triggerhandler/

Zone potentielle pour certains tests de focus de la connaissance:

https://shanetomlinson.com/2014/test-element-focus-javascript

Également vous concernant votre test unitaire - vous n'avez pas besoin d'ajouter l'élément de l'organisme, il est possible de tester sans.
- J'ai supprimé l'ajout de bits, merci!
InformationsquelleAutor Sten Muchow

Vous devez vous connecter pour publier un commentaire.