JavascriptTuts

E2E-testaus Angular 2:ssa Nollasta sankariksi (viimeinen osa)

Tulevaisuuden mestarit Angular 2:n E2E-testaus.
Tässä se on. Tämän oppitunnin lopussa sinulla on vihdoin kaikki työkalut toiminnallisten testien luomiseen Angular 2 -sovelluksiisi. Ei enää tekosyitä: Sinulla on valta!

Ensin tutustumme Locatorsiin, sitten näemme, kuinka mahtavia Page Objectit voivat olla, sen jälkeen kuinka käsitellä asynkronisuutta ja lopuksi helpoin osa, joka on Actionsin laukaiseminen.

Jos sinulla ei ole perusasiat kunnossa, suuntaa sinne päin, muuten olet vähän hukassa.

Locators

Yksi, ellei jopa tärkein asia E2E-testauksessa on löytää elementit, joita haluat testata näkymässäsi. Useimmiten kysyt itseltäsi kysymyksen ”miksi en löydä tätä **** elementtiä?”, jota seuraa ”oooohhhhh”.

Sinulla on monia tapoja tehdä tämä. Useimmat niistä riippuvat sovelluksestasi. Saadaksesi elementtejäsi, käytät erilaisia Locatoreita. Useimmiten löydät elementtisi:

Luokan nimi.
Id.
Model.
Binding.

Tulevissa testeissä käytämme tätä mallia.html:

<div class="parent2"> <div class="parent1"> <div class="nested-class" style="color:blue;"> I am a nested element </div> </div></div>

Keskitytään nested-luokkaan ja nested-id:hen.

By Class:

Haemme tänne elementtimme käyttämällä element(by.css(selector)) ja sitten testaamme onko se läsnä vai ei.

By Id:

it("should find the nested id", () => { let elem = element(by.id("nested-id")); expect(elem.getText()).toBe("I am a nested element");});

Haemme tänne elementtimme käyttämällä element(by.id(elem-id)) ja sitten testaamme onko se läsnä vai ei.

Seuraavat paikannimet ovat erittäin hyödyllisiä AngularJS:ssä, mutta niitä ei ole vielä toteutettu Angular 2:ssa, joten pitäkää ne toistaiseksi sivussa.

By Model:

it("should find the model", () => { let elem = element(by.model("modelToFind")); expect(elem.isPresent()).toBeTruthy();});

By Bindings:

it("should find the binding", () => { let elem = element(by.model("bindingToFind")); expect(elem.isPresent()).toBeTruthy();});

Testien debuggausta varten voit vain lisätä testiin ”browser.pause()”, voit suorittaa kaikki edelliset ohjeet ja pysäyttää milloin haluat.

Kun se pääsee taukoon, saat samanlaisen ruudun kuin tämä:

Kuten näet tästä kuvasta, päästääksesi kuskin paikalle sinun täytyy kirjoittaa repl.

Nyt sanotaan, että sinulla ei ole yhtään testiä ja haluat vain leikkiä Protractorilla. Voit vain kirjoittaa terminaaliin:

protractor --elementExplorer

Jos sinulla on ongelmia polun kanssa, voit kirjoittaa:

./node_modules/protractor/bin/elementexplorer.js

Ei tarvitse kirjoittaa repl tällä kertaa, käytä vain selainobjektia ja olet valmis purjehtimaan!

Sivun objektit

Mitä jos sinulla on testejä, jotka jakavat saman skenaarion? Aiotko kopioida liittää koodisi joka paikkaan? Entä jos skenaario muuttuu? Nyt sinun on käytävä läpi kaikki tiedostot ja tehtävä muutokset.

Tässä kohtaa Pages Objects tulee erittäin hyödylliseksi. Kirjoita kerran, jaa kaikkialla!

Sivu-objekti on objekti, joka sisältää sivua koskevat elementit ja skenaariot.

Aluksi hyvin yksinkertainen Page Object:

export class HomePage { nestedClass; constructor() { this.nestedClass = element(by.css(".nested-class")); }}

Sitten käytämme sitä testissämme:

Tuomme Page Objectin, luomme instanssin ja käytämme sitten sen ominaisuutta.

Asynkroniset seikkailut

Nyt ystäväni, voit käyttää mitä tahansa elementtejä sivulla! Siis melkein :).

