Javascript in a continuous integration environment

Le javascriptUn ami du php souvent délaissé lors des tests

PHP’tit Déj«Intégration Continue»

16.05.2013 - Luxembourg

mercredi 22 mai 13

Présentation

Frédéric Dewinne= Consultant @ VA Consulting= Architecte logiciel, formateur, coach= Expert PHP / JS depuis 2007

mercredi 22 mai 13

Le javascript

mercredi 22 mai 13

Le javascript

≠ langage de présentation

mercredi 22 mai 13

Le javascript

≠ langage de présentation

= langage de programmation

mercredi 22 mai 13

Le javascript

≠ langage de présentation

= langage de programmation

= langage événementiel

mercredi 22 mai 13

Le javascript

≠ langage de présentation

= langage de programmation

= langage événementiel

= s’exécute sur un client, un serveur ou isolé (applications Windows 8)

mercredi 22 mai 13

Le javascript

≠ langage de présentation

= langage de programmation

= langage événementiel

= s’exécute sur un client, un serveur ou isolé (applications Windows 8)

mercredi 22 mai 13

Problématique dans le cadre d’un site web

mercredi 22 mai 13

Problématique dans le cadre d’un site web

= le client utilisé(OS, type et version de navigateur, ...)

mercredi 22 mai 13

Problématique dans le cadre d’un site web

= le client utilisé(OS, type et version de navigateur, ...)

= la testabilité du code

mercredi 22 mai 13

Problématique dans le cadre d’un site web

= le client utilisé(OS, type et version de navigateur, ...)

= la testabilité du code

= la détection des erreurs

mercredi 22 mai 13

Comment procéder dès lors ?

mercredi 22 mai 13

Comment procéder dès lors ?

= écrire du code réutilisableplugins, widgets, prototypes, ...

mercredi 22 mai 13

Comment procéder dès lors ?

= écrire du code réutilisableplugins, widgets, prototypes, ...

= et testableTest Driven Development (TDD)

mercredi 22 mai 13

Comment procéder dès lors ?

= écrire du code réutilisableplugins, widgets, prototypes, ...

= et testableTest Driven Development (TDD)

= tester le code sur différents clients

mercredi 22 mai 13

JsTestDriver

mercredi 22 mai 13

JsTestDriver= initié par Google

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

= support d’autres frameworks de test

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

= support d’autres frameworks de test

= serveur http pour une exécution client / serveur

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

= support d’autres frameworks de test

= serveur http pour une exécution client / serveur

= proxy web pour les dépendances

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

= support d’autres frameworks de test

= serveur http pour une exécution client / serveur

= proxy web pour les dépendances

= exécutable en ligne de commande

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

= support d’autres frameworks de test

= serveur http pour une exécution client / serveur

= proxy web pour les dépendances

= exécutable en ligne de commande

= plugins pour IDE

mercredi 22 mai 13

JsTestDriver= initié par Google

= framework de test

= support d’autres frameworks de test

= serveur http pour une exécution client / serveur

= proxy web pour les dépendances

= exécutable en ligne de commande

= plugins pour IDE

= plugin de code coverage

mercredi 22 mai 13

ExempleTestCase('form-collection-test', {

"test add fieldset on add button click": function () {

/*:DOC collection = <div><fieldset><input name="toto[0]" /></fieldset></div>*/

/*:DOC addButton = <button></button>*/

$(this.collection).formCollection({

addButtonSelector: this.addButton,

template: '<fieldset><input name="toto[__index__]" /></fieldset>',

childrenSelector: 'fieldset'

});

$(this.addButton).click();

assertEquals(2, $(this.collection).find('fieldset').length);

}

});

mercredi 22 mai 13

mercredi 22 mai 13

Et ensuite ?

mercredi 22 mai 13

Et ensuite ?

= exécuter les tests de manière automatique

mercredi 22 mai 13

Jenkins

mercredi 22 mai 13

Jenkins

= démarrage du serveur

mercredi 22 mai 13

Jenkins

= démarrage du serveur

= gestion des browsers

mercredi 22 mai 13

Jenkins

= démarrage du serveur

= gestion des browsers

= aggrégation des résultats de tests

mercredi 22 mai 13

Jenkins

= démarrage du serveur

= gestion des browsers

= aggrégation des résultats de tests

= analyse du code coverage

mercredi 22 mai 13

Résultats

mercredi 22 mai 13

Des questions ?

mercredi 22 mai 13

Merci

Frédéric Dewinnetwitter => @dwebconsulting

email => frederic.dewinne@vaconsulting.lu

mercredi 22 mai 13