Priekšgala izstrāde ietver vizuāli pievilcīgu, funkcionālu klientu lietotņu izveidi. Bet tur ir āķis; šīm lietojumprogrammām ir jānodrošina lietotājiem nevainojama pieredze.

Lai gan vienību un integrācijas testi ir būtiski, lai pārbaudītu lietojumprogrammas funkcionalitāti, tie var pilnībā neuztvert tipisku lietotāja mijiedarbību. Lai patiesi simulētu lietotāja ceļojumu, jums ir jāveic pilnīgas pārbaudes, kas atkārto faktisko lietotāja mijiedarbību. Tas nodrošinās, ka lietojumprogramma no sākuma līdz beigām darbojas tā, kā plānojat.

Darba sākšana ar pilnīgu testēšanu, izmantojot Cypress

Galvenais priekšgala lietojumprogrammu pilnīgas testēšanas mērķis ir pārbaudīt rezultātus, nevis biznesa loģikas ieviešanas detaļas.

Kā piemēru ņemiet pieteikšanās veidlapu. Ideālā gadījumā jūs pārbaudītu, vai pieteikšanās ekrāns tiek parādīts tā, kā tam vajadzētu, un dara to, kas tam ir paredzēts. Būtībā pamatā esošās tehniskās detaļas nav svarīgas. Gala mērķis ir vienkārši iejusties lietotāja vietā un novērtēt visu viņa pieredzi.

Ciprese ir lieliska automatizācijas testēšanas sistēma, kas ir saderīga ar dažiem populārākie JavaScript ietvari. Tā spēja palaist testus tieši pārlūkprogrammā un visaptverošais testēšanas funkciju komplekts padara testēšanu nevainojamu un efektīvu. Tā atbalsta arī dažādas testēšanas pieejas, tostarp:

• Vienību testi
• Pilnīgi testi
• Integrācijas testi

Lai rakstītu React lietojumprogrammas pilnīgus testus, apsveriet šādus lietotāju stāstus:

• Lietotājs var redzēt ievades lauku ar atbilstošu iesniegšanas pogu.
• Lietotājs var ievadīt meklēšanas vaicājumu ievades laukā.
• Pēc noklikšķināšanas uz pogas Iesniegt lietotājam vajadzētu redzēt vienumu sarakstu, kas tiek parādīts tieši zem ievades lauka.

Sekojot šiem lietotāju stāstiem, varat izveidot vienkāršu React lietojumprogrammu, kas ļauj lietotājam meklēt produktus. Lietotne iegūs produkta datus no DummyJSON API un atveidojiet to lapā.

Jūs varat atrast šī projekta kodu tajā GitHub krātuve

Izveidojiet reaģēšanas projektu

Lai sāktu, izveidot React projektu, izmantojot Vite vai izmantojiet komanda create-react-app, lai iestatītu pamata React lietojumprogrammu. Kad instalēšanas process ir pabeigts, turpiniet un instalējiet Cypress pakotni kā izstrādātāja atkarību savā projektā:

npm install cypress --save-dev

Tagad atjauniniet savu pack.json failu, pievienojot šo skriptu:

"test": "npx cypress open"

Izveidojiet funkcionālo komponentu

Iekš src direktorijā, izveidojiet mapi un piešķiriet tai nosaukumu sastāvdaļas. Šajā mapē pievienojiet jaunu produkti.jsx failu un iekļaujiet tālāk norādīto kodu.

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

Funkcionālajā komponentā definējiet a useEffect āķis, kas izpilda asinhronu funkciju, kas ienes produkta datus, pamatojoties uz sniegto meklēšanas vaicājumu.

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

Atjauniniet failu App.jsx

Tagad atjauniniet App.jsx failu ar šādu 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

Iet uz priekšu un sāciet izstrādes serveri.

npm run dev

Lieliski! Jums vajadzētu būt iespējai iegūt konkrētus produkta datus no fiktīvas JSON API.

Iestatiet testēšanas vidi

Vispirms terminālī palaidiet testa skripta komandu:

npm run test

Šī komanda aktivizēs un atvērs Cypress klientu. Iet uz priekšu un noklikšķiniet uz E2E pārbaude pogu.

Tālāk noklikšķiniet uz Turpināt lai pievienotu Cypress konfigurācijas failus.

Kad šis process ir pabeigts, jūsu projektā vajadzētu redzēt jaunu Cypress testu direktoriju. Turklāt Cypress klients automātiski pievieno failu cypress.config.js. Varat atjaunināt šo failu, lai vēl vairāk pielāgotu dažādus testa vides, darbības un iestatīšanas aspektus.

