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

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

• javascript
• backbone.js
• tdd
• jasmine
• karma-runner

2 Answers 2

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./velesin/jasmine-jquery

If you need to test small html snippets you should add them programatically to your test.

var fixture = '<h1>My HTML fragment</h1>';

document.body.insertAdjacentHTML(
  'afterbegin',
  fixture);

You can also manage to link stylesheets

var fixture = '<link rel="stylesheet" media="all" \
href="https://www.npmjs./static/css/index.css?last-changed=10d466883fa405391313dc8294e783fd">\
<header><div class="header-item header-nav-menu-container">\
<h1 style="color:#FFF">My HTML fragment</h1></div></header>';

document.body.insertAdjacentHTML(
  'afterbegin',
  fixture);

Also to serve the stylesheets with karma you should add the to the list of files and link them like this