Javascript: Testing the awesome with Mocha and Jasmine

● Nicolas● Tung

Speakers

Agenda

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

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

Introduction and basics

Mocha:● fun● simple● flexible● built for JavaScript (and CoffeeScript)

https://github.com/gmanvn/jshcm-testing

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

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

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() {

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();

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

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)

Basic operators, Mocha

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

Basic operators, JasmineWithin 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/);

Basic operators, Mocha

back to the demo

Basic operators, Jasmine

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

Listeners, Spies: Mocha

No need for spies and listenersJust use callback

Listeners, Spies: Jasmine● You can use Spies to check function callsspyOn(foo, 'setBar');

foo.setBar(123);

expect(foo.setBar).toHaveBeenCalled();

● You can mock Ajax calls via Ajax.jsjasmine.Ajax.install();

var doneFn = jasmine.createSpy("success");

var xhr = new XMLHttpRequest();

Listeners, Spies: Mocha

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

More advanced examples, JasmineSome 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(); });});

About @Tung VuAuthor: Tung Vu@: @gmail.com

You can follow me at:

○ google.com/+TungVuJS

About @NicolasAuthor: 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