Le développement front-end implique la création d’applications client visuellement attrayantes et fonctionnelles. Mais il y a un piège; ces applications doivent garantir aux utilisateurs une expérience transparente.

Bien que les tests unitaires et d'intégration soient essentiels pour vérifier la fonctionnalité d'une application, ils peuvent ne pas capturer entièrement les interactions utilisateur typiques. Pour véritablement simuler le parcours d'un utilisateur, vous devez exécuter des tests de bout en bout qui reproduisent les interactions réelles de l'utilisateur. Cela garantira que votre application fonctionne comme vous le souhaitez du début à la fin.

Premiers pas avec les tests de bout en bout à l'aide de Cypress

L'objectif principal des tests de bout en bout dans les applications frontales est de vérifier les résultats plutôt que les détails d'implémentation de la logique métier.

Prenons l'exemple d'un formulaire de connexion. Idéalement, vous testeriez si l'écran de connexion apparaît comme il est censé le faire et fait ce qu'il est censé faire. Essentiellement, les détails techniques sous-jacents ne sont pas importants. L'objectif final est simplement de se mettre à la place de l'utilisateur et d'évaluer l'ensemble de son expérience.

Cyprès est un excellent framework de tests d'automatisation compatible avec certains des les frameworks JavaScript les plus populaires. Sa capacité à exécuter des tests directement dans le navigateur et sa suite complète de fonctionnalités de test rendent les tests transparents et efficaces. Il prend également en charge diverses approches de test, notamment :

• Tests unitaires
• Tests de bout en bout
• Tests d'intégration

Pour écrire des tests de bout en bout pour une application React, considérez ces user stories :

• Un utilisateur peut voir un champ de saisie avec un bouton de soumission correspondant.
• Un utilisateur peut saisir une requête de recherche dans le champ de saisie.
• Après avoir cliqué sur le bouton Soumettre, un utilisateur devrait voir une liste d'éléments affichés juste en dessous du champ de saisie.

En suivant ces user stories, vous pouvez créer une application React simple qui permet à un utilisateur de rechercher des produits. L'application récupérera les données du produit à partir du API facticeJSON et affichez-le sur la page.

Vous pouvez trouver le code de ce projet dans son GitHub dépôt

Mettre en place un projet React

Pour commencer, créer un projet React en utilisant Vite ou utilisez le Commande create-react-app pour configurer une application React de base. Une fois le processus d'installation terminé, continuez et installez le package Cypress en tant que dépendance de développement dans votre projet :

npm install cypress --save-dev

Maintenant, mettez à jour votre package.json fichier en ajoutant ce script :

"test": "npx cypress open"

Créer un composant fonctionnel

Dans le src répertoire, créez un dossier et nommez-le Composants. Dans ce dossier, ajoutez un nouveau produits.jsx fichier et incluez le code ci-dessous.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (

"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>


Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

Au sein du composant fonctionnel, définissez un utiliserEffet hook, qui exécute une fonction asynchrone qui récupère les données du produit en fonction de la requête de recherche fournie.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Mettre à jour le fichier App.jsx

Maintenant, mettez à jour le App.jsx fichier avec le code suivant :

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');
const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }
return (



Cypress Testing Library tutorial</h1>
"input">Input</label>

 id="text"
 type="text"
 ref={searchInputRef}
 />


"btn" type="button" onClick={handleSubmit}>Submit</button>
"products-component" searchInput={searchInput} /> 
 </div>
 )
}
exportdefault App

Allez-y et démarrez le serveur de développement.

npm run dev

Super! Vous devriez pouvoir récupérer des données produit spécifiques à partir de l'API JSON factice.

Configurer l'environnement de test

Tout d’abord, exécutez la commande test script sur votre terminal :

npm run test

Cette commande déclenchera et ouvrira le client Cypress. Allez-y et cliquez sur le Tests E2E bouton.

Ensuite, cliquez sur Continuer pour ajouter des fichiers de configuration Cypress.

