Lo sviluppo del frontend prevede la creazione di app visivamente accattivanti e funzionali rivolte al cliente. Ma c'è un problema; queste applicazioni devono garantire agli utenti un'esperienza fluida.

Sebbene i test unitari e di integrazione siano essenziali per verificare la funzionalità di un'applicazione, potrebbero non catturare interamente le tipiche interazioni dell'utente. Per simulare realmente il percorso di un utente, è necessario eseguire test end-to-end che replichino le effettive interazioni dell'utente. Ciò garantirà che la tua applicazione funzioni come previsto dall'inizio alla fine.

Iniziare con i test end-to-end utilizzando Cypress

Lo scopo principale dei test end-to-end nelle applicazioni front-end è verificare i risultati piuttosto che i dettagli di implementazione della logica di business.

Prendiamo come esempio un modulo di accesso. Idealmente, dovresti verificare se la schermata di accesso si apre come dovrebbe e se fa quello che deve fare. In sostanza, i dettagli tecnici sottostanti non sono importanti. L'obiettivo finale è semplicemente mettersi nei panni dell'utente e valutare la sua intera esperienza.

Cipresso è un ottimo framework di test di automazione compatibile con alcuni di i framework JavaScript più popolari. La sua capacità di eseguire test direttamente nel browser e la sua suite completa di funzionalità di test rendono i test semplici ed efficienti. Supporta inoltre vari approcci di test, tra cui:

• Test unitari
• Test end-to-end
• Test di integrazione

Per scrivere test end-to-end per un'applicazione React, considera queste storie utente:

• Un utente può vedere un campo di input con un pulsante di invio corrispondente.
• Un utente può inserire una query di ricerca nel campo di input.
• Dopo aver fatto clic sul pulsante di invio, l'utente dovrebbe vedere un elenco di elementi visualizzati proprio sotto il campo di input.

Seguendo queste storie utente, puoi creare una semplice applicazione React che consenta a un utente di cercare prodotti. L'app recupererà i dati del prodotto da API DummyJSON e visualizzarlo sulla pagina.

Puoi trovare il codice di questo progetto nel suo file GitHub deposito

Configura un progetto React

Per iniziare, creare un progetto React utilizzando Vite oppure usa il comando create-react-app per configurare un'applicazione React di base. Una volta completato il processo di installazione, vai avanti e installa il pacchetto Cypress come dipendenza dev nel tuo progetto:

npm install cypress --save-dev

Ora aggiorna il tuo pacchetto.json file aggiungendo questo script:

"test": "npx cypress open"

Creare un componente funzionale

Nel src directory, creare una cartella e darle un nome componenti. All'interno di questa cartella, aggiungine una nuova prodotti.jsx file e includere il codice seguente.

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>
 );
}

All'interno del componente funzionale, definire a useEffect hook, che esegue una funzione asincrona che recupera i dati del prodotto in base alla query di ricerca fornita.

 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]);

Aggiorna il file App.jsx

Ora aggiorna il file App.jsx file con il seguente codice:

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

Vai avanti e avvia il server di sviluppo.

npm run dev

Grande! Dovresti essere in grado di recuperare dati di prodotto specifici dall'API JSON fittizia.

Configurare l'ambiente di test

Innanzitutto, esegui il comando test script sul tuo terminale:

npm run test

Questo comando attiverà e aprirà il client Cypress. Vai avanti e fai clic su Test E2E pulsante.

Quindi, fai clic su Continua per aggiungere file di configurazione di Cypress.

Una volta completato questo processo, dovresti vedere una nuova directory dei test Cypress nel tuo progetto. Inoltre, il client Cypress aggiunge automaticamente il file cypress.config.js. Puoi aggiornare questo file per personalizzare ulteriormente vari aspetti dell'ambiente di test, del comportamento e della configurazione.

Scrivi test end-to-end utilizzando Cypress

Per scrivere il tuo primo test, devi selezionare il browser in cui verrà eseguito il test. Seleziona la tua opzione preferita tra quelle disponibili nel client Cypress.

Cypress avvierà una versione semplificata del browser che hai scelto, creando un ambiente controllato per eseguire i test.

Seleziona il Crea nuove specifiche opzione per creare il file di prova.

Vai al tuo editor di codice, apri il file cipresso/e2e/App.spec.cy.js file e aggiornare il contenuto di quel file con il seguente codice.

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);
 });
});

Tornando alle user story evidenziate sopra, questa specifica suite di test verifica due aspetti:

• Che il browser visualizzi un campo di input e un pulsante di invio sulla pagina.
• Che l'utente possa inserire una query di ricerca.

Come altri strumenti di test JavaScript come Jest e Supertest, Cypress utilizza una sintassi e un linguaggio dichiarativi per definire i casi di test.

Per eseguire il test, torna alla versione semplificata del browser gestita da Cypress e scegli il file di test specifico che desideri eseguire.

Cypress eseguirà i test e visualizzerà i risultati nel pannello di sinistra del campo di prova.

Simulazione dei processi applicativi

Per assicurarti di seguire e testare l'intero percorso dell'utente, in questo caso d'uso specifico, devi verificarlo l'applicazione può ricevere l'input dell'utente, recuperare i dati richiesti e, infine, visualizzare i dati nel browser pagina.

Per chiarezza, puoi creare un nuovo file di test per ospitare una suite di test diversa all'interno del file e2e cartella. In alternativa, puoi anche scegliere di includere tutte le suite di test che esplorano un particolare caso di test in un unico file di test.

Vai avanti e creane uno nuovo Prodotti.spec.cy.js file nel e2e cartella. All'interno di questo file, includere il seguente codice.

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: $');
 });
 });

Questa suite di test verifica che, una volta che un utente invia un particolare elemento di ricerca, l'app recuperi e visualizzi i dati nella pagina del browser.

Lo fa simulando il processo di inserimento dell'input di ricerca, facendo clic sul pulsante di invio e aspettando il file prodotti da caricare, quindi verificando la presenza degli articoli del prodotto, insieme a dettagli come titolo e prezzo. In sostanza, cattura e verifica l'intera esperienza dal punto di vista dell'utente.

Simulazione di errori e risposte

Puoi anche simulare vari scenari di errore e risposte all'interno dei test Cypress.

Creane uno nuovo Errore.spec.cy.js file nel e2e directory e includere il seguente codice.

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');
 });
 });

Questa suite di test verifica che venga visualizzato un messaggio di errore quando un utente inserisce una query di ricerca errata.

Per superare il test, utilizza Cypress' intercettare funzione per arrestare la rete e simulare un errore di richiesta di rete. Quindi controlla che dopo aver inserito una query di ricerca errata nel campo di input e avviato il processo di recupero, sulla pagina venga visualizzato visibilmente un messaggio di errore: Prodotto non trovato.

Questo risultato indica che il meccanismo di gestione degli errori funziona come previsto.

Utilizzo di Cypress nello sviluppo basato sui test

Il test è un requisito fondamentale dello sviluppo, ma può anche essere un processo che richiede molto tempo. Tuttavia, incorporare Cypress può portare la pura soddisfazione di osservare i tuoi casi di test eseguire insieme.

Cypress è un ottimo strumento per implementare lo sviluppo basato sui test nelle applicazioni: non solo fornisce una suite completa di funzionalità di test, ma supporta anche varie strategie di test. Per ottenere il massimo da Cypress, vai avanti ed esplora la sua documentazione ufficiale per scoprire molte più funzionalità di test.