Tulee olemaan joitain erikoistapauksia.

Jos olet ollut (epä)onnekas työskennellessäsi jQueryn kanssa, document.ready() on varmasti sinulle tuttu.

JavaScriptin asynkronisen luonteen vuoksi tulee tapauksia, joissa yrität päästä käsiksi elementtiin ennen kuin se on vielä ilmestynyt sivulle.

Tällöin sinun on käytettävä Protractorin ominaisuutta, jotta voit odottaa elementin olevan valmis ennen kuin etsit sitä.

Tässä on esimerkki painikkeen näyttämisestä aikakatkaisun päättymisen jälkeen.

Ensin luokka, joka sisältää aikakatkaisun:

export class Home { isHidden = true; triggerTimeOut = ((){ setTimeout(() => this.isHidden = false, 2250) })}

Sitten template.html:

Meillä on tässä painike, joka laukaisee aikakatkaisumme, kun aikakatkaisu umpeutuu, teksti näytetään.

Tässä ovat testit.

Me löydämme painikkeemme, klikkaamme sitä, yritämme löytää tekstimme MUTTA odotamme, että se ei ole läsnä.

Ja tässä on tapa, jolla käsittelemme tätä tapausta ;).

Käytämme ”browser.wait” yhdistettynä ”browser.isElementPresent”-testiin testaamalla Locatorimme. Viiden sekunnin kuluttua suoritetaan loput koodista. Älä unohda laittaa ajastinta tähän, muuten testisi estyvät ikuisiksi ajoiksi!

Jos siis jonkin elementtisi pitäisi olla tässä, mutta et saa sitä, vaistosi pitäisi käskeä sinua muistamaan, mitä olet juuri lukenut täältä.

Actions

Nyt kun sinulla on kallisarvoinen elementtisi, olet tehnyt 90% työstäsi!

Jos et löydä sitä, se johtuu joko siitä, että sovelluksesi ei toimi niin kuin sen pitäisi (siksi teemme testejä), tai sinun täytyy kehittyä paremmaksi testaamisessa ja viettää vähemmän aikaa Pokemon GO:n parissa metsästäen dratinoita joen lähellä kello yksi yöllä (olemme kaikki olleet siellä…).

Jatketaanpa vielä toimintojen parissa, joita voit käyttää elementissä. Tässä ne ovat:

Käytämme Protractoria, joka perustuu WebDriveriin. Jos tarvitset hienompia toimintoja, voit katsoa, mitä on saatavilla täällä.

Testataanpa joitakin niistä.

Malline.html:

<input type="text" />

Leikitellään hieman tekstinsyötöllä. Pikainen tietokilpailu, mitä tämä testi tekee (älä lue kuvausta)?

Ratkaisu: Saamme syötteemme, kirjoitamme sisään ”Some text”, testaamme, että saimme arvon asetettua, tyhjennämme sen ja lopuksi testaamme, että arvo on tyhjä.

Viime kädessä voimme kysyä itseltämme, mikä on paras tapa käynnistää toimintoja? Tämä linkki näyttää yhden vian, joka liittyy JavaScriptin käyttämiseen WebDriverin sijaan.
Totta kai JavaScriptillä kirjoittaminen on paljon kompaktimpaa, mutta siihen liittyy myös riskejä!

Voit tehdä elementillä mitä tahansa. Paras tapa testata sitä on käyttää saatavilla olevia matchereita. Miksi? Koska ne ovat tyylikkäitä ja lähellä ihmisen kieltä, esimerkki:

expect(apples.length !== 0).toBe(true);

expect(apples).not.toBeEmpty();

Johtopäätös

Tämä oli tämän sarjan viimeinen postaus, juuri nyt sinulla on 90 % taidoista Angular 2 -sovellusten testaamiseen. Loput 10% saat kokemuksen kautta. Muista, että ensin saat elementtisi Locatorsin avulla ja sitten laitat sen, joka saattaa olla kopioitu Page Objectiin, jos et löydä elementtiäsi ja olet varma, että se on täällä, se saattaa olla ehkä siksi, että se ei ole vielä ilmestynyt ja sinun täytyy käsitellä asynkronisuutta. Testaa lopuksi **** ulos elementeistäsi Actionsin avulla.