Tester des composants web (avec un Framework)
@berthel350
Florent Berhelot
AYA, l'agence Web de Zenika
@berthel350
Faire du TDD, c'est impossible côté front
Florent Berthelot de 2017
@berthel350
TDD
Test Driven Development
@berthel350
Coder le test
S'assurer qu'il échoue
Faire passer le test au vert
Refactor
Le test est toujours vert
@berthel350
Pyramide des tests
@berthel350
Test Unitaire
Test d'intégration
Test
De
Bout en Bout
@berthel350
Test unitaire
Tu testes une fonction unitairement
@berthel350
Test d'intégration
Tu ne fais pas de mock sur les appels réseau
@berthel350
Test E2E
Tu testes tout, même avec le navigateur
@berthel350
BDD
Behavior Driven Development
@berthel350
Test d'acceptance
Ce sont les tests E2E écrits directement par le PO en gherkin
@berthel350
Test Unitaire
Test d'intégration
Test
De
Bout en Bout
Test d'acceptance
@berthel350
Test Unitaire
Test d'intégration
Test
De
Bout en Bout
@berthel350
Tester, c'est douter !
@berthel350
Florent Berthelot
A tout faux !
... celui de 2017, hein ;)
Test unitaire
Test qui reste en mémoire
Test d'intégration
Test qui se permet de sortir de la RAM
Le réseau, on peut !
Test de bout en bout
Test où il est interdit de bouchonner
Comme pour faire un bon vin !
Test d'acceptance
Test écrit en coordination avec le PO
Enfin, si le PO le fait tout seul, c'est quand même cool !
Test Unitaire
Test d'intégration
Test
De
Bout en Bout
Test d'acceptance
Temps d'éxécution
0
+∞
$
$$$
Coder le test
S'assurer qu'il échoue
Faire passer le test au vert
Refactor
Le test est toujours vert
Coder le test d'acceptance
@berthel350
FrameworkJS
@berthel350
Test E2E
Agnostique du Framework
... mais pas avec protractor
Utilisez Cypress, voir WebdriverIO !
@berthel350
Test d'intégration
Perso j'en fais pas :/
Peut-être l'année prochaine :)
@berthel350
Test unitaire
Simple à mettre en place !
Quel framework ?
@berthel350
Classique Angular
Jasmine + Karma
Karma
Jasmine
Console
Mais y'a du réseau ?
Et on test le navigateur aussi !
@berthel350
Classique React
Jest
Jest
JS DOM
Console
@berthel350
Y'en a plein !
AVA, Mocha, JS.DOM
@berthel350
Frameworks orientés composants
C'est quoi un composant ?
@berthel350
Élément HTML
Propriétés
Vue
État interne
import { Component, Input } from '@angular/core';
@Component({
selector: 'awesome-button',
template: `
<button [ngClass]="{isLiked}" (click)="like()" >
<i class="heart">
{{nbLike}}
</button>
`,
styles: [`
.isLiked { color: red; }
`]
})
export class AwesomeLikeButton {
@Input() nbLike: number;
isLiked: boolean;
like() {
this.isLiked = !this.isLiked;
}
}
@berthel350
Élément HTML
Propriétés
Vue
État interne
Données en entrée
Résultat
Paramètres d'une fonction
Retour
@berthel350
Démo !
@berthel350
Merci !
Et merci aux zenikéens qui m'ont fait grandir !
@berthel350