Testing DOM manipulating in Jasmine test

Question

I'm creating a js widget and first part is to add script width 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 s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); 

How to test it with jasmine (using fixtures?)?

Answer 1

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"); });