Intro to testing Javascript with jasmine

Testing with Jasmine
http://pivotal.github.com/jasmine/

Me

http://twitter.com/secoif
https://plus.google.com/114792856033491742337

Working at netengine
http://www.netengine.com.au

Looking for cool side-projects

Unit Test Structure – Specs

Named test functions

it('should increment a variable', function () {
var foo = 0; // set up the world
foo++; // call your application code
expect(foo).toEqual(1); // passes because foo == 1
});

Unit Test Structure – Suites

Collections of specs
Your test files will contain one or more suites, each with one or
more specs.

describe("User Validation", function() {
it("requires a name", function() {
//spec content
})
it("does not validate invalid names", function() {
//spec content
})
});

Unit Test Structure – expect()

expect() is the actual 'test'
Takes a value, then 'matchers'

it('should increment a variable', function () {
var foo = 0; // set up the world
foo++; // call your application code
expect(foo).toEqual(1); // passes because foo == 1
});

Running Jasmine Tests
<!DOCTYPE html>
<html>
<head>
<title>Jasmine Test Runner</title>


<link rel="stylesheet" type="text/css" href="/lib/jasmine.css">
<script type="text/javascript" src="/lib/jasmine.js"></script>
<script type="text/javascript" src="/lib/jasmine.html.js"></script>


<script src="/public/scripts/application.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/scripts/lib/jquery.js" type="text/javascript" charset="utf-8"></script>


<script src="/specs/User.spec.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>

Running Jasmine Tests

Use a simple http server to serve the content
eg python -m SimpleHTTPServer
Point browser at jasmine location

Using Jasmine to test Views

Include 'jasmine.html.js' & jquery (or whatever)
<script type="text/javascript" src="/lib/mock-ajax.js"></script>
<script type="text/javascript" src="/lib/spec-helper.js"></script>

Create dom fixtures with $('<div>HTML HERE</div>')
Test using jquery/js statements

var dom = $('<div class="container"/>')
sixfourty-by-foureighty-izer($('.container', dom))
expect($('.container', dom).width()).toBe(640)
expect($('.container', dom).height()).toBe(480)

Mocking in Jasmine

A test is not a unit test if:

1. It talks to the database
2. It communicates across the network
3. It touches the file system
4. It can't run correctly at the same time as any of your other unit
tests
5. You have to do special things to your environment (such as
editing config files) to run it.
~ Michael Feathers

Need to use mocks to simulate calls to external services, files, etc
Need to use mocks to reduce real dependencies in tests.

Mocking in Jasmine – Spies

Easily inject mock/monitoring objects
Replaces or wraps the function it's spying on
Gives run-time statistics on the spied function
● Know how many times a function has been called
● Inspect return values
● Inspect parameters
● etc

it "can detect a click", ->
spyOn(clickDetector, 'addClickStatus').andCallThrough()
expect($('.statusList .status.clicked', dom).size()).toBe(0)
$('.sensor', dom).click()
expect($('.statusList .status.clicked', dom).size()).toBe(1)
expect(clickDetector.addClickStatus).toHaveBeenCalled()

Using Jasmine to test ajax calls

Use jasmine-ajax to create fake ajax requests/responses https:
//github.com/pivotal/jasmine-ajax

Possibly get better support for ajax mocking and spying via
http://sinonjs.org/

Demo source has an example.

Perhaps next meetup.

Jasmine Examples

Demo source
https://github.com/secoif/Jasmine-Demo-Thing

Javascript Koans (DO THE KOANS)
https://github.com/liammclennan/JavaScript-Koans

Spine.js Source
https://github.com/maccman/spine/tree/master/test/specs

Awesome 3 part tutorial testing with Jasmine, Sinon and
Backbone
http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-
jasmine-sinon.html

Intro to testing Javascript with jasmine

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Intro to testing Javascript with jasmine

Ähnlich wie Intro to testing Javascript with jasmine (20)

Mehr von Timothy Oxley

Mehr von Timothy Oxley (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro to testing Javascript with jasmine