19

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

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

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

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

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

4

3 回答 3

38

最简单的解决方案是在 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;
});
于 2013-01-12T10:35:39.320 回答
3

另一种方法是使用jasmine 夹具

这个概念

这是考虑它的一种方法：

在 jQuery 中，你给 $() 一个 CSS 选择器，它会在 DOM 上查找元素。

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

这对测试非常有用，因为这意味着在使用 affix 设置 DOM 的状态后，您的主题代码将具有完成其工作所需的元素。

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

另请参阅：SO：茉莉花测试中的 dom 操作

于 2014-12-28T08:45:54.200 回答
0

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

于 2014-10-20T16:45:34.523 回答