Sweet-scented Script Specs
Upcoming SlideShare
Loading in...5
×
 

Sweet-scented Script Specs

on

  • 3,407 views

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

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.

Statistics

Views

Total Views
3,407
Views on SlideShare
2,242
Embed Views
1,165

Actions

Likes
3
Downloads
28
Comments
0

5 Embeds 1,165

http://blog.michaelphines.net 1080
http://www.together.in.th 82
http://webcache.googleusercontent.com 1
url_unknown 1
http://www.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Sweet-scented Script Specs Sweet-scented Script Specs Presentation Transcript

  • Sweet-scented Script Specs Writing clean JavaScript tests using Jasmine Michael Hines @michaelphines | http://blog.michaelphines.net/
  • 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 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); }); }
  • Nice Web Interface
  • 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
  • Cool! Show me some stuff.
  • The Basics describe('helloWorld()', function() { it('says hello', function() { expect(helloWorld()).toEqual("Hello, World!"); }); }); function helloWorld() { return "Hello, World!"; }
  • 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(); }); });
  • 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!"); }); });
  • 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(); }); // ...
  • 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
  • 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>
  • @michaelphines http://blog.michaelphines.net/ http://github.com/michaelphines/Jasmine-Examples @michaelphines | http://blog.michaelphines.net/