Ora, che abbiamo una rapida comprensione dei
test end-to-end e del ruolo che i
test end-to-end svolgono nella strategia complessiva per il test di applicazioni angolari.
Inoltre, una breve introduzione al goniometro.
Procediamo con il prossimo esercizio in cui potremmo impiegare il
goniometro e progettare i nostri test end-to-end.
È una fortuna che la CLI angolare
imposta automaticamente tutto ciò di cui abbiamo bisogno per condurre test end-to-end,
come vedremo quando procederemo con l'esercizio.
Quindi, si tratta di attuare i vari test e
quindi di eseguire il test utilizzando il goniometro in questo esercizio.
Andando alla nostra applicazione angolare in Visual Studio,
se guardi il pacchetto del nostro file JSON,
vedrai che già troviamo
la CLI angolare ha impostato tutto ciò di cui abbiamo bisogno per eseguire i test end-to-end.
Quindi, mentre scorri verso il basso,
vedrai che il goniometro è già stato installato sul
nostro computer all'interno del progetto angolare.
Inoltre, notiamo che c'è una cartella separata qui
chiamata e2e che contiene alcuni file
che sono stati configurati già per eseguire test end-to-end.
Ora, se è necessario eseguire test end-to-end estesi,
allora è una buona idea creare
un file separato per ogni set di test end-to-end che si desidera eseguire.
Ora, in questo particolare esercizio,
vi sto solo illustrando come eseguire test end-to-end.
Quindi, ho intenzione di attenersi a ciò che è già stato impostato dalla CLI angolare.
Lavoreremo con i file che abbiamo a disposizione proprio lì.
Quindi, diamo una rapida occhiata a questi due file qui, l'app.e2e-spec.ts,
e vedrete che qualche codice è già stato impalcato in questo file da angolare.
Inoltre, questo altro file chiamato app.po.ts,
questo non è altro che una classe JavaScript standard
che è stata impostata con alcuni metodi qui.
Ora, quello che stiamo per fare è aggiungere alcuni metodi in più a
questa classe JavaScript e anche aggiornare alcuni di questi metodi che sono dati qui.
Imposteremo i nostri test nel file app.e2e-spec.ts.
Quindi, per procedere avanti,
andiamo all'app.
PO.ts, e quindi all'interno di questo file, aggiorniamo questo.
Quindi, qui, vedete che abbiamo due metodi che sono già stati impostati qui.
Ho intenzione di aggiornare questi metodi per consentire loro di prendere un parametro qui.
Quindi, dirò, NavigateTo con un link,
che viene fornito come una stringa,
e poi ho intenzione di aggiornare questo browser per
utilizzare il link che è il parametro per questo metodo.
Allora, cosa fa questo?
Quindi, come puoi vedere,
stiamo facendo uso della sintassi del goniometro qui.
Quindi, questo dice che il browser restituisce il link.
Quindi, questa particolare chiamata a questo metodo get del browser consentirà
alla nostra applicazione di navigare a questo particolare link che viene fornito come parametro qui.
Quindi, prima di questo aggiornamento,
hai visto che il link fornito qui era barra, il
che significa che la radice della nostra applicazione angolare.
Ora, ho aggiornato questo per prendere un parametro qui.
Allo stesso modo, il secondo metodo visualizzato è chiamato getParagraphText.
Ora, questo metodo viene utilizzato per ottenere il contenuto interno di un elemento HTML qui.
Quindi, per questo, anche,
imposterò un parametro chiamato selettore,
che è un selettore CSS che fornirò qui.
Quindi, vedi che qui dentro,
cambierò questo per prendere il selettore come parametro.
Ora, dalla precedente esperienza con il test unitario,
si vede cosa sta per and.css.
Questa è la stessa cosa che stiamo usando anche qui.
Questo per metodo qui utilizzato è ora importato dalla libreria del goniometro qui.
Anche il metodo elemento viene importato dalla libreria goniometro.
Quindi, questo metodo elemento consente di ottenere l'accesso a un elemento HTML
fornendo tale selezione per l'elemento HTML come parametro qui.
Quindi, puoi dire da css, byID
e molti altri metodi di questo tipo disponibili per la classe per qui.
Quindi, il metodo getText,
ottiene come vediamo il testo interno visibile di questo particolare elemento.
Quindi, questo è un modo per recuperare informazioni dal
particolare elemento HTML all'interno della nostra finestra del browser,
e quindi verificare se corrisponde a un modello che stiamo specificando qui.
Quindi, con questo aggiornamento per app.po.ts,
passiamo al file app.e2e-spec.ts.
Quindi, all'interno di questo file,
noterai che stiamo usando la sintassi Jasmine.
Quindi, qui, mi vedi usando descrivi e poi che dice let page AppPage.
Quindi, qui, la pagina è dove stiamo creando questa nuova classe chiamata AppPage,
che abbiamo dichiarato nel file app.po.ts come una classe JavaScript qui.
Ora, questo è solo un modo conveniente per impostare tutte le cose in una posizione,
e quindi essere in grado di farne uso nel mio codice di test stesso.
Quindi, qui, sto dichiarando la pagina per fare riferimento a questa AppPage,
e in modo che mi consenta di accedere
ai metodi che ho costruito in quella classe qui.
Quindi, il primo test che ho intenzione di fare è navigare alla
radice della mia applicazione angolare
e quindi controllare per vedere se c'è un modello specifico in questo.
Noterai che nella mia homepage
avrai la stringa
chiamata Ristorante Con Fusion
all'interno di un elemento H1 nella mia pagina.
Quindi, quello che ho intenzione di fare è navigare alla radice del mio elemento HTML.
Quindi, lì dentro, andrò a cercare
il percorso dell'app e poi cercherò il tag H1 all'interno del percorso dell'app.
Quindi, questo dovrebbe essere uguale a questa particolare stringa qui.
Quindi, ho intenzione di copiare
la stringa Ristorante Con Fusion lì e poi fornirla come parametro qui.
Quindi, sto solo aggiornando il test per verificare
esattamente ciò che abbiamo all'interno della nostra applicazione angolare aggiornata.
Quindi, con questa configurazione,
ora eseguirò il mio primo test della mia applicazione angolare.
Quindi, salviamo tutte le modifiche e poi torniamo al nostro terminale.
All' interno del terminale, nella mia cartella del progetto,
al prompt digiterò ng e2e.
Noterai che questo avvierà un browser.
Nel mio caso, avvierà una finestra di Chrome e quindi eseguirà il test in quella finestra.
Quindi, eseguiamo il primo test.
Vedrai che quando il test viene eseguito dopo aver compilato la mia applicazione angolare,
quando il test viene eseguito,
assicurerà che il test abbia successo.
Vedete che nella parte posteriore, il
mio browser è aperto dal ng e2e,
e quindi il test è stato eseguito in quella finestra del browser.
Dice che il test è stato eseguito con successo qui.
Quindi, noti che anche in questo caso,
deve avviare il browser,
caricare la mia applicazione angolare nel browser,
l'intera applicazione angolare nel browser.
Quindi, esegui il test dalla mia applicazione angolare.
A questo punto, assicurati che il tuo server,
il server JSON sia attivo e funzionante
, altrimenti, il test fallirà,
perché quando il test è stato eseguito,
proverà ad accedere anche al server JSON.
Quindi, questo è qualcosa che devi assicurarti.
Continuando con i nostri test.
Nel secondo passaggio,
ci accingiamo ad aggiungere un paio di altri metodi in questa AppPage.
Classe qui. Quindi, userei un nuovo metodo
chiamato getElement e quindi prenderò un parametro di un selettore.
Questo metodo mi consente di ottenere l'accesso all'elemento,
che viene selezionato utilizzando lo stesso dal selettore CSS.
Quindi, ho intenzione di copiare questo.
Quindi, in questo caso, invece di ottenere solo il testo,
restituirà effettivamente il riferimento all'elemento stesso,
e quindi in modo da poter aggiungere ulteriori modi per
accedere alle informazioni all'interno di quell'elemento come richiesto.
In questo caso, il get-text viene utilizzato solo per recuperare il testo specifico.
Potremmo usare altri metodi su
questo elemento per recuperare informazioni aggiuntive da tali elementi.
Quindi, questo è il motivo per cui sto creando questo metodo qui.
Allo stesso modo, implementerò un altro metodo chiamato get tutti gli elementi.
Ora, questo utilizza anche un parametro chiamato selettore proprio come prima.
Ciò che fa il metodo getAll è selezionare
tutti gli elementi e quindi restituirli al collare, in
modo che, ad esempio,
se la tua pagina contiene molti elementi h1 in
riferimento a tutti loro verranno restituiti al mio collare.
Quindi, che lì, posso quindi decidere di effettuare
una chiamata a uno specifico all'interno di questo elenco di elementi.
Quindi, per fare questo,
useremo lo stesso ritorno ma qui,
invece di dire selettore di elementi,
fammi solo copiare e poi abbiamo un altro metodo chiamato
element.all che ci permette di
accedere a tutti gli elementi che corrispondono a questo particolare selettore.
Il primo restituirà il primo elemento che corrisponde a quel selettore.
Dopo questi aggiornamenti, passeremo ora al nostro file di test e aggiungeremo un nuovo test qui.
Quindi, qui di nuovo, sto usando la sintassi Jasmine per aggiungere il nuovo test qui.
Quindi, lo dirò e poi darò una descrizione per questo test.
Dirà Si dovrebbe navigare a su di
noi pagina cliccando sul link.
Ora, se guardi indietro alla tua applicazione Angular,
noterai che all'interno della tua applicazione Angular,
hai i collegamenti di navigazione nella parte superiore della pagina.
Quindi, quello che faremo in questo test è quello di
andare automaticamente e accedere a uno di quei collegamenti di navigazione e fare clic su di essi.
Ora, naturalmente, come ci si aspetta che questo verrà fatto a livello di programmazione,
piuttosto che facendo clic manualmente sul link.
Quindi, per farlo,
quello che farò è navigare alla radice della mia applicazione Angular e quindi,
accederò ai
collegamenti nella mia barra di navigazione in alto.
Dicendo pagina, getAllelements e
poi otterrò tutti gli elementi che hanno il tag a lì dentro.
Ora, ovviamente, avrete molti di quelli a tag nella nostra pagina, ma i primi quattro,
sono i quattro link
nella barra di navigazione nella parte superiore della nostra pagina lì nel componente intestazione.
Quindi, ottenendo l'accesso a quelli
una nota ora che sto usando ottenere tutti gli elementi, quindi ho intenzione di ottenere un numero di elementi.
In questo caso particolare,
risulta essere circa 16 diversi tag che indosseranno in quella pagina lì.
Quindi, vado a selezionare.
Quindi, questo è dove utilizzo questo metodo chiamato get e quindi posso specificare
un indice per l'elemento specifico che voglio.
Quindi, ho controllato se guardi il file del modello dei componenti dell'intestazione,
noterai che nel secondo un tag nella
pagina HTML del componente di intestazione si riferisce al link su di noi lì.
Quindi, questo è ciò a cui ho accesso dicendo prendine uno.
Zero, ovviamente, si riferisce al link home
nel componente header in cui abbiamo creato la nostra barra degli strumenti in alto lì.
Quindi, ottengo l'accesso al secondo quindi questo è il link su lì.
Ora, una volta ottenuto questo link,
c'è un metodo che il goniometro supporta
su un elemento con un link lì chiamato click.
Quindi, questo, come vedi a livello di codice,
provoca un clic su quel particolare elemento nella finestra del mio browser lì.
Quindi, a livello di programmazione, stiamo eseguendo ciò che normalmente eseguiresti
manualmente andando fisicamente a quel link e facendo clic su di esso usando il mouse.
Ora, una volta cliccato sul link, ovviamente,
andrai alla pagina Chi siamo.
Ora, all'interno della pagina Chi siamo,
se andate a guardare il modello della pagina Chi siamo,
troverete che c'è un elemento h3 che contiene il nome di quella pagina.
All' interno di quell'elemento h3,
vedrai un testo chiamato About Space Us lì.
Quindi, questo è quello che sto per controllare ora.
Il motivo per cui ho intenzione di controllare è per assicurarmi di aver davvero navigato
alla pagina Chi siamo facendo questi passaggi nella mia applicazione Angular.
Quindi, questo è dove userò l'aspettativa.
Abbiamo già visto l'uso di aspettarsi e aspettarsi pagina.
getParagraphText e otterrò il testo del paragrafo da
h3 e questo mi aspetto ToBe.
Si noti l'uso della sintassi Jasmine qui e questo dovrebbe essere About Us.
Quindi, introducendo questo secondo test nel nostro file di test qui,
salviamo le modifiche che abbiamo fatto e poi andiamo ad eseguire questo test.
Sto andando al terminal.
Ancora una volta, permettimi di eseguire il test dicendo ng
e2e e noterai che questo passerà nuovamente attraverso lo stesso insieme di passaggi,
e quindi eseguirà entrambi i test che ora ho nel file di test.
È interessante guardare il test eseguito nel browser.
Così, si vede che siamo sulla Homepage,
ora si passa alla pagina Informazioni e poi successo.
Quindi, abbiamo navigato con successo
dalla homepage alla pagina Informazioni e quindi abbiamo verificato che hai
navigato alla pagina Informazioni eseguendo il
test specifico in cui abbiamo controllato per
assicurarci che l'About Us sia in un tag h3 all'interno della pagina Chi siamo lì.
Quindi, questo è un altro test end-to-end che possiamo eseguire,
e lei ha effettivamente visto che il test veniva eseguito proprio
davanti ai suoi occhi senza il suo intervento manuale.
Spero vi stiate divertendo a svolgere questi test end-to-end.
Diventiamo un po' piu' ambiziosi.
Ora, quello che faremo è navigare su un piatto particolare,
e poi provare a inserire un commento in quel piatto.
Ora, questo è dove ho intenzione di prendere l'aiuto del supporto Goniometro,
e mi vedrete usare alcuni altri metodi da
Goniometro per navigare alla pagina del piatto,
navigheremo al primo piatto nel nostro menu utilizzando
il link alla pagina dei dettagli del piatto con il parametro di quello piatto particolare,
l'ID del piatto particolare.
Quindi, identificheremo gli elementi di input del modulo,
e quindi digiteremo automaticamente le informazioni in
quegli elementi di input e quindi provare a inviare il modulo e vedere cosa succede.
Quindi, per eseguire questo test, di nuovo,
entrare e utilizzare la sintassi Jasmine,
introdurrò un esso qui e poi identificherò ciò che questo test sta cercando di fare.
Direi, «Dovrebbe inserire un nuovo commento per il primo
piatto» e la funzione freccia
e si vede che all'interno di questa funzione freccia,
stiamo andando a fare la nostra prima pagina navigateTo,
navigheremo al dishdetail zero.
Quindi, questo è il primo piatto nel nostro menu.
Ora, una volta che si naviga alla pagina dishdetail, diremo,
«lasciare che newAuthor è uguale a pagina getElement.»
Quindi, stiamo andando a trovare quell'elemento che è
input e digitare il testo qui,
quindi questo mi aiuterà a identificare quell'elemento di input in cui il nome dell'autore è
digitato nella forma che abbiamo creato nella nostra pagina dishdetail.
Se sei curioso,
vai a dare un'occhiata a quel modulo,
e poi vedrai che c'è davvero
quell'elemento di input in quella pagina dishdetail lì.
Quindi, accedendo a questo, ho intenzione di digitare il nome dell'autore
in quel campo di input lì.
Quindi, questo è dove il metodo SendKeys' supportato sul nostro elemento viene in nostro aiuto,
il metodo SendKeys' supportato da Goniometro.
Quindi qui, ho intenzione di digitare il nome dell'autore come autore del test.
Quindi, alla fine di questi due passaggi,
l'autore del test dovrebbe essere digitato nell'elemento di input nel mio modulo.
Ora, inoltre, ho anche bisogno di digitare il commento per quel modulo.
Possiamo anche impostare il valore di valutazione,
ma non ho intenzione di farlo in questo particolare test,
ho solo intenzione di digitare il valore del commento usando un approccio simile.
Quindi, dirò, «lascia NewComment», di
nuovo, otterrà pagina,
getElement, e poi questo è dove cerco
la textarea e newComment,
sendKeys e digito «Test Comment».
Quindi, questo riempirà le parole Test Comment nell'area di testo
che contiene i commenti che
l'autore dovrebbe inviare per quel particolare piatto.
Dopo questo, troveremo il SubmitButton.
Quindi, per fare ciò, diremo
page.getElement tipo pulsante invia,
e poi una volta che entriamo in possesso del pulsante diciamo solo, newSubmitButton.click.
Quindi, una volta fatto clic sul pulsante,
il commento lo invierà di nuovo.
Ora, ho intenzione di utilizzare un altro metodo che Goniometro supporta.
Ho intenzione di mettere in pausa il test a quel punto.
Questo mi permetterà di superare il test e quindi eseguire il test o l'impianto,
quindi questo dice, il browser non è definito,
quindi ho bisogno di tornare qui e quindi importare il
browser dalla libreria
Goniometro lì, e poi vedi che la linea rossa ondulata è scomparsa,
quindi il mio test dovrebbe tutti essere impostato correttamente lì.
Quindi, lasciami salvare le modifiche,
andremo ed eseguiremo anche questo terzo test,
insieme ai restanti due test che abbiamo già inserito.
Andando al browser, lasciami ancora eseguire il test end-to-end,
quando il browser si apre, ci andiamo,
il primo test è stato eseguito e che dovrebbe avere successo,
il secondo test è stato effettuato e il terzo test in cui abbiamo navigato dettaglio piatto,
e vedi che il commento di prova è stato inviato correttamente dal nostro test.
Quindi, con questo, completiamo questo esercizio.
In questo esercizio, hai eseguito tre test diversi utilizzando il supporto di
Goniometro e hai scoperto che la nostra applicazione supera tutti questi tre test end-to-end.
Questo è un buon momento per salvare le modifiche al
tuo repository Git usando il test end-to-end dei messaggi.