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

Question

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

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

我阅读了一些关于 jasmine-jquery 的内容，并意识到我可以使用一些带有外部 html 文件的 html 固定装置。该流程似乎很困惑，因为我需要做的只是添加一个空的有效表单，以便测试(专注于其他内容)运行，例如 <form></form>我认为追加就足够了。

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

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

Answer 1

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

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