20
Stratégie de tests ParisJS #35

Paris js#35 - Stratégie de tests d'une application MVC

Embed Size (px)

DESCRIPTION

Présentation d'une stratégie de tests : - la façon de gérer l'asynchronisme d'une application one page BackboneJS, ou plus globalement d'une application MVC - la façon de gérer les requêtes aux API via un fake server sinon Pour plus d'infos, des retours ou questions : @gmajoulet sur Twitter

Citation preview

Page 1: Paris js#35 - Stratégie de tests d'une application MVC

Stratégie de testsParisJS #35

Page 2: Paris js#35 - Stratégie de tests d'une application MVC

Présentation

● Développeur JavaScript● Bientôt 2 ans chez Wisembly

Page 3: Paris js#35 - Stratégie de tests d'une application MVC

Objectifs

● Retour d’expérience● Comment tester une app MVC● Revue des solutions mises en oeuvre● Exemples de code

Page 4: Paris js#35 - Stratégie de tests d'une application MVC

Wisembly

Page 5: Paris js#35 - Stratégie de tests d'une application MVC

Wisembly

Page 6: Paris js#35 - Stratégie de tests d'une application MVC

Une test suite

● Pourquoi● Quels objectifs

Page 7: Paris js#35 - Stratégie de tests d'une application MVC

Techno frontend

● BackboneJS● Backbone Layout Manager● Backbone Relational● WebSockets

Page 8: Paris js#35 - Stratégie de tests d'une application MVC

Techno de tests

● Mocha / expect● Sinon● PhantomJS / Mocha-phantomjs

Page 9: Paris js#35 - Stratégie de tests d'une application MVC

Choix du type de tests

● Unitaires● Fonctionnels

Page 10: Paris js#35 - Stratégie de tests d'une application MVC

Premier test

My first test It should spread some love ‘Tendresse et chocolat’ should be a string

Page 11: Paris js#35 - Stratégie de tests d'une application MVC

Premier test de l’app

● On clique sur le premier élément du menu● On vérifie qu’il y a 4 items sur la page

Page 12: Paris js#35 - Stratégie de tests d'une application MVC

Test asynchrone bullshit

● Une fois le test terminé, on exécute `done`

Page 13: Paris js#35 - Stratégie de tests d'une application MVC

Test asynchrone et dispatcher

● On trigger des events à chaque `render`

Page 14: Paris js#35 - Stratégie de tests d'une application MVC

Bien cloisonner les tests

● Les tests ne doivent pas être inter dépendants

● S’assurer que toutes les actions asynchrones sont terminées

Page 15: Paris js#35 - Stratégie de tests d'une application MVC

Promises manager

● Stocker toutes les promises `request` et `render`

● afterAll filtrable par namespace

Page 16: Paris js#35 - Stratégie de tests d'une application MVC

Test asynchrone indépendant

Page 17: Paris js#35 - Stratégie de tests d'une application MVC

Requête API

● Que fait on de cette data● C’est long● Browsers, mises à jour

Page 18: Paris js#35 - Stratégie de tests d'une application MVC

Fake server

● Sinon.js● Avantages

○ Qualité○ Hygiène de la test suite○ Process

● Inconvénients○ Mise en place (selon les cas)○ Maintenance

Page 19: Paris js#35 - Stratégie de tests d'une application MVC

Fake server - mise en place

● Facile et rapide à mettre en place● Parfois complexe de simuler l’API

Page 20: Paris js#35 - Stratégie de tests d'une application MVC

Merci

Des questions, des conseils ?

Twitter : @gmajoulet