Author: Nicolas Embleton @: nicolas.embleton@gmail.com You can follow Nicolas at: https://plus.google.com/+NicolasEmbleton https://twitter.com/nicolasembleton And the Javascript Ho Chi Minh City Meetup: http://meetup.com/JavaScript-Ho-Chi-Minh-City/ https://www.facebook.com/JavaScriptHCMC https://plus.google.com/communities/116105314977285194967 Our group is looking for Projects to mentor. If you have a project you want support for, plz contact us

1. Javascript: Testing the awesome
with Mocha and Jasmine

2. Speakers
● Nicolas
● Tung

3. Agenda
●
●
●
●
●
Introduction
Basics (Mocha and Jasmine)
Operators and asserts
Listeners, spies
More advanced examples

4. Introduction and basics
● Goal 1
○ Make your code solid and future-proof
● Goal 2
○ Have a systematic way to "catch" regression
problems
● Goal 3
○ Maintain a code stability throughout the codebase
increase

5. Introduction and basics
Mocha:
● fun
● simple
● flexible
● built for JavaScript (and CoffeeScript)
https://github.com/gmanvn/jshcm-testing

6. Introduction and basics
● http://jasmine.github.io/
○ Built and supported by Pivotal Labs
● Latest Version: 2.0
● Runs
○ In the browser natively
○ With Node.js through a runner (Karma, Protractor,
…)
● Simple, elegant, descriptive, full-featured

7. Basics, Mocha
● solve the async problems
● work with every assertion library
○ that throw exceptions
● extensible reporters
○ nyan cat included
https://github.com/gmanvn/jshcm-testing

8. Basics, Jasmine
● Describe your suites with "Describe" to make
your code clean and reports readable
○ You can even NEST them
describe("mocking ajax", function() {
● Describe each test with "it" and a descriptive
comment to explain what the test is doing
it("specifies response when you need it", function() {

9. Basics, Jasmine
● Setup a test suite ("describe")
beforeEach(function() {
● Teardown a test suite ("describe")
afterEach(function() {
● "Expect" things to be (or not) as they should
(or not)
expect(doneFn).not.toHaveBeenCalled();

10. Basics, Mocha
●
●
●
●
support lcov (lib coverage)
support only, skip, --grep
highlight slow test, custom timeouts
[BDD | TDD | QUnit | exports] interface
https://github.com/gmanvn/jshcm-testing

11. Basics, Jasmine
●
●
●
●
Code Coverage through Karma (node.js)
Gem for testing in Rails
Plays well with CoffeeScript
Plays well with MVC Framework (AngularJS
for example)

12. Basic operators, Mocha
Mocha + Chai + CoffeeScript = Awesomeness
● NO bra-ces
● NO repeating keywords
● NO “deep” pains
● Focus only on the test

13. Basic operators, Jasmine
Within tests you use "Matchers"
expect(true).toBe(true);
expect(false).not.toBe(true);
expect(a).toBe(b);
expect(a).not.toBe(null);
expect(message).toMatch(/bar/);
expect(message).toMatch("bar");
expect(message).not.toMatch(/quux/);

14. Basic operators, Mocha
back to the demo

15. Basic operators, Jasmine
● It can be complex scenarios and matchers,
any kind of dynamic code built with
JavaScript.

16. Listeners, Spies: Mocha
No need for spies and listeners
Just use callback

17. Listeners, Spies: Jasmine
● You can use Spies to check function calls
spyOn(foo, 'setBar');
foo.setBar(123);
expect(foo.setBar).toHaveBeenCalled();
● You can mock Ajax calls via Ajax.js
jasmine.Ajax.install();
var doneFn = jasmine.createSpy("success");
var xhr = new XMLHttpRequest();

18. Listeners, Spies: Mocha

19. Listeners, Spies: Jasmine
… expect(jasmine.Ajax.requests.mostRecent().url).toBe
('/so/cool/');

20. More advanced examples, Jasmine
Some sugar: Adding Matchers (awesome)
describe('Hello world', function() {
beforeEach(function() {
this.addMatchers({
toBeDivisibleByTwo: function() {
return (this.actual % 2) === 0;
}
});
});
it('is divisible by 2', function() {
expect(gimmeANumber()).toBeDivisibleByTwo();
});
});

21. About @Tung Vu
Author: Tung Vu@: @gmail.com
You can follow me at:
○
google.com/+TungVuJS

22. About @Nicolas
Author: Nicolas Embleton @: nicolas.embleton@gmail.com
You can follow me at:
● https://plus.google.com/+NicolasEmbleton
● https://twitter.com/nicolasembleton
And the Javascript Ho Chi Minh City Meetup:
● http://meetup.com/JavaScript-Ho-Chi-Minh-City/
● https://www.facebook.com/JavaScriptHCMC
● https://plus.google.com/communities/116105314977285194967
○
Our group is looking for Projects to mentor. If you have a project you want support for,
contact me