You are on page 1of 36

Mocha JS

a non-expert intro to a JS test framework

Mocha by Angelo Gulina


Me

Angelo Gulina
Frontend for CAP

Mocha by Angelo Gulina


Covering

what if? and why? and what? and how to?

describe(), it(), assert(), expect()

dont try this at home

Mocha by Angelo Gulina


What if?

what happens if you remove a method declaration but


you dont remove the method call(s)?

Mocha by Angelo Gulina


Mocha by Angelo Gulina
Why me?

Mocha by Angelo Gulina


SPREAD
THE

Mocha by Angelo Gulina
Go to those guys

Eduard Mathias

Mocha by Angelo Gulina


Why?
vs Jasmine
Mocha: no built-in assertion library
Jasmine: has spies for mocking
both: similar API, similar async

vs Jest
Jest: recommended by FB Devs, uses Jasmine, React native
Mocha: more popular, simple API, faster, flexible

Mocha by Angelo Gulina


Why?
Make the code more resilient and less error-prone

Split large files without breaking functionality

Make dependencies explicit

Test Backbone Views

Mocha by Angelo Gulina


What?
A JavaScript Test Framework

Runs in browser and Node.js

Easy to integrate in (our) CI


actually runs manually and in pre-commit hooks

Mocha by Angelo Gulina


What?
Mocha Docs and Instructions
https://mochajs.org/

Useful
https://www.sitepoint.com/unit-test-javascript-mocha-chai/

Mocha by Angelo Gulina


How to?
install

$ npm install --save-dev mocha

run

$ ./node_modules/.bin/mocha

Mocha by Angelo Gulina


How to?
on package.json
scripts: {
test: ./node_modules/.bin/mocha
}

run

$ npm test

Mocha by Angelo Gulina


How to?
mocha setup

scripts: {
test: ./node_modules/.bin/mocha require ./mochaSetup.js
}

By default, mocha looks for the glob ./test/*.js and ./test/*.coffee

scripts: {
test: ./node_modules/.bin/mocha ./dir require ./mochaSetup.js
}

Mocha by Angelo Gulina


()
Tests
as a serie of
assertions and/or expectations you have
on how your code should work.

Mocha by Angelo Gulina


()
so

it().should.work()

actually

it().should.fail()
then

it().should.work()

Mocha by Angelo Gulina


describe( )
One at the beginning of the Test Suite,
another at the beginning of the behaviour youre going to test.

describe(Mocha setup Tests, function () {


describe(When I run the tests, function () {

});
});

Mocha by Angelo Gulina


it( )
Use it t separate tests regarding specific behaviour of your code.

describe(Mocha setup Tests, function () {


describe(When I run the tests, function () {
it(should return something, function () {

});
});
});

Mocha by Angelo Gulina


only( )
Use it for testing and debugging.
Will run the specified case.

describe(Mocha setup Tests, function () {


describe(When I run the tests, function () {
it.only(should return something, function () {

});
});
});

Mocha by Angelo Gulina


assert( )
Use it to actually test (and print out the result of) your code.

describe(Mocha setup Tests, function () {


describe(When I run the tests, function () {
it(should return something, function () {
assert.equal(something, myMethod());
});
});
});

Mocha by Angelo Gulina


beforeEach( )
Runs before each it()

describe(Mocha setup Tests, function () {


beforeEach(function () {

});
});

Mocha by Angelo Gulina


jsdom
Use it to create a DOM on your Node.js environment

$ npm install --save-dev jsdom

https://github.com/tmpvar/jsdom

Mocha by Angelo Gulina


UI Testing
Instead of taking in some arguments and returning a
value, your function will take in some arguments and
return an object representation of your UI.

Always try to think in terms of pure functions,


something goes in, something gets out.

Even if its UI.

Mocha by Angelo Gulina


()
Some
Chai and sinon examples.

https://gist.github.com/mkretschek/902344f1136d3aa7fe40de9348be0e14

Mocha by Angelo Gulina


chai.use( )
// assertions for stubs and spies
chai.use(sinonChai);

// assertions for promises


chai.use(chaiAsPromised);

// assertions for strings


chai.use(chaiString);

// assertions for arrays and objects


chai.use(chaiThings);

Mocha by Angelo Gulina


expect( )
chai provides several readable assertions for simple use cases

it('accepts `email@email.com`', function () {


expect(isValidEmail(email@email.com)).to.be.true;
expect(isValidEmail('foo.bar@baz.zzz')).to.be.true;
});

Mocha by Angelo Gulina


expect( )
Async tests with promises: the test case can just return a promise.

// Mocha will wait until it's resolved before running


the next test.
it('fetches data from the given base URL', function () {
return getData().then(() => {
expect(fetch).to.have.been.calledWith( );
});
});

Mocha by Angelo Gulina


expect( )
chai-as-promised provides useful assertions for testing promises.

it('returns the retrieved data if no normalisation


function is given', function () {
const send = api.sendData('PUT', /foo');
return expect(send()).to.eventually.equal( );
});

Mocha by Angelo Gulina


expect( )
chai-string helps checking string values

it('strips trailing slashes from the URL', function () {


expect(api.baseUrl).to.not.endWith('/');
});

Mocha by Angelo Gulina


expect( )
chai-things helps checking the content of arrays and objects

it('normalises attributes in the list', function () {


const list = normalizeAttributeList([ ...items ]);
expect(list).to.have.length(2)
.and.all.to.have.property('type')
.and.all.to.have.property('title')
.and.all.to.have.property('property')
.and.all.to.have.property('shortName');
});

Mocha by Angelo Gulina


expect( )
sinon allows you to stub/spy functions and take direct control over their return values

it('returns a rejected promise if the API returns an


error', function () {
window.fetch.returns(Promise.reject( ));
return sender().catch(function () {});
});

Mocha by Angelo Gulina


()
Some
Chai and sinon examples.

https://gist.github.com/mkretschek/902344f1136d3aa7fe40de9348be0e14

Mocha by Angelo Gulina


DO
NOT
TRY
THIS
AT
HOME
Mocha by Angelo Gulina
Useful
Mocha Docs and Instructions
https://mochajs.org/

for PM
https://medium.com/javascript-scene/the-outrageous-cost-
of-skipping-tdd-code-reviews-57887064c412#.l0g4dhm9a

for Dev
https://medium.com/javascript-scene/5-common-
misconceptions-about-tdd-unit-
tests-863d5beb3ce9#.twcvovgic

Mocha by Angelo Gulina


The End

Mocha by Angelo Gulina