Fun facts about Jasmine

• Princess Jasmine is actually voiced by two different actresses - one to speak and one to sing.
• Jasmine is the only Disney Princess to ever kiss a villain.
• Jasmine is the first Disney Princess to wear pants.

Let's start again...

Some (Real) Jasmine Facts

• A native behavioural testing framework for JavaScript
• Created by Pivotal Labs
• The BDD successor to JS Unit (no longer maintained)
• Goals of the framework:
• should not be tied to any browser, framework, platform, or host language.
• should have idiomatic and unsurprising syntax.
• should work anywhere JavaScript can run, including browsers, servers, phones, etc.
• shouldn't intrude in your application's territory (e.g. by cluttering the global namespace).
• should play well with IDEs (e.g. test code should pass static analysis).

By the way...

Pivotal CI (publicly visible!)

So how is our old friend Hudson?

* Yes, I know it's Jenkins now...

Game over, man! Game over!

Why bother testing?

• Q: Why do we test our code?
• A: So we know it does what we think it does
• Q: Why is unit testing more valuable than acceptance testing?
• Trick question: They both have their place. We should do both!


• We unit test (nearly) all our Ruby code (kinda).
• JavaScript is code.
• Therefore: Let's unit-test it.

Let's review!

JavaScript is code. Therefore: let's unit-test it.

Sean Handley (about 2 seconds ago)

Installing Jasmine

Gemfile

      ...
      gem 'jasmine'
      ...
    

Run

      $ bundle install
      $ jasmine init
    

Anatomy

/spec

    + spec/
      + javascripts/
        + fixtures/
          - awesome.html
        + helpers/
          - jasmine-jquery.js
        - my_awesome_page_spec.js
        + support/
          - jasmine.yml
          - jasmine_config.rb
          - jasmine_runner.rb
    

Anatomy

jasmine.yml

  src_files:
    - public/javascripts/jquery.min.js
    - public/javascripts/my_awesome_page.js

  stylesheets:
    - stylesheets/**/*.css

  helpers:
    - helpers/jasmine-jquery.js

  spec_files:
    - '**/*[sS]pec.js'

  src_dir: '/'

  spec_dir: spec/javascripts
    

Running your tests

On Dev Machine

      $ rake jasmine # launches server
    

On CI Server

      $ rake jasmine:ci # launches tests as a non-interactive job
    

Ok! Codez!

spec/javascripts/my_awesome_page_spec.js

  describe("my_awesome_page", function() {

    beforeEach(function() {
      loadFixtures("awesome.html");
    });

    describe("#change_status(status)", function() {
      it("should change the status message", function() {
        expect($('div#awesome').text()).toNotEqual("Awesome!");
        change_status('Awesome!');
        expect($('div#awesome').text()).toEqual("Awesome!");
      });
    });
  });
      

Code fail!

http://localhost:8888

Ok! Moar codez!

spec/javascripts/fixtures/awesome.html

  <div id="awesome"></div>
      

public/javascripts/my_awesome_page.js

  function change_status(status){
    $('div#awesome').append(status);
  }
      

Code pass!

http://localhost:8888

Cool things

• The jasmine-jquery helper adds nice matchers for jQuery
• (e.g. toBe(jQuerySelector), toHaveClass(className))
• You can slot in any js libraries and use them in your tests.
• It works with Coffeescript
• You can debug the js env in the browser console on Jasmine's test server page

Links!

Get Jasmine

The main Jasmine page - http://pivotal.github.com/jasmine/

The jasmine-jquery helper - https://github.com/velesin/jasmine-jquery

Get these slides and sample app

https://github.com/seanhandley/jasmine-talk

Questions???