Intro to testing Javascript with jasmine
7 likes9,409 views
Testing with Jasmine provides a framework for writing and running unit tests in JavaScript. It uses a behavior-driven development (BDD) style in which each test specifies the expected behavior it is testing using a describe and it blocks. Within the it block, expect statements make assertions about the code being tested using matchers like toEqual. Jasmine provides spies for mocking function calls and stubs. Running tests involves including Jasmine library files and specs in an HTML page and executing them with a simple HTTP server. Jasmine can also be used to test views by creating DOM fixtures and making assertions about the rendered markup.
Ad
More Related Content
What's hot (20)
Similar to Intro to testing Javascript with jasmine (20)
Ad
More from Timothy Oxley (6)
Ad
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