Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
    développer en toute sérénité
    Guillaume EHRET - @guillaumeehret
    Tests Javascript
    Snow Camp 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    source: http://giphy.com/
    moi c’est naviguer à vue
    Snow Camp 2016

    View full-size slide

  8. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    source: http://giphy.com/
    la peur des régressions
    Snow Camp 2016

    View full-size slide

  9. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    source: http://giphy.com/
    Les tests nous permettent de
    coder sereinement

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Snow Camp 2016
    source: http://www.dezeen.com
    un meilleur design

    View full-size slide

  13. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    parfois la seule doc à jour source: http://giphy.com/
    Snow Camp 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Snow Camp 2016
    Méthode AAA source: http://giphy.com/
    Entrées Sorties
    Arrange Act Assert

    View full-size slide

  24. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret

    View full-size slide

  25. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Snow Camp 2016
    écrire les tests source: http://giphy.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  29. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Snow Camp 2016
    jetons nous à l’eau source: http://giphy.com/

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  32. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Les sélecteurs source: http://giphy.com/






    ..etc...


    element(by.id('foo'))
    element(by.tagName('foo'))
    element(by.model('foo'))
    element(by.repeater('foo in foos'))
    ..etc...

    View full-size slide

  33. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Snow Camp 2016
    Angular mais pas que source: http://giphy.com/

    View full-size slide

  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;

    View full-size slide

  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

    View full-size slide

  36. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    Les sources source: http://giphy.com/
    https://github.com/devmind/test-javascript

    View full-size slide

  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

    View full-size slide

  38. @guillaumeehret
    Snow Camp 2016
    @guillaumeehret
    questions

    View full-size slide

  39. @guillaumeehret
    Snow Camp 2016
    Merci
    @guillaumeehret

    View full-size slide