Intro to testing Javascript with jasmine
•
7 likes•9,402 views
Slides for presentation on 4th of July 2011, to BrisJS Meetup Group
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Intro to testing Javascript with jasmine
Similar to Intro to testing Javascript with jasmine (20)
More from Timothy Oxley
Recently uploaded
Recently uploaded (20)
Intro to testing Javascript with jasmine
- 1. Testing with Jasmine http://pivotal.github.com/jasmine/
- 2. Me http://twitter.com/secoif https://plus.google.com/114792856033491742337 Working at netengine http://www.netengine.com.au Looking for cool side-projects
- 3. Unit Test Structure – Specs Named test functions it('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 – Suites Collections of specs Your test files will contain one or more suites, each with one or more 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 'test' Takes a value, then 'matchers' it('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 Tests Use a simple http server to serve the content eg python -m SimpleHTTPServer Point browser at jasmine location
- 9. Using Jasmine to test Views Include '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 Jasmine A 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 can't 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 Feathers Need to use mocks to simulate calls to external services, files, etc Need to use mocks to reduce real dependencies in tests.
- 11. Mocking in Jasmine – Spies Easily inject mock/monitoring objects Replaces or wraps the function it's spying on Gives run-time statistics on the spied function ● Know how many times a function has been called ● Inspect return values ● Inspect parameters ● etc it "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 calls Use jasmine-ajax to create fake ajax requests/responses https: //github.com/pivotal/jasmine-ajax Possibly get better support for ajax mocking and spying via http://sinonjs.org/ Demo source has an example. Perhaps next meetup.
- 14. Jasmine Examples Demo source https://github.com/secoif/Jasmine-Demo-Thing Javascript Koans (DO THE KOANS) https://github.com/liammclennan/JavaScript-Koans Spine.js Source https://github.com/maccman/spine/tree/master/test/specs Awesome 3 part tutorial testing with Jasmine, Sinon and Backbone http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with- jasmine-sinon.html