Downloaded 224 times
Uploaded byTimothy Oxley
Intro to testing Javascript with jasmine
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.
More Related Content
Similar to Intro to testing Javascript with jasmine
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to testing Javascript with jasmine
- 1. Testing with Jasmine http://pivotal.github.com/jasmine/
- 2.
- 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.
- 7. Running Jasmine Tests <!DOCTYPEhtml> <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 Usea simple http server to serve the content eg python -m SimpleHTTPServer Point browser at jasmine location
- 9. Using Jasmine totest 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 Atest 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.
- 13. Using Jasmine totest 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 JavascriptKoans (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
- 15.