Testing DOM manipulation with Jasmine
I'm creating a JS widget and first part is to add script with javascript, something like this (example from google analytics):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var开发者_StackOverflow s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
How to test it with jasmine (using fixtures)?
For setting up HTML fixtures in my specs, I wrote jasmine-fixture. With it, you can do stuff like this:
var $foo, $input;
beforeEach(function(){
$foo = affix('.foo');
# appends to the DOM <div class="foo"></div>
$input = $foo.affix('input[id="name"][value="Jim"]');
# appends <input id="name" value="Jim"/> beneath the .foo div
And afterEach, it'll clean up after you.
For expectations about the state of the DOM, I use jasmine-jquery. It offers a ton of matchers like the one below:
it('is named Jim', function(){
expect($input).toHaveValue("Jim");
});
I suppose you could perform your action, then check the href on the first script tag like so:
function addGA(){
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src =
('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
};
Jasmine spec:
var href = 'http://www.google-analytics.com/ga.js';
expect(document.getElementsByTagName('script')[0].href).not.toEqual(href);
addGa();
expect(document.getElementsByTagName('script')[0].href).toEqual(href);
Would be interested in hearing a better method, though. Checking the DOM with Jasmine always feels a little hacky.
For heavy DOM testing with Jasmine you can use Jasmine Headless WebKit.
精彩评论