Unable to load HTML test fixture for Jasmine in Visual Studio 2013

Question

I'm new to client-side testing, but have written a Jasmine test in Visual Studio that runs my JS code against an HTML "fragment" (part of my page) and successfully performs an Assert - all well and good.

However, I'm not able to load the HTML from a test fixture as described in the documentation. I've seen several similar posts on this subject, but have followed their examples, but the code syntax isn't recognized. I've temporarily got around this by placing my HTML in a separate function and reading this when needed. Whilst this works, it's unsatisfactory since I need to escape the multi-line HTML with a back-slash character at the end of every line, and I don't fancy doing this for all the hundreds of tests that I envisage I'll end up writing.

Okay, my setup.

• Visual Studio 2013
• Sinon 1.17.2
• Chutzpah Test Adapter For the Test Explorer 4.1.0
• Chutzpah Test Runner Context Menu Extension 4.1.0

I have the following directory structure in my project, things in square brackets [xyz] are folders, and the "\\" signifies child in directory structure

Project
\ [MyApplicationName]
\\ [FeatureUnderTest]
\\\ myTestFile.js
\\\ myHtmlFragmentFromPage.html
\\\ myHtmlFragmentReturnedFromAjax.html
\ [Libraries]
\\ sinon-1.17.2.js

Okay, so as you can see, I have my test file in the SAME folder as my test file. I would probably end up with multiple tests for each Feature - there may be sub-features with their associated tests too. And ideally, I'd like the HTML files to be in a sub folder relative to the Test JS, and this folder could have a standard name such as "Fixtures". So I could end up with something like:

Project
\ [MyApplication]
\\ [Feature1]
\\\ [Fixture]
\\\\ HtmlFragA.html
\\\\ HtmlFragB.html
\\\ Feature1.Test.js

\\ [Feature2]
\\\ [SubFeature1]
\\\\ [Fixture]
\\\\\ HtmlFragA.html
\\\\\ HtmlFragB.html
\\\\ Feature2.SubFeature1.Test.js
\\\ [SubFeature2]
\\\\ [Fixture]
\\\\\ HtmlFragA.html
\\\\\ HtmlFragB.html
\\\\ Feature2.SubFeature2.Test.js
\\\ [SubFeature3]
\\\\ [Fixture]
\\\\\ HtmlFragA.html
\\\\\ HtmlFragB.html
\\\\ Feature2.SubFeature3.Test.js

\\ [Feature3]
\\\ [Fixture]
\\\\ HtmlFragA.html
\\\\ HtmlFragB.html
\\\ Feature3.Test.js

\ [Libraries]
\\ sinon-1.17.2.js

For those with experience with many tests, is this a good way to segregate these tests? If not, any pointers would be appreciated.

Okay, onto my code.

/// <reference path="../../../myApplication/scripts/Feature1/jsFileUnderTest.js" />
describe("Given Feature 1", function (){
    describe("When AJAX call is successful", function() {
        // Currently load from functions
        var html = htmlFragmentFromDom();
        var ajaxResponse = ajaxResponse();

        beforeEach(function() {
            $('body').append(html);

            sinon.stub($, 'ajax', function (options){
                var dfd = $.Deferred();
                if (options.success) {dfd.done(options.success(ajaxResponse));}
                if (options.error) {dfd.fail(options.error);}
                dfd.success = dfd.done;
                dfd.error = dfd.fail;
                return dfd;
            });
        });    
        afterEach(function() {
            $(html).remove();
            $.ajax.restore();
        });

        if("Then abc Should Be 123", function (){
            ....
        });
    });
});
function htmlFragmentFromDom(){
    return '... /
            .....';
}
function ajaxResponse(){
    return '... /
            .....';
}

The contents of my Chutzpah.json is as follows:

{
    "Framework": "jasmine",
    "TestHarnessLocationMode": "TestFileAdjacent",
    "TestFileTimeout": "120000",
    "References": [
        { "Path": "../../myApplication/scripts/jquery/jquery-1.11.2.js" },
        { "Path": "../../myApplication/scripts/jquery/jquery-ui-1.11.4.js" },
        { "Path": "../libraries/sinon-1.17.2.js" }
    ]
}

So, if anyone knows what I need to do to be able to read in the HTML (for the DOM fragment that the JavaScript-under-test will run on and for the HTML returned from the AJAX call, then I will be most grateful.

Griff

Answer 1

Chutzpah supports injecting HTML templates into the dom. Just reference your HTML file from chutzpah.json and it should work:

"References": [
        { "Path": "myHtmlFile.html" }
    ]