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

Tester des composants web

By Florent Berthelot

Tester des composants web

Vous trouvez que le Test Driven Development est une utopie en front ? Que le TDD est réservé aux tests côté back-end ? Laissez-moi vous montrer qu'avec un peu de pratique, nous allons tout a fait pouvoir faire du Test-First sur Angular. Nous verrons alors comment progressivement améliorer notre manière de travailler pour faire du TDD et pourquoi pas même faire du Behavior Driven Development ! Les tests étant un investissement au même titre que le code application, nous veillerons à ce qu'ils soient le plus maintenable possible.

  • 209
Loading comments...

More from Florent Berthelot