如何在不使用外部html文件的情况下在茉莉花测试中添加DOM元素？

Question

我正在写一些简单的茉莉花测试,我得到一个例外,因为我正在测试的代码正在寻找一个不存在的表单,因为在测试js文件时没有DOM:$("form")[0]在测试的js文件中导致:

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

我读了一下jasmine-jquery,并意识到我可以使用一些外部html文件的html fixture.这个流程似乎非常混乱,因为我只需要添加一个空的有效表单,以便测试(专注于其他内容)将会运行,<form></form>我认为附加就足够了.

起初我认为sandbox()函数将是解决方案,但它似乎只创建div,我需要一个表单.

通过仅使用jasmine规范文件中的代码添加一些元素的任何简单方法？

Answer 1

最简单的解决方案是在before块中自己将表单添加到DOM中,然后在after块中删除它:

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