Your SlideShare is downloading. ×
Tests d'interfaces cartographiques avec Mocha
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tests d'interfaces cartographiques avec Mocha

523

Published on

http://makina-corpus.com/blog/metier/les-tests-carto-avec-leaflet-et-mocha …

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
523
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/ ●

×