https://github.com/AlexisTessier/slot-animation-testing
- Faire bouger un rond dans chrome
- Tester qu'il bouge bien
Bref, le but va être de tester une animation
- Tache complexe à automatiser
- Tests de non régression uniquement (Pas de TDD).
- Dans les faits, une validation humaine est peut être plus pertinente...
- Envisager l'automatisation des tests d'animations :
- sur des animations critiques (UX)
- sur une librairie de composants
- Pour le challenge et pour repousser les limites de ce qui est testable...
- Spoiler: La séparation des responsabilités va nous aider
- Mieux comprendre ce qu'est une animation
- Une vidéo fort sympathique ma foi : https://vimeo.com/93206523
- Une autre vidéo rapide : https://vimeo.com/112435401
- Une vidéo qui explique plus en détails un peu plus chaque principe : https://www.youtube.com/watch?v=uDqjIdI4bF4
- Les propriétés animées sont plus importantes que le fait d'utiliser du CSS ou du JS
- Les propriétés transform et opacity peuvent être utilisées sans crainte.
- Avec transform, on peut:
| Scale | Rotate | Translate |
|---|---|---|
 |
 |
 |
| Un switch button | Une progress bar |
|---|---|
 |
 |
- Dans tous les cas, on utilise un snapshot
- Test de régression visuel : https://www.youtube.com/watch?v=1wHr-O6gEfc (peut sembler un poil complexe mais en fait 👍)
- Tester les computedStyles des éléments (peut sembler plus simple mais en fait 😢)
- Dans les 2 cas, la complexité provient du pilotage du navigateur via le code, pas tant du système de diff utilisé (image vs computed styles)
- 👍 animation CSS accessibles et simple à utiliser
- 😢 impossible de tester l'animation car les snapshots manquent de précision (délai irréductible entre le début de l'animation et le moment où on fait effectivement la mesure)
- 😢 difficile à rendre dynamique (à lier au js)
- 😢 courbes d’easing limitées
Tester l'UI est moins compliqué que prévu dans ce cas, car il ne s'agit pas de tests End to end.
- 😢 un peu plus complexe à mettre en place (mais pas tant que ça donc 👍 en fait)
- 😢 Toujours impossible de tester l'animation pour les même raisons
- 👍 dynamiques au besoin
- 👍 courbes d’easing ultra libres
On a besoin de pouvoir faire des screenshots de l'animation à des étapes régulières et précises.
Basiquement, une animation, c'est :
| une fonction d’interpolation (tween) | une fonction de rendu (renderer) | une fonction d'easing | |
|---|---|---|---|
| Responsabilité | fait varier une valeur au cours du temps | affiche la valeur interpolée sous une forme graphique | gère l’accélération de l'interpolation |
| Testabilité | ✅ | ✅ | ✅ |
| Outils de test | mocks des méthodes de gestion du temps (setTimeout, setInterval, Date.now...) ou en directement d'une méthode de tween tierce | Headless browser, Screenshot & comparaison (diffing) visuel | Test classique ou à base de snapshot |
...on ne pourrait pas juste mocker les méthodes de gestion du temps dés le début ?
- Oui, on pourrait...
- Mais ça ne fonctionne toujours que si l'animation est gérée en js...
- Et puis la séparation des responsabilités, c'est important !
React motion ne gère pas ses interpolations de manière classique.
- Il n'utilise pas de notion d'easing.
- On ne choisit pas la durée de l'interpolation.
- À la place, on donne une rigidité et une élasticité à l'élément à animer.
- React motion s'occupe ensuite, frame par frame d'interpoler la valeur jusqu'à sa valeur finale.