Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

et vous ? @guillaumeehret

Slide 4

Slide 4 text

Tester en javascript @guillaumeehret

Slide 5

Slide 5 text

Pourquoi tester son appli JS ? @guillaumeehret

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Qu’est ce qu’un test ? @guillaumeehret

Slide 14

Slide 14 text

System under test @guillaumeehret

Slide 15

Slide 15 text

System under test @guillaumeehret

Slide 16

Slide 16 text

Les collaborateurs @guillaumeehret

Slide 17

Slide 17 text

Test unitaire @guillaumeehret

Slide 18

Slide 18 text

Mocker ou stuber les collaborateurs @guillaumeehret

Slide 19

Slide 19 text

Test end to end @guillaumeehret

Slide 20

Slide 20 text

System under test @guillaumeehret

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Comment tester en Javascript ? @guillaumeehret

Slide 24

Slide 24 text

Ecrire les tests @guillaumeehret

Slide 25

Slide 25 text

Exécuter tests unitaires @guillaumeehret

Slide 26

Slide 26 text

Exécuter tests end to end @guillaumeehret

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Les questions ? @guillaumeehret

Slide 35

Slide 35 text

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