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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. @guillaumeehret
   #softshake15
   @guillaumeehret
   et vous ?
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. @guillaumeehret
    #softshake15
    @guillaumeehret
    parfois la seule doc à jour source: http://giphy.com/
    #softshake15
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. @guillaumeehret
    #softshake15
    @guillaumeehret
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

29. @guillaumeehret
    #softshake15
    @guillaumeehret
    #softshake15
    jetons nous à l’eau source: http://giphy.com/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. @guillaumeehret
    #softshake15
    @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 Slide

33. @guillaumeehret
    #softshake15
    @guillaumeehret
    #softshake15
    Angular mais pas que source: http://giphy.com/
    

    View Slide

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;
    

    View Slide

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
    

    View Slide

36. @guillaumeehret
    #softshake15
    @guillaumeehret
    Les sources source: http://giphy.com/
    https://github.com/devmind/test-javascript
    

    View Slide

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
    

    View Slide

38. @guillaumeehret
    #softshake15
    @guillaumeehret
    questions
    

    View Slide

39. @guillaumeehret
    #softshake15
    Merci
    @guillaumeehret
    

    View Slide