web-dev-qa-db-fra.com

Comment ajouter des éléments DOM dans les tests jasmine sans utiliser de fichiers HTML externes?

J'écris quelques tests simples au jasmin et je reçois une exception car le code que je teste recherche un formulaire qui n'existe pas car il n'y a pas de DOM lorsque vous testez un fichier js uniquement: $("form")[0] dans le fichier js testé. à:

TypeError: $(...)[0] is undefined

J'ai lu un peu sur jasmine-jquery et me suis rendu compte que je pouvais utiliser certains appareils html avec un fichier html externe. Ce flux semble assez compliqué, car tout ce que je dois faire est simplement d’ajouter un formulaire valide vide pour que le test (qui se concentre sur autre chose) soit exécuté, quelque chose comme ajouter <form></form> serait suffisant à mon avis.

Au début, je pensais que la fonction sandbox () serait la solution, mais il semblerait qu’elle ne crée que des div, et j’ai besoin d’un formulaire.

Un moyen simple d'ajouter des éléments en utilisant uniquement du code dans le fichier de spécifications de jasmin?

jasminejasmine-jquery
16
user1639431

La solution la plus simple consiste à ajouter vous-même le formulaire au DOM dans le bloc before, puis à le supprimer dans le bloc after:

describe(function(){
  var form;

  beforeEach(function(){
    form = $('<form>');
    $(document.body).append(form);
  });

  it('your test', function(){


  })

  afterEach(function(){
   form.remove();
   form = null;
  });
});

Également, écrire votre assistant de bac à sable n'est pas si difficile:

function sandbox(html){
  var el;

  beforeEach(function(){
    el = $(html);
    $(document.body).append(el);
  });


  afterEach(function(){
   el.remove();
   el = null;
});
33
Andreas Köberle

Une autre approche consiste à utiliser jasmine fixture

Le concept

Voici une façon de penser à ce sujet:

Dans jQuery, vous donnez à $ () un sélecteur CSS et il trouve des éléments sur le DOM .

Dans jasmine-fixture, vous fournissez à affix () un sélecteur CSS qui ajoute ces éléments Au DOM.

Ceci est très utile pour les tests, car cela signifie qu'après la configuration de L'état du DOM avec affixe, votre code de sujet soumis au test Disposera des éléments nécessaires à son travail.

Enfin, jasmine-fixture vous aidera à éviter les tests de pollution en rangeant Et en supprimant tout ce que vous apposez sur le DOM après chaque spécification effectuée.

Voir aussi: SO: manipulation de dom dans le test au jasmin

3
msanjay

Vous devez utiliser sandbox () pour créer une div, créer un élément de formulaire et l'ajouter à sandbox. C'est le moyen le plus sûr de jasmine pour prendre le contrôle de ces fixtures dans le DOM.

0
Alexandre Magno Teles Zimerer