如何在Jasmine测试中添加DOM元素而不使用外部HTML文件？

Question

我正在编写一些简单的Jasmine测试，但是当我测试一个仅包含JavaScript文件而没有DOM时，我的代码会引发异常，因为我正在测试的代码正在寻找一个不存在的表单：$("form")[0]。

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

我了解了一些关于jasmine-jquery的知识，并意识到可以使用外部html文件来创建一些html fixture。这个过程似乎有些混乱，因为我只需要添加一个空的有效表单，以便测试（专注于其他内容）可以运行，像<form></form>这样附加就足够了。

起初我认为sandbox()函数会是解决方案，但它似乎只创建divs，而我需要一个表单。

有什么简单的方法可以仅使用jasmine spec文件中的代码来添加一些元素吗？

- user1639431

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

- Andreas Köberle

---

由于我确信只有JavaScript而没有DOM，所以出于某种原因我认为HTML附加不起作用。你的答案似乎很琐碎。哦，好吧。@Andreas-Köberle - user1639431

谢谢。这解决了我的焦点事件处理程序未触发的问题。 - jackocnr

沙盒助手叫什么名字？你是在describe()块中手动调用它吗？ - Scribblemacher

Answer 2

另一种方法是使用jasmine fixture。

概念

以下是一种思考方式：

在jQuery中，您向$()提供CSS选择器，它会在DOM上查找元素。

在jasmine-fixture中，您向affix()提供CSS选择器，它会将这些元素添加到DOM中。

这对于测试非常有用，因为这意味着在使用affix设置DOM状态后，您的受测代码将拥有执行其工作所需的元素。

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

另请参阅：SO：Jasmine测试中的DOM操作

- msanjay

---

迄今为止最佳的答案，fixtures 可让您像在原始 HTML 中一样工作。 - E.Serra

Answer 3

你应该使用sandbox()函数创建一个div元素，并创建一个表单元素并将其附加到sandbox中，这是Jasmine控制DOM中fixtures的更安全的方式。

- Alexandre Magno Teles Zimerer