Tests carto avec Mocha

A746319cbfd0236a4d0548e7d1fc1983?s=47 Makina Corpus
November 23, 2013

Tests carto avec Mocha

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

A746319cbfd0236a4d0548e7d1fc1983?s=128

Makina Corpus

November 23, 2013
Tweet

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/