Les tests en Javascript

@guillaumeehret Snow Camp 2016 développer en toute sérénité Guillaume EHRET
- @guillaumeehret Tests Javascript Snow Camp 2016

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

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret et vous ?

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ les tests vous
font peur ? Snow Camp 2016

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ moi c’est naviguer
à vue Snow Camp 2016

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ la peur des
régressions Snow Camp 2016

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ Les tests nous
permettent de coder sereinement

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ Snow Camp 2016

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ Les tests vous
aident également implicitement

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 source: http://www.dezeen.com
un meilleur design

@guillaumeehret Snow Camp 2016 @guillaumeehret parfois la seule doc à
jour source: http://giphy.com/ Snow Camp 2016

@guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 System under
test source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Les collaborateurs
source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Test unitaire

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Mocker les
collaborateurs source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Tests e2e

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Boite noire

@guillaumeehret Snow Camp 2016 @guillaumeehret #softshake15 Boite noire source: http://giphy.com/
Entrées Sorties

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Méthode AAA
source: http://giphy.com/ Entrées Sorties Arrange Act Assert

@guillaumeehret Snow Camp 2016 @guillaumeehret

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 écrire les
tests source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 exécuter les
tests unitaires source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 exécuter les
tests e2e source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Karma source: http://giphy.com/ 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

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 jetons nous
à l’eau source: http://giphy.com/

@guillaumeehret Snow Camp 2016 @guillaumeehret Protractor source: http://giphy.com/ 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

@guillaumeehret Snow Camp 2016 @guillaumeehret Protractor directconnect source: http://giphy.com/ Application
Javascript WebDriver (selenium) Browser drivers specs load Fichiers specs.js WebDrivers JS (selenium WebDriver API) 1 seulement Chrome et Firefox results for reports start & exec 2 3 protractor.conf.js directConnect: true

@guillaumeehret Snow Camp 2016 @guillaumeehret Les sélecteurs source: http://giphy.com/ <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...

@guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Angular mais
pas que source: http://giphy.com/

pas que source: http://giphy.com/ Vous pouvez utiliser directement l’API webdriver. Par exemple browser.driver. findElement(By.className('link_jquery')).click(); au lieu de element(by.className('link_jquery')).click(); ou en utilisant la même API mais en désactivant les sucres syntaxiques facilitant les problèmes de synchronisation browser.ignoreSynchronization = true;

pas que source: http://giphy.com/ Si la propriété ignoreSynchronization est à true la méthode waitForAngular n’a plus aucun effet. Vous pouvez utiliser browser.sleep(200); pour attendre par exemple que le context soit chargé. browser.driver. wait(function() { return element.all(by.className('jt-talk-line')).count(); }); pour attendre qu’un élément apparaisse dans le DOM de la page

@guillaumeehret Snow Camp 2016 @guillaumeehret Les sources source: http://giphy.com/ https://github.com/devmind/test-javascript

@guillaumeehret Snow Camp 2016 @guillaumeehret Références source: http://giphy.com/ 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 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/#/ https://github.com/CarmenPopoviciu/protractor-styleguide https://www.youtube.com/watch?v=aQipuiTcn3U http://webdriver.io/api.html / http://ramonvictor.github.io/protractor/slides/#/1

@guillaumeehret Snow Camp 2016 @guillaumeehret questions

@guillaumeehret Snow Camp 2016 Merci @guillaumeehret

Les tests en Javascript

Les tests en Javascript

More Decks by Dev-Mind

Other Decks in Technology

Featured

Transcript