Question

这是一款Rails应用。我正在使用Jasmine gem和Jasmine-Jquery。

这是我在资产管道中的JS：

$selector = function() {
    $('#filters li').click(function() {
        $('#filters li').siblings().removeClass('selected');
        $(this).addClass('selected');
    });
}
$selector();

这是我的夹具名为workgrid_spec.html：

<div class="row">
    <div class="large-12 columns">
        <ul id="filters">
            <li class="identity" data-filter=".identity">Identity</li>
            <li>//</li>
            <li data-filter=".print">Print</li>
            <li>//</li>
            <li data-filter=".web">Web</li>
            <li>//</li>
            <li data-filter=".video">Video</li>
            <li>//</li>
            <li class="selected" data-filter="*">See All</li>
        </ul>
    </div>
</div>

这是我的spec文件：

describe("Make sure the workgrid works right", function() {    
    beforeEach(function() {
        loadFixtures('workgrid_spec.html');    
    });    
    describe("when a filter is clicked", function() {   
        it("is highlighted in the list with the 'selected' class", function() {
            $('.identity').click();
            expect('.identity').toHaveClass('selected');
        });    
    });
});

这是我得到的错误：

Error: Expected '.identity' to have class 'selected'.
    at new jasmine.ExpectationResult (http://localhost:8888/__jasmine__/jasmine.js:114:32)
    at null.toHaveClass (http://localhost:8888/__jasmine__/jasmine.js:1235:29)
    at null.<anonymous> (http://localhost:8888/__spec__/workgrid_spec.js:12:24)

Answer 1

问题是在加载fixture之前调用了$selector函数，因此事件无法添加到元素中。您必须再次在测试中调用该函数，或使用jquerys delegate函数来绑定事件。

Answer 2

正如安德烈亚斯所描述的，你需要使用你的选择器：

it("is highlighted in the list with the 'selected' class", function() {
      $('.identity').click();
      expect($('.identity')).toHaveClass('selected');
});

请记住在您的规范中包含JQuery，即。

var $ = require('jquery');

Jasmine - 点击检查addClass

2 个答案: