Tests carto avec Mocha (notes) Mathieu Leplatre @leplatrem www.makina-corpus.com

Mécanique cartographique... ● →JS + DOM ● (Fonds de carte) ● Lat/Long pixels → (SVG, CSS) ● Événements (interactions)

Mocha + PhantomJS ● Browser + Command-line (headless) ● Intégration Continue (exit codes) ● TDD (watch / inotify) ● jsdom... $ mocha-phantomjs test/index.html (window.mochaPhantomJS || window.mocha).run();

À peu près pas loin ? ● 10e-9 degré ~ 1mm ● assert.closeTo() (Chai) ✖ 1 of 46 tests failed: 1) Locate click on line: 4: expected 0.5 to equal 0.5000000000000001 at file:///home/user/app/node_modules/chai/chai.js:401 render events

Déclencher des vrais événements ● Clic | Clavier | Scroll | Touch ● createEvent API (jQuery) ● happen (http://macwright.org/happen/) it('zooms-in with double click', function(done) { map.on('zoomend', function () { assert.equal(map.getZoom(), 1); done(); }); happen.dblclick(map._container); })

Contrôle du temps, Doc ! ● Sinon.JS (spy + stub + mock + sandbox) var clock = sinon.useFakeTimers(), callback = sinon.spy(); map.on('debounced', callback); map.fire('mousemove', {latlng: [0, 0]}); clock.tick(500); map.fire('mousemove', {latlng: [0, 0]}); map.fire('mousemove', {latlng: [0, 0]}); assert.equal(2, callback.callCount);

Conclusion ● Unitaires ! ● « Tout est difficile avant d'être simple. » – Thomas Fuller

Merci FranceJS & Makina Corpus ! Outils ● http://leafletjs.com ● http://visionmedia.github.io/mocha/ ● https://github.com/metaskills/mocha-phantomjs ● http://macwright.org/happen/ ● http://chaijs.com/ ● http://sinonjs.org/ ● https://github.com/tmpvar/jsdom Lectures ● http://blog.mathieu-leplatre.info/test-your-leaflet-applications-with-mocha.html ● https://nicolas.perriault.net/code/2013/testing-frontend-javascript-code-using-mocha-chai-and-sinon/