jasmine - test - ¿Cómo agrego elementos DOM en las pruebas de jazmín sin usar archivos html externos?

test jasmine angular 2

Question

Estoy escribiendo algunas pruebas simples de jazmín y estoy obteniendo una excepción ya que el código que estoy probando está buscando un formulario que no existe porque no hay DOM cuando se prueba solo un archivo js: $("form")[0] en el archivo js probado lleva a:

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

Leí un poco sobre jasmine-jquery y me di cuenta de que puedo usar algún accesorio html con un archivo html externo. Ese flujo parece bastante desordenado, ya que todo lo que necesito hacer es solo agregar un formulario válido vacío para que se ejecute la prueba (que se centra en otra cosa), algo como <form></form> anexar sería suficiente, creo.

Al principio pensé que la función sandbox () sería la solución, pero parece que solo crea divs, y necesito una forma.

¿Alguna forma simple de agregar algunos elementos usando solo el código en el archivo de especificaciones jazmín?

Answer 1

La solución más simple es agregar el formulario al DOM solo en el bloque anterior y luego eliminarlo en el bloque posterior:

describe(function(){
  var form;

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

  it(''your test'', function(){


  })

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

También escribir su ayudante de sandbox no es tan difícil:

function sandbox(html){
  var el;

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


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

Answer 2

Debes usar sandbox () para crear un div y crear un elemento de formulario y anexar al sandbox, esta es la forma más segura de que jazmín tome el control de estos dispositivos en el DOM.

Answer 3

Otro enfoque es usar accesorio de jazmín

El concepto

Aquí hay una manera de pensar sobre esto:

En jQuery, le das $ () un selector de CSS y encuentra elementos en el DOM.

En jasmine-fixture, le das a affix () un selector de CSS y agrega esos elementos al DOM.

Esto es muy útil para las pruebas, porque significa que después de configurar el estado del DOM con el afijo, el código de tema que se pruebe tendrá los elementos que necesita para hacer su trabajo.

Finalmente, el accesorio jazmín te ayudará a evitar la contaminación de prueba al poner en orden y eliminar todo lo que fijes en el DOM después de que se ejecute cada espec.

Ver también: SO: manipulación del dom en la prueba de jazmín