Razvoj sučelja uključuje izgradnju vizualno privlačnih, funkcionalnih aplikacija okrenutih klijentima. Ali postoji caka; ove aplikacije moraju osigurati da korisnici imaju besprijekorno iskustvo.

Dok su jedinični i integracijski testovi ključni za provjeru funkcionalnosti aplikacije, oni možda neće u potpunosti obuhvatiti tipične korisničke interakcije. Da biste doista simulirali korisnikovo putovanje, trebate pokrenuti end-to-end testove koji repliciraju stvarne korisničke interakcije. Ovo će osigurati da vaša aplikacija radi onako kako ste namjeravali od početka do kraja.

Početak testiranja od kraja do kraja pomoću Cypressa

Glavni cilj end-to-end testiranja u front-end aplikacijama je provjera rezultata, a ne detalja implementacije poslovne logike.

Uzmimo obrazac za prijavu kao primjer. U idealnom slučaju, testirali biste iskače li zaslon za prijavu na način na koji bi trebao i radi li ono za što je namijenjen. U biti, temeljni tehnički detalji nisu važni. Krajnji cilj je jednostavno stati u kožu korisnika i procijeniti njegovo cjelokupno iskustvo.

Čempres je izvrstan okvir za testiranje automatizacije koji je kompatibilan s nekim od najpopularnijih JavaScript okvira. Njegova mogućnost pokretanja testova izravno u pregledniku i sveobuhvatan paket značajki testiranja čine testiranje besprijekornim i učinkovitim. Također podržava različite pristupe testiranju uključujući:

• Jedinični testovi
• End-to-end testovi
• Integracijski testovi

Da biste napisali end-to-end testove za React aplikaciju, razmotrite ove korisničke priče:

• Korisnik može vidjeti polje za unos s odgovarajućim gumbom za slanje.
• Korisnik može unijeti upit za pretraživanje u polje za unos.
• Nakon klika na gumb za slanje, korisnik bi trebao vidjeti popis stavki prikazan odmah ispod polja za unos.

Prateći ove korisničke priče, možete napraviti jednostavnu React aplikaciju koja korisniku omogućuje pretragu proizvoda. Aplikacija će dohvatiti podatke o proizvodu iz DummyJSON API i prikazati ga na stranici.

Kôd ovog projekta možete pronaći u GitHub spremište

Postavite React projekt

Započeti, izradite React projekt koristeći Vite ili koristite create-react-app naredba za postavljanje osnovne React aplikacije. Nakon završetka postupka instalacije, instalirajte Cypress paket kao razvojnu ovisnost u svom projektu:

npm install cypress --save-dev

Sada ažurirajte svoje paket.json datoteku dodavanjem ove skripte:

"test": "npx cypress open"

Stvorite funkcionalnu komponentu

u src imenik, stvorite mapu i dajte joj naziv komponente. Unutar ove mape dodajte novu proizvodi.jsx datoteku i uključite kod u nastavku.

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

Unutar funkcionalne komponente definirajte a useEffect kuka, koja izvršava asinkronu funkciju koja dohvaća podatke o proizvodu na temelju dobivenog upita za pretraživanje.

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

Ažurirajte datoteku App.jsx

Sada ažurirajte App.jsx datoteka sa sljedećim kodom:

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

Samo naprijed i pokrenite razvojni poslužitelj.

npm run dev

Sjajno! Trebali biste moći dohvatiti određene podatke o proizvodu iz lažnog JSON API-ja.

Postavite okruženje za testiranje

Prvo pokrenite naredbu testne skripte na svom terminalu:

npm run test

Ova naredba će pokrenuti i otvoriti Cypress klijent. Samo naprijed i kliknite E2E testiranje dugme.

Zatim kliknite Nastaviti za dodavanje Cypress konfiguracijskih datoteka.

Kada se ovaj proces završi, trebali biste vidjeti novi direktorij Cypress testova u svom projektu. Osim toga, Cypressov klijent automatski dodaje datoteku cypress.config.js. Možete ažurirati ovu datoteku kako biste dodatno prilagodili različite aspekte vašeg testnog okruženja, ponašanja i postavki.

