Les tests en Javascript

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=47 Dev-Mind
January 22, 2016

Les tests en Javascript

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

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=128

Dev-Mind

January 22, 2016
Tweet

Transcript

  1. @guillaumeehret Snow Camp 2016 développer en toute sérénité Guillaume EHRET

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

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

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

  5. @guillaumeehret Snow Camp 2016 @guillaumeehret et vous ?

  6. @guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ les tests vous

    font peur ? Snow Camp 2016
  7. @guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ moi c’est naviguer

    à vue Snow Camp 2016
  8. @guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ la peur des

    régressions Snow Camp 2016
  9. @guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ Les tests nous

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

  11. @guillaumeehret Snow Camp 2016 @guillaumeehret source: http://giphy.com/ Les tests vous

    aident également implicitement
  12. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 source: http://www.dezeen.com

    un meilleur design
  13. @guillaumeehret Snow Camp 2016 @guillaumeehret parfois la seule doc à

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

  15. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 System under

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

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

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

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

    collaborateurs source: http://giphy.com/
  20. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Tests e2e

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

    source: http://giphy.com/
  22. @guillaumeehret Snow Camp 2016 @guillaumeehret #softshake15 Boite noire source: http://giphy.com/

    Entrées Sorties
  23. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Méthode AAA

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

  25. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 écrire les

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

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

    tests e2e source: http://giphy.com/
  28. @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
  29. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 jetons nous

    à l’eau source: http://giphy.com/
  30. @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
  31. @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
  32. @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...
  33. @guillaumeehret Snow Camp 2016 @guillaumeehret Snow Camp 2016 Angular mais

    pas que source: http://giphy.com/
  34. @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;
  35. @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
  36. @guillaumeehret Snow Camp 2016 @guillaumeehret Les sources source: http://giphy.com/ https://github.com/devmind/test-javascript

  37. @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
  38. @guillaumeehret Snow Camp 2016 @guillaumeehret questions

  39. @guillaumeehret Snow Camp 2016 Merci @guillaumeehret