Les tests en Javascript

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=47 Dev-Mind
October 24, 2015

Les tests en Javascript

Les slides de ma session donnée sur les tests à SoftShake 2015. Le but était de montrer que la mise en place des tests est simple quand nous utilisons les bons outils

D3bcad37b1ec0fc8ecdeb199e54a61e4?s=128

Dev-Mind

October 24, 2015
Tweet

Transcript

  1. @guillaumeehret #softshake15 Tests en Javascript un pas vers la sérénité

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

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

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

  5. @guillaumeehret #softshake15 @guillaumeehret et vous ?

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

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

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

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

    coder sereinement
  10. @guillaumeehret #softshake15 @guillaumeehret source: http://giphy.com/ #softshake15

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

    également implicitement
  12. @guillaumeehret #softshake15 @guillaumeehret #softshake15 source: http://www.dezeen.com un meilleur design

  13. @guillaumeehret #softshake15 @guillaumeehret parfois la seule doc à jour source:

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

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

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

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

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

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

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

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

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

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

    Arrange Act Assert
  24. @guillaumeehret #softshake15 @guillaumeehret

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

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

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

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

  30. @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
  31. @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
  32. @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...
  33. @guillaumeehret #softshake15 @guillaumeehret #softshake15 Angular mais pas que source: http://giphy.com/

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

  37. @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
  38. @guillaumeehret #softshake15 @guillaumeehret questions

  39. @guillaumeehret #softshake15 Merci @guillaumeehret