O introducere la testul de frontend

Testarea codului Frontend este încă o practică confuză pentru mulți dezvoltatori. Dar, cu dezvoltarea frontendului devenind mai complexă și cu dezvoltatorii responsabili pentru stabilitate și consistență, ca niciodată, testarea Frontend trebuie să fie îmbrățișată ca un cetățean egal în codecase. Văstrăm diferitele opțiuni de testare și explicăm ce situații sunt utilizate cel mai bine.

Testarea Frontend este un termen de pălărie care acoperă o varietate de strategii de testare automate. Unele dintre acestea, cum ar fi testul de unitate și integrare, au fost o practică cea mai bună practică în cadrul comunității de dezvoltare de backend de ani de zile. Alte strategii sunt mai noi și provin din schimbările în ceea ce privește dezvoltarea de backend și Frontend.

Până la sfârșitul acestui articol, ar trebui să vă simțiți confortabil evaluarea pe care strategiile de testare se potrivesc cel mai bine cu echipa și codurile de codificare. Următoarele exemple de cod vor fi scrise utilizând cadrul de iasomie, dar regulile și procesele sunt similare în majoritatea cadrelor de testare.

• Cele mai bune piese de testare a utilizatorilor

01. Testarea unității

Testarea unității, unul dintre veteranii de testare, este la cel mai scăzut nivel al tuturor tipurilor de testare. Scopul său este de a asigura cele mai mici biți ale codului dvs. (numite unități) funcționează independent ca fiind de așteptat.

Imaginați-vă că aveți un picior lego pentru o casă. Înainte de a începe să construiți, doriți să vă asigurați că fiecare piesă individuală este contabilizată (cinci pătrate roșii, trei dreptunghiuri galbene). Testarea unităților se asigură că seturile individuale de cod - lucruri precum validările și calculele de intrare - funcționează conform destinației înainte de a construi caracteristica mai mare.

Ajută la gândirea la testele unității în tandem cu "face un lucru bine" Mantra. Dacă aveți o bucată de cod cu o singură responsabilitate, probabil că doriți să scrieți un test de unitate pentru aceasta.

Să ne uităm la următorul snippet de cod, în care scriem un test de unitate pentru un calculator simplu:

 Descrieți ("operațiunile de calculator", funcția () {
  ("ar trebui să adauge două numere", funcția () {
    Calculator.init ();
    Var Rezult = Calculator.Addnumbers (7,3);
    Așteptați (rezultatul) .tobe (10);
  });
}); 

În a noastră Calculator Aplicație, dorim să ne asigurăm că calculele funcționează întotdeauna independent modul în care ne așteptăm. În exemplul, vrem să ne asigurăm că putem adăuga întotdeauna două numere împreună.

Primul lucru pe care îl facem este descrierea seriei de teste pe care o vom conduce folosind Jasmine descrie . Acest lucru creează o suită de testare - o grupare de teste legate de o anumită zonă a aplicației. Pentru calculatorul nostru, vom grupa fiecare test de calcul în propria sa suită.

Suitele sunt minunate nu numai pentru organizația de cod, ci pentru că vă permit să executați suitele pe cont propriu. Dacă lucrați la o nouă caracteristică pentru o aplicație, nu doriți să executați fiecare încercare în timpul dezvoltării active, deoarece ar fi foarte consumatoare de timp. Testarea apartamentelor vă permite să vă dezvoltați mai repede.

Apoi, scriem testele noastre reale. Folosind. aceasta Funcție, scriem caracteristica sau funcționalitatea pe care o testăm. Exemplul nostru testează funcția de adăugare, deci vom rula scenarii care confirmă faptul că funcționează corect.

Apoi, scriem afirmația noastră de testare, care este în cazul în care testăm dacă codul nostru funcționează așa cum ne așteptăm. Inițializăm calculatorul nostru și ne conducem ADDAUMBERS Funcționați cu cele două numere pe care dorim să le adăugăm. Păstram numărul ca rezultat și apoi afirmăm că acest lucru este egal cu numărul pe care îl așteptăm (în cazul nostru, 10).

Dacă ADDAUMBERS Nu reușește să returneze cifrele corecte, testul nostru va eșua. Vom scrie teste similare pentru celelalte calcule - scăderea, multiplicarea și așa mai departe.