Une fois ce processus terminé, vous devriez voir un nouveau répertoire de tests Cypress dans votre projet. De plus, le client Cypress ajoute automatiquement le fichier cypress.config.js. Vous pouvez mettre à jour ce fichier pour personnaliser davantage divers aspects de votre environnement de test, de votre comportement et de votre configuration.

Écrire des tests de bout en bout à l'aide de Cypress

Pour écrire votre premier test, vous devez sélectionner le navigateur dans lequel le test s'exécutera. Sélectionnez votre option préférée parmi celles disponibles dans le client Cypress.

Cypress lancera une version simplifiée du navigateur que vous avez choisi, créant un environnement contrôlé pour exécuter des tests.

Sélectionnez le Créer une nouvelle spécification option pour créer votre fichier de test.

Rendez-vous dans votre éditeur de code, ouvrez le cypress/e2e/App.spec.cy.js et mettez à jour le contenu de ce fichier avec le code suivant.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

En revenant aux user stories soulignées ci-dessus, cette suite de tests spécifique vérifie deux aspects :

• Que le navigateur affiche un champ de saisie et un bouton de soumission sur la page.
• Que l'utilisation peut saisir une requête de recherche.

Comme d'autres outils de test JavaScript tels que Jest et Supertest, Cypress utilise une syntaxe et un langage déclaratifs pour définir des cas de test.

Pour exécuter le test, revenez à la version simplifiée du navigateur gérée par Cypress et choisissez le fichier de test spécifique que vous souhaitez exécuter.

Cypress exécutera les tests et affichera les résultats dans le panneau de gauche du terrain de jeu de test.

Simulation des processus de candidature

Pour vous assurer que vous parcourez et testez l'intégralité du parcours utilisateur (dans ce cas d'utilisation spécifique), vous devez vérifier que l'application peut prendre en compte les entrées de l'utilisateur, récupérer les données requises et enfin afficher les données sur le navigateur. page.

Pour plus de clarté, vous pouvez créer un nouveau fichier de test pour accueillir une suite de tests différente dans le e2e dossier. Vous pouvez également choisir d'inclure toutes les suites de tests qui explorent un scénario de test particulier dans un seul fichier de test.

Allez-y et créez un nouveau Produits.spec.cy.js fichier dans le e2e dossier. Dans ce fichier, incluez le code suivant.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Cette suite de tests vérifie qu'une fois qu'un utilisateur soumet un élément de recherche particulier, l'application récupère et affiche les données sur la page du navigateur.

Pour ce faire, il simule le processus de saisie de l'entrée de recherche, en cliquant sur le bouton Soumettre, en attendant le produits à charger, puis en vérifiant la présence des éléments du produit, ainsi que des détails tels que le titre et le prix. Essentiellement, il capture et vérifie l’intégralité de l’expérience du point de vue de l’utilisateur.

Simulation d'erreurs et de réponses

Vous pouvez également simuler divers scénarios d'erreur et réponses dans vos tests Cypress.

Créer un nouveau Erreur.spec.cy.js fichier dans le e2e répertoire et incluez le code suivant.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');
const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();
 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Cette suite de tests vérifie qu'un message d'erreur s'affiche lorsqu'un utilisateur saisit une requête de recherche incorrecte.

Pour que le scénario de test réussisse, il utilise Cypress intercepter fonction pour interrompre le réseau et simuler une erreur de demande réseau. Il vérifie ensuite qu'après avoir saisi une requête de recherche incorrecte dans le champ de saisie et lancé le processus de récupération, un message d'erreur - Produit introuvable - s'affiche visiblement sur la page.

Ce résultat indique que le mécanisme de gestion des erreurs fonctionne comme prévu.

Utiliser Cypress dans le développement piloté par les tests

Les tests sont une exigence fondamentale du développement, mais ils peuvent également être un processus long. Cependant, l'intégration de Cypress peut apporter la pure satisfaction de voir vos cas de test fonctionner ensemble.

Cypress est un excellent outil pour implémenter le développement piloté par les tests dans les applications. Non seulement il fournit une suite complète de fonctionnalités de test, mais il prend également en charge diverses stratégies de test. Pour tirer le meilleur parti de Cypress, allez-y et explorez sa documentation officielle pour découvrir bien plus de capacités de test.