Tests carto avec Mocha

Quelques notes sur le test d'applications cartographiques avec Leaflet et Mocha

Transcript

1. Tests carto avec Mocha (notes) Mathieu Leplatre @leplatrem www.makina-corpus.com
2. Mécanique cartographique... • →JS + DOM • <img> (Fonds de carte) • Lat/Long pixels → (SVG, CSS) • Événements (interactions)
3. Mocha + PhantomJS • Browser + Command-line (headless) • Intégration Continue (exit codes) • TDD (watch / inotify) • jsdom... $ mocha-phantomjs test/index.html <script> (window.mochaPhantomJS || window.mocha).run(); </script>
4. À 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
5. 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); })
6. 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);
7. Conclusion • Unitaires ! • « Tout est difficile avant d'être simple. » – Thomas Fuller
8. 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/