02. Teste de acceptare

Dacă testele de unități sunt ca și cum ar fi verificarea fiecărei piese Lego, testele de acceptare verifică dacă fiecare etapă de construcție poate fi finalizată. Doar pentru că toate piesele sunt luate în considerare, nu înseamnă că instrucțiunile sunt executabile corespunzător și vă vor permite să construiți modelul final.

Testele de acceptare trec prin aplicația dvs. de funcționare și asigurați-vă acțiuni desemnate, intrările utilizatorilor și fluxurile de utilizatori sunt complete și funcționale.

Doar pentru că cererea noastră este ADDAUMBERS Funcția returnează numărul corect, nu înseamnă că interfața calculatorului va funcționa cu siguranță așa cum era de așteptat să dea rezultatul potrivit. Dacă butoanele noastre sunt dezactivate sau rezultatul de calcul nu este afișat? Testele de acceptare ne ajută să răspundem la aceste întrebări.

 Descrieți ("Starea eșecului înscrierii", funcția () {
  ("nu ar trebui să permită înscrierea cu informații nevalide", funcția () {
    Var Page = Vizita ("/ Home");
    pagina.fill_in ("Intrare [nume = 'e-mail"] "," nu un e-mail ");
    Page.Click (butonul "[Tip = Trimite]");
    Page.Click (butonul "[Tip = Trimite]");
    Așteptați (pagina.find ("# SignuPerror"). Hasclass ("ascuns")). TOBEFALSY ();
  });
}); 

Structura pare foarte asemănătoare cu testul de unități: definim o suită cu descrie , apoi scrieți testul nostru în cadrul aceasta Funcția, apoi executați un cod și verificați rezultatul acestuia.

Mai degrabă decât testarea în jurul valorii de funcții și valori specifice, totuși, suntem testați pentru a vedea dacă un flux de lucru particular (un flux de înscriere) se comportă așa cum se așteaptă atunci când completăm câteva informații rele. Există mai multe acțiuni minuscule care se întâmplă aici, cum ar fi validările de formă care pot fi testate unitate, precum și orice manipulare pentru ceea ce arată starea noastră de eroare, demonstrată de un element cu ID-ul SignuPerror. .

Testele de acceptare sunt o modalitate excelentă de a vă asigura că fluxurile de experiență cheie sunt întotdeauna funcționează corect. Este, de asemenea, ușor să adăugați teste în jurul cazurilor de margine și pentru a ajuta echipele dvs. de QA să le găsească în aplicația dvs.

Când luați în considerare ce să scrieți teste de acceptare, povestirile dvs. de utilizator sunt un loc minunat pentru a începe. Cum interacționează utilizatorul dvs. cu site-ul dvs. și care este rezultatul așteptat al acestei interacțiuni? Este diferit de testarea unității, care este mai bine potrivită cu ceva de genul cerințelor de funcție, cum ar fi cerințele din jurul unui câmp validat.

03. Testarea regresiei vizuale

După cum sa menționat în introducere, unele tipuri de testare sunt unice pentru lumea frontendului. Primul dintre acestea este testarea regresiei vizuale. Acest lucru nu testează codul dvs., ci mai degrabă compară rezultatul redat al codului dvs. - interfața dvs. - cu versiunea redată a aplicației dvs. în producție, stadializare sau un mediu local pre-schimbat.

Acest lucru se face de obicei prin compararea capturilor de ecran realizate într-un browser fără cap (un browser care rulează pe server). Instrumentele de comparare a imaginilor detectează apoi diferențele dintre cele două fotografii.

Folosind un instrument cum ar fi Phantomcss, testele dvs. specifică locul unde trebuie să navigați, să faceți o captură de ecran, iar cadrul vă arată diferențele care au apărut în aceste opinii.

 casper.start ("/ home"). Apoi (funcția () {

  // starea inițială a formei
  Phantomcss.Screenshot ("Signupform", "Înscrieți-vă");

  // Apăsați butonul de înscriere (ar trebui să declanșați eroarea)
  casper.click ("Button # Înscriere");

  // luați o captură de ecran a componentei UI
  Phantomcss.Screenshot ("Signupform", "Înscrieți-vă eroare de formular");

  // completați formularul după atributele de nume & amp; Trimite
  casper.fill ("# Signupform", {
    Nume: "Alicia Sedlock",
    Email: "[email protected]"
  }, Adevărat);

  // luați oa doua captură de ecran de succes
 Phantomcss.screenshot ("# Signupform", "Înscrieți-vă la succesul formularului");
}); 

