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

Intro to testing Javascript with jasmine

on

  • 11,725 views

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

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

Statistics

Views

Total Views
11,725
Views on SlideShare
11,484
Embed Views
241

Actions

Likes
5
Downloads
100
Comments
2

4 Embeds 241

https://eliademy.com 146
https://plato.cloudberrytec.com 90
https://twitter.com 4
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
  • 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
    Processing…
Post Comment
Edit your comment

Intro to testing Javascript with jasmine Intro to testing Javascript with jasmine Presentation Transcript

  • Testing with Jasmine http://pivotal.github.com/jasmine/
  • Mehttp://twitter.com/secoifhttps://plus.google.com/114792856033491742337Working at netenginehttp://www.netengine.com.auLooking for cool side-projects
  • 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});
  • 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 })});
  • 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});
  • Matchers
  • 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>
  • Running Jasmine TestsUse a simple http server to serve the content eg python -m SimpleHTTPServerPoint browser at jasmine location
  • 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)
  • 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.
  • 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()
  • Spies
  • 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.
  • 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
  • Thanks.Questions?