javascript - Jasmine - Checking addClass on click - Stack Overflow

admin管理员组

文章数量:1310221

This is a Rails app. I'm using the Jasmine gem with Jasmine-Jquery.

Here's my JS in asset pipeline:

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

Here's my fixture called 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>

And here's my spec file:

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

And here's the error I'm getting:

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)

This is a Rails app. I'm using the Jasmine gem with Jasmine-Jquery.

Here's my JS in asset pipeline:

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

Here's my fixture called 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>

And here's my spec file:

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

And here's the error I'm getting:

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)

• javascript
• jasmine
• jasmine-jquery

Share Improve this question Follow asked May 30, 2013 at 15:50 Scott MagdaleinScott Magdalein 39111 gold badge33 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The problem is that you $selector function is called before the fixture is loaded, so the event can't added to the element. You have to call the function in your test again or use jquerys delegate function to bind the event.

As described by Andreas, you need to use your selector like so:

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

remember to include JQuery in your specs as well, ie.

var $ = require('jquery');

本文标签： javascriptJasmineChecking addClass on clickStack Overflow