Spre deosebire de testarea de acceptare și unitate, testarea de regresie vizuală este greu de beneficiat dacă construiești ceva nou. Pe măsură ce UI va vedea schimbări rapide și drastice pe tot parcursul dezvoltării active, veți economisi probabil aceste teste atunci când bucățile de interfață sunt complete vizual. Prin urmare, testele de regresie vizuală sunt ultimele teste pe care ar trebui să le scrieți.

În prezent, multe instrumente de regresie vizuală necesită un efort manual. Este posibil să trebuiască să rulați captura de screenshot înainte de a începe dezvoltarea pe sucursala dvs. sau să actualizați manual imaginile de bază pe măsură ce efectuați modificări ale interfeței.

Acest lucru este pur și simplu din cauza naturii dezvoltării - modificări ale Ui. Poate fi intenționat, dar testele știu doar "da, acest lucru este același" sau "nu, acest lucru este diferit". Cu toate acestea, dacă regresiile vizuale reprezintă un punct de durere în cadrul aplicației dvs., această abordare vă poate salva timpul și efortul echipei în general, comparativ cu regresiile de fixare constantă.

04. Teste de accesibilitate și performanță

Deoarece cultura și conștientizarea în jurul testelor Frontend cresc, la fel și capacitatea noastră de a testa diverse aspecte ale ecosistemului. Având în vedere concentrarea sporită asupra accesibilitate Și performanța în cultura tehnică, integrarea acestora în suita dvs. de testare vă ajută să vă asigurați că aceste concepte rămân o prioritate.

Dacă aveți probleme de executare a bugetelor de performanță sau a standardelor de accesibilitate, aceasta este o modalitate de a păstra aceste cerințe în prim-planul minții oamenilor.

Ambele verificări pot fi integrate fie în fluxul de lucru cu unelte de construcție, cum ar fi grunt și gulp, sau semi-manual în terminalul tău. Pentru bugetele de performanță, un instrument precum Grunt-Perfbudget vă oferă posibilitatea de a rula site-ul dvs. prin webpagest automat într-o sarcină specificată.

Cu toate acestea, dacă nu utilizați un alergător de sarcini, puteți să apucați, de asemenea, perfbudget ca un modul NPM independent și puteți executa testele manual.

Iată cum arată să ruleze acest lucru prin terminalul:

 PERFBUDGET --URL http://www.aliciabilit.com --Key [Webpagest API cheie] --Speedindex 2000 --Render 400

Și, de asemenea, înființarea prin grunt:

PERFBUDGET: {
  Mod implicit: {
    Opțiuni: {
      URL: "http://aliciabilitate.com ',
      Cheie: "Web Pagagest Cheie API",
      buget: {
        SpeedIndex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

Grunt.registertask ("Implicit", ["Jshint", "perfondget"]); 

Aceleași opțiuni sunt disponibile pentru testarea accesibilității. Deci, pentru Pa11y, puteți să conduceți fie PA11Y. Comanda în browserul dvs. pentru a ieși sau a seta o sarcină pentru a automatiza acest pas. În terminal:

 Pa11y aliciabilitate.com

// ca o comandă JavaScript după instalarea NPM

VAR PA11Y = necesită ("Pa11y"); // solicită pa11y
test var = pa11y (); // obțineți pa11y gata să se stabilească

test.Run ("aliciabilitate.com", funcția (eroare, rezultate) {
  // Înregistrați-vă rezultatele
}); 

Cele mai multe instrumente din aceste categorii sunt destul de plug-and-play, dar, de asemenea, vă oferă opțiunea de a personaliza modul în care testele se execută - de exemplu, puteți să le setați pentru a ignora anumite standarde WCAG.

Pagina următoare: Cum să introduceți testarea în fluxul dvs. de lucru

• 1.
• 2.

Pagina curenta: Diferite tipuri de teste de frontend (și când să le folosească)