UI Testing Pragmatique avec Cypress (Live Virtual Class)

Développeur web

Le testing ou plus particulièrement le testing front-end est indéniablement dans le top 3 des sujets les plus complexes associés au développement d’applications web.
Face à cette complexité, il est tentant de renoncer mais à quel prix? Certes, il est possible de développer une application sans tests unitaires mais est-ce réellement plus rapide?
Qu’advient-il de la maintenabilité du code quelques mois ou à peine quelques semaines plus tard?
Pourrons-nous refactoriser l’application et la déployer régulièrement en toute sérénité au fur et à mesure qu’elle se complexifie et qu’elle vieillit entre nos mains? Qu’en est-il des tests end-to-end? Sont-ils suffisants?

Ce workshop présente à travers des exercices pratiques, des techniques pragmatiques de testing avec Cypress. Vous y découvrirez également comment écrire des tests compréhensibles, maintenables et surtout rentables.

• Implémenter différents types de test pour vos applications Angular, React, VueJS ou sans framework avec Cypress
• Tester les interactions réseau
• Choisir le meilleur type de tests en fonction du contexte
• Découpler les tests du code afin de réduire les coûts de testing et de maintenance
• Implémenter des tests maintenables et human-readable
• Choisir le bon périmètre pour vos tests
• Comment et quand utiliser des Test Harnesses
• Comment et quand utiliser le Component Testing de Cypress
• Découvrir de nombreuses bonnes pratiques et astuces qui vous permettront d’adopter une stratégie de testing pragmatique et rentable

Introduction au testing

• Pourquoi tester?
• Les différents types de test
• Les stratégies de testing: cornet de glace, pyramide vs rayon de miel

Cypress Core Features

• Developer eXperience
• Rapidité
• Debuggabilité
• Retry-ability
• Cohérence et stabilité

Premier Test

• Mise en place de Cypress
• Mise en place de Cypress avec Nx
• Exercice: Implémenter et lancer un premier test

Fondamentaux Cypress

• Les commandes
• Les assertions
• Exercice: Interagir avec le DOM
• Debugging
• Organisation des tests
• Exercice: Interagir avec les formulaires
• Variables & aliases

Cypress Network Testing

• Avantages et inconvénients des différentes techniques
• Exercice: Intercepter les requêtes
• Exercice: Utiliser des fixtures
• Exercice: Utiliser une sandbox

Retour vers le future

• Exercice: Jouer avec le timer

“Keeping Tests Healthy with DOM Distancing”

• Tests attributes
• Cypress Custom Commands
• Page objects
• Test Harnesses

Test Harnesses

• L’histoire des Test Harnesses
• Comment cela fonctionne
• Exercice: Utilisation des test harnesses
• Exercice: Implémentation de test harnesses

Cypress Component Testing

• Brisons les frontières de l’”isolated testing” avec Cypress Component Testing
• Exercice: Isoler et tester un composant avec Cypress
• Exercice: Réutiliser le test harness

Tester les Interactions

• Stubs & Spies
• Exercice: “Overrider” les dépendances avec l’injection de dépendance et les spies
• Exercice: Tester la communication à base de props, inputs & outputs

Visual Regression Testing

• Tester la présentation
• Détecter les régressions visuelles avec Cypress Component Testing & Percy

Automatisation

• Configuration de la CI
• Reporters
• Cypress Dashboard
• Parallelization

Une attestation de participation sera transmise aux participants