Тестирование DOM-манипуляции в тесте Жасмина

Я создаю js-виджет, и первая часть - это добавить script width javascript, что-то вроде этого (пример из 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);
})();

Как протестировать его с помощью жасмина (используя светильники?)?

Ответы

Ответ 1

Для настройки HTML-светильников в моих спецификациях я написал jasmine-fixture. С его помощью вы можете делать такие вещи:

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

И после того, как он будет очищен после вас.

Для ожиданий о состоянии DOM я использую jasmine-jquery. Он предлагает тонну таких сочетаний, как та, которая приведена ниже:

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

Ответ 2

Я полагаю, вы могли бы выполнить свое действие, а затем проверить href на первом теге script так:

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

Спектр жасмина:

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

Было бы интересно услышать лучший метод. Проверка DOM с Жасмин всегда чувствует себя немного взломанным.

Ответ 3

Для интенсивного тестирования DOM с помощью Jasmine вы можете использовать Jasmine Headless WebKit.