Pišite end-to-end testove koristeći Cypress

Da biste napisali svoj prvi test, morate odabrati preglednik u kojem će se test izvoditi. Odaberite željenu opciju među dostupnim u Cypress klijentu.

Cypress će pokrenuti pojednostavljenu verziju preglednika koji ste odabrali, stvarajući kontrolirano okruženje za izvođenje testova.

Odaberite Stvorite novu spec opciju za izradu testne datoteke.

Prijeđite na uređivač koda, otvorite čempres/e2e/App.spec.cy.js datoteku i ažurirajte sadržaj te datoteke sljedećim kodom.

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

Vraćajući se na gore istaknute korisničke priče, ovaj specifični testni paket provjerava dva aspekta:

• Da preglednik prikazuje polje za unos i gumb za slanje na stranici.
• Da korištenje može unijeti upit za pretraživanje.

Kao i drugi JavaScript alati za testiranje kao što su Jest i Supertest, Cypress koristi deklarativnu sintaksu i jezik za definiranje testnih slučajeva.

Da biste pokrenuli test, vratite se na pojednostavljenu verziju preglednika kojom upravlja Cypress i odaberite određenu testnu datoteku koju želite pokrenuti.

Cypress će pokrenuti testove i prikazati rezultate na lijevoj strani testnog igrališta.

Simulacija procesa primjene

Kako biste bili sigurni da ćete proći i testirati cijelo korisničko putovanje – u ovom konkretnom slučaju upotrebe – morate potvrditi da aplikacija može preuzeti korisnički unos, dohvatiti potrebne podatke i na kraju prikazati podatke u pregledniku stranica.

Radi jasnoće, možete stvoriti novu testnu datoteku za smještaj drugog paketa testova unutar e2e mapa. Alternativno, također možete odlučiti uključiti sve testne pakete koji istražuju određeni testni slučaj u jednu testnu datoteku.

Samo naprijed i stvorite novi Products.spec.cy.js datoteka u e2e mapa. Unutar ove datoteke uključite sljedeći kod.

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

Ovaj testni paket provjerava da li aplikacija dohvaća i prikazuje podatke na stranici preglednika, nakon što korisnik pošalje određenu stavku pretraživanja.

To čini simulacijom procesa unosa unosa za pretraživanje, klikom na gumb za slanje, čekanjem proizvode za učitavanje, a zatim provjeru prisutnosti stavki proizvoda, zajedno s detaljima kao što su naslov i cijena. U biti, bilježi i provjerava cjelokupno iskustvo iz korisničke perspektive.

Simulacija pogrešaka i odgovora

Također možete simulirati različite scenarije grešaka i odgovore unutar vaših Cypress testova.

Stvorite novi Error.spec.cy.js datoteka u e2e imenik i uključite sljedeći kod.

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

Ovaj testni paket provjerava prikazuje li se poruka o pogrešci kada korisnik unese netočan upit za pretraživanje.

Da bi test prošao, koristi Cypress' presresti funkcija za zaustavljanje mreže i simuliranje pogreške mrežnog zahtjeva. Zatim provjerava je li nakon unosa netočnog upita za pretraživanje u polje za unos i pokretanja procesa dohvaćanja poruka o pogrešci — Proizvod nije pronađen — vidljivo prikazana na stranici.

Ovaj ishod ukazuje na to da mehanizam za obradu pogrešaka funkcionira prema očekivanjima.

Korištenje Cypressa u razvoju vođenom testiranjem

Testiranje je temeljni razvojni zahtjev, ali može biti i dugotrajan proces. Međutim, uključivanje Cypressa može donijeti čisto zadovoljstvo gledanja vaših testnih slučajeva kako rade zajedno.

Cypress je izvrstan alat za implementaciju razvoja vođenog testiranjem u aplikacijama—ne samo da pruža sveobuhvatan paket značajki testiranja, već također podržava različite strategije testiranja. Kako biste maksimalno iskoristili Cypress, samo naprijed i istražite njegovu službenu dokumentaciju kako biste otkrili puno više mogućnosti testiranja.