Jasmine is a great JavaScript testing framework. Let’s prepare our environment and then build our first test in Jasmine.
Steps
- Review Prerequisite Requirements
- Create Project and Lesson Directories
- Download Jasmine
- Deploy Jasmine
- Write a Test
- Run the Test
Review Prerequisite Requirements
We will need the following:
- Web Browser (almost any will do)
- Text Editor (of any sort really)
That’s it. Nice and simple.
Create Project and Lesson Directories
- Create the Project directory
We will create a project directory named introducing-jasmine which will hold many lesson directories in this series. The project directory can live really anywhere on the system. The code samples we create may be used later for reference or as a foundation for further experimentation.
- Create the Lesson directory
Inside of the project directory, create a lesson directory named: 01-hello-jasmine
At this point, the directories should look mostly like this:
Download Jasmine
Now let’s download Jasmine. It can be found here: http://pivotal.github.com/jasmine/download.html.
We will be using the Standalone Version of Jasmine. There is a Ruby Gem for Ruby on Rails and other situations- we won’t be looking at that here.
Deploy Jasmine
This really isn’t any sort of active deployment, we are just going to unzip and copy parts of the distribution.
- Unzip Jasmine and open the unzipped directory.
- Copy the contents of the Jasmine distribution into the lesson directory.
- Delete the contents of the spec and source directories. It contains sample code that we won’t be using here.
The directories should look like the below:
Now that we have the prep work done, let’s build a test and execute it.
Note This isn’t the only way to set up Jasmine, and it isn’t a recommended way for real life projects. This is just an approach that will work well for the purposes of learning and experimenting. It also aims at making setup easy so we can move on to Jasmine more directly.
Write a Test
Using the BDD language of Jasmine, we are going to first create a Suite and inside of that suite we will create a Spec (which is the test).
- In the lesson directory, locate the spec directory and create a file HelloWorldSpec.js
- Add the below JavaScript to HelloWorldSpec.js
// Suite describe("Hello Jasmine", function() { // Spec (or test) it("says hello", function() { // what is being tested function helloWorld() { return "Hello world!"; } // Expectation, how we express what we expect should happen // our Matcher which expects the result of our function to equal "Hello world!" expect(helloWorld()).toEqual("Hello world!"); }); });We have just created our first Test Suite, named “Hello Jasmine” with our first Spec “says hello”. We are using a Matcher to check the results of our function.
- Update the Runner that will be running our tests. With a text editor, open the file SpecRunner.html and update only the Source and Spec file sections.
<!-- Source files --> <!-- None for now--> <!-- Spec files --> <script type="text/javascript" src="spec/HelloWorldSpec.js"></script>
We are pointing our Runner at only the Spec and ignoring the source for now.
Our first Spec is now ready, so let’s run it.
Run the Test
All we need to do is open the test runner in a web browser and our test will be executed.
- Open a Web Browser
- From the web browser, use the open file facility, (or a URL if the runner is deployed to a Web Server) to open the Runner SpecRunner.html
- Inspect the results. It should show a passing test like the below:
Food for thought
Below are some question that may help us think about what we have done so far:
- How does the runner respond when the test fails? How would the spec need to be changed to force a failure?
- What are some of the positive and negative ramifications of having the Jasmine lib in the lesson directory as opposed to some where else?
Learn More
We have built and executed our first test- we are now ready to dig into Jasmine.
Thanks to the simplicity of the tools, setting up our first test was a breeze and required very little tooling or configuration. Deployment was hardly a concern since these tests run as simple HTML and JavaScript.
Much more information on Jasmine can be found looking at the Documentation.



