Jasmine-fixture in, fixtures out

I’ve been working with Jasmine a lot these days and while the framework works like a charm an intricate and still to be solved (by me) problem blights its grunt application. [caption id=“attachment_955” align=“aligncenter” width=“1024”] Xhttp what… ?[/caption] The problem seems to be related to PhantomJS, grunt-contrib-jasmine uses it to run the tests, and, after a quick try with a proposed solution (Gruntfile.json file here)

jasmine: {
    src: 'assets/js/src/*.js',
    options: {
        vendor: [
        ...
        ],
        specs: 'assets/js/spec/*.js',
        keepRunner: true,
        '--web-security' : false,
        '--local-to-remote-url-access' : true,
        '--ignore-ssl-errors' : true
        }
}

which did not solve the problem I’ve decided to avoid the problems related to cross-domain loading entirely and move to jasmine-fixture.

Almost Emmet/Zen Coding

The library allows writing fixtures like

var $frag = affix('#wrapper #main');
var form = $frag.affix('form#searchform');
form.affix('input.query[type="text"][value="some value"]');
form.affix('input.submit[type="submit"]');

to have this HTML on the page

<div id="wrapper">
    <div class="main"></div> 
    <form id="searchform">
        <input type="text" value="some value" class="query">
        <input type="submit" class="submit">
    </form>
</div>

while this might not seem much of a gain being able to write such a markup without embedding quoted HTML in JavaScript, without using external and unstable fixtures and without having to worry about removing and reloading fixtures is a bonus to me.
Of course doing it in the beforeEach method makes it all fantastic.
What’s missing from a full Emmet/Zen Coding port is the possibility to add multiple children in a batch.

Little gotcha

The code

var input = affix('input[type="text"][value="some value"]');

will not generate the expected result of

<input type="text" value="some value">

but will instead stop at

<input type="text">

The odd behavior seems to be resolved adding an id or class attribute like

var input = affix('input.query[type="text"][value="some value"]');

to have markup like the HTML shown above printed to the page.