Test de l'élément de la directive - ne peut pas accéder isolé champ d'application de méthodes au cours de tests

J'ai la directive suivante.

directivesModule.directive('wikis', function() {
var urlRegex = new RegExp('^(https?)://.+$');

return {
    restrict: 'E', 
    templateUrl: 'templates/wiki-list.html',
    scope: {
        wikis: '='
    },
    link: function(scope, element, attrs) {
        scope.newWikiURL = '';

        scope.$watch('wikis', function() {
            if (scope.wikis == undefined || scope.wikis.length === 0) {
                scope.class = 'hide';
            } else {
                scope.class = 'show';
            }
        }, false);

        scope.addWiki = function() {
            if (scope.wikis == undefined) {
                scope.wikis = [];
            }

            var nw = scope.newWikiURL;
            if (nw != undefined && nw.trim() != '' && urlRegex.exec(nw)) { 
                scope.wikis.push(nw);
                scope.newWikiURL = '';
            }
        }

    }
};

});

Quand je l'ai tester:

describe('Wikis Directive Test Suite', function() {
    var scope, elem, directive, linkFn, html;

    beforeEach(function() {
        html = '<wikis wikis=''></wikis>';

        inject(function($compile, $rootScope) {
            scope = $rootScope.$new();
            scope.wikis = [];

            elem = angular.element(html);

            $compile(elem)(scope);

            scope.$digest();
        });

    });

    it('add Wiki should add a valid wiki URL to artist', function() {
        var url = 'http://www.foo.com';
        scope.newWikiURL = url;
        scope.addWiki();

        expect(scope.wikis.length).toBe(1);
        expect(scope.wikis[0]).toBe(url);
        expect(scope.newWikiURL).toBe('');
    });
});

Je reçois un message d'erreur indiquant que l'Objet n'a pas de addWiki méthode. J'ai essayé de déboguer, et la fonction de lien n'est pas appelé pendant le test. Je pense que c'est pourquoi le addWiki méthode ne fait pas partie de la portée. Quelqu'un sait pourquoi j'obtiens cette erreur?

En passant, Est-ce une pratique normale pour ajouter un peu de logique dans la fonction de lien d'une directive comme il serait un Contrôleur lui-même? Parce qu'en regardant le code, je sais que c'est pourquoi, en réalité, je suis en train de faire.

InformationsquelleAutor leonfs | 2013-09-10

39
1. Vous devez charger le module contenant votre directive, sinon angulaire ne sais pas ce que <wikis> est
2. Votre directive crée un isolat portée, donc une fois qu'il a été compilé vous avez besoin pour obtenir le nouveau champ d'application à l'aide de elem.isolateScope()
Donc, avec ces changements:
```
describe('Wikis Directive Test Suite', function() {
    var $scope, scope, elem, directive, linkFn, html;

    beforeEach(module('app'));

    beforeEach(function() {
        html = '<wikis></wikis>';

        inject(function($compile, $rootScope, $templateCache) {
            $templateCache.put('templates/wiki-list.html', '<div>wiki template</div>');

            $scope = $rootScope.$new();
            $scope.wikis = [];

            elem = angular.element(html);

            $compile(elem)($scope);

            scope = elem.isolateScope();
            scope.$apply();
        });

    });

    it('add Wiki should add a valid wiki URL to artist', function() {
        var url = 'http://www.foo.com';
        scope.newWikiURL = url;
        scope.addWiki();

        expect(scope.wikis.length).toBe(1);
        expect(scope.wikis[0]).toBe(url);
        expect(scope.newWikiURL).toBe('');
    });
});
```
http://jsfiddle.net/QGmCF/1/
- Je vous remercie beaucoup. Le modèle de la directive a été chargé à l'aide d'objet XMLHTTPRequest, parce que je ne suis pas en utilisant le karma, c'était en partie une précédente beforeEach je n'ai pas posté. Je l'ai fait essayer d'obtenir le champ d'application de l'élément, et ça ne fonctionne pas. Ce qui s'est réellement fini par faire de la magie était en train de faire de la portée.$appliquer() au lieu de portée.$digest() comme je le faisais. Merci beaucoup encore une fois, j'ai perdu de nombreuses heures à essayer de comprendre celui-ci.
- Merci beaucoup pour votre exemple. Cependant, le code n'est pas tout à fait exact - depuis les wikis tableau est défini à l'extérieur de la $champ d'application, il n'est pas besoin de le recréer dans la Directive. Nous devrions également tester une url externe $champ d'application. Voici mon exemple (simplifié): jsfiddle.net/QGmCF/11 Laissez-moi savoir ce que vous en pensez.
- Je peux me tromper mais je pense que ce $compile(elem)(scope); doit être var elem = $compile(elem)(scope);
- scope = elem.isolateScope(); scope.$apply(); mauvais ordre de ces lignes. nous devrions faire scope.$apply(); première
- Merci @STEVER pour que le dernier bit. Il a résolu pour moi
InformationsquelleAutor noj
40

Comme par angulaire 1.2.0 docs, la manière d'obtenir l'isoler champ d'application est par le biais de la méthode isolateScope
- portée() - récupère le champ d'application de l'élément courant ou de son parent.
- isolateScope() - récupère un isolat de portée si l'on est directement relié à l'élément courant. Cette getter doit être utilisé uniquement sur les éléments qui contiennent une directive qui commence une nouvelle isoler portée. L'appel de la portée() sur cet élément renvoie toujours l'original à la non-isoler portée.
Angulaire doc - section jQuery/jqLite Extras

MODIFICATION de RUPTURE: jqLite#étendue()
- Merci, j'ai eu du mal avec cela pendant des heures. C'est la bonne réponse Angulaire 1.2 et jusqu'.
- Merci merci merci!!!! angular.element($elem).scope() n'obtient pas l'isoler de la portée alors que angular.element($elem).isolateScope() ne! T " a été très confus, sans cette tid bits. Merci @yeraycaballero!
- merci @Campbeln. Je content que ça vous a aidé
- Merci mec, tu m'a sauvé 🙂
InformationsquelleAutor yeraycaballero

Vous devez vous connecter pour publier un commentaire.