Как добавить элементы DOM в тесты jasmine без использования внешних файлов html?

Я пишу несколько простых тестов жасмина, и я получаю исключение, поскольку код, который я тестирую, ищет несуществующую форму, потому что при тестировании только файла js нет DOM: $("form")[0] в тестируемом файле js приводит к:

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

Я немного прочитал о jasmine-jquery и понял, что могу использовать некоторые html-фикстуры с внешним html-файлом. Этот поток кажется довольно запутанным, поскольку все, что мне нужно сделать, это добавить пустую действительную форму, чтобы тест (который фокусировался на чем-то другом) выполнялся, я думаю, что что-то вроде добавления <form></form> будет достаточно.

Сначала я думал, что решением будет функция sandbox(), но оказалось, что она создает только div, а мне нужна форма.

Любой простой способ добавить некоторые элементы, используя только код в файле спецификации жасмина?


jasmine jasmine-jquery
person user1639431    schedule 11.01.2013    source источник

Ответы (3)


arrow_upward
37
arrow_downward

Самое простое решение — самостоятельно добавить форму в DOM в блоке «до», а затем удалить ее в блоке «после»:

describe(function(){
  var form;

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

  it('your test', function(){


  })

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

Также написать помощника для песочницы не так уж сложно:

function sandbox(html){
  var el;

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


  afterEach(function(){
   el.remove();
   el = null;
});
person Andreas Köberle    schedule 12.01.2013
comment
По какой-то причине я думал, что добавление html не будет работать, так как я был уверен, что нет DOM, только javascript. Ваш ответ кажется таким тривиальным. Ну что ж. @Андреас-Кёберле - person user1639431; 12.01.2013
comment
Спасибо. Это устранило мою проблему с тем, что обработчик событий фокуса не срабатывал. - person jackocnr; 12.11.2013
comment
Как называется помощник песочницы? Вы просто вызываете его вручную в блоке describe()? - person Scribblemacher; 09.05.2018

arrow_upward
3
arrow_downward

Другой подход — использовать jasmine fix.

Концепция

Вот один из способов подумать об этом:

В jQuery вы даете $() селектор CSS, и он находит элементы в DOM.

В jasmine-fixture вы даете affix() селектор CSS, и он добавляет эти элементы в DOM.

Это очень полезно для тестов, потому что это означает, что после настройки состояния DOM с аффиксом ваш тестируемый код будет иметь элементы, необходимые для его работы.

Наконец, jasmine-fixture поможет вам избежать загрязнения тестами, убирая и удаляя все, что вы прикрепляете к DOM после запуска каждой спецификации.

См. также: SO: манипулирование домом в тесте Jasmine

person msanjay    schedule 28.12.2014
comment
лучший ответ на сегодняшний день, приспособления позволят вам работать как в исходном html - person E.Serra; 07.09.2016

arrow_upward
0
arrow_downward

Вы должны использовать песочницу () для создания div и создания элемента формы и добавления в песочницу, это более безопасный способ, чтобы жасмин взял под контроль эти приборы в DOM.

person Alexandre Magno Teles Zimerer    schedule 20.10.2014