Tests carto avec Mocha

Mathieu Leplatre@leplatremwww.makina-corpus.com

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

Mocha + PhantomJS ● Browser + Command-line (headless)

● Travis (exit codes)● TDD (watch / inotify)● Pure JS (mock, jsdom)

$ mocha-phantomjs test/index.html

<script> (window.mochaPhantomJS || window.mocha).run();</script>

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(); });

...

À peu près pas loin ?

● assert.closeTo()

● Pixel Lat/Long → (événement)● 1e-8 degré ~ 1mm

● Lat/Long Pixel→ (tracé)

✖ 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.nearLatLng = function (actual, expected, delta) {…}

assert.nearPoint = function (actual, expected, delta) {…}

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); })

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); // less than periodmap.fire('mousemove', {latlng: [0, 0]});map.fire('mousemove', {latlng: [0, 0]});

assert.equal(2, callback.callCount);

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/

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/