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
Questions???
/