Intro to testing Javascript with jasmine

  • 11,143 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Nice slides.. very much useful to understand the Jasmine Sinon BDD testing framework for Java script applications.
    Are you sure you want to
    Your message goes here
  • Correction, the javascript Koans should be linked to: https://github.com/mrdavidlaing/javascript-koans (linked to some other js koans that don't use jasmine, oops)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,143
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
115
Comments
2
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Testing with Jasmine http://pivotal.github.com/jasmine/
  • 2. Mehttp://twitter.com/secoifhttps://plus.google.com/114792856033491742337Working at netenginehttp://www.netengine.com.auLooking 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 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. 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. Thanks.Questions?