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..

Transcript

1. BreizhCamp 2015 #BzhCmp
   #testAppJS
   BreizhCamp 2015 #BzhCmp
   Tester une application JS
   Jasmine, Karma, Protractor
   Guillaume EHRET - @guillaumeehret
   Dev-Mind - @DevMind_FR
   

   View Slide

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

   View Slide

3. et vous ?
   @guillaumeehret
   

   View Slide

4. Tester en javascript
   @guillaumeehret
   

   View Slide

5. Pourquoi tester son appli JS ?
   @guillaumeehret
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. System under test
    @guillaumeehret
    

    View Slide

15. System under test
    @guillaumeehret
    

    View Slide

16. Les collaborateurs
    @guillaumeehret
    

    View Slide

17. Test unitaire
    @guillaumeehret
    

    View Slide

18. Mocker ou stuber les collaborateurs
    @guillaumeehret
    

    View Slide

19. Test end to end
    @guillaumeehret
    

    View Slide

20. System under test
    @guillaumeehret
    

    View Slide

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

    View Slide

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

    View Slide

23. Comment tester en Javascript ?
    @guillaumeehret
    

    View Slide

24. Ecrire les tests
    @guillaumeehret
    

    View Slide

25. Exécuter tests unitaires
    @guillaumeehret
    

    View Slide

26. Exécuter tests end to end
    @guillaumeehret
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. Protractor et selector
    @guillaumeehret
    
    
    
    
    
    
    ..etc...
    
    
    element(by.id('foo'))
    element(by.tagName('foo'))
    element(by.model('foo'))
    element(by.repeater('foo in foos'))
    ..etc...
    

    View Slide

32. Tester une application JS
    @guillaumeehret
    https://github.com/javamind/AngularAndTests
    https://github.com/javamind/AngularAndTestsBackend
    

    View Slide

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
    

    View Slide

34. Les questions ?
    @guillaumeehret
    

    View Slide

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

    View Slide