test DOM manipolazione nella prova di Jasmine

Question

Sto creando un widget js e la prima parte è quello di aggiungere larghezza di script javascript, qualcosa di simile (ad esempio da 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); 
})(); 

Come testare con il gelsomino (utilizzando infissi?)?

Answer 1

Per test DOM pesanti con Jasmine è possibile utilizzare Jasmine Headless WebKit.

Answer 2

Immagino che si potrebbe eseguire l'azione, quindi controllare la href sul primo tag script in questo modo:

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 spec:

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); 

sarebbe interessato a sentire un metodo migliore, anche se. Controllare il DOM con Jasmine è sempre un po 'hacky.

Answer 3

Per la configurazione di dispositivi HTML nelle mie specifiche, ho scritto jasmine-fixture. Con esso, è possibile fare cose del genere:

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 

E dopo Ogni pulisce dopo di te.

Per aspettative circa lo stato del DOM, io uso jasmine-jquery. Offre una tonnellata di matchers come quella qui sotto:

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