Small grunt, jasmine and jQuery fixtures gotchas

In a previous post I’ve shown a grunt and jasmine setup to develop test-driven JavaScript code. I’m really using the setup to develop code using the jQuery library and adding jasmine-jquery to the stack is mandatory.


By default jasmine-jquery will look for the fixtures in the spec/javascripts/fixtures folder which, in a project managed via grunt, will use the folder containing the Gruntfile.js file as the root folder any relative path is resolved from. Since my file structure is like this

    - Gruntfile.js
    - assets
        - js
            - spec
                - fixtures
                    - fixture1.html
                    - fixture2.html
                - ...
            - src
                - someComponent.js
                - ...
            - vendor
                - someLib.min.js
                - ...

the default path will not apply. Totally new to the whole TDD JavaScript and jQuery thing I’ve had two small gotchas today.

describe("jQuery.ajaxify", function() {
    var $frag;
    beforeEach(function() {

again in relation to the folder containing the Gruntfile.js file I had to specify a relative path to the fixtures

        jasmine.getFixtures().fixturesPath = "assets/js/spec/fixtures";

the loadFixtures method, or any other *Fixtures method for the matter, will not return anything

        $frag = loadFixtures('menu_fragment.html'); // frag will be undefined

fixture contents are loaded in the DOM and are ready to be accessed using jQuery

        $frag = $("#test-fixture");


    it("should ...", function() {