Frontendi arendus hõlmab visuaalselt atraktiivsete ja funktsionaalsete kliendile suunatud rakenduste loomist. Aga seal on konks; need rakendused peavad tagama kasutajatele sujuva kasutuskogemuse.

Ehkki üksuse- ja integratsioonitestid on rakenduse funktsionaalsuse kontrollimiseks hädavajalikud, ei pruugi need täielikult tabada tüüpilisi kasutaja interaktsioone. Kasutaja teekonna tõeliseks simuleerimiseks peate läbima täielikud testid, mis kordavad tegelikku kasutaja interaktsiooni. See tagab, et teie rakendus toimib algusest lõpuni nii, nagu kavatsete.

Küpressi abil täieliku testimise alustamine

Esiotsa rakenduste täieliku testimise peamine eesmärk on kontrollida tulemusi, mitte äriloogika rakendamise üksikasju.

Võtke näiteks sisselogimisvorm. Ideaalis testiksite, kas sisselogimisekraan hüppab üles nii, nagu see peaks, ja teeb seda, mida see on ette nähtud. Põhimõtteliselt ei ole aluseks olevad tehnilised üksikasjad olulised. Lõppeesmärk on lihtsalt kasutaja kingadesse astumine ja kogu tema kogemuse hindamine.

Küpress on suurepärane automatiseerimise testimise raamistik, mis ühildub mõnega kõige populaarsemad JavaScripti raamistikud. Selle võime käivitada teste otse brauseris ja selle põhjalik testimisfunktsioonide komplekt muudavad testimise sujuvaks ja tõhusaks. Samuti toetab see erinevaid testimismeetodeid, sealhulgas:

• Ühikutestid
• End-to-End testid
• Integratsioonitestid

Reacti rakenduse jaoks täielike testide kirjutamiseks kaaluge järgmisi kasutajalugusid:

• Kasutaja näeb sisestusvälja koos vastava saatmisnupuga.
• Kasutaja saab sisestada sisestusväljale otsingupäringu.
• Pärast esitamisnupul klõpsamist peaks kasutaja nägema üksuste loendit, mis kuvatakse otse sisestusvälja all.

Neid kasutajalugusid jälgides saate luua lihtsa Reacti rakenduse, mis võimaldab kasutajal tooteid otsida. Rakendus hangib tooteandmed saidilt DummyJSON API ja renderdage see lehel.

Selle projekti koodi leiate sellest GitHub hoidla

Looge reageerimisprojekt

Alustamiseks looge Vite abil Reacti projekt või kasutage Create-react-app käsk, et seadistada põhirakendus React. Kui installiprotsess on lõppenud, jätkake ja installige Cypressi pakett oma projekti arendaja sõltuvusena:

npm install cypress --save-dev

Nüüd värskendage oma package.json faili, lisades selle skripti:

"test": "npx cypress open"

Looge funktsionaalne komponent

Aastal src kataloogi, looge kaust ja andke sellele nimi komponendid. Lisage sellesse kausta uus products.jsx faili ja lisage allolev kood.

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

Funktsionaalses komponendis määratlege a useEffect konks, mis käivitab asünkroonse funktsiooni, mis hangib esitatud otsingupäringu alusel tooteandmed.

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

Värskendage faili App.jsx

Nüüd värskendage App.jsx faili järgmise koodiga:

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

Jätkake ja käivitage arendusserver.

npm run dev

Suurepärane! Peaksite saama näiv-JSON API-st hankida konkreetseid tooteandmeid.

Seadistage testimiskeskkond

Esmalt käivitage oma terminalis testskripti käsk:

npm run test

See käsk käivitab ja avab Cypressi kliendi. Jätkake ja klõpsake nuppu E2E testimine nuppu.

Järgmisena klõpsake Jätka Cypressi konfiguratsioonifailide lisamiseks.

Kui see protsess on lõpule viidud, peaksite oma projektis nägema uut Cypressi testide kataloogi. Lisaks lisab Cypressi klient automaatselt faili cypress.config.js. Saate seda faili värskendada, et veelgi kohandada oma testikeskkonna, käitumise ja seadistuse erinevaid aspekte.

Kirjutage küpressi abil täielikke teste

Esimese testi kirjutamiseks peate valima brauseri, milles test käitatakse. Valige Cypressi kliendis saadaolevate hulgast oma eelistatud valik.

Cypress käivitab teie valitud brauseri lihtsustatud versiooni, luues kontrollitud keskkonna testide käitamiseks.

Valige Loo uus spetsifikatsioon testfaili loomiseks.

Minge oma koodiredaktorisse ja avage cypress/e2e/App.spec.cy.js faili ja värskendage selle faili sisu järgmise koodiga.

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

Tulles tagasi ülaltoodud kasutajalugude juurde, kinnitab see konkreetne testkomplekt kahte aspekti.

• Et brauser kuvab lehel sisestusvälja ja saatmisnupu.
• Et kasutaja saab sisestada otsingupäringu.

Sarnaselt teistele JavaScripti testimistööriistadele, nagu Jest ja Supertest, kasutab Cypress testjuhtumite määratlemiseks deklaratiivset süntaksit ja keelt.

Testi käivitamiseks naaske Cypressi hallatavale lihtsustatud brauseri versioonile ja valige konkreetne testfail, mida soovite käivitada.

Cypress käivitab testid ja kuvab tulemused testimänguväljaku vasakpoolsel paneelil.

Taotlusprotsesside simuleerimine

Kogu kasutajateekonna läbimise ja testimise tagamiseks (sel konkreetsel kasutusjuhul) peate seda kontrollima rakendus saab võtta kasutaja sisendi, hankida vajalikud andmed ja lõpuks kuvada andmed brauseris lehel.

Selguse huvides saate luua uue testfaili, mis mahutab seadmesse erineva testikomplekti e2e kausta. Teise võimalusena võite lisada ühte testfaili kõik konkreetset testjuhtumit uurivad testikomplektid.

Mine edasi ja loo uus Products.spec.cy.js faili e2e kausta. Lisage sellesse faili järgmine kood.

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

See testkomplekt kontrollib, et kui kasutaja esitab konkreetse otsinguüksuse, hangib rakendus andmed ja kuvab need brauseri lehel.

Selleks simuleerib see otsingusisendi sisestamise protsessi, klõpsates esitamisnupul ja oodates laaditavad tooted ja seejärel tooteartiklite olemasolu koos üksikasjadega, nagu pealkiri ja hind. Sisuliselt jäädvustab ja kontrollib see kogu kogemust kasutaja vaatenurgast.

Vigade ja vastuste simuleerimine

Samuti saate oma Cypressi testides simuleerida erinevaid veastsenaariume ja vastuseid.

Loo uus Error.spec.cy.js faili e2e kataloogi ja lisage järgmine kood.

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

See testkomplekt kontrollib, kas kasutaja sisestab vale otsingupäringu, kuvatakse veateade.

Testijuhtumi läbimiseks kasutab see Cypressi pealtkuulamine funktsioon võrgu katkestamiseks ja võrgupäringu vea simuleerimiseks. Seejärel kontrollib see, et pärast sisestusväljale vale otsingupäringu sisestamist ja toomisprotsessi käivitamist kuvatakse lehel nähtavalt veateade – Toodet ei leitud.

See tulemus näitab, et veakäsitlusmehhanism toimib ootuspäraselt.

Küpressi kasutamine testipõhises arenduses

Testimine on põhiline arendusnõue, kuid see võib olla ka aeganõudev protsess. Kuid Cypressi kaasamine võib tuua teie katsejuhtumite koos käimise jälgimisest täieliku rahulolu.

Cypress on suurepärane tööriist testipõhise arenduse rakendamiseks rakendustes – see mitte ainult ei paku laiaulatuslikku testimisfunktsioonide komplekti, vaid toetab ka erinevaid testimisstrateegiaid. Cypressist maksimumi saamiseks minge edasi ja uurige selle ametlikku dokumentatsiooni, et avastada palju rohkem testimisvõimalusi.