Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Les tests en Javascript

Dev-Mind
January 22, 2016

Les tests en Javascript

Session faite au SnowCamp 2016 les 21 et 22 janvier à Grenoble

Dev-Mind

January 22, 2016
Tweet

More Decks by Dev-Mind

Other Decks in Technology

Transcript

  1. @guillaumeehret Snow Camp 2016 @guillaumeehret parfois la seule doc à

    jour source: http://giphy.com/ Snow Camp 2016
  2. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Méthode AAA

    source: http://giphy.com/ Entrées Sorties Arrange Act Assert
  3. @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
  4. @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
  5. @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
  6. @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...
  7. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 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;
  8. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 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
  9. @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