Mocha JS Testing Framework

Mocha JS
a non-expert intro to a JS test framework
Mocha by Angelo Gulina

Me
Angelo Gulina
Frontend for CAP

Covering
what if? and why? and what? and how to?
describe(), it(), assert(), expect()
dont try this at home

What if?
what happens if you remove a method declaration but

you dont remove the method call(s)?

Why me?

SPREAD
THE

Go to those guys
Eduard Mathias

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

Why?
Make the code more resilient and less error-prone
Split large files without breaking functionality
Make dependencies explicit
Test Backbone Views

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

What?
Mocha Docs and Instructions
https://mochajs.org/
Useful
https://www.sitepoint.com/unit-test-javascript-mocha-chai/

How to?
install
$ npm install --save-dev mocha
run
$ ./node_modules/.bin/mocha

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

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
}

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

()
so
it().should.work()
actually
it().should.fail()
then
it().should.work()

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

});
});

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

it(should return something, function () {

});
});
});

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

it.only(should return something, function () {

});
});
});

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

it(should return something, function () {
assert.equal(something, myMethod());
});
});
});

beforeEach( )
Runs before each it()

beforeEach(function () {

});
});

jsdom
Use it to create a DOM on your Node.js environment
$ npm install --save-dev jsdom
https://github.com/tmpvar/jsdom

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.

()
Some
Chai and sinon examples.
https://gist.github.com/mkretschek/902344f1136d3aa7fe40de9348be0e14

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

expect( )
chai provides several readable assertions for simple use cases
it('accepts `[email protected]`', function () {

expect(isValidEmail([email protected])).to.be.true;
expect(isValidEmail('[email protected]')).to.be.true;
});

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

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

expect( )
chai-string helps checking string values
it('strips trailing slashes from the URL', function () {

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

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');
});

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

()
Some
Chai and sinon examples.
https://gist.github.com/mkretschek/902344f1136d3aa7fe40de9348be0e14

DO
NOT
TRY
THIS
AT
HOME
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

The End

Mocha JS Testing Framework

Uploaded by

Copyright:

Available Formats

Mocha JS Testing Framework

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mocha JS Testing Framework

Uploaded by

Copyright:

Available Formats

Mocha JS

a non-expert intro to a JS test framework

Mocha by Angelo Gulina

Mocha by Angelo Gulina

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

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

dont try this at home

Mocha by Angelo Gulina

what happens if you remove a method declaration but

Mocha by Angelo Gulina

Mocha by Angelo Gulina

Mocha by Angelo Gulina

Mocha by Angelo Gulina

Split large files without breaking functionality

Make dependencies explicit

Test Backbone Views

Mocha by Angelo Gulina

Runs in browser and Node.js

Easy to integrate in (our) CI

Mocha by Angelo Gulina

Mocha by Angelo Gulina

$ npm install --save-dev mocha

Mocha by Angelo Gulina

Mocha by Angelo Gulina

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

Mocha by Angelo Gulina

Mocha by Angelo Gulina

Mocha by Angelo Gulina

describe(Mocha setup Tests, function () {

Mocha by Angelo Gulina

describe(Mocha setup Tests, function () {

Mocha by Angelo Gulina

describe(Mocha setup Tests, function () {

Mocha by Angelo Gulina

describe(Mocha setup Tests, function () {

Mocha by Angelo Gulina

describe(Mocha setup Tests, function () {

Mocha by Angelo Gulina

$ npm install --save-dev jsdom

Mocha by Angelo Gulina

Always try to think in terms of pure functions,

Even if its UI.

Mocha by Angelo Gulina

Mocha by Angelo Gulina

// assertions for promises

// assertions for strings

// assertions for arrays and objects

Mocha by Angelo Gulina

it('accepts `[email protected]`', function () {

Mocha by Angelo Gulina

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

Mocha by Angelo Gulina

it('returns the retrieved data if no normalisation

Mocha by Angelo Gulina

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

Mocha by Angelo Gulina

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

Mocha by Angelo Gulina

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

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