Jquery 用Jasmine测试一个点击事件，Jasmine将样式表附加到头部_Jquery_Jasmine_Jasmine Jquery

Jquery 用Jasmine测试一个点击事件，Jasmine将样式表附加到头部

jquery jasmine

Jquery 用Jasmine测试一个点击事件，Jasmine将样式表附加到头部,jquery,jasmine,jasmine-jquery,Jquery,Jasmine,Jasmine Jquery,jQuery $（“.theme picker”）。单击（函数（）{ $（'head'）。追加（''）； }); 茉莉花 $(".theme-picker").click(function () { $('head').append('<link rel="stylesheet" href="" type="text/css" media="screen" id="theme_switcher"/>'); }); 描述（“style.switcher”，函数（）{ b

jQuery

$（“.theme picker”）。单击（函数（）{
$（'head'）。追加（''）；
});

茉莉花

$(".theme-picker").click(function () {
      $('head').append('<link rel="stylesheet" href="" type="text/css" media="screen" id="theme_switcher"/>');
});

描述（“style.switcher”，函数（）{
beforeach（函数（）{
jasmine.getFixtures（）.set(
'' +
'' +
'' +
'' +
'' +
'' +
'' );
});
它（“在头部加载主题切换器链接”，函数（）{
$（'.theme picker'）。触发器（'click'）；
期望（$（'head'））.toContain（“主题切换器”）；
});
});

我是茉莉花的新手，目前考试不及格。我不确定它是否是装置、触发事件或其他完全不同的东西。

theme\u switcher

是链接的id

toContain

使用一个选择器，即您应该编写

toContain（“#主题切换器”）

还要确保您在沙盒中追加内容，并检查沙盒的头部，而不是文档的头部

编辑：

我假设您使用了

研究表明，测试页面特定元素的形式很差

我目前的考试（通过）情况如下：

describe("style.switcher", function() {

beforeEach( function() {
    jasmine.getFixtures().set(
        '<head></head>' +
        '<div class="switcher">' +
          '<a class="theme-picker" title="theme-picker"></a>' +
          '<a class="folder-picker" title="folder-picker"></a>' +
          '<a class="font-picker" title="font-picker"></a>' +
          '<a class="color-picker" title="color-picker"></a>' +
        '</div>' );
  });

it("loads themes switcher link in head", function() {
  $('.theme-picker').trigger('click');
  expect( $('head') ).toContain("theme_switcher");
});
});

我认为所选择的答案（即使是由OP提供的！）是误导和错误的。我不知道为什么测试一段JavaScript对某些目标HTML的影响会是“糟糕的形式”。通常，这是唯一可以用来验证方法是否有效的输出

作为一个例子使用的测试实际上并没有证明任何事情：当然点击被触发了，你只是触发了它！您要做的是证明单击之后发生的事情，例如DOM或其他数据结构中的更改，这是原始（IMO正确的）本能

您希望使用的是等待DOM中的更改，然后放弃，类似于Ruby库的工作方式：

我不知道

toContain（）

可以将CSS选择器作为参数。你有可以链接到的参考资料吗？我对此很好奇，所以我做了一些搜索。在引擎盖下，

toContain（）

调用

jasmine.Env.prototype.contains（）

其中。我没有看到任何迹象表明它将接受CSS选择器，但我希望被证明是错误的！如何检查沙箱的头部？我认为在测试中出现的唯一头部是文档的。沙盒（）；返回我假设您是jasmine jquery，这在您的案例中完全有意义。看看这个链接，您会注意到toContain使用了一个jQuery选择器。在沙箱之外的html中可能有一个头部$（'head'）将返回两个。

describe("zen switcher", function() {

beforeEach( function() {
  loadFixtures('zen_switcher.html');
  spyOnEvent($('.theme-picker'), 'click');
});

it("clicks the .theme-picker", function() {
  $('.theme-picker').click();
  expect('click').toHaveBeenTriggeredOn($('.theme-picker'));
});
});

it('loads themes switcher link in head', function() {
  $('.theme-picker').trigger('click');

  waitsFor(function() {
    return $('head').contains('theme_switcher');
  }, 'theme switcher never loaded', 10000);
});