Mocha First StepsInstalling and running tests
Agenda
• JS Unit Testing
• A first Mocha test
• Running tests with Karma
• IDE integration
Getting Ready To Test
• JS Unit tests (try) make sure our JS code works well
Project Tree
index.html - src - main.js - buttons.js - player.js - style - master.css - home.css
Project Treeindex.html test.html - src - main.js - buttons.js - player.js - style - master.css - home.css - spec - test_button.js - test_player.js
What Mocha Isn’t
• No UI / CSS testing
• No server testing
Testing How
Testing Libraries
• Let’s try to write test program for Array
• Verify indexOf(...) actually works
Array#indexof
var arr1 = [10, 20, 30, 40]; if ( arr1.indexOf(20) === 1 ) { console.log('success!'); } else { console.log('error'); }
What Went Wrong
• Hard to debug
• Hard to run automatically
We Need …
We Need …
Testing Libraries
• A testing library tells you how to structure your testing code
• We’ll use mochahttp://visionmedia.github.io/mocha/
Hello Mochavar assert = chai.assert; var array = [10,20,30,40]; describe('Array', function() { ! describe('#indexOf()', function() { ! it('should return -1 when the value is not present', function() { assert.equal(array.indexOf(7), -1); } ); }); });
Hello Mocha
• describe() defines a block
• it() defines functionality
Assertions
• Uses a separate assertions library
• I went with Chai
• http://chaijs.com/
Running Our Test: Karma
Meet Karma
• A test runner for JS
• Integrates with many IDEs
• Integrates with CI servers
• http://karma-runner.github.io/0.10/index.html
Karma Architecture
Karma Server
Karma Getting Started
# run just once to install npm install karma -g # create a project directory mkdir myproject cd myproject # create karma configuration file karma init
Karma Config
• Just a JavaScript file
• keys determine how test should run
Karma Config
• files is a list of JS files to include in the test
• Can use wildcards
Karma Config
• browsers is a list of supported browsers
Running Tests
# start a karma server karma start # execute tests karma run
IDE Integration
What We Learned
• Mocha is a JS library that helps us write unit tests
• Karma is a JS library that helps us run them
Q & A
Advanced MochaHow to write awesome tests
Agenda
• Flow control: before, after, beforeEach, afterEach
• Writing async tests
• Fixtures and DOM testing
Let’s Flowdescribe('Test 1', function() { it('should do X', function() { var p1 = new Player('bob'); var p2 = new Player('John'); var game = new GameEngine(p1, p2); // test stuff with game }); it('should do Y', function() { var p1 = new Player('bob'); var p2 = new Player('John'); var game = new GameEngine(p1, p2); // test stuff with game }); });
Let’s Flowdescribe('Test 1', function() { it('should do X', function() { var p1 = new Player('bob'); var p2 = new Player('John'); var game = new GameEngine(p1, p2); // test stuff with game }); it('should do Y', function() { var p1 = new Player('bob'); var p2 = new Player('John'); var game = new GameEngine(p1, p2); // test stuff with game }); });
Same code...
A Better Scheme• beforeEach() runs
before each test
• also has:
• afterEach() for cleanups
• before() and after() run once in the suite
describe('Test 1', function() {! var game;! ! beforeEach(function() {! var p1 = new Player('bob');! var p2 = new Player('John');! game = new GameEngine(p1, p2);! });! ! it('should do X', function() {! // test stuff with game! });!! ! it('should do Y', function() {! // test stuff with game! });!});
Async Testing
Async Theory
var x = 10
test x x has the right value testing here is OK
Async Theory
$.get(...)
test result Can’t test now, result not yet ready
Async Theory
• Async calls take callbacks
• We should tell mocha to wait
Async Code
describe('Test 1', function() { it('should do wait', function(done) { setTimeout(function() { // now we can test result assert(true); done(); }, 1000); }); });
Async Code
describe('Test 1', function() { it('should do wait', function(done) { setTimeout(function() { // now we can test result assert(true); done(); }, 1000); }); });
Taking a function argument tells mocha the test will only end after it’s called
Async Code
describe('Test 1', function() { it('should do wait', function(done) { setTimeout(function() { // now we can test result assert(true); done(); }, 1000); }); });
Calling the callback ends the test
Async Notes
• Always call done() or your test will fail on timeout
• Default timeout is 2 seconds
Controlling Timeouts
describe('Test 1', function() { // set suite specific timeout this.timeout(500); it('should do wait', function(done) { // test specific timeout this.timeout(2000); }); });
Same goes for Ajax
describe('Test 1', function() { // set suite specific timeout this.timeout(5000); it('should get user photo', function(done) { $.get('profile.png', function(data) { // run tests on data done(); }); }); });
DOM Testing
Theory
body
“Real” HTML “Test” HTML
body
h1
div div
img
Theory
body
“Real” HTML “Test” HTML
body
h1
div div
img img
Theory
$('img.thumbnail').css({ width: 200, height: 200 });
<img class="thumbmail" src="home.png" />
fixture.html
images.js
Using Fixtures
before(function() { fixture_el = document.createElement('div'); fixture_el.id = "fixture"; ! document.body.appendChild(fixture_el); }); !beforeEach(function() { fixture_el.innerHTML = window.__html__["fixture.html"]; }); !
Almost Ready
• HTML files are not served by default
• We need to tell karma to serve it
Serving HTMLs• Modify files section to include the last
(HTML) pattern
// list of files / patterns to load in the browser files: [ 'lib/**/*.js', 'plugins/**/*.js', 'test/fixtures/*.html', 'spec/*.js' ],
Testing a jQuery Plugin
it('should change the header text lowercase', function() { $('.truncate').succinct({ size: 100 }); ! var result = $('.truncate').text(); assert.equal( result.length , 100 ); });
Fixtures & DOM
• Define DOM fragments in HTML files
• Load from test suite
• Test and clean up
Spying With SinonStubs, Spies and Mock Objects explained
Agenda• Reasons to mock
• Vanilla mocking
• How sinon can help
• Stubs and Spies
• Faking timers
• Faking the server
Reasons To Mock
Reasons To Mock
PersonalData$.ajax setTimeout
Reasons To Mock
PersonalData$.ajax setTimeout
Reasons To Mock
• PersonalData object can save data to server
• If saving failed, it retries 3 times
Reasons To Mock
• Both server and clock are external
• We prefer to test in isolation
What We Can Do
• Provide our own $.ajax, that won’t go to the server
• Provide our own setTimeout that won’t wait for the time to pass
What We Can Do
• Lab: Given the class here https://gist.github.com/ynonp/6667146
• Write a test case to verify sendData actually retried 3 times
What We Can Do
• Solution: https://gist.github.com/ynonp/6667284
Mocking Notes
• Solution is far from perfect.
• After the test our “fake” methods remain
• Writing “fake” methods was not trivial
This Calls for Sinon
About Sinon
• A JS mocking library
• Helps create fake objects
• Helps tracking them
About Sinon
• Homepage: http://sinonjs.org/
• Google Group: http://groups.google.com/group/sinonjs
• IRC Channel: #sinon.js on freenode
Solving with Sinon
• Here’s how sinon might help us with the previous task
• Code: https://gist.github.com/ynonp/6667378
Solution Notes
• Sinon’s fake timer was easier to use than writing our own
• Now we have a synchronous test (instead of async)
Let’s Talk About Sinon
Spies
• A spy is a function that provides the test code with info about how it was used
Spies Demodescribe('Sinon', function() { describe('spies', function() { ! it('should keep count', function() { ! var s = sinon.spy(); s(); assert.isTrue(s.calledOnce); ! s(); assert.isTrue(s.calledTwice); ! s(); assert.equal(s.callCount, 3); ! }); }); });
Spy On Existing Funcsdescribe('Sinon', function() { describe('spies', function() { ! it('should keep count', function() { var p = new PersonalData(); var spy = sinon.spy(p, 'sendData'); ! p.sendData(); ! assert.isTrue( spy.calledOnce ); }); }); });
Spies Notes
• Full API: http://sinonjs.org/docs/#spies
• Tip: Use as callbacks
Spy + Action = Stub
Stub Demo
• Let’s fix our starting example
• We’ll replace $.ajax with a stub
• That stub always fails
Stub Demovar stub = sinon.stub(jQuery, 'ajax').yieldsTo('error'); !describe('Data', function() { describe('#sendData()', function() { ! it('should retry 3 times before quitting', function() { var p = new PersonalData(); p.sendData(); assert.equal(stub.callCount, 1); }); }); });
What Can Stubs Do
var callback = sinon.stub(); !callback.withArgs(42).returns(1); !callback.withArgs(1).throws("TypeError"); !
Stubs API• Full Stubs API docs:
http://sinonjs.org/docs/#stubs
• Main actions:
• return stuff
• throw stuff
• call stuff
Spies Lab
• Given code here: https://gist.github.com/ynonp/7101081
• Fill in the blanks to make the tests pass
Fake Timers
• Use sinon.useFakeTimers() to create a fake timer
• Use clock.restore() to clear fake timers
Fake Timers
• Use tick(...) to advance
• Affected methods:
• setTimeout, setInterval, clearTimeout, clearInterval
• Date constructor
Fake Servers
• Testing client/server communication is hard
• Use fake servers to simplify it
Fake Servers
PersonalData$.ajax
Fake Servers
PersonalData$.ajax
Fake
Let’s write a test for the following class
1. function Person(id) { 2. var self = this; 3. 4. self.load = function() { 5. var url = '/users/' + id; 6. 7. $.get('/users/' + id, function(info) { 8. self.name = info.name; 9. self.favorite_color = info.favorite_color; 10. }); 11. }; 12. }
Testing Plan
• Set-up a fake server
• Create a new Person
• call load()
• verify fields data
Setting Up The Server
1. var server = sinon.fakeServer.create(); 2. 3. var headers = {"Content-Type" : "application/json"}; 4. var response = JSON.stringify( 5. {"name" : "joe", "favorite_color": "blue" }); 6. 7. server.respondWith("GET", "/users/7", 8. [200, headers, response]); 9. // now requesting /user/info.php returns joe's info as a JSON
Loading a Person
1. var p = new Person(7); 2. // sends a request 3. p.load(); 4. 5. // now we have 1 pending request, let's fake the response 6. server.respond();
Verifying the Data
1. // finally, verify data 2. expect(p.name).to.eq('joe'); 3. expect(p.favorite_color).to.eq('blue'); 4. 5. // and restore AJAX behavior 6. server.restore();
Fake Server
• Use respondWith() to set up routes
• Use respond() to send the response
Fake Server• Regexps are also supported, so this works:
1. server.respondWith(/\/todo-items\/(\d+)/, function (xhr, id) { 2. xhr.respond( 3. 200, 4. { "Content-Type": "application/json" }, 5. '[{ "id": ' + id + ' }]'); 6. });
Fake Server
• For fine grained control, consider fake XMLHttpRequest
• http://sinonjs.org/docs/#server
Wrapping Up
Wrapping Up
• Unit tests work best in isolation
• Sinon will help you isolate units, by faking their dependencies
Wrapping Up
• Write many tests
• Each test verifies a small chunk of code
• Don’t test everything
Online Resources• Chai:
http://chaijs.com/
• Mocha: http://visionmedia.github.io/mocha/
• Sinon: http://sinonjs.org/
• Karma (test runner): http://karma-runner.github.io/0.10/index.html
Thanks For Listening
• Ynon Perek
• http://ynonperek.com
Recommended
