Testing with Jasmine http://pivotal.github.com/jasmine/
Mehttp://twitter.com/secoifhttps://plus.google.com/114792856033491742337Working at netenginehttp://www.netengine.com.auLoo...
Unit Test Structure – SpecsNamed test functionsit(should increment a variable, function () {  var foo = 0;           // se...
Unit Test Structure – SuitesCollections of specsYour test files will contain one or more suites, each with one ormore spec...
Unit Test Structure – expect()expect() is the actual testTakes a value, then matchersit(should increment a variable, funct...
Matchers
Running Jasmine Tests<!DOCTYPE html><html><head> <title>Jasmine Test Runner</title> <!-- Jasmine Library --> <link rel="st...
Running Jasmine TestsUse a simple http server to serve the content  eg python -m SimpleHTTPServerPoint browser at jasmine ...
Using Jasmine to test ViewsInclude jasmine.html.js & jquery (or whatever)<script type="text/javascript" src="/lib/mock-aja...
Mocking in JasmineA test is not a unit test if: 1. It talks to the database 2. It communicates across the network 3. It to...
Mocking in Jasmine – SpiesEasily inject mock/monitoring objectsReplaces or wraps the function its spying onGives run-time ...
Spies
Using Jasmine to test ajax callsUse jasmine-ajax to create fake ajax requests/responses https://github.com/pivotal/jasmine...
Jasmine ExamplesDemo sourcehttps://github.com/secoif/Jasmine-Demo-ThingJavascript Koans (DO THE KOANS)https://github.com/l...
Thanks.Questions?
Upcoming SlideShare
Loading in...5
×

Intro to testing Javascript with jasmine

12,355

Published on

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

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,355
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
145
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Intro to testing Javascript with jasmine

  1. 1. Testing with Jasmine http://pivotal.github.com/jasmine/
  2. 2. Mehttp://twitter.com/secoifhttps://plus.google.com/114792856033491742337Working at netenginehttp://www.netengine.com.auLooking for cool side-projects
  3. 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. 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. 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. 6. Matchers
  7. 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. 8. Running Jasmine TestsUse a simple http server to serve the content eg python -m SimpleHTTPServerPoint browser at jasmine location
  9. 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. 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. 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. 12. Spies
  13. 13. Using Jasmine to test ajax callsUse jasmine-ajax to create fake ajax requests/responses https://github.com/pivotal/jasmine-ajaxPossibly get better support for ajax mocking and spying viahttp://sinonjs.org/Demo source has an example.Perhaps next meetup.
  14. 14. Jasmine ExamplesDemo sourcehttps://github.com/secoif/Jasmine-Demo-ThingJavascript Koans (DO THE KOANS)https://github.com/liammclennan/JavaScript-KoansSpine.js Sourcehttps://github.com/maccman/spine/tree/master/test/specsAwesome 3 part tutorial testing with Jasmine, Sinon andBackbonehttp://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html
  15. 15. Thanks.Questions?
  1. A particular slide catching your eye?

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

×