Your SlideShare is downloading. ×
Intro to testing Javascript with jasmine
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intro to testing Javascript with jasmine


Published on

Slides for presentation on 4th of July 2011, to BrisJS Meetup Group

Slides for presentation on 4th of July 2011, to BrisJS Meetup Group

Published in: Technology

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Testing with Jasmine
  • 2. Me at netengine for cool side-projects
  • 3. Unit Test Structure – SpecsNamed test functionsit(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});
  • 4. Unit Test Structure – SuitesCollections of specsYour test files will contain one or more suites, each with one ormore specs.describe("User Validation", function() { it("requires a name", function() { //spec content }) it("does not validate invalid names", function() { //spec content })});
  • 5. Unit Test Structure – expect()expect() is the actual testTakes a value, then matchersit(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});
  • 6. Matchers
  • 7. Running Jasmine Tests<!DOCTYPE html><html><head> <title>Jasmine Test Runner</title> <!-- Jasmine Library --> <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> <!-- App Dependencies --> <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> <!-- Specs --> <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>
  • 8. Running Jasmine TestsUse a simple http server to serve the content eg python -m SimpleHTTPServerPoint browser at jasmine location
  • 9. Using Jasmine to test ViewsInclude 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)
  • 10. Mocking in JasmineA 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 cant 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 FeathersNeed to use mocks to simulate calls to external services, files, etcNeed to use mocks to reduce real dependencies in tests.
  • 11. Mocking in Jasmine – SpiesEasily inject mock/monitoring objectsReplaces or wraps the function its spying onGives run-time statistics on the spied function ● Know how many times a function has been called ● Inspect return values ● Inspect parameters ● etcit "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()
  • 12. Spies
  • 13. Using Jasmine to test ajax callsUse jasmine-ajax to create fake ajax requests/responses get better support for ajax mocking and spying via source has an example.Perhaps next meetup.
  • 14. Jasmine ExamplesDemo source Koans (DO THE KOANS) Source 3 part tutorial testing with Jasmine, Sinon andBackbone
  • 15. Thanks.Questions?