Testowanie DOM manipulacji w teście Jasmine

Question

Tworzę widget js i pierwsza część jest dodać szerokość skrypt java, coś takiego (przykład z 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); 
})(); 

Jak przetestować go z jaśminu (używając urządzeń?)?

Answer 1

Do ciężkich testów DOM z Jasmine można użyć Jasmine Headless WebKit.

Answer 2

Przypuszczam, że można wykonywać swoje działania, a następnie zaznacz href na pierwszym tagu skrypt tak:

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

Byłoby zainteresowani lepszą metodę, chociaż. Sprawdzanie DOM z Jasmine zawsze wydaje się trochę hacky.

Answer 3

Aby skonfigurować urządzenia HTML w mojej specyfikacji, napisałem jasmine-fixture. Dzięki niemu możesz zrobić takie rzeczy:

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 

A po wszystkim, to posprząta po tobie.

Dla oczekiwań dotyczących stanu DOM używam jasmine-jquery. Oferuje tonę dopasowujących jak poniżej:

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