Your SlideShare is downloading. ×
0
Sweet-scented Script Specs
 Writing clean JavaScript tests using Jasmine
                 Michael Hines




              ...
You should be testing your JavaScript




        NOT debugging your JavaScript
Why Jasmine?
It looks and feels like RSpec
describe "groups" do
 before(:each) do
  # Stuff to prepare for each spec
 end

 it "has exp...
Nice Web Interface
Nicer JazzMoney
       require 'rubygems'
       require 'jazz_money'

       javascript_files = [
         'public/javascr...
Cool! Show me some stuff.
The Basics
describe('helloWorld()', function() {
  it('says hello', function() {
    expect(helloWorld()).toEqual("Hello, ...
Create your own matchers
beforeEach(function() {
  this.addMatchers({
    toBeATeapot: function() {
      return this.actu...
Making it a little more complicated
                                               function Greeter() {
                  ...
Your Little Spies
                                    (scribbled out the truth with their lies)


function Greeter(name) {...
Lots of cool stuff to do with spies
• .andCallThrough()
                                                         • .andRet...
Fixtures!
describe('copyToDiv()', function() {
  it('copies input data to content', function() {
    JazzMoney.loadFixture...
@michaelphines
         http://blog.michaelphines.net/
http://github.com/michaelphines/Jasmine-Examples




              ...
Upcoming SlideShare
Loading in...5
×

Sweet-scented Script Specs

3,178

Published on

Writing clean JavaScript tests using Jasmine. An introduction to Jasmine with some examples. Download the examples at http://github.com/michaelphines/Jasmine-Examples

The images are properly licensed and property of their respective owners. Please do not reuse.

You are free to use the source code samples however you like as long as it's not for absolute world domination.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,178
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide














  • Transcript of "Sweet-scented Script Specs"

    1. 1. Sweet-scented Script Specs Writing clean JavaScript tests using Jasmine Michael Hines @michaelphines | http://blog.michaelphines.net/
    2. 2. You should be testing your JavaScript NOT debugging your JavaScript
    3. 3. Why Jasmine?
    4. 4. It looks and feels like RSpec describe "groups" do before(:each) do # Stuff to prepare for each spec end it "has expectations" do describe('appearance', function() { # ... beforeEach(function() { value.should == true // Stuff to prepare foe each spec end }); end it('has expectations', function() { // ... expect(value).toEqual(true); }); }
    5. 5. Nice Web Interface
    6. 6. Nicer JazzMoney require 'rubygems' require 'jazz_money' javascript_files = [ 'public/javascripts/jquery-1.4.2.js', 'public/javascripts/jquery-ui-1.8.2.custom.min.js', 'public/javascripts/jquery.calendarSelect.js', 'spec/javascripts/helpers/SpecHelper.js' ] jasmine_spec_files = [ 'spec/javascripts/calendarSelectSpec.js' ] JazzMoney::Runner.new( javascript_files, jasmine_spec_files ).call
    7. 7. Cool! Show me some stuff.
    8. 8. The Basics describe('helloWorld()', function() { it('says hello', function() { expect(helloWorld()).toEqual("Hello, World!"); }); }); function helloWorld() { return "Hello, World!"; }
    9. 9. Create your own matchers beforeEach(function() { this.addMatchers({ toBeATeapot: function() { return this.actual.isShort() && this.actual.isStout() && this.actual.hasHandle() && this.actual.hasSpout(); } }); }); describe('teapot', function() { it('is a teapot', function() { expect(teapot).toBeATeapot(); }); });
    10. 10. Making it a little more complicated function Greeter() { this.sayHello = function() { describe('Greeter', function() { return "Hello, World!"; var greeter; }; beforeEach(function() { this.sayGoodnight = function() { greeter = new Greeter(); return "Goodnight, Moon!"; }); }; } it('says hello', function() { expect(greeter.sayHello()).toEqual("Hello, World!"); }); it('says goodnight', function() { expect(greeter.sayGoodnight()).toEqual("Goodnight, Moon!"); }); });
    11. 11. Your Little Spies (scribbled out the truth with their lies) function Greeter(name) { this.name = name; this.getName = function() { return name; }; this.sayHello = function() { return "Hello, " + this.getName() + "!"; }; } // ... it('uses the name', function() { spyOn(greeter, 'getName').andReturn('name'); expect(greeter.sayHello()).toMatch(/name/); expect(greeter.getName).wasCalled(); }); // ...
    12. 12. Lots of cool stuff to do with spies • .andCallThrough() • .andReturn(value) Lets you spy on whether a function was called without Stub out the function with a return value having to stub it out • .andCallFake(function) • .wasCalledWith(arguments) Check whether a spy was called with certain arguments Stub a function out by defining a replacement function • .andThrow(message) • jasmine.createSpy(name) Create a new object and spy on it as a mock Immediately throw an exception when called
    13. 13. Fixtures! describe('copyToDiv()', function() { it('copies input data to content', function() { JazzMoney.loadFixture("fixture"); copyToDiv(); var content = document.getElementById('content').innerHTML expect(content).toEqual('source data'); }); }); function copyToDiv() { var source = document.getElementById('source'); var content = document.getElementById('content'); content.innerHTML = source.innerHTML; } <div id="source">source data</div> <div id="content"></div>
    14. 14. @michaelphines http://blog.michaelphines.net/ http://github.com/michaelphines/Jasmine-Examples @michaelphines | http://blog.michaelphines.net/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×