How to test DOM and CSS using Jasmine and Karma
backbone.js, jasmine, javascript, karma-runner, tdd
Solution
TDD is to unit testing - unit - small methods with mocks, stubs and spies. Manipulation on the DOM should be done by methods and you want to tests those methods.
Instead of testing jQuery engine selector and method 'append' call some method. In the test create spy that will be expecting that your methods was called.
To check DOM manipulation you can use Jasmine jQuery matcher -https://github.com/velesin/jasmine-jquery
Problem
I'm trying to TDD a purely front-end project based on a single HTML page using Jasmine and Karma to unit test. The document of Jasmine tells nothing about DOM manipulations, which is one of the most important things I'm trying to test. The question is simple, how do I examine the DOM changes and the content changes of a HTML page? For example, say if I have code like below: HTML file ``` <a href="#/say_hello">Say Hello</a> ``` JS file: ``` // Router App.Router = Backbone.Router.extend({ routes: { '': 'home', 'say_hello': 'sayHello' } }); var router = new App.Router(); router.on('route:sayHello', function(){ $("body").append("Hello World"); }); Backbone.history.start(); ``` How do I test such behavior: If someone clicks "Say Hello" link, the text in the html body will contain "Hello World" And even more, how do I check the CSS changes or simulate HTML events (mouseover, focus, change, load, etc...)? Is that possible with Jasmine and Karma? Thanks