jQuery 使用 Jasmine 测试将样式表附加到头部的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10823790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Testing a click event with Jasmine that appends a style sheet to the head
提问by coreballs
jQuery
jQuery
$(".theme-picker").click(function () {
$('head').append('<link rel="stylesheet" href="" type="text/css" media="screen" id="theme_switcher"/>');
});
Jasmine
茉莉花
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");
});
});
I am new to jasmine and the test is currently failing. I am unsure if it is the fixture, the trigger event or something else entirely.
我是 jasmine 的新手，目前测试失败。我不确定它是固定装置，触发事件还是其他完全不同的东西。
回答by method
I think the chosen answer (even though it's by the OP!) is misleading and incorrect. I'm not sure why it would be "poor form" to test the effect that a piece of JavaScript has on some targeted HTML. Often that's the only output that you can use to verify whether a method works.
我认为选择的答案（即使它是由 OP 提供的！）具有误导性和不正确性。我不确定为什么测试一段 JavaScript 对某些目标 HTML 的影响会是“糟糕的形式”。通常，这是您可以用来验证方法是否有效的唯一输出。
The test that's used as an example doesn't actually prove anything: of course click was triggered, you just triggered it! What you want to do is prove something that follows from that click, e.g. a change in a DOM or other data structure, which was the original (IMO correct) instinct.
用作示例的测试实际上并不能证明任何事情：当然是触发了点击，您只是触发了它！您想要做的是证明该点击后发生的事情，例如 DOM 或其他数据结构的更改，这是原始（IMO 正确）本能。
What you want is to use an asynchronous testto wait for a change in the DOM and then give up, similar to the way the Ruby library Capybaraworks:
你想要的是使用异步测试等待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);
});
回答by coreballs
Research has shown it is in poor form to test page specific elements.
研究表明，测试页面特定元素的方式很糟糕。
My current test (passing) is as follows:
我目前的测试（通过）如下：
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'));
});
});
回答by ggozad
theme_switcheris the id of your link. toContaintakes a selector, i.e. you should be writing toContain('#theme_switcher').
theme_switcher是您的链接的 ID。toContain需要一个选择器，即您应该编写toContain('#theme_switcher').
Also make sure you are appending in the sandbox and also checking the head of the sandbox, not your document's.
还要确保您在沙箱中附加并检查沙箱的头部，而不是您的文档的头部。
EDIT:
编辑：
I assume you use jasmine-jquery
我假设你使用jasmine-jquery
