Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tests carto avec Mocha
Search
Makina Corpus
November 23, 2013
Technology
0
810
Tests carto avec Mocha
Quelques notes sur le test d'applications cartographiques avec Leaflet et Mocha
Makina Corpus
November 23, 2013
Tweet
Share
More Decks by Makina Corpus
See All by Makina Corpus
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
makinacorpus
0
760
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
makinacorpus
0
130
Team up Django and Web mapping - DjangoCon Europe 2014
makinacorpus
3
880
Petit déjeuner "Les bases de la cartographie sur le Web"
makinacorpus
0
420
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir de rien" le 11 février - Toulouse
makinacorpus
0
270
CoDe, le programme de développement d'applications mobiles de Makina Corpus
makinacorpus
0
110
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes - Sylvain Beorchia
makinacorpus
0
670
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
makinacorpus
1
390
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
370
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
850
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
180
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
180
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
470
事業開発におけるDify活用事例
kentarofujii
5
1.5k
What's new in OpenShift 4.20
redhatlivestreaming
0
280
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
610
Kubernetes self-healing of your workload
hwchiu
0
550
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Designing Experiences People Love
moore
142
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Facilitating Awesome Meetings
lara
57
6.6k
Transcript
Tests carto avec Mocha (notes) Mathieu Leplatre @leplatrem www.makina-corpus.com
Mécanique cartographique... • →JS + DOM • <img> (Fonds de
carte) • Lat/Long pixels → (SVG, CSS) • Événements (interactions)
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>
À 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
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); })
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);
Conclusion • Unitaires ! • « Tout est difficile avant
d'être simple. » – Thomas Fuller
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/