Înțelegeți Stub și Spy: API-uri care vă vor face testul mai bun ca niciodată pe Cypress.io

Bună ziua tuturor. Astăzi voi vorbi despre una dintre caracteristicile Cypress.io care vă va face testul mai bun, testele mai puțin scazute. Da, vorbesc despre API-urile Stub & Spy. Stub & Spy ne ajută să creăm un scenariu de testare despre care am putea crede că nu este automatizat. Dar cu Cypress.io, putem face acest lucru posibil.

Ce sunt Stub & Spy? Care este diferența dintre ele?

Ciot

Stub este o modalitate de a simula comportamentele funcțiilor aplicației (sau modulelor) de care depind testele. Este folosit mai ales în scop de testare. În loc să apelați funcția reală, înlocuiți-o pe aceea și returnați Răspunsuri predefinite sau un obiect predefinit despre care știm exact ce va fi returnat. Este folosit în mod obișnuit în testele unitare, dar poate fi folosit și pentru teste end-to-end cu Cypress.io.

Spion

Spy este aproape asemănător cu Stub, dar nu este exact la fel. Spy nu schimbă comportamentul funcțiilor aplicației, le lasă așa cum sunt, dar captează și înregistrează câteva informații despre cum sunt numite. De exemplu, pentru a verifica dacă funcția este apelată cu parametrii corecti, pentru a număra de câte ori acea funcție este invocată.

Stub & Spy pe Cypress.io

Putem crea pur și simplu Stub și Spy pe Cypress.io cu API-urile cy.stub și cy.spy. Vă voi arăta câteva exemple în acest articol despre cum să utilizați Stub și Spy în unele cazuri de utilizare interesante.

// to define stub
cy.stub(object, 'functionName', 'stubFunction')
// to define spy
cy.spy(object, 'functionName', 'spyFunction')

Cypress a adoptat obiectul Stub și Spy din Sinon.js, ceea ce înseamnă că putem face referire la toate utilizările din documentul oficial Sinon.js. Puteți găsi mai multe detalii despre documentul Sinon Stub & Spy mai jos.

Sinon.js Stub: https://sinonjs.org/releases/latest/stubs/
Sinon.js Spy: https://sinonjs.org/releases/latest/spies/

Exemplul #1: Preveniți navigarea URL externă

De obicei, am găsit o aplicație web care încearcă să navigheze în afara aplicației, de ex. web extern, schemă de adrese URL cum ar fi tel:// , mailto:// sau chiar schemă de adrese URL personalizată pentru aplicații mobile, cum ar fi fb:// , myapp://

Cred că cei mai mulți dintre voi s-ar putea să fi văzut o aplicație care încearcă să navigheze în afara după ce faceți clic pe butonul. Este destul de greu de creat un test pentru acest scenariu, deoarece Cypress nu ne permite să navigăm în afara aplicației (ceea ce este bine pentru că ar trebui să ne concentrăm pe testarea aplicației noastre, nu pe testarea navigației din browser, nu?) În acest caz, trebuie să folosiți API-ul Stub pentru a face testul nostru posibil.

În mod normal, Web Developer utilizează adesea window.location.href pentru orice navigare în afara aplicației. location.href este o proprietate a obiectului nativ Window. Din păcate, nu putem bloca proprietatea obiectului, așa că trebuie să-l înfășuram ca funcție și să-l atribuim ca funcție de fereastră personalizată. Iată cum putem bloca proprietatea window.location.href.

Apoi creăm testul pentru acest scenariu apelând cy.window() pentru a obține obiectul Window și apoi blocăm funcția setLocationHref cu funcția noastră stub.

Am blocat funcția setLocationHref cu funcția winSetLocationHrefStub. Apoi pot verifica dacă funcția este apelată cu un parametru corect sau nu.

Exemplul #2: Solicitarea ferestrei de stubbing

Un alt exemplu pentru Stub API. Este posibil să fi văzut dialogul window.prompt() care așteaptă ca utilizatorul să introducă ceva text în dialog. Este destul de greu să creezi un test și pentru acest scenariu. Deci Stubbing este o modalitate de a rezolva această problemă.

Când încep să scriu testul, creez doar un stub pentru window.prompt() și îmi returnez răspunsul predefinit înapoi în aplicație. Vă rugăm să rețineți că Cypress vă va reseta și va restabili stub-ul după ce testele vor rula automat. Deci stub-ul nostru va rula izolat, ceea ce este destul de bine :)

Puteți alia obiectul Stub cu orice nume doriți folosind comanda as. Puteți apela comanda cy.get() pentru a face referire la stub și a face o afirmație cu el.

Exemplul #3 Fereastra de spionare Confirmare Dialog

Ultimul exemplu al acestui articol. Mă duc să spionez funcția window.confirm() pentru a verifica dacă este apelată o dată și, de asemenea, verific mesajul de confirmare.

În acest exemplu, dialogul de confirmare apare după ce utilizatorul face clic pe butonul. Dacă utilizatorul face clic pe ok, atunci va fi afișat mesajul “Yes, you’re hungry”. În caz contrar, mesajul va fi “No, you’re full.”. Este simplu, nu? Așa că creez un test cu un obiect Spy pentru a verifica dacă funcția window.confirm() este numită așa.

Puteți folosi Sinon-Chai Assertion pentru orice obiect Spy. Există multe aserțiuni de suport pentru obiectul Spy pe care le puteți vedea mai multe detalii „aici”. În acest caz, folosesc should(‘be.calledOnce’) pentru a verifica de câte ori este apelată funcția window.confirm().

În codul meu de testare, leg evenimentul window:confirm la o funcție anonimă care returnează true ca rezultat. Aceasta înseamnă aceeași ieșire ca utilizatorul care apasă butonul ok pe dialogul de confirmare. Iată rezultatul testului meu.

Acestea sunt doar 3 exemple simple pe care le puteți aplica Stub & Spy pentru a vă îndeplini testele Cypress.io. Există multe cazuri de utilizare interesante pe care le puteți folosi Stub & Spy pentru a vă îmbunătăți testul. Vă rugăm să vedeți mai multe exemple aici https://docs.cypress.io/guides/guides/stubs-spies-and-clocks.html

Puteți găsi tot codul meu exemplu în Github-ul meu personal de mai jos.

Sper că acest articol vă este util. Testare fericită!