Vývoj frontendu zahŕňa vytváranie vizuálne príťažlivých a funkčných aplikácií pre klienta. Má to však háčik; tieto aplikácie musia zabezpečiť, aby používatelia mali bezproblémový zážitok.

Hoci jednotkové a integračné testy sú nevyhnutné na overenie funkčnosti aplikácie, nemusia úplne zachytiť typické interakcie používateľov. Ak chcete skutočne simulovať cestu používateľa, musíte spustiť komplexné testy, ktoré replikujú skutočné interakcie používateľa. Tým sa zabezpečí, že vaša aplikácia bude od začiatku do konca fungovať podľa vašich predstáv.

Začíname s end-to-end testovaním pomocou Cypress

Hlavným cieľom end-to-end testovania vo front-end aplikáciách je skôr overenie výsledkov než implementačných detailov obchodnej logiky.

Ako príklad si vezmite prihlasovací formulár. V ideálnom prípade by ste vyskúšali, či prihlasovacia obrazovka vyskočí tak, ako má, a či robí to, na čo má. Základné technické detaily nie sú v podstate dôležité. Konečným cieľom je jednoducho vstúpiť do kože používateľa a vyhodnotiť celú jeho skúsenosť.

Cypress je skvelý rámec na testovanie automatizácie, ktorý je kompatibilný s niektorými z nich najpopulárnejšie rámce JavaScriptu. Jeho schopnosť spúšťať testy priamo v prehliadači a jeho komplexná sada testovacích funkcií robí testovanie bezproblémovým a efektívnym. Podporuje tiež rôzne testovacie prístupy vrátane:

• Jednotkové testy
• End-to-End testy
• Integračné testy

Ak chcete napísať komplexné testy pre aplikáciu React, zvážte tieto príbehy používateľov:

• Používateľ môže vidieť vstupné pole s príslušným tlačidlom na odoslanie.
• Používateľ môže do vstupného poľa zadať vyhľadávací dopyt.
• Po kliknutí na tlačidlo Odoslať by sa mal používateľovi zobraziť zoznam položiek zobrazený priamo pod vstupným poľom.

Sledovaním týchto používateľských príbehov môžete vytvoriť jednoduchú aplikáciu React, ktorá používateľovi umožní vyhľadávať produkty. Aplikácia načíta údaje o produkte z DummyJSON API a vykreslite ho na stránke.

Kód tohto projektu nájdete v ňom GitHub Úložisko

Nastavte projekt React

Začať, vytvorte projekt React pomocou Vite alebo použite príkaz create-react-app na nastavenie základnej aplikácie React. Po dokončení procesu inštalácie pokračujte a nainštalujte balík Cypress ako závislosť pre vývojárov vo svojom projekte:

npm install cypress --save-dev

Teraz aktualizujte svoje package.json súbor pridaním tohto skriptu:

"test": "npx cypress open"

Vytvorte funkčný komponent

V src adresár, vytvorte priečinok a pomenujte ho komponentov. Do tohto priečinka pridajte nový products.jsx súbor a zahrňte nižšie uvedený kód.

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

V rámci funkčného komponentu definujte a useEffect hook, ktorý vykonáva asynchrónnu funkciu, ktorá načítava údaje o produkte na základe poskytnutého vyhľadávacieho dopytu.

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

Aktualizujte súbor App.jsx

Teraz aktualizujte App.jsx súbor s nasledujúcim kódom:

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

Pokračujte a spustite vývojový server.

npm run dev

Skvelé! Mali by ste byť schopní načítať konkrétne údaje o produkte z fiktívneho rozhrania JSON API.

Nastavte testovacie prostredie

Najprv spustite na svojom termináli príkaz testovacieho skriptu:

npm run test

Tento príkaz spustí a otvorí klienta Cypress. Pokračujte a kliknite na Testovanie E2E tlačidlo.

Ďalej kliknite ďalej pridať konfiguračné súbory Cypress.

Po dokončení tohto procesu by ste mali vo svojom projekte vidieť nový adresár testov Cypress. Okrem toho klient Cypress automaticky pridá súbor cypress.config.js. Tento súbor môžete aktualizovať, aby ste ešte viac prispôsobili rôzne aspekty vášho testovacieho prostredia, správania a nastavenia.

