Question

我正在编写一些简单的茉莉花测试，我得到一个异常，因为我正在测试的代码正在寻找一个不存在的表单，因为在测试js文件时没有DOM：{{1}在测试的js文件中导致：

$("form")[0]

我读了一些关于jasmine-jquery的内容，并意识到我可以使用一些外部html文件的html fixture。这个流程似乎非常混乱，因为我只需要添加一个空的有效表单，以便测试（专注于其他内容）将运行，如TypeError: $(...)[0] is undefined追加就足够了。我想。 p>

起初我认为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;
});

Answer 2

另一种方法是使用jasmine fixture

概念

这是考虑它的一种方式：

在jQuery中，你给$（）一个CSS选择器，它在上面找到元素   DOM。

在jasmine-fixture中，你给affix（）一个CSS选择器，然后添加它们   DOM的元素。

这对测试非常有用，因为它意味着在设置之后   带有词缀的DOM的状态，您的主题代码将被测试   拥有完成工作所需的元素。

最后，jasmine-fixture将帮助您通过整理来避免测试污染   在每个规范运行后删除并附加到DOM的所有内容。

另请参阅：SO: dom manipulation in Jasmine test

Answer 3

你应该使用sandbox（）创建一个div并创建一个表单元素并附加到沙箱，这是茉莉花控制DOM中这个灯具的更安全的方法。

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

3 个答案: