Mocha JS a non-expert intro intro to a JS test framework
Me
Angelo Gulina
Frontend for CAP
Covering whatt if? wha if ? and why? and what? and how to?
describe(), it(), assert(), expect()
don’t try this at home
What if? what happens if you
remove a method declaration but you don’t 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 you’re 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.
describe(‘Mocha setup Tests’, function () { describe(‘When I run the tests’, function () { it(‘should return something’, function () { … }); }); });
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 () { … }); }); });
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()); }); }); });
beforeEach( … ) Runs before each it()
describe(‘Mocha setup Tests’, function () { 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 it’s 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-costof-skipping-tdd-code-reviews-57887064c412#.l0g4dhm9a for Dev https://medium.com/javascript-scene/5-commonmisconceptions-about-tdd-unittests-863d5beb3ce9#.twcvovgic
