Jasmine Fixtures and Chutzpah Test Adaptors
In my last post I described how to configuring an “App for SharePoint” VMC project to use Jasmine and Jasmine-Jquery for BDD with Visual Studio using Chutzpah Test Adaptor or a Web Browser. In this post I want to talk about Fixtures and a major pitfall I’ve found when working with Chutzpah Test Adaptor for the Test Explorer.
How to Install Chutzpah Test Adaptor1. Install VS Extensions Within the Left panel, click on Online and search for Chutzpah Test Download: And then restart Visual Studio 2. Configure Test Explorer Open Visual Studio 2013 > TEST > Windows > Test Explorer and pin the window to suite your preference… Top left of the Test Explorer window, click on the button “Run Test After Build” |
Why Chutzpah Test Adaptor?
Chutzpah Test Adaptor for the Test Explorer is an extremely popular open source extension for Visual Studio that enable developers to run Jasmine and other test frameworks directly within Visual Studio Test Explorer.
Side note: Chutzpah Test Adaptor uses the PhantomJS headless browser to run your tests.
This is incredibly useful for developer as we can quickly configure VS Test Explorer to display the results of changes made to either Spec or Source upon saving. And the process up to the point we want to introduce Fixtures to our Specs is greater, however that is where the problems start…
What are Fixtures?
A set of functions included with Jasmine-JQuery that enables developers to injecting “fixtures” into the DOM to be cleaned up after each spec. Fixtures can be HTML, CSS or JSON and either written inline or loaded up from an external file.
When Would Load a File as a Fixture?
If for example you need to write a Spec that described a User accessing his/her colleague’s User Profile Page, it may not be possible to guaranty available or stable of the test data in a development environment. In which case we would generate a JSON file and save it to the Fixtures folder (see Part 2) and load the data up before each “IT” case was run.
What’s The Problem?
When you test you Spec using the SpecRunner View/Page within a Web Browser Fixtures work fine and all the test pass or fail as expected. However when you attempt to run the same spec within Visual Studio using Chutzpah Test Adaptor the same test that passed now fail.
The reason for this because Chutzpah generates a HTML file on the fly and temporally saves it to the file system and therefore does not have HTTP or HTTPS address and as a consequence Jasmine-JQuery is unable to resolve a URL throwing an error.
Log Message: Error: Fixture could not be loaded: ../Scripts/jasmine/fixtures/filename.html (status: error, message: undefined) from c:\…\sjlewis.sharepoint.jasmine2web\scripts\jasmine\specs\fixtures_spec.js
Having done a little more digging it would appear the jasmine.Fixtures.prototype. getFixtureHtml_() function requires a URL which is either resolved as NULL or not being passed.
Side note: The "spcontext.js" script throws an error because window.location.href is null
The Workarounds
As there two possible three options that we may use to get around this limitation, however with option you choose will depending on the size of the data or DOM structure that you are wanting to testing your Specs against.
1. Load data into the DOM using for example the setFixtures() function.
setFixtures('<div class="sandbox">hello there</div>');
This work fine in both in Visual Studio and a Web Browser. However writing large amounts of HTML structure in JavaScript is not ideal as it is time consuming and error prone.
2. Attempt to load the file into the DOM using the loadFixtures() function but wrap the code in a try-catch block. I’ve highlighted the code of interest in red:
describe("Fixtures: Learning about", function () {
beforeEach(function () {
// You can configure this path to fixtures...
jasmine.getFixtures().fixturesPath = '../Scripts/jasmine/fixtures';
});
it("offers three crucial functions", function () {
expect(readFixtures).toBeDefined();
expect(setFixtures).toBeDefined();
expect(loadFixtures).toBeDefined();
});
// Fails to run within "Chutzpah Test Adaptor for the Test Explorer".
it("can load fixtures from a file", function () {
try {
loadFixtures('filename.html');
expect($('#jasmine-fixtures')).toExist();
} catch (ex) {
console.log("#### ERROR: [" + ex + "]");
}
});
// Fails to run within "Chutzpah Test Adaptor for the Test Explorer".
it("can read fixtures without appending to DOM", function () {
try {
var fixture = readFixtures('filename.html');
expect(fixture).toContain('p');
expect($(fixture).find('p')).toHaveText('Hello World');
} catch (ex) {
console.log("#### ERROR: [" + ex + "]");
}
});
it("can also receive the fixture as a parameter", function () {
setFixtures('<div class="sandbox">hello there</div>');
expect($('.sandbox')).toExist();
});
it("offers a sandbox function for convenience", function () {
expect(sandbox).toBeDefined();
setFixtures(sandbox({ 'class': 'some-class' }));
expect($('.some-class')).toExist();
expect($('#sandbox')).toHaveClass('some-class');
});
});
So none of the Specs calling the loadFixtures() function will fail anymore when tested within Visual Studio, however just like a false negative the false positive would not be tested for within the a Web Browser.
3. Look at using jasmine-fixture, apparently this helper library may reduce the about of HTML required to write when creating a DOM structure inline, however it may not be of any use for writing JSON..?
jasmine-fixture
Conclusion
So when dealing with large amounts of data or complicated DOM structure option2 may be the best bet however we will need to decide on how to deal with false positive or negatives… As for small amount of data then option3 may prove to be better than option1 however further investigation is required.
Looking longer term, this area of development is becoming more and more popular as development teams continue on their quest to reduce bugs I’m sure solutions will be found.
Jasmine with Visual Studio and SharePoint Apps – Part: 1, 2, 3
Useful Links
Jasmine 2.0 Documentations
http://jasmine.github.io/2.0/introduction.html
Jasmine.JS Download
https://github.com/pivotal/jasmine
Jasmine-JQuery.JS Download
https://github.com/velesin/jasmine-jquery
Chutzpah JavaScript Test Runner
https://chutzpah.codeplex.com
Chutzpah Test Adapter for the Test Explorer
http://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe
Chutzpah Test Runner Context Menu Extension
http://visualstudiogallery.msdn.microsoft.com/71a4e9bd-f660-448f-bd92-f5a65d39b7f0
jasmine-fixture
https://github.com/searls/jasmine-fixture
You must be logged in to post a comment.