Les tests en Javascript

BreizhCamp 2015 #BzhCmp #testAppJS BreizhCamp 2015 #BzhCmp Tester une application
JS Jasmine, Karma, Protractor Guillaume EHRET - @guillaumeehret Dev-Mind - @DevMind_FR

Guillaume EHRET @guillaumeehret http://javamind-fr.blogspot.fr/

et vous ? @guillaumeehret

Tester en javascript @guillaumeehret

Pourquoi tester son appli JS ? @guillaumeehret

Prouver que le code est correct @guillaumeehret source : http://giphy.com/

Eviter les régressions @guillaumeehret source : http://zoodroid.blogspot.com/

Refactoring plus serein @guillaumeehret source : http://giphy.com/

Feedback plus rapide @guillaumeehret source : http://giphy.com/

Meilleur design @guillaumeehret source : http://www.dezeen.com/2014/06/02/animated-gifs-present-shape-shifting-buildings/

Documentation @guillaumeehret source : http://giphy.com/ 404

Le langage @guillaumeehret source : http://zoodroid.blogspot.com/

Qu’est ce qu’un test ? @guillaumeehret

System under test @guillaumeehret

Les collaborateurs @guillaumeehret

Test unitaire @guillaumeehret

Mocker ou stuber les collaborateurs @guillaumeehret

Test end to end @guillaumeehret

System under test @guillaumeehret

Ce qui nous intéresse @guillaumeehret Entrées Sorties

AAA @guillaumeehret Entrées Sorties Arrange Act Assert Arrange Act Assert

Comment tester en Javascript ? @guillaumeehret

Ecrire les tests @guillaumeehret

Exécuter tests unitaires @guillaumeehret

Exécuter tests end to end @guillaumeehret

Place au code @guillaumeehret source : http://zoodroid.blogspot.com/

Fonctionnement de Karma @guillaumeehret Serveur HTTP Application Javascript Fichiers specs.js
Runner (page qui lance les tests) HTML JS specs watch start start & exec results for reports 1 2 3 4

Fonctionnement de Protractor @guillaumeehret serveur Selenium (local ou remote) Application
Javascript WebDriver (selenium) Browser drivers specs load send start exec results for reports Fichiers specs.js WebDrivers JS (selenium WebDriver API) protractor.conf.js seleniumAddress seleniumServerJar 1 2 3 4

Fonctionnement de Protractor @guillaumeehret Application Javascript Browser drivers load results
for reports Fichiers specs.js Drivers JS start & exec protractor.conf.js directConnect: true seulement Chrome et Firefox specs 1 2 3

Protractor et selector @guillaumeehret <html> <body> <div id="foo"></div> <foo></foo> <input
ng-model="foo"/> <span ng-repeat="foo in foos"/> ..etc... </body> </html> element(by.id('foo')) element(by.tagName('foo')) element(by.model('foo')) element(by.repeater('foo in foos')) ..etc...

Tester une application JS @guillaumeehret https://github.com/javamind/AngularAndTests https://github.com/javamind/AngularAndTestsBackend

Référence @guillaumeehret http://jasmine.github.io/2.3/introduction.html http://javamind-fr.blogspot.fr/2015/01/comment-ecrire-vos-tests-javascript.html http://karma-runner.github.io/0.12/index.html https://www.npmjs.com/browse/keyword/karma-plugin http://javamind-fr.blogspot.fr/2015/01/karma-lexecuteur-de-tests-javascript.html https://www.youtube.com/watch?v=Mu9c6-thcVU http://angular.github.io/protractor/#/ http://javamind-fr.blogspot.fr/2015/01/karma-lexecuteur-de-tests-javascript.html
https://www.youtube.com/watch?v=aQipuiTcn3U http://webdriver.io/api.html 2.3 0.12 2.0

Les questions ? @guillaumeehret

Merci @guillaumeehret source : http://giphy.com/

Les tests en Javascript

Les tests en Javascript

More Decks by Dev-Mind

Other Decks in Technology

Featured

Transcript