http://makina-corpus.com/blog/metier/les-tests-carto-avec-leaflet-et-mocha Présentation par Mathieu Leplatre @leplatrem FranceJS, Capitole du Libre #cdl2013 Toulouse, France 23/11/2013

1. Tests carto avec Mocha
Mathieu Leplatre
@leplatrem
www.makina-corpus.com

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

3. Mocha + PhantomJS
●
Browser + Command-line (headless)
<script>
(window.mochaPhantomJS || window.mocha).run();
</script>
$ mocha-phantomjs test/index.html
Travis (exit codes)
●
TDD (watch / inotify)
●
Pure JS (mock, jsdom)
●

4. Assertions
●
should.js | expect.js | Chai (should, expect, assert)
var assert = chai.assert;
describe('L.Handler.AlmostOver', function() {
describe('Activation', function() {
it("is enabled by default.", function(done) {
var map = L.map('map');
assert.isDefined(map.almostOver);
assert.isTrue(map.almostOver.enabled());
done();
});
...

5. À peu près pas loin ?
✖ 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
●
assert.closeTo()
Pixel → Lat/Long (événement)
●
1e-8 degré ~ 1mm
●
assert.nearLatLng = function (actual, expected, delta) {…}
●
Lat/Long → Pixel (tracé)
assert.nearPoint = function (actual, expected, delta) {…}

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

7. 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',
clock.tick(500);
map.fire('mousemove',
map.fire('mousemove',
{latlng: [0,
// less than
{latlng: [0,
{latlng: [0,
0]});
period
0]});
0]});
assert.equal(2, callback.callCount);

8. Conclusion
« Software without tests
is broken by design » – Jacobian
●
●
« Tout est difficile
avant d'être simple. » – Thomas Fuller
Merci FranceJS & Makina Corpus !
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/
●

9. Merci FranceJS & Makina Corpus !
Outils
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/
●