Sharing you JavaScript Ninja secrets: Run your jasmine tests on jsFiddle

For those of you anxious to read the whole stuff, and asking for a quick and dirty TL;DR version of this, just go to the jsFiddle itself, it’s pretty much self-explanatory.

JsFiddle is a great tool to show bits of JavaScript code in action. It’s particularly useful to ask somebody to help you with some strange js behaviour, providing your saviour a live environment were the issue is reproduced. It’s also a great tool to show examples and to let people play with chunks of JavaScript code.

cover

Lately, with a couple of friends, we were thinking about developing an interactive tool to help people learn JavaScript, and jsFiddle would come in really handy. At the same time, we would also like to introduce people to TDD using jasmine.

So I decided to see how hard would it be to have this two great tools working together.

Gettings started with jsFiddle

awesome
To try something that is not trivial on jsFiddle, I usually first try to make it run locally on my machine, using CDNs, and simplifying the code as much as possible.

So to get started with jasmine I just downloaded the 1.3.1 stand-alone version from https://github.com/pivotal/jasmine/downloads and unzipped it on a local folder.

The stand-alone version comes with an html example file named SpecRunner. Open it on a browser and you should see something like the following.

Screenshot from 2013-06-22 20:15:55

We will replace all the verbose code of the jasmine loader with a simple one

window.onload = function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
};

It’s not so bullet proof as the original, but anyway we will be controlling what shows up in our own jsFiddles.

And then I’ll create a dummy source and a spec to test it

// source code
var calculator = {
  sum: function(a, b) {
    return a + b;
  }
};

// specs code
describe("calculator", function() {

  it("sum method should sum values", function() {
    expect(calculator.sum(1,2)).toEqual(3);
  });

});

With our minimal example you can now get rid of the included source and spec files.

Then I’ll just replace every file from jasmine with it’s cdn from http://www.jsdelivr.com/

In order to locally test all the //cdn.jsdelivr.net files, you’ll need a local web server.

The easiest thing is to use the SimpleHTTPServer module from python

Just go to the folder with the files and run:

$ cd ~/dev/apps/tmp/jasmine/
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [22/Jun/2013 20:29:12] "GET / HTTP/1.1" 200 -

then open your browser at http://localhost:8000/, and click on SpecRunner.html and you should see something like this:

my test

This is the code of your html page

<html>
<head>
  <title>Jasmine Spec Runner</title>

  <link href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" type="text/css" rel="stylesheet">
  <script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js" type="text/javascript"></script>
  <script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js" type="text/javascript"></script>
</head>

<body>
</body>
</html>
<script type="text/javascript">

// source code
var calculator = {
  sum: function(a, b) {
    return a + b;
  }
};

// specs code
describe("calculator", function() {

  it("sum method should sum values", function() {
    expect(calculator.sum(1,2)).toEqual(3);
  });

});

window.onload = function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
};
</script>

Everything is working fine, so we can now head to jsFiddle (http://jsfiddle.net/)

If you haven’t already done so, register yourself with a new account and create a new fiddle.

On external resources, just add the css and the two js sources of jasmine

//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css
//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js
//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js

external resources

on the HTML pane just enter

  <title>Jasmine Spec Runner</title>

and on the JavaScript panel enter

// source code
var calculator = {
  sum: NOT_IMPLEMENTED
//  sum: function(a, b) { return a + b; }
};

// specs code
describe("calculator", function() {

  it("sum method should be implemented", function() {
    expect(calculator.sum).toBeDefined();
  });

  it("sum method should sum values", function() {
    expect(calculator.sum(1,2)).toEqual(3);
  });

});

var NOT_IMPLEMENTED = undefined;

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
}());

You see it working at http://jsfiddle.net/opensas/3VuGs/

failing

In this case, the idea is to provide people with pretty simple exercises to complete.

So as an example I created a NOT_IMPLEMENTED var so that people can have a clue of where they are supposed to complete the implementation, and I also added a test to check that the method to be tested is effectively implemented.

If you want to give it a try, just comment out line three and uncomment line four, run the jsFiddle and you’ll see the test pass.

passed

A word on running jasmine on jsFiddle

You might have noticed that I removed the original window.onload. That’s because the code you enter in jsFiddle is already being executed inside a window.onload handler. You can change it from the Framework & Entensions section.

onload

So you should just get rid of the window.onload an just run:

var env = jasmine.getEnv();
env.addReporter(new jasmine.HtmlReporter());
env.execute();

BTW, this is a nice example of where Immediately-invoked function expression (IIFE for short) might come in handy.

You may have not noticed, but you are polluting your global environment (well, in fact just the onload handler, in this case) with the env variable.

You can avoid it creating a function outside of which the env variable won’t even exists, and then inmediately executing it, like this:

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
}());

Another workaround I found to deal with jasmine on jsFiddle is the jasmine-all which packages into a single script the whole jasmine lib to run specs in a trivial HTML file or online with something like a JSFiddle very easily. And you can see it in action here.

But being my intention to use it as a learning tool, I just wanted to work with the original distribution of jasmine.

Conclusion

jsFiddle is a great tool to play around and let others experiment and share their knowledge. Combining it with jasmine tests provides you with a simple and powerful learning tool for free.

About these ads
Tagged with: , , , ,
Posted in development, javascript, tdd, tools, web development
One comment on “Sharing you JavaScript Ninja secrets: Run your jasmine tests on jsFiddle
  1. […] Sharing you JavaScript Ninja secrets: Run your jasmine tests on jsFiddle […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: