5

jQuery

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

茉莉花

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

我是茉莉花的新手，目前测试失败。我不确定它是夹具、触发事件还是其他东西。

4

3 回答 3

7

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

用作示例的测试实际上并不能证明任何事情：当然点击已触发，您只是触发了它！你想要做的是证明点击之后的一些东西，例如 DOM 或其他数据结构的变化，这是原始的（IMO 正确的）本能。

您想要的是使用异步测试等待 DOM 中的更改然后放弃，类似于 Ruby 库Capybara的工作方式：

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

  waitsFor(function() {
    return $('head').contains('theme_switcher');
  }, 'theme switcher never loaded', 10000);
});
于 2012-07-25T05:31:51.803 回答
1

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

我目前的测试（通过）如下：

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'));
});
});
于 2012-06-01T21:24:08.613 回答
0

theme_switcher是您的链接的 ID。toContain需要一个选择器，即你应该写toContain('#theme_switcher').

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

编辑：

我假设你使用jasmine-jquery

于 2012-06-01T19:00:43.010 回答