Frontend kūrimas apima vizualiai patrauklių, funkcionalių, klientams skirtų programų kūrimą. Bet yra sugavimas; šios programos turi užtikrinti, kad naudotojai veiktų sklandžiai.

Nors vieneto ir integravimo testai yra būtini norint patikrinti programos funkcionalumą, jie gali ne visiškai užfiksuoti tipines vartotojo sąveikas. Norėdami iš tikrųjų imituoti naudotojo kelionę, turite atlikti galutinius testus, kurie atkartotų faktines vartotojo sąveikas. Tai užtikrins, kad jūsų programa nuo pradžios iki pabaigos veiks taip, kaip ketinate.

Nuo galo iki galo bandymo naudojant Cypress pradžia

Pagrindinis galutinio testavimo tikslas priekinėse programose yra patikrinti rezultatus, o ne verslo logikos įgyvendinimo detales.

Kaip pavyzdį paimkite prisijungimo formą. Idealiu atveju patikrintumėte, ar prisijungimo ekranas pasirodo taip, kaip turėtų, ir ar veikia tai, kas skirta. Iš esmės pagrindinės techninės detalės nėra svarbios. Galutinis tikslas yra tiesiog įsijausti į vartotojo vietą ir įvertinti visą jo patirtį.

Kiparisas yra puiki automatizavimo testavimo sistema, suderinama su kai kuriais populiariausių JavaScript karkasų. Galimybė vykdyti testus tiesiogiai naršyklėje ir išsamus testavimo funkcijų rinkinys daro testavimą sklandų ir efektyvų. Ji taip pat palaiko įvairius testavimo metodus, įskaitant:

• Vienetų testai
• Nuo galo iki galo bandymai
• Integracijos testai

Norėdami parašyti „React“ programos galutinius testus, apsvarstykite šias naudotojų istorijas:

• Vartotojas gali matyti įvesties lauką su atitinkamu pateikimo mygtuku.
• Vartotojas gali įvesti paieškos užklausą įvesties lauke.
• Paspaudęs mygtuką pateikti, vartotojas turėtų matyti elementų sąrašą, rodomą tiesiai po įvesties lauku.

Stebėdami šias vartotojų istorijas galite sukurti paprastą „React“ programą, leidžiančią vartotojui ieškoti produktų. Programa gaus produkto duomenis iš DummyJSON API ir pateikti jį puslapyje.

Šio projekto kodą galite rasti jame GitHub saugykla

Sukurkite Reagavimo projektą

Pradėti, sukurti React projektą naudodami Vite arba naudokite komanda Create-react-app nustatyti pagrindinę React programą. Kai diegimo procesas bus baigtas, eikite į priekį ir įdiekite „Cypress“ paketą kaip savo projekto kūrėjo priklausomybę:

npm install cypress --save-dev

Dabar atnaujinkite savo package.json failą pridedant šį scenarijų:

"test": "npx cypress open"

Sukurkite funkcinį komponentą

Viduje src kataloge, sukurkite aplanką ir pavadinkite jį komponentai. Šiame aplanke pridėkite naują produktai.jsx failą ir įtraukite toliau esantį kodą.

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

Funkciniame komponente apibrėžkite a naudojimoEfektas kabliukas, kuris vykdo asinchroninę funkciją, kuri gauna produkto duomenis pagal pateiktą paieškos užklausą.

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

Atnaujinkite App.jsx failą

Dabar atnaujinkite App.jsx failą su tokiu kodu:

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

Eikite į priekį ir paleiskite kūrimo serverį.

npm run dev

Puiku! Turėtumėte galėti gauti konkrečius produkto duomenis iš netikros JSON API.

Nustatykite testavimo aplinką

Pirmiausia savo terminale paleiskite bandomojo scenarijaus komandą:

npm run test

Ši komanda suaktyvins ir atidarys „Cypress“ klientą. Eikite į priekį ir spustelėkite E2E testavimas mygtuką.

Toliau spustelėkite Tęsti Norėdami pridėti Cypress konfigūracijos failus.

Kai šis procesas bus baigtas, savo projekte turėtumėte pamatyti naują Cypress testų katalogą. Be to, „Cypress“ klientas automatiškai prideda failą cypress.config.js. Galite atnaujinti šį failą, kad toliau tinkintumėte įvairius bandymo aplinkos, elgsenos ir sąrankos aspektus.

Rašykite testus nuo galo iki galo naudodami Cypress