Napíšte end-to-end testy pomocou Cypress

Ak chcete napísať svoj prvý test, musíte si vybrať prehliadač, v ktorom bude test prebiehať. Vyberte si preferovanú možnosť z dostupných možností v klientovi Cypress.

Cypress spustí zjednodušenú verziu prehliadača, ktorý ste si vybrali, čím sa vytvorí kontrolované prostredie na spustenie testov.

Vyberte Vytvorte novú špecifikáciu možnosť vytvorenia testovacieho súboru.

Prejdite do editora kódu a otvorte súbor cypress/e2e/App.spec.cy.js súbor a aktualizujte obsah tohto súboru pomocou nasledujúceho kódu.

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

Vráťme sa k príbehom používateľov zvýrazneným vyššie, táto špecifická testovacia sada overuje dva aspekty:

• Že prehliadač zobrazí na stránke vstupné pole a tlačidlo odoslania.
• Že používateľ môže zadať vyhľadávací dopyt.

Podobne ako iné testovacie nástroje JavaScript, ako sú Jest a Supertest, aj Cypress využíva deklaratívnu syntax a jazyk na definovanie testovacích prípadov.

Ak chcete spustiť test, vráťte sa do zjednodušenej verzie prehliadača spravovanej Cypress a vyberte konkrétny testovací súbor, ktorý chcete spustiť.

Cypress spustí testy a zobrazí výsledky na paneli na ľavej strane testovacieho ihriska.

Simulácia aplikačných procesov

Aby ste sa uistili, že prejdete a otestujete celú cestu používateľa – v tomto konkrétnom prípade použitia – musíte to overiť aplikácia môže prevziať vstup používateľa, načítať požadované údaje a nakoniec zobraziť údaje v prehliadači stránku.

Kvôli prehľadnosti môžete vytvoriť nový testovací súbor, ktorý bude obsahovať inú testovaciu súpravu e2e priečinok. Prípadne sa môžete rozhodnúť zahrnúť všetky testovacie súpravy, ktoré skúmajú konkrétny testovací prípad, do jedného testovacieho súboru.

Pokračujte a vytvorte nový Products.spec.cy.js súbor v e2e priečinok. Do tohto súboru zahrňte nasledujúci kód.

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

Táto testovacia sada kontroluje, či keď používateľ odošle konkrétnu položku vyhľadávania, aplikácia načíta a zobrazí údaje na stránke prehliadača.

Robí to simuláciou procesu zadávania vyhľadávacieho vstupu, kliknutím na tlačidlo Odoslať a čakaním na produkty na načítanie a potom overenie prítomnosti položiek produktu spolu s podrobnosťami, ako je názov a cena. V podstate zachytáva a overuje celý zážitok z pohľadu používateľa.

Simulácia chýb a odpovedí

Môžete tiež simulovať rôzne chybové scenáre a reakcie v rámci testov Cypress.

Vytvorte nový Error.spec.cy.js súbor v e2e adresár a zahrňte nasledujúci kód.

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

Tento testovací balík kontroluje, či sa zobrazí chybové hlásenie, keď používateľ zadá nesprávny vyhľadávací dopyt.

Aby testovací prípad prešiel, používa Cypress' zachytiť Funkcia stub siete a simulácia chyby sieťovej požiadavky. Potom skontroluje, že po zadaní nesprávneho vyhľadávacieho dopytu do vstupného poľa a spustení procesu načítania sa na stránke viditeľne zobrazí chybové hlásenie – Produkt sa nenašiel.

Tento výsledok naznačuje, že mechanizmus spracovania chýb funguje podľa očakávania.

Použitie Cypressu v testom riadenom vývoji

Testovanie je základnou požiadavkou vývoja, ale môže to byť aj časovo náročný proces. Začlenenie Cypress však môže priniesť úplné uspokojenie zo sledovania vašich testovacích prípadov.

Cypress je skvelý nástroj na implementáciu testom riadeného vývoja v aplikáciách – nielenže poskytuje komplexnú sadu testovacích funkcií, ale tiež podporuje rôzne testovacie stratégie. Ak chcete z Cypressu vyťažiť maximum, pokračujte a preskúmajte jeho oficiálnu dokumentáciu, aby ste objavili oveľa viac testovacích možností.