Intro to testing Javascript with jasmine


Published on

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

No notes for slide

Intro to testing Javascript with jasmine

  1. 1. Testing with Jasmine
  2. 2. Me at netengine 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 get better support for ajax mocking and spying via source has an example.Perhaps next meetup.
  14. 14. Jasmine ExamplesDemo source Koans (DO THE KOANS) Source 3 part tutorial testing with Jasmine, Sinon andBackbone
  15. 15. Thanks.Questions?