Pruebas DOM manipulación en la prueba de jazmín

Question

Estoy creando un widget JS y la primera parte es agregar guión ancho de JavaScript, algo como esto (ejemplo de Google Analytics):

(function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 

Cómo probar con jazmín (usando accesorios?)?

Answer 1

Para realizar pruebas DOM intensas con Jasmine, puede usar Jasmine Headless WebKit.

Answer 2

supongo que se podría llevar a cabo su acción, a continuación, comprobar el href en la primera etiqueta de script, así:

function addGA(){ 
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; ga.async = true; 
    ga.src = 
     ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') 
     + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s); 
}; 

Jasmine especificaciones:

var href = 'http://www.google-analytics.com/ga.js'; 
expect(document.getElementsByTagName('script')[0].href).not.toEqual(href); 
addGa(); 
expect(document.getElementsByTagName('script')[0].href).toEqual(href); 

estaría interesado en escuchar un mejor método, aunque. Controlar el DOM con Jasmine siempre se siente un poco hacky.

Answer 3

Para configurar los dispositivos HTML en mis especificaciones, escribí jasmine-fixture. Con él, puede hacer cosas como esta:

var $foo, $input; 
beforeEach(function(){ 
    $foo = affix('.foo'); 
    # appends to the DOM <div class="foo"></div> 
    $input = $foo.affix('input[id="name"][value="Jim"]'); 
    # appends <input id="name" value="Jim"/> beneath the .foo div 

Y después de cada uno, se limpiará después de usted.

Para las expectativas sobre el estado del DOM, uso jasmine-jquery. Ofrece una tonelada de comparadores como la siguiente:

it('is named Jim', function(){ 
    expect($input).toHaveValue("Jim"); 
});