¡ ATTENTION !

Cette présentation s'adresse à un public de développeurs aguerris

Les tests ci-après ont été réalisés par un professionnel

N'hésitez pas à reproduire cela chez vous...

Aucun site web n'a été maltraité durant la préparation ;

Malgré l'usage d'une dose conséquente de caféine...

Passez un agréable moment 🤙

bit.ly/3mhXR6w



TESTS

 



ABC...

 

WHO AM I !?

Damien CHAZOULE

Developer

JavaScript

FullStack

dmnchzl@pm.me

www.dmnchzl.dev

LinkedIn

damien-chazoule

@dmn_chzl

dev.to

www.dev.to/dmnchzl

GitHub

www.github.com/dmnchzl

Medium

dmnchzl.medium.com

GitLab

www.gitlab.com/dmnchzl

ONCE UPON A TIME...

Vérifier le bon fonctionnement d'une partie de l'application

1994

1er Tests Unitaires pour le langage SmallTalk 👉 SUnit

Une démarche Agile ? Yes ! eXtreme Programming ➕ Pattern TDD

Signaler les éventuelles régressions en phase de maintenance

1997

2001

Tests Unitaires pour le langage 👉 JUnit (by Kent Beck)

Nouvel apparition dans famille xUnit 👉 JSUnit

DIFFÉRENTS TYPES DE TESTS

🟢 Les tests unitaires "classiques"

🟠 Les tests orientés composants

🔴 Les tests de bout-en-bout (E2E)

Tester les fonctions / les algorithmes / etc...

Tester le rendu d'un composant / d'un ensemble de composants

Tester un parcours utilisateur

Setup

Execution

Assertion

Reset



TESTING

 


SIMPLE

BASIC

 

MAKE YOUR CHOICE...

Next Generation Is Here : Vitest 🚀

Vitest
Jest

The "All-in-One" : Jest (by Facebook)

Moteur de tests unitaires + librairies d'assertions

Mocha
Chai

Mocha x Chai (x Sinon)

describe / suite / it / test / assert.* / expect()

Jasmine

Karma x Jasmine (ex JSUnit)

Moteur de tests unitaires / librairies d'assertions

HOW TO TEST ?

EXEMPLE(S)

Run ?

Run !

EXEMPLE(S)

Run ?

Run !



TESTING

 



COMPONENT

 

MAKE YOUR CHOICE...

Pattern Behavior Driven Development (BDD)

Enzyme (by AirBnB)

jQuery like API

Shallow / Mount Component(s)

Airbnb

Testing Library

Semantic API (queryBy* / getBy* / findBy*)

Framework Agnostic (Angular / React / Vue / Svelte / Cypress...)

Testing Library

HOW TO TEST ?

EXEMPLE(S)

Run ?

MOCK SERVICE WORKER (MSW)

Interceptions des requêtes au niveau du réseau

Develop

Debug

Test

SUPPORT :

GraphQL

REST

MODE :

Server

Service Worker

LIVE CODE

HOW TO...

Mock ?

Mocked !

HOW TO...

Run ?



TESTING

 


END
TO
END
 

MAKE YOUR CHOICE...

Playwright

Initialisation rapide / Configuration simple

Playwright

Utilisation d'un navigateur "headless" (Chrome, Firefox, WebKit)

Multi-langages : JavaScript / Java / Python / C#

Cypress (x Testing Library)

Un parcours utilisateur automatique et graphique

Cypress
Testing Library

Exécution dans le navigateur (Chrome, Firefox, Edge)

Documentation x Communauté 👍

LIVE CODE

PLAYWRIGHT / CODEGEN

HOW TO...

CODE COVERAGE

Métrique déterminant le taux de code exécuté

Run ?

Run !

LE MOT DE LA FIN

Tester c'est douter

Test + Coverage Reporting x SonarQube

POUR ALLER PLUS LOIN...

Des fonctionnalités plus couteuses ? Oui, et non...

La qualité au cœur de la pérennité d'un projet !

Tester c'est fun 😀

Mutation Testing : Why Not ? 🤔⁠⁠

THANK YOU !

QUESTION(S) ?

SOURCES

Jasmine
Vitest
Testing Library
Playwright
Mocha
Jasmine
Chai
Vite
Jest
Cypress
Simple Icons
Airbnb
reveal.js
React

ABC... Tests

By Damien Chazoule

ABC... Tests

Les tests unitaires pour le développement Web

  • 310