Les tests en Javascript

@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 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 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/ <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 #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;

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

Les tests en Javascript

Les tests en Javascript

More Decks by Dev-Mind

Other Decks in Technology

Featured

Transcript