Les tests en Javascript

Les tests en Javascript

Slides de ma session sur les tests donnée au Breizhcamp 2015 à Rennes. Le but était de voir pourquoi et comment faire des tests unitaires et d'intégration dans une application Javascript. Pour la partie livecoding la présentation sera diffusée sur le site de la conférence. Au menu Jasmine, Karma et Protractor..

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=128

Dev-Mind

June 13, 2015
Tweet

Transcript

  1. BreizhCamp 2015 #BzhCmp #testAppJS BreizhCamp 2015 #BzhCmp Tester une application

    JS Jasmine, Karma, Protractor Guillaume EHRET - @guillaumeehret Dev-Mind - @DevMind_FR
  2. Guillaume EHRET @guillaumeehret http://javamind-fr.blogspot.fr/

  3. et vous ? @guillaumeehret

  4. Tester en javascript @guillaumeehret

  5. Pourquoi tester son appli JS ? @guillaumeehret

  6. Prouver que le code est correct @guillaumeehret source : http://giphy.com/

  7. Eviter les régressions @guillaumeehret source : http://zoodroid.blogspot.com/

  8. Refactoring plus serein @guillaumeehret source : http://giphy.com/

  9. Feedback plus rapide @guillaumeehret source : http://giphy.com/

  10. Meilleur design @guillaumeehret source : http://www.dezeen.com/2014/06/02/animated-gifs-present-shape-shifting-buildings/

  11. Documentation @guillaumeehret source : http://giphy.com/ 404

  12. Le langage @guillaumeehret source : http://zoodroid.blogspot.com/

  13. Qu’est ce qu’un test ? @guillaumeehret

  14. System under test @guillaumeehret

  15. System under test @guillaumeehret

  16. Les collaborateurs @guillaumeehret

  17. Test unitaire @guillaumeehret

  18. Mocker ou stuber les collaborateurs @guillaumeehret

  19. Test end to end @guillaumeehret

  20. System under test @guillaumeehret

  21. Ce qui nous intéresse @guillaumeehret Entrées Sorties

  22. AAA @guillaumeehret Entrées Sorties Arrange Act Assert Arrange Act Assert

  23. Comment tester en Javascript ? @guillaumeehret

  24. Ecrire les tests @guillaumeehret

  25. Exécuter tests unitaires @guillaumeehret

  26. Exécuter tests end to end @guillaumeehret

  27. Place au code @guillaumeehret source : http://zoodroid.blogspot.com/

  28. Fonctionnement de Karma @guillaumeehret 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. Fonctionnement de Protractor @guillaumeehret 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
  30. Fonctionnement de Protractor @guillaumeehret Application Javascript Browser drivers load results

    for reports Fichiers specs.js Drivers JS start & exec protractor.conf.js directConnect: true seulement Chrome et Firefox specs 1 2 3
  31. Protractor et selector @guillaumeehret <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...
  32. Tester une application JS @guillaumeehret https://github.com/javamind/AngularAndTests https://github.com/javamind/AngularAndTestsBackend

  33. Référence @guillaumeehret 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/0.12/index.html 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 2.3 0.12 2.0
  34. Les questions ? @guillaumeehret

  35. Merci @guillaumeehret source : http://giphy.com/