JavascriptTuts

E2E Testing In Angular 2 From Zero To Hero (Final Part)

Cari futuri Maestri di Angular 2 E2E Testing.
Ecco qui. Alla fine di questa lezione avrete finalmente tutti gli strumenti per creare test funzionali per le vostre applicazioni Angular 2. Niente più scuse: Hai il potere!

Prima familiarizzeremo con i Locator, poi vedremo come possono essere fantastici i Page Objects, seguiti da come gestire l’asincronia e infine la parte più semplice che è il triggering delle Actions.

Se non avete le basi giuste, andate lì altrimenti sarete un po’ persi.

Locatori

Una, se non la cosa più importante nei test E2E è trovare gli elementi che volete testare nella vostra vista. La maggior parte delle volte, vi farete la domanda “perché non riesco a trovare questo elemento ****?” seguita da un “oooohhhhh”.

Avete molti modi per farlo. La maggior parte di essi dipende dalla vostra applicazione. Per ottenere i vostri elementi, userete una serie di localizzatori. La maggior parte delle volte, puoi trovare i tuoi elementi da:

• Nome della classe.
• Id.
• Modello.
• Binding.

Per i prossimi test, useremo questo template.html:

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

Fermiamoci su nested-class e nested-id.

Per classe:

Afferriamo qui il nostro elemento usando element(by.css(selector)) poi testiamo se è presente o meno.

By Id:

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

Prendiamo qui il nostro elemento usando element(by.id(elem-id)) poi testiamo se è presente o meno.

I seguenti localizzatori sono molto utili in AngularJS ma non ancora implementati in Angular 2 quindi teneteli da parte per ora.

Per modello:

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

Per binding:

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

Per fare il debug dei vostri test, potete semplicemente aggiungere “browser.pause()” nel vostro test, sarete in grado di eseguire tutte le istruzioni precedenti e fermarvi dove volete.

Una volta raggiunta la pausa, avrete una schermata simile a questa:

Come potete vedere in questa immagine, per entrare nel posto di guida dovete digitare repl.

Ora diciamo che non avete nessun test e volete solo giocare con Protractor. Puoi semplicemente digitare nel tuo terminale:

protractor --elementExplorer

Se hai qualche problema con il tuo percorso, puoi digitare:

./node_modules/protractor/bin/elementexplorer.js

Non c’è bisogno di digitare repl questa volta, basta usare l’oggetto browser e sei pronto a navigare!

Oggetti di pagina

E se hai test che condividono lo stesso scenario? Hai intenzione di copiare e incollare il tuo codice ovunque? E se lo scenario cambia? Ora devi passare attraverso tutti i file e fare le modifiche.

Ecco dove gli Oggetti Pagine diventano molto utili. Scrivi una volta, condividi ovunque!

Un Oggetto Pagina è un oggetto che contiene gli elementi e gli scenari di una pagina.

Prima un oggetto pagina molto semplice:

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

Poi lo usiamo nel nostro test:

Importiamo l’oggetto pagina, creiamo un’istanza poi usiamo la sua proprietà.

Avventure asincrone

Ora, amici miei, potete accedere a qualsiasi elemento della vostra pagina! Intendo quasi :).

Ci saranno alcuni casi speciali.

Se avete avuto la (dis)fortuna di lavorare con jQuery, dovete avere familiarità con document.ready().

Per la natura asincrona di JavaScript, ci saranno casi in cui cercherete di accedere ad un elemento prima che sia ancora apparso nella pagina.

Per gestire ciò, dovrete usare una caratteristica di Protractor per aspettare che il vostro elemento sia pronto prima di cercarlo.

Ecco un esempio che mostra un pulsante dopo la scadenza di un timeout.

Prima la classe che contiene il timeout:

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

Poi il template.html:

Abbiamo qui un pulsante che attiverà il nostro timeout, una volta che il timeout scade, il testo viene visualizzato.

Ecco i test.

Troviamo il nostro pulsante, ci clicchiamo sopra, cerchiamo il nostro testo MA ci aspettiamo che non sia presente.

E qui c’è il modo in cui gestiamo questo caso ;).

Utilizziamo “browser.wait” combinato con “browser.isElementPresent” testando il nostro Locator. Dopo 5 secondi viene eseguito il resto del codice. Non dimenticate di mettere un timer qui, altrimenti i vostri test saranno bloccati per sempre!

Quindi se uno dei vostri elementi dovrebbe essere qui ma non riuscite a prenderlo, il vostro istinto dovrebbe dirvi di ricordare quello che avete appena letto qui.

Azioni

Ora che avete il vostro prezioso elemento, avete fatto il 90% del lavoro!

Se non riesci a trovarlo, o la tua applicazione non funziona come dovrebbe (è per questo che facciamo i test) o devi migliorare nei test e passare meno tempo su Pokemon GO a caccia di dratini vicino a un fiume all’una di notte (ci siamo passati tutti…).

Continuiamo con le azioni che puoi usare su un elemento. Eccole:

Stiamo usando Protractor che si basa su WebDriver. Se avete bisogno di azioni più fantasiose, potete dare un’occhiata a ciò che è disponibile qui.

Testiamone alcune.

Per il template.html:

<input type="text" />

Giochiamo un po’ con l’input di testo. Quiz veloce, cosa fa questo test (non leggere la descrizione)?

Soluzione: Prendiamo il nostro input, digitiamo “Some text” all’interno, testiamo che abbiamo impostato il valore, lo cancelliamo e infine testiamo che il valore è vuoto.

In definitiva possiamo chiederci qual è il modo migliore per innescare le azioni? Questo link mostra uno dei difetti dell’uso di JavaScript invece di WebDriver.
Sicuramente scrivere in JavaScript è molto più compatto ma comporta alcuni rischi!

Puoi fare tutto quello che vuoi con un elemento. Il modo migliore per testarlo è usare i matcher che sono disponibili. Perché? Perché sono eleganti e vicini al linguaggio umano, esempio:

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

expect(apples).not.toBeEmpty();

Conclusione

Questo era il post finale di questa serie, ora avete il 90% delle competenze per testare le vostre applicazioni Angular 2. Otterrete l’altro 10% con l’esperienza. Ricorda, prima ottieni i tuoi elementi usando i Locator, poi metti quello che potrebbe essere replicato in un Page Object, se non riesci a trovare il tuo elemento e sei sicuro che sia qui, potrebbe essere perché non è ancora apparso e devi gestire l’asincronia. Infine testate il **** dei vostri elementi con Actions.

.