Ecrire des tests en Javascript

Slides présentés au JUG Lyon le 26 janvier 2017. Le principe étant de montrer à un développeur full stack Java comme moi que les tests en Javascript sont aussi importants que ceux en Java et aussi simples à mettre en place

Transcript

1. @guillaumeehret
   Lyon JUG
   développer en toute sérénité
   Tests Javascript
   Guillaume EHRET - @guillaumeehret
   Lyon JUG
   

   View Slide

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

   View Slide

3. @guillaumeehret
   Lyon JUG
   

   View Slide

4. @guillaumeehret
   Lyon JUG
   Les 20 & 21 avril 2017
   https://www.mix-it.fr/
   CPE LYON
   

   View Slide

5. @guillaumeehret
   Lyon JUG
   Présentation
   Pourquoi les tests sont importants ?
   Le Javascript n’est pas sale
   Exécuter des tests en JavaScript
   Jasmine comment écrire des tests
   

   View Slide

6. @guillaumeehret
   Lyon JUG
   System under test
   

   View Slide

7. @guillaumeehret
   Lyon JUG
   System under test
   

   View Slide

8. @guillaumeehret
   Lyon JUG
   Les collaborateurs
   

   View Slide

9. @guillaumeehret
   Lyon JUG
   Test unitaire
   

   View Slide

10. @guillaumeehret
    Lyon JUG
    Mocker les collaborateurs
    

    View Slide

11. @guillaumeehret
    Lyon JUG
    Tests e2e
    

    View Slide

12. @guillaumeehret
    Lyon JUG
    Boite noire
    

    View Slide

13. @guillaumeehret
    Lyon JUG
    Entrées Sorties
    Boite noire
    

    View Slide

14. @guillaumeehret
    Lyon JUG
    Entrées Sorties
    Arrange Act Assert
    Méthode AAA
    

    View Slide

15. @guillaumeehret
    Lyon JUG
    Présentation
    Pourquoi les tests sont importants ?
    Le Javascript n’est pas sale
    Exécuter des tests en JavaScript
    Jasmine comment écrire des tests
    

    View Slide

16. @guillaumeehret
    Lyon JUG
    Lorsque vous codez,
    est ce que vous aimez ?
    

    View Slide

17. @guillaumeehret
    Lyon JUG
    source: http://giphy.com/
    naviguer à vue ?
    

    View Slide

18. @guillaumeehret
    Lyon JUG
    source: http://giphy.com/
    Les regressions ?
    

    View Slide

19. @guillaumeehret
    Lyon JUG
    Les tests vous aident à coder
    sereinement
    

    View Slide

20. @guillaumeehret
    Lyon JUG
    source: http://giphy.com/
    Design
    

    View Slide

21. @guillaumeehret
    Lyon JUG
    source: http://giphy.com/
    Documentation
    

    View Slide

22. @guillaumeehret
    Lyon JUG
    Présentation
    Pourquoi les tests sont importants ?
    Le Javascript n’est pas sale
    Exécuter des tests en JavaScript
    Jasmine comment écrire des tests
    

    View Slide

23. @guillaumeehret
    Lyon JUG
    …..
    

    View Slide

24. @guillaumeehret
    Lyon JUG
    var x = 0.1;
    var y = 0.2;
    Que vaut x+y ?
    

    View Slide

25. @guillaumeehret
    Lyon JUG
    var x = 0.1;
    var y = 0.2;
    Que vaut x+y ?
    x+y = 0.30000000000000004
    Floating point problem
    

    View Slide

26. @guillaumeehret
    Lyon JUG
    var color = [];
    color[1] = 'red';
    Que vaut color.length ?
    

    View Slide

27. @guillaumeehret
    Lyon JUG
    var color = [];
    color[1] = 'red';
    Que vaut color.length ?
    color.length = 2
    Array length is not size
    

    View Slide

28. @guillaumeehret
    Lyon JUG
    function status(x) {
    if (x = 10) {
    return 'win';
    }
    return 'loose';
    }
    Que vaut status(3) ?
    

    View Slide

29. @guillaumeehret
    Lyon JUG
    function status(x) {
    if (x = 10) {
    return 'win';
    }
    return 'loose';
    }
    Que vaut status(3) ?
    win
    Accidentally using assignment operator
    

    View Slide

30. @guillaumeehret
    Lyon JUG
    Que vaut
    true + 4 ?
    5 + '4' ?
    

    View Slide

31. @guillaumeehret
    Lyon JUG
    Que vaut
    true + 4 ?
    5 + '4' ?
    true + 4 = 5
    5 + '4' = '54'
    JavaScript often convert value in number
    

    View Slide

32. @guillaumeehret
    Lyon JUG
    source: http://giphy.com/
    Don’t be afraid
    

    View Slide

33. @guillaumeehret
    Lyon JUG
    Présentation
    Pourquoi les tests sont importants ?
    Le Javascript n’est pas sale
    Exécuter des tests en JavaScript
    Jasmine comment écrire des tests
    

    View Slide

34. @guillaumeehret
    Lyon JUG
    

    View Slide

35. @guillaumeehret
    Lyon JUG
    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

36. @guillaumeehret
    Lyon JUG
    source: http://giphy.com/
    

    View Slide

37. @guillaumeehret
    Lyon JUG
    Présentation
    Pourquoi les tests sont importants ?
    Le Javascript n’est pas sale
    Exécuter des tests en JavaScript
    Jasmine comment écrire des tests
    

    View Slide

38. @guillaumeehret
    Lyon JUG
    

    View Slide

39. @guillaumeehret
    Lyon JUG
    Lisibilité
    

    View Slide

40. @guillaumeehret
    Lyon JUG
    Lisibilité
    Maintenabilité
    

    View Slide

41. @guillaumeehret
    Lyon JUG
    Lisibilité
    Maintenabilité
    Confiance
    

    View Slide

42. @guillaumeehret
    Lyon JUG
    Questions
    

    View Slide

43. @guillaumeehret
    Lyon JUG
    https://github.com/Dev-Mind/lyonjug-testjs
    

    View Slide

44. @guillaumeehret
    Lyon JUG
    Merci
    

    View Slide