Jasmine - Checking addClass on click

Question

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)

Answer 1

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.

Answer 2

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