how to unit test DOM manipulation (with jasmine)

Question

I need to unit test some DOM manipulation functions with jasmine (currently I run my tests in the browser and with Karma)

I was wondering what the best approach would be to do this ?

For example, I can mock and stub the window and document objects and spyOn a couple of their functions. But this doesn't really look like an easy solution, so thats why I'm asking this question!

Or is there a better way (not using jasmine maybe) to do this ?

Thanks a lot

Answer 1

I've been using a helpful addition to jasmine called jasmine-jquery available on github.

It gives you access to a number of useful extra matcher functions, to assert jquery objects and their properties.

In particular the features I have found useful so far are asserting on attributes of dom elements, and spying on events such as clicks and submits...

Here is a somewhat contrived example... :)

describe("An interactive page", function() {     it("'s text area should not contain any text before pressing the button", function() {         expect(Page.textArea).toBeEmpty();     });      it("should contain a text area div", function() {         expect(Page.textArea).toBe('div#textArea');     });      it("should append a div containing a random string to the text area when clicking the button", function() {         var clickEvent = spyOnEvent('#addTextButton', 'click');         $('button#addTextButton').click();          expect('click').toHaveBeenTriggeredOn('#addTextButton');         expect(clickEvent).toHaveBeenTriggered();          expect($('div.addedText:last')).not.toBeEmpty());     }); }); 

and here is the code:

var Page = {     title : 'a title',     description : 'Some kind of description description',     textArea : $('div#textArea'),     addButton : $('button#addTextButton'),       init : function() {         var _this = this;         this.addButton.click(function(){         var randomString = _this.createRandomString();             _this.addTextToPage(randomString);         });     },      addTextToPage : function( text ) {         var textDivToAdd = $('<div>').html('<p>'+text+'</p>');          this.textArea.append( textDivToAdd );     },      createRandomString : function() {         var text = "";         var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";          for( var i=0; i < 5; i++ )              text += possible.charAt(Math.floor(Math.random() * possible.length));          return text;     }, };  Page.init(); 

I've found jasmine to be really flexible and agreeable to use so far, I always appreciate pointers for making it the code better though!

Answer 2

I was looking for something for myself and finally I made a little library with 19 custom matchers. Maybe you'll find it helpful. https://github.com/devrafalko/jasmine-DOM-custom-matchers