Sweet-scented Script Specs

3,310 views
3,263 views

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,310
On SlideShare
0
From Embeds
0
Number of Embeds
1,233
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide














  • 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/

    ×