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

【问题标题】：How do I add DOM elements in jasmine tests without using external html files?如何在不使用外部 html 文件的情况下在 jasmine 测试中添加 DOM 元素？
【发布时间】：2013-01-11 16:02:44
【问题描述】：

我正在编写一些简单的 jasmine 测试，但我遇到了一个异常，因为我正在测试的代码正在寻找一个不存在的表单，因为仅在测试 js 文件时没有 DOM：$("form")[0] in测试的js文件导致：

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

我阅读了一些关于 jasmine-jquery 的信息，并意识到我可以将一些 html 固定装置与外部 html 文件一起使用。这个流程看起来很混乱，因为我需要做的只是添加一个空的有效表单，以便测试（专注于其他事情）运行，我认为像<form></form> 附加就足够了。

一开始我以为sandbox()函数会是解决方案，但似乎它只创建div，我需要一个表单。

有什么简单的方法可以通过只使用 jasmine 规范文件中的代码来添加一些元素吗？

【问题讨论】：

标签： jasmine jasmine-jquery

【解决方案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;
});

【讨论】：

出于某种原因，我认为 html 附加不起作用，因为我确定没有 DOM，只有 javascript。你的回答似乎很琐碎。那好吧。 @Andreas-Köberle
谢谢。这解决了我的焦点事件处理程序未触发的问题。
沙盒助手是怎么调用的？您只是在describe() 块中手动调用它吗？

【解决方案2】：

另一种方法是使用jasmine fixture

概念

这是一种思考方式：

在 jQuery 中，你给 $() 一个 CSS 选择器，它会在 DOM。

在 jasmine-fixture 中，你给 affix() 一个 CSS 选择器，它会添加那些 DOM 中的元素。

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

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

另见：SO: dom manipulation in Jasmine test

【讨论】：

迄今为止最好的答案，固定装置可以让您像在原始 html 中一样工作

【解决方案3】：

您应该使用 sandbox() 创建一个 div 并创建一个表单元素并附加到沙箱，这是让 jasmine 控制 DOM 中的这个装置的更安全的方法。

【讨论】：