Rakstiet pilnīgus testus, izmantojot Cypress

Lai uzrakstītu pirmo testu, jums ir jāizvēlas pārlūkprogramma, kurā tiks izpildīts tests. Izvēlieties sev vēlamo opciju no Cypress klienta pieejamajām opcijām.

Cypress palaidīs jūsu izvēlētās pārlūkprogrammas vienkāršotu versiju, izveidojot kontrolētu vidi testu veikšanai.

Izvēlieties Izveidot jaunu specifikāciju iespēja izveidot testa failu.

Dodieties uz savu koda redaktoru, atveriet cypress/e2e/App.spec.cy.js failu un atjauniniet šī faila saturu ar šādu 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);
 });
});

Atgriežoties pie iepriekš izceltajiem lietotāju stāstiem, šis konkrētais testu komplekts pārbauda divus aspektus:

• Ka pārlūkprogramma lapā parāda ievades lauku un iesniegšanas pogu.
• Ka lietojums var ievadīt meklēšanas vaicājumu.

Tāpat kā citi JavaScript testēšanas rīki, piemēram, Jest un Supertest, Cypress izmanto deklaratīvu sintaksi un valodu, lai definētu testa gadījumus.

Lai palaistu testu, atgriezieties pie vienkāršotās pārlūkprogrammas versijas, ko pārvalda Cypress, un izvēlieties konkrēto testa failu, kuru vēlaties palaist.

Cypress veiks testus un parādīs rezultātus testa rotaļu laukuma kreisās puses panelī.

Pieteikšanās procesu simulēšana

Lai nodrošinātu, ka iziet un testējat visu lietotāja ceļu — šajā konkrētajā lietošanas gadījumā — jums tas ir jāpārbauda lietojumprogramma var ņemt lietotāja ievadīto informāciju, iegūt nepieciešamos datus un, visbeidzot, parādīt datus pārlūkprogrammā lappuse.

Skaidrības labad varat izveidot jaunu testa failu, lai tajā ievietotu citu testa komplektu e2e mapi. Varat arī izvēlēties vienā testa failā iekļaut visus testu komplektus, kas pēta konkrētu testa gadījumu.

Turpiniet un izveidojiet jaunu Products.spec.cy.js failu mapē e2e mapi. Šajā failā iekļaujiet šādu kodu.

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 testu komplekts pārbauda, ​​vai, tiklīdz lietotājs iesniedz noteiktu meklēšanas vienumu, lietotne ienes un parāda datus pārlūkprogrammas lapā.

Tas tiek darīts, simulējot meklēšanas ievades ievadīšanas procesu, noklikšķinot uz pogas Iesniegt un gaidot ielādējamos produktus un pēc tam pārbauda produktu vienību klātbūtni, kā arī informāciju, piemēram, nosaukumu un cenu. Būtībā tas uztver un pārbauda visu pieredzi no lietotāja viedokļa.

Kļūdu un atbilžu simulēšana

Cypress testos varat arī simulēt dažādus kļūdu scenārijus un atbildes.

Izveidojiet jaunu Error.spec.cy.js failu mapē e2e direktorijā un iekļaujiet šādu kodu.

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 testu komplekts pārbauda, ​​vai, lietotājam ievadot nepareizu meklēšanas vaicājumu, tiek parādīts kļūdas ziņojums.

Lai testa gadījums tiktu izturēts, tas izmanto Cypress' pārtvert funkcija, lai pārtrauktu tīklu un simulētu tīkla pieprasījuma kļūdu. Pēc tam tas pārbauda, ​​vai pēc nepareiza meklēšanas vaicājuma ievadīšanas ievades laukā un ielādes procesa sākšanas lapā tiek redzami parādīts kļūdas ziņojums — Produkts nav atrasts.

Šis rezultāts norāda, ka kļūdu apstrādes mehānisms darbojas, kā paredzēts.

Cipreses izmantošana testu vadītā izstrādē

Testēšana ir būtiska izstrādes prasība, taču tā var būt arī laikietilpīgs process. Tomēr Cypress iekļaušana var radīt milzīgu gandarījumu, skatoties, kā jūsu testa piemēri darbojas kopā.

Cypress ir lielisks rīks uz testiem balstītas izstrādes ieviešanai lietojumprogrammās — tas ne tikai nodrošina visaptverošu testēšanas funkciju komplektu, bet arī atbalsta dažādas testēšanas stratēģijas. Lai maksimāli izmantotu Cypress, turpiniet un izpētiet tās oficiālo dokumentāciju, lai atklātu daudz vairāk testēšanas iespēju.