javascript - Jasmine - 单击时检查 addClass

Question

这是一个 Rails 应用程序。我将 Jasmine gem 与 Jasmine-Jquery 一起使用。

这是 Assets 管道中的 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>

这是我的规范文件:

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

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