@guillaumeehret #softshake15 Tests en Javascript un pas vers la sérénité @guillaumeehret Guillaume EHRET - @guillaumeehret 

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

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret et vous ? 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ les tests vous font peur ? #softshake15 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ moi c’est naviguer à vue #softshake15 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ la peur des régressions #softshake15 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ Les tests nous permettent de coder sereinement 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ #softshake15 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ Mais les tests vous aident également implicitement 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 source: http://www.dezeen.com un meilleur design 

@guillaumeehret #softshake15 @guillaumeehret parfois la seule doc à jour source: http://giphy.com/ #softshake15 

@guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 System under test source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 System under test source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Les collaborateurs source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Test unitaire source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Mocker les collaborateurs source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Tests e2e source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Boite noire source: http://giphy.com/ 

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

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Méthode AAA source: http://giphy.com/ Entrées Sorties Arrange Act Assert 

@guillaumeehret #softshake15 @guillaumeehret 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 écrire les tests source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 exécuter les tests unitaires source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 exécuter les tests e2e source: http://giphy.com/ 

@guillaumeehret #softshake15 @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 #softshake15 @guillaumeehret #softshake15 jetons nous à l’eau source: http://giphy.com/ 

@guillaumeehret #softshake15 @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 #softshake15 @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 #softshake15 @guillaumeehret Les sélecteurs source: http://giphy.com/ ..etc... element(by.id('foo')) element(by.tagName('foo')) element(by.model('foo')) element(by.repeater('foo in foos')) ..etc... 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Angular mais pas que source: http://giphy.com/ 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Angular mais 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; 

@guillaumeehret #softshake15 @guillaumeehret #softshake15 Angular mais 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 #softshake15 @guillaumeehret Les sources source: http://giphy.com/ https://github.com/devmind/test-javascript 

@guillaumeehret #softshake15 @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/#/ 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 / http://ramonvictor.github.io/protractor/slides/#/1 

@guillaumeehret #softshake15 @guillaumeehret questions 

@guillaumeehret #softshake15 Merci @guillaumeehret