Norėdami parašyti pirmąjį testą, turite pasirinkti naršyklę, kurioje bus vykdomas testas. Pasirinkite pageidaujamą parinktį iš galimų Cypress kliento.

„Cypress“ paleis supaprastintą jūsų pasirinktos naršyklės versiją, sukurdama kontroliuojamą aplinką bandymams vykdyti.

Pasirinkite Sukurti naują spec parinktį sukurti bandomąjį failą.

Eikite į savo kodo rengyklę, atidarykite cypress/e2e/App.spec.cy.js failą ir atnaujinkite to failo turinį tokiu kodu.

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

Grįžtant prie aukščiau paryškintų naudotojų istorijų, šis konkretus bandymų rinkinys patvirtina du aspektus:

• Kad naršyklė puslapyje parodytų įvesties lauką ir pateikimo mygtuką.
• Kad naudojimas gali įvesti paieškos užklausą.

Kaip ir kiti „JavaScript“ testavimo įrankiai, tokie kaip „Jest“ ir „Supertest“, „Cypress“ naudoja deklaratyviąją sintaksę ir kalbą, kad apibrėžtų bandomuosius atvejus.

Norėdami atlikti testą, grįžkite į supaprastintą naršyklės versiją, kurią valdo Cypress, ir pasirinkite konkretų bandomąjį failą, kurį norite paleisti.

Cypress atliks bandymus ir parodys rezultatus bandomosios žaidimų aikštelės kairiajame skydelyje.

Paraiškų teikimo procesų modeliavimas

Norėdami užtikrinti, kad pereitumėte ir išbandytumėte visą naudotojo kelią – šiuo konkrečiu naudojimo atveju – turite tai patikrinti programa gali priimti vartotojo įvestį, gauti reikiamus duomenis ir galiausiai parodyti duomenis naršyklėje puslapį.

Aiškumo dėlei galite sukurti naują bandomąjį failą, kad tilptų kitas bandymų rinkinys e2e aplanką. Arba taip pat galite pasirinkti į vieną bandomąjį failą įtraukti visus testų rinkinius, kurie tiria tam tikrą bandomąjį atvejį.

Pirmyn ir sukurkite naują Products.spec.cy.js failą e2e aplanką. Į šį failą įtraukite šį 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: $');
 });
 });

Šis bandymų rinkinys patikrina, ar vartotojui pateikus konkretų paieškos elementą, programa gauna ir pateikia duomenis naršyklės puslapyje.

Tai daroma imituojant paieškos įvesties įvedimo procesą, spustelėjus pateikimo mygtuką ir laukiant, kol produktus, kuriuos reikia įkelti, tada patikrinkite, ar yra produkto elementų, kartu su tokia informacija kaip pavadinimas ir kaina. Iš esmės jis užfiksuoja ir patikrina visą patirtį iš vartotojo perspektyvos.

Klaidų ir atsakymų modeliavimas

Taip pat galite imituoti įvairius klaidų scenarijus ir atsakymus savo Cypress testuose.

Sukurti naują Error.spec.cy.js failą e2e katalogą ir įtraukite šį 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');
 });
 });

Šis bandymų rinkinys patikrina, ar vartotojui įvedus neteisingą paieškos užklausą, rodomas klaidos pranešimas.

Kad bandymas būtų sėkmingas, jis naudoja Cypress' perimti funkcija užblokuoti tinklą ir imituoti tinklo užklausos klaidą. Tada patikrinama, ar įvedus neteisingą paieškos užklausą įvesties lauke ir pradėjus gavimo procesą, puslapyje matomai rodomas klaidos pranešimas – Produktas nerastas.

Šis rezultatas rodo, kad klaidų valdymo mechanizmas veikia taip, kaip tikėtasi.

Cypress naudojimas bandomajame kūrime

Testavimas yra pagrindinis kūrimo reikalavimas, tačiau tai taip pat gali užtrukti daug laiko. Tačiau įtraukus „Cypress“ galima patirti didžiulį pasitenkinimą stebint, kaip kartu vyksta bandomieji atvejai.

„Cypress“ yra puikus įrankis, leidžiantis įdiegti testavimo pagrindu sukurtą programų kūrimą – ne tik suteikia platų testavimo funkcijų rinkinį, bet ir palaiko įvairias testavimo strategijas. Norėdami išnaudoti visas Cypress galimybes, eikite į priekį ir peržiūrėkite oficialią dokumentaciją, kad sužinotumėte daugiau testavimo galimybių.