Tests carto avec 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/