Angular js unité de test de la maquette du document

Je suis en train de tester angulaire de service qui effectue des manipulations du DOM via $document service avec le jasmin.
Disons simplement, il ajoute certains directive de la <body> élément.

Un tel service pourrait ressembler à

(function(module) {
    module.service('myService', [
        '$document',
        function($document) {
            this.doTheJob = function() {
                $document.find('body').append('<my-directive></my directive>');
            };
        }
    ]);
})(angular.module('my-app'));

Et je veux tester de cette

describe('Sample test' function() {
    var myService;

    var mockDoc;

    beforeEach(function() {
        module('my-app');

        //Initialize mock somehow. Below won't work indeed, it just shows the intent
        mockDoc = angular.element('<html><head></head><body></body></html>');

        module(function($provide) {
            $provide.value('$document', mockDoc);
        });
    });

    beforeEach(inject(function(_myService_) {
        myService = _myService_;
    }));

    it('should append my-directive to body element', function() {
        myService.doTheJob();
        //Check mock's body to contain target directive
        expect(mockDoc.find('body').html()).toContain('<my-directive></my-directive>');
    });
});

La question est donc quelle serait la meilleure façon pour créer fictif?

Tests avec de vrais document va nous donner beaucoup de peine nettoyage après chaque test et ne pas ressembler à un chemin pour aller avec.

J'ai aussi essayé de créer un nouveau document de l'instance, avant chaque test, pas encore fini avec les différents échecs de.

La création d'un objet comme ci-dessous et vérifier whatever variable fonctionne mais est très moche

var whatever = [];
var fakeDoc = {
    find: function(tag) {
              if (tag == 'body') {
                  return function() {
                      var self = this;
                      this.append = function(content) {
                          whatever.add(content);
                          return self;
                      };
                  };
              } 
          }
}

J'ai l'impression que je suis absent quelque chose d'important ici et de faire quelque chose de très mauvais.

Toute aide est très appréciée.

OriginalL'auteur Alexander Nyrkov | 2013-12-01

  1. 17

    Vous n'avez pas besoin de se moquer de l' $document service dans un tel cas. Il est plus facile d'utiliser sa mise en œuvre effective:

    describe('Sample test', function() {
    var myService;
    var $document;

    beforeEach(function() {
        module('plunker');
    });

    beforeEach(inject(function(_myService_, _$document_) {
        myService = _myService_;
        $document = _$document_;
    }));

    it('should append my-directive to body element', function() {
        myService.doTheJob();
        expect($document.find('body').html()).toContain('<my-directive></my-directive>');
    });
});

    Plunker ici.

    Si vous avez vraiment besoin de s'en moquer, alors je suppose que vous aurez à faire de la manière que vous avez fait:

    $documentMock = { ... }

    Mais qui peut casser d'autres choses qui dépendent de la $document service lui-même (par exemple, une directive qui utilise createElement, par exemple).

    mise à JOUR

    Si vous avez besoin de restaurer le document de retour à un état cohérent après chaque test, vous pouvez faire quelque chose le long de ces lignes:

    afterEach(function() {
    $document.find('body').html(''); //or $document.find('body').empty()
                                     //if jQuery is available
});

    Plunker ici (j'ai dû utiliser un autre récipient sinon Jasmin résultats ne seraient pas rendus).

    @AlexanderNyrkov souligné dans les commentaires, à la fois de Jasmin et de Karma ont leur propre substance à l'intérieur de la body tag, et de les éliminer en vidant le corps du document ne semble pas être une bonne idée.

    Mise à JOUR 2

    J'ai réussi à partiellement moquer de la $document service de sorte que vous pouvez utiliser la page de document et de tout restaurer à un état valide:

    beforeEach(function() {
    module('plunker');

    $document = angular.element(document); //This is exactly what Angular does
    $document.find('body').append('<content></content>');

    var originalFind = $document.find;
    $document.find = function(selector) {
      if (selector === 'body') {
        return originalFind.call($document, 'body').find('content');
      } else {
        return originalFind.call($document, selector);
      }
    }

    module(function($provide) {
      $provide.value('$document', $document);
    });        
});

afterEach(function() {
    $document.find('body').html('');
});

    Plunker ici.

    L'idée est de remplacer le body balise avec un nouveau que votre SUT peut manipuler librement et de votre test peut en toute sécurité clair à la fin de chaque spec.

    Je vous remercie pour votre réponse. Une telle approche permettra de créer des dépendances entre les tests. Disons que notre service de y ajoute quelque chose à la document à chaque appel à doTheJob puis supprime l'ajout d'un élément avec des appels à cleanup méthode. Si certains d'échec du nettoyage tous les autres tests dépend du contenu de ce document peut échouer. Il est probablement possible de restaurer l'état d'origine du document après chaque test, mais ce peut être tout aussi difficile que le problème d'origine.
    En supposant que vos tests ajouter des choses à la document body, il est facile de restaurer tout retour à un état primitif en faisant $document.find('body').html('') (ou $document.find('body').empty(), si jQuery est disponible) au sein d'une afterEach bloc. Je vais mettre à jour la réponse afin de l'illustrer.
    J'ai pensé à une telle approche soit mais le karma et de jasmin ont leurs trucs à l'intérieur body tag. Si la vidange de la body ne ressemble pas à une bonne idée pour moi. Nous pourrions probablement restaurer l'état original d'après le test, mais je préfère ne pas interférer avec le test de cadres " trucs
    C'est bizarre. Je l'avait testé avec une de mes suites de test (qui utilise à la fois de Jasmin et de Karma) avant que j'ai répondu à votre premier commentaire, et tout a très bien fonctionné. :\ Vérifiera à nouveau pour être sûr.
    Je pense que je l'ai eu. En fait, le Karma, met ses affaires à l'intérieur de la body balise, comme vous l'avez dit, mais c'est juste <script> balises avec tout ce qu'il faut pour travailler. Depuis ces scripts avait déjà été chargé lors de la première épreuve couru, les retirer de la body ne semble pas affecter les autres tests. Mais je suis d'accord avec vous qu'il ne semble pas une bonne idée de jouer avec des choses qui ne vous appartient pas.

    OriginalL'auteur Michael Benford

  2. 5

    Vous pouvez créer un vide, le document de test à l'aide de DOMImplementation#createHTMLDocument():

    describe('myService', function() {
  var $body;

  beforeEach(function() {
    var doc;

    //Create an empty test document based on the current document.
    doc = document.implementation.createHTMLDocument();

    //Save a reference to the test document's body, for asserting
    //changes to it in our tests.
    $body = $(doc.body);

    //Load our app module and a custom, anonymous module.
    module('myApp', function($provide) {
      //Declare that this anonymous module provides a service
      //called $document that will supersede the built-in $document
      //service, injecting our empty test document instead.
      $provide.value('$document', $(doc));
    });

    //...
  });

  //...
});

    Parce que vous êtes en train de créer un nouveau document vide pour chaque test, vous ne serez pas interférer avec la page de l'exécution de vos tests et vous n'aurez pas explicitement de le nettoyer après votre service entre les tests.

    OriginalL'auteur Ian Lesperance