Morten Nielsen

Working with Jasmine

Morten Nielsen -

I’ve been working extensively with JavaScript these past weeks. As I mentioned earlier I wanted to try out Jasmine and I definitively got the chance. I’ve been using it for all my testing needs these last weeks, and I love it.

What do I like about Jasmine?

  • The ability to nest describe statements
  • the splitting of specifications into several files
  • the output structure

What I do not like

  • At times failing tests can give cryptic error messages in Chrome, since Jasmine will trap the errors inside it’s own execution. This can cause the stack trace and the error messages to mess up.

Let’s see some examples then:

describe("A view holder", function() {
	describe("when adding a view", function() {
		it("it should add the view's element to the holding div", function() { 
			loadFixtures("/specifications/spec/holder.html");
			var holderDiv = document.getElementById("holder");
			var docHolder = new ViewHolder(holderDiv);
			var template = "<div>test</div>";
			var doc = new View({template:template});
			docHolder.showView(doc);
			expect(holderDiv.innerHTML).toContain(template);
		});

	describe("when removing a view", function() {
		it("the previous view is displayed", function() {
			var docHolder = new ViewHolder();
			loadFixtures("/specifications/spec/holder.html");
			var holderDiv = document.getElementById("holder");
			var docHolder = new ViewHolder(holderDiv);
			var template = "<div>test</div>";
			var doc = new View({template:template});
			var doc2 = new View({template:template});
			docHolder.showView(doc2);
			docHolder.showView(doc);
			docHolder.popView();
			expect(doc2.element.style.display).toNotEqual('none');
		});
	});
});

This is an example of a specification I wrote for a view system I’ve developed, the output looks like this:

I added the following snippets to SnipMate so now I have a really nice flow when writing my specifications:

# Describe snippet
desc describe("${1:description}", function() { ${2} });
# it snippet
it it("${1:does}", function() { ${2} });

Jasmine is now my testing framework of choice for JavaScript testing.