javascript - Jasmine - 单击时检查 addClass

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>

这是我的规范文件：

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在加载夹具之前调用了您的函数，因此无法将事件添加到元素中。您必须再次调用测试中的函数或使用 jquerysdelegate函数绑定事件。

Answer 2

如 Andreas 所述，您需要像这样使用选择器：

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

记得在你的规范中包含 JQuery，即。

var $ = require('jquery');