[MUSICA]
Il profumo del gelsomino di tutte quelle ghirlande di fiori
sulla via del tempio che si diffondono nell'aria.
Che sensazione di assestamento.
Dev' essere il karma buono della mia vita passata.
Scusa, dov'ero?
Ti parlavo di test angolari, giusto?
E useremo la regolazione del karma per fare i nostri test angolari.
Quindi andiamo avanti con esso.
Una buona cosa dell'utilizzo della CLI angolare è che imposta tutti gli scaffolding
per includere automaticamente il supporto per
testare l'applicazione Angular.
Quindi noterai che ogni volta che generi un componente o
un servizio insieme ai file ts del componente,
noterai anche un file chiamato component.spect.ts
già incluso nelle cartelle del tuo progetto.
Inoltre, se vai al file package.json,
vedrai che esiste già il supporto per il test angolare incluso lì.
Quindi, se vai nelle dipendenze di sviluppo vedrai che il core del gelsomino,
il reporter delle specifiche del gelsomino, i
moduli npm relativi al karma e al karma sono già installati all'interno della tua
applicazione angolare che è impalcatura da Angular CLI.
Quindi, abbiamo tutte le cose e il posto per
noi per andare avanti con il nostro test per la nostra applicazione angolare.
Quindi, se ti guardi intorno vedrai che c'è
un file chiamato test.ts nella tua cartella sorgente,
quindi apriamo il file test.ts.
Vedrai anche che c'è un'altra cartella qui chiamata a e2e.
Torneremo su questo nel prossimo esercizio.
Ma nella cartella test.ts, vedrai che questo è dove
il tuo supporto karma viene configurato qui.
Quindi, andando in questo file test.ts, per impostazione predefinita,
quando si utilizza il supporto CLS angolare per il test,
eseguirà i test per tutti i componenti e
i servizi inclusi nella tua applicazione angolare.
Ora, ho intenzione di illustrarvi come fare test per
un componente specifico, il MenuComponent.
Quindi voglio limitarmi a usare solo il file.spec del componente del menu e
fare il test solo per il componente del menu.
Quindi, vai nel file test.ts.
Un modo per configurare il test CLI Angular per eseguire il test solo per
un componente specifico è quello di andare a questa riga qui,
che dice const context e quindi cambiare questo in menu, è
possibile vedere /menu\ .component e spec.ts file.
In precedenza era solo/\ .spec.ts file, il che significava che
eseguirai tutti i file di specifiche presenti nella cartella di origine del progetto.
Quindi, in questo momento, specificando questo qui,
sono interessato a eseguire il test solo per il file delle specifiche del componente del menu qui.
Ora questo lo capisco cercando nell'
overflow dello stack in cui ho trovato qualcuno che mi dà la risposta a questo,
puntando a qualche risorsa su Angular CLI, ed
è così che ho capito che questo è il modo per limitare
il test al file di test di un componente specifico.
Quindi, dopo aver apportato una modifica al file test.ts, salviamo la modifica.
Ora, cercheremo di eseguire il nostro test sul componente menu.
Quindi, come vedi, nel componente menu, abbiamo già il
file.spec.ts componente menu, che contiene già del codice.
Proviamo a eseguire questo test e vediamo cosa succede.
Andando al terminale, aggiungere il prompt, digitare ng test, e questo
si tradurrà in una CLI angolare che avvia il test per il componente menu.
Quindi, quando digiti questo e premi Return, la
CLI angolare inizierà a compilare la tua applicazione angolare.
Si aprirà anche una finestra del browser, nel mio caso aprirà una
finestra del browser Chrome e quindi utilizzerà quella finestra del browser per eseguire il test.
E si vede che nella parte posteriore, si ha la finestra del browser Chrome in esecuzione ed
è tutto pieno di rosso e un sacco di parole lì.
Le stesse informazioni verranno stampate anche nella finestra della console
e da questo posso vedere che il mio test non è stato eseguito correttamente.
C' è qualcosa che non è configurato correttamente nel mio file di test, quindi dovrò andare a
modificare il mio file di test per includere il supporto appropriato per eseguire correttamente questo test.
Quindi andiamo al file spec.ts componente del menu e
quindi preparare il nostro test di conseguenza.
Ora possiamo lasciare il test ng in esecuzione proprio qui.
Ogni volta che si apportano modifiche al file mini component.ts o
al file mini component.spec.ts e si
salvano le modifiche, questo test verrà eseguito automaticamente a quel punto.
Quindi, andiamo al file MenuComponent.spect.ts.
Passando al file MenuComponent.spect.ts,
sappiamo che il file spect utilizza la sintassi Jasmine per descrivere il test.
Quindi hai già notato che c'è qualcosa qui
che inizia con description e poi c'è una funzione definita lì.
Quindi questo è ciò a cui mi riferivo quando ho parlato della sintassi di Jasmine prima.
E anche se scorri verso il basso vedrai un esso o giù di lì dentro.
E in aggiunta, vedrai qualcosa chiamato primaEach, qui.
Esaminiamo questo file in modo più dettagliato per capire come questo
file è configurato e come questo test è impostato in questo particolare file.
Quindi all'interno di questo file di test, noterete che
stiamo importando qui una serie di classi da test core angolari.
Quindi questo modulo consente di fornire il supporto di test per
l'applicazione angolare e consente di progettare il test per il componente.
Quindi vedi che sto importando async e
ComponentFixture e TestBed da questa libreria di test.
Lo chiamerò libreria di test.
Inoltre si vede che il MenuComponent è anche importato qui.
Ora, una volta che abbiamo capito questi due,
andiamo giù il codice per capire cosa stiamo cercando di fare qui.
Quindi, qui, come ci si aspetta, questa descrizione qui sta
specificando che questa particolare funzione sta descrivendo,
Un test basato su Jasmine che stiamo specificando per la nostra applicazione angolare.
Quindi, quando guardi la descrizione qui,
vedrai che questo include tutto questo codice qui.
Quindi questo fa parte di un singolo insieme di test che stiamo eseguendo sono il nostro
componente di menu.
Quindi all'interno della descrizione, vedrai che c'è una stringa qui.
Questo specifica questo particolare insieme di test che stai eseguendo qui.
Quindi, dice sul componente del menu.
Quindi qui puoi specificare qualsiasi stringa vuoi.
È possibile utilizzare questo come descrizione per
specificare cosa sta facendo questo particolare insieme di test.
Quindi qui, sto per stare con una cosa prima.
Stiamo cercando di testare il componente del menu.
E dopo di che, si vede che stiamo specificando una funzione addo qui.
All' interno di questa funzione addo, stiamo andando a costruire il test.
Per il nostro MenuComponent qui.
Quindi, dopo questo, vedrete che stiamo dichiarando una variabile chiamata componente,
che è del tipo MenuComponent. Di
tanto in tanto, stiamo anche dichiarando una variabile fixture,
che è del tipo ComponentFixture.
Quale è del tipo MenuComponent.
Ora, perché è interessante?
Ora, all'interno della nostra applicazione angolare,
abbiamo il MenuComponent che abbiamo già progettato.
Quindi, in questo file di test,
stiamo andando a creare quel MenuComponent utilizzando il TestBed angolare,
e poi abbiamo intenzione di effettuare i test sul MenuComponent.
Quindi abbiamo intenzione di isolare il MenuComponent, e
quindi eseguire test unitari su quel componente specifico.
Ora, questo è dove le utilità di test angolari
che vengono fornite con il supporto utilizzando TestBed.
Il TestBed mi consente di impostare l'ambiente all'interno del quale
posso testare il mio componente angolare.
Quindi qui, vedete che stiamo dicendo TestBed e
poi chiamando il metodo del modulo di test di configurazione della classe TestBed qui.
E all'interno di questo modulo di test di configurazione,
puoi dichiarare un sacco di cose, e mi vedrai aggiungere di più qui.
Questo agisce esattamente come la configurazione del modulo NG
che fai per il nostro modulo lì.
Quindi tutte le informazioni di cui hai bisogno per
impostare il MenuComponent saranno dichiarate qui.
Quindi la parte del modello NG che hai visto nel modulo app,
simile tipo di sintassi può essere usata qui per dichiarare il supporto per
testare il MenuComponent qui.
E anche dopo questo, vedrai questa funzione chiamata a compileComponents.
Quindi questo metodo compilerà il MenuComponent e
lo renderà pronto per fare il test.
Nota anche, che tutta questa cosa, questa funzione qui,
è racchiusa all'interno di qualcosa chiamato asincrono qui.
Ora, perché abbiamo bisogno di questo asincrono?
Ora, poiché la preparazione dei componenti che utilizzano questo
metodo compileComponents richiede una certa quantità di tempo.
E fino a quando questo non sarà completato, non possiamo procedere con i test.
Quindi, usando il modulo asincrono, stiamo essenzialmente specificando che
aspetterò il completamento di questa intera cosa prima di procedere in avanti.
Quindi il modulo asincrono come vedi,
avvolge una funzione di test all'interno di una zona di test asincrona.
Quindi, ciò significa che questo test verrà completato automaticamente
quando vengono eseguite tutte le chiamate asincrone all'interno di questa zona.
Quindi questo è ciò che fa l'uso dell'asincrono che abbiamo qui.
Quindi ciò significa che è possibile utilizzare questa funzione di sincronizzazione,
sia nel prima di ciascuno o anche in esso, quindi all'interno di esso, la nostra dichiarazione.
Quindi, quando vedi anche all'interno di esso, vedrai che puoi usare l'asincrono.
Quindi, nel caso in cui tu abbia delle operazioni qui eseguite in modo asincrono.
Quindi è necessario attendere il completamento di tali operazioni per il completamento di tale test.
Quindi, ad esempio, se stai chiamando un servizio e attendi che
il servizio restituisca il valore, allora.
Tutto ciò che deve essere completato prima di poter procedere in avanti.
Quindi quelli sono abilitati usando questo asincrono, per circondare questa funzione qui.
Ora, in aggiunta, il secondo primaOgni, ora abbiamo separato
questo in due separati primaOgni qui, perché vogliamo che questo completi.
E questo CompileComponents sta per richiedere un certo periodo di tempo,
soprattutto se il componente sta usando un modello esterno,
come facciamo nel nostro MenuComponent.
Quindi, richiede un po 'di tempo affinché il modello esterno si prepari per
il mio test per procedere in avanti.
Quindi, dobbiamo aspettare che tutto questo finisca.
Ecco perché dopo che questo è completo,
arriveremo alla seconda parte dove avremo alcuni
riferimenti ad alcuni valori dal banco di prova.
Ora, cos'è questa funzione beforeEach che stai facendo qui?
Ciò che BeforeEach significa è che qualunque cosa tu dichiari qui dentro,
quella funzione verrà eseguita BeforeEach test,
che specificherai in seguito usando il suo.
Quindi, utilizzando questo beforeEach, è possibile impostare la
configurazione iniziale per il test per procedere in avanti.
Quindi significa che qui, stiamo impostando il nostro TestBed,
preparando il nostro componente di menu e poi impostando alcune cose per
il nostro componente di menu, prima di procedere per eseguire il test.
Quindi, per ciascuno dei test che hai intenzione di specificare usando un qui,
questi prima di ogni cosa tu specifichi in questo prima di ogni,
verranno eseguiti prima che il test sia condotto.
Quindi qui, come puoi vedere, sto preparando il TestBed.
Poi, dopo, avro' accesso all'apparecchio.
Quindi sto usando TestBed, sto dicendo CreateComponent e MenuComponent.
Quindi questo mi restituirà un riferimento al MenuComponent che
sto creando all'interno del mio script di test qui e
poi otterrà un riferimento a questo, perché avrò bisogno di un riferimento
a quello per fare alcune manipolazioni su quel componente lì.
Inoltre, dallo staffaggio, sto ottenendo un accesso all'
istanza del componente che viene creata dal mio staffaggio componente qui.
Quindi, come puoi vedere, l'apparecchio componente del tipo MenuComponent e
quindi chiamare componentInstance, mi dà accesso a quel
componente di menu specifico che ho creato all'interno del TestBed per eseguire i test unitari.
Ora, dopo questo chiamiamo questo questo DetectChanges.
Ora, ciò che significa è che questo procederà in avanti solo dopo che tutte le modifiche
sono state completate, e quindi riconoscerà che le modifiche sono state completate.
Quindi questo attiverà un ciclo di rilevamento delle modifiche per questo componente.
Quindi ciò significa che questo ti assicurerà di aver apportato tutte le
modifiche in precedenza, tutte le modifiche vengono rilevate e
tutto è stabilizzato prima di poter procedere con il test.
Ora, dopo questo, useremo il nostro per configurare il nostro primo test qui.
Qual è il primo test che stiamo facendo qui?
Il primo test,
quello che stiamo per testare è quello di assicurarsi che il componente è stato creato.
Quindi, all'interno di questo qui, sto usando la sintassi Jasmin e lo sto dicendo.
E poi qui puoi dare una descrizione sotto forma di una stringa
per specificare su cosa sta effettivamente testando questo test.
Quindi, quello che stiamo dicendo è,
stiamo testando per vedere se il componente è stato creato o meno.
Quindi, per farlo, sto dicendo che dovrebbe creare il significato che,
questa configurazione qui dovrebbe aver creato correttamente il componente.
Ecco perché qui dentro, sto usando questo metodo chiamato aspettare.
Quindi il metodo atteso qui dentro prende un valore qui, e
quindi puoi testare per vedere se questo valore soddisfa qualcosa.
Quindi qui stiamo dicendo toBetruthy, il che significa che questo particolare valore dovrebbe essere vero. Questo
è ciò che viene specificato da questo metodo chiamato qui chiamato toBetruthy.
Puoi anche dire tobeFalsy, il che significa che dovrebbe valutare falso.
Ma in questo caso,
stiamo testando per assicurarci che il componente sia stato creato correttamente.
Quindi e' per questo che stiamo dicendo che aspettatevi Tbetruthy qui.
Quindi questo è un semplice test che stiamo facendo per assicurarci che il nostro
componente venga creato correttamente.
Ma come ci rendiamo conto quando eseguo questo test, non funziona correttamente.
Diamo rapidamente un'occhiata e vediamo qual è il problema all'interno della
nostra creazione di componenti nella finestra della console lì.
Tornando alla finestra della console, lasciami solo sfogliare indietro e
vedere dove si trova il problema.
E sto iniziando a notare che questo sta specificando che non
sembra riconoscere alcune delle cose che il mio componente sta usando.
In particolare, sta dicendo che MDSpinach
è qualcosa che non riconosce,
MDGetGridList e alcune altre cose. Questo
mi suggerisce immediatamente che ho bisogno di fare alcune altre
configurazioni all'interno del mio file di test prima che il mio test possa funzionare correttamente.
Quindi, torniamo al nostro file di specifiche e apportiamo alcune modifiche ad esso.
Tornando al nostro file di specifiche,
dal nostro ricordo di come abbiamo creato il modello.
Sappiamo che all'interno del modello avevamo un collegamento router nel
modello di MenuComponent.
Quindi ho bisogno di supporto per il routing per riconoscere quel
collegamento router che abbiamo usato all'interno del file MenuComponent.html.
Quindi questo è dove ho intenzione di importare
un altro supporto di test fornito
chiamato come RouterTestingModule,
che è disponibile dalla libreria Angular/router/testing qui.
Quindi questo modulo di test del router mi permetterà di
configurare alcuni aspetti sul mio router.
Vedremo che il modo in cui usiamo questo è un po 'diverso dal modulo router
che abbiamo usato nella nostra applicazione.
Quindi importeremo il modulo di test di routing, inoltre si nota
che stiamo usando alcune animazioni, e
anche utilizzando il componente materiale angolare all'interno del nostro modello.
Quindi ho bisogno di importare
BrowserAnimationsModule nel mio file di test.
Quindi questo viene dal angolare/piattaforma/browser.
Ora noterai che dobbiamo farlo esplicitamente qui semplicemente perché,
nell'effettiva applicazione Angular tutto questo era nel modulo app,
e quindi era disponibile per i componenti. In questo
momento stiamo testando questo componente, il MenuComponent in isolamento, quindi
è per questo che non conosce tutte queste cose, quindi
dobbiamo specificare esplicitamente tutte queste cose qui.
Quindi lo importerò dall'animazione del browser della piattaforma IM qui.
Quindi animazioni angular.platform.browser che importano il
modulo di animazioni del browser qui.
Permettetemi di includere il modulo di livello flessibile, quindi
includerò Angular FlexLayout.
Quindi questi sono necessari perché ne ho bisogno nel modello,
ho intenzione di importare anche quel piatto da,
condiviso/piatto perché come vedrai più avanti,
ho bisogno di configurare, A,
DishService perché il mio MenuComponent
dipende dal DishService quindi
ho bisogno che anche sul posto.
Anche se vedrai che ho intenzione di fermarlo.
Lo spiegherò in breve tempo, e anche ho bisogno di importare alcune altre cose.
Importerò piatti da,
si ricorda che usiamo questa costante chiamata PIATES
che abbiamo esportato dal file condiviso/dishes.ts.
Ne avrò bisogno per configurare alcune altre cose.
Ho anche intenzione di importare il BaseURL.
Che ho dichiarato nel
file url condiviso/base.
E anche, ho bisogno di importare
Observable da,
rxjs, slash, Perché
userò anche Observable un po 'più tardi, quando configurerò alcune cose.
Così ora, ho importato tutte queste cose.
Entrando nella configurazione TestBed, si vede che questa
parte è esattamente come il decoratore del modulo motore che abbiamo nel modulo app.
Quindi questo è dove posso anche usare le importazioni proprio
come ho fatto con il modulo motore.
E all'interno delle importazioni, ho intenzione di importare il
modulo BrowserAnimation perché questo è qualcosa che richiede, e
quindi anche importare il modulo FlexLayout.
E anche il RouterTestingModule perché
avrei bisogno di RouterTestingModule per configurare alcune cose.
Ora, quando si utilizza il routerTestingModule, è necessario utilizzare questo metodo
chiamato WithRoutes invece di usare forRoot come abbiamo usato con il modulo router qui.
Quindi all'interno di questo withRoutes puoi specificare alcuni
percorsi predefiniti di cui hai bisogno per la tua applicazione specifica qui.
Ho solo intenzione di configurare solo un singolo percorso qui,
e questo è abbastanza buono per me per testare questo modulo qui.
Quindi sto solo andando a dire percorso: 'menu',
e componente: menuComponent.
Poiché i modelli MenuComponent utilizzano determinati componenti di materiale,
andiamo avanti e importarli.
Quindi importeremo il MatGridListModule
da @angular /material/grid-list e
anche il MatProgressSpinnerModule da
@angular /material/progress-spinner.
E una volta che li abbiamo importati, allora andiamo avanti e
includerli nelle importazioni qui sotto.
Quindi aggiungiamo il MatGridListModule e MatProgressSpinnerModule.
E questo è tutto ciò di cui ho bisogno per
queste importazioni particolari da configurare qui.
Quindi, insieme alle importazioni, abbiamo le dichiarazioni in cui ho
il MenuComponent usato qui, posso anche configurare i provider qui.
Quindi ho bisogno di configurare i provider qui.
Ora questo è dove stiamo andando
a creare alcuni stub qui, quindi
dirò fornire: DishService.
Ora, il DishService che useremo qui non sarà il vero
DishService.
Quando si esegue il test di un componente, non si desidera utilizzare un servizio reale.
Invece, si rischia di eliminare il servizio e
quindi utilizzare uno stub DishService, che chiamerò come DishServiceStub.
Quindi dirò, useValue: DishServiceStub.
Quindi questa sarebbe una funzione stub che userò
per contrassegnare il DishService qui.
Quindi questo è uno di cui farò uso.
E anche il secondo che
userò è BaseURL,
che userò il valore come BaseURL
che abbiamo già importato in precedenza.
Quindi, ora, con questo, ho effettivamente configurato il mio modulo di test,
quindi noti che il modo in cui specifichiamo questo è esattamente come il modo in cui
specifichiamo il decoratore del modulo NG per il nostro modulo app.
E qui, stiamo solo configurando quelli che sono richiesti dal MenuComponent, quindi
non ho gli altri che usiamo nel modulo app stesso.
Quindi questo è il modo in cui configureremo il modulo di test.
Ora l'unica cosa che manca è questo DishServiceStub.
Quindi quello che ho intenzione di fare è
implementare una funzione qui e
chiamare che lascia che DishServiceStub
sia un semplice oggetto JavaScript qui,
che lascerò agire al
posto del servizio reale.
Possiamo stupire servizi come questo, come si vede qui.
Quindi qui dentro, ho solo intenzione di
fornire una semplice funzione,
la funzione getDises qui,
che restituirà Observable del tipo di array Dish.
Quindi è esattamente come il valore di ritorno è stato configurato lì.
E ho intenzione di restituire
un osservabile di piatti qui.
Quindi, usando questa funzione stub qui,
quello che sto facendo è che sto stubbing il DishService, e
quindi configurarlo con questo metodo di cui ho bisogno per
la mia cache, dicendo getDises, e quando questo metodo viene chiamato,
restituirò questo valore.
La costante PIATTI, qui.
Quindi in questo modo, ora puoi vedere come sto controllando ciò che viene
fornito al componente da uno stub DishService che ho appena creato qui.
Quindi questo è il modo in cui creerai stub per il tuo DishService.
L' altro approccio che possiamo usare per i
casi in cui stiamo usando i servizi è chiamato come usando la spia.
Jasmine supporta qualcosa chiamato Spy, che ci permette di spiare le chiamate di funzione,
e quindi catturare le chiamate di funzione, e quindi rispondere a quelle chiamate di funzione.
Quindi questo è un altro modo di usare un servizio falso al posto del servizio reale.
Così ora siamo in grado di controllare ciò che viene fornito al nostro componente menu.
Quindi, dopo queste modifiche, allora
andremo giù nel nostro prima di ogni metodo qui.
Dopo l'asincrono, quello che
farò è entrare in possesso del DishService.
Quindi vedi che sto usando il banco di prova e quindi usando il
metodo get del banco di prova per entrare in possesso del dishService che è stato creato qui,
da questo particolare stub che abbiamo dichiarato qui nei provider.
Quindi questo mi dà un riferimento al DishService in
modo da poter chiamare i metodi di DishService ovunque ne abbia bisogno qui.
Quindi, dopo aver fatto queste modifiche, salviamo le modifiche e
poi vediamo come la nostra CLI angolare eseguirà questo test dopo queste modifiche,
e se il nostro test avrà successo a questo punto o meno.
Quindi salviamo le modifiche.
Nel momento in cui salverai le modifiche noterai che il tuo
test NG riavvierà nuovamente il nostro test.
Quindi compilerà l'applicazione e quindi rieseguirà il test.
E voilà, il nostro test è passato con successo dopo
aver apportato le modifiche al nostro file component.spec.ts.
Quindi il nostro primo test, il che significa che ora siamo in grado di creare un componente di menu
dal nostro menu, component.spec.ts file lì.
Quindi la nostra configurazione di test funziona bene.
Ora posso entrare e fare test più intensi all'interno del mio componente di test.
Tornando a quel file component.spec del menu, lasciami aggiungere un altro test.
Ora vedi che perché ora ho un servizio stabilito qui
che sta restituendo questo valore PIATS, posso quindi utilizzare il mio DishService,
a cui ho ottenuto il riferimento qui.
All' interno era prima di ciascuno, quindi chiama il metodo
getDishes e poi sarò in grado di ottenere il valore.
E questo sarà disponibile all'interno del mio componente di menu che ho appena creato.
Quindi il mio MenuComponent ora dovrebbe avere accesso alla costante dei piatti che
è stata fornita di nuovo attraverso questa fermata di stoviglie.
Quindi ora posso testare per vedere se la variabile piatti all'interno del mio
MenuComponent sta effettivamente ricevendo i valori correttamente o meno.
Quindi, entrando, fammi creare un altro test qui.
Quindi creerò un test qui, Con il esso,
come hai visto prima, così proprio come il precedente.
Questo secondo test ho intenzione di chiamare che come esso e
piatti, Gli articoli dovrebbero essere 4,
perché la costante piatti che abbiamo dichiarato
nel file shared.dish ha quattro piatti nella costante lì.
Quindi, quando la mia variabile piatti all'interno del mio
file MenuComponent o ts viene inizializzata chiamando il dishservice.
Avrebbe dovuto ricevere quei quattro piatti ed essere
inizializzato con quei quattro piatti.
Quindi ho intenzione di effettuare alcuni test su quella variabile piatti lì.
Quindi, come posso accedere alla variabile piatti qui?
Quindi direi che gli articoli piatti dovrebbero essere 4, e
poi dichiarerò una funzione freccia qui.
E all'interno di questa funzione freccia ho intenzione di specificare
i vari test che ho intenzione di eseguire.
Quindi qui ho intenzione di dire aspettare (componente. ,
e notare che mi dà automaticamente
accesso a questa proprietà piatti da MenuComponent.
Quindi posso dire che component.dish, e quindi posso testare
per vedere che la lunghezza di quell'array di oggetti JavaScript dovrebbe essere.
Quindi questo è dove uso il metodo ToBe di Jasmine qui.
E poi posso specificare il valore 4,
perché stavo fornendo 4 piatti nei miei piatti costanti
che ho dichiarato nel file shared.dish lì.
Quindi questo è il primo test che eseguirò,
questo dovrebbe rivelarsi vero.
Altrimenti l'installazione non ha funzionato correttamente, quindi
so che il mio codice non funziona correttamente.
Ma so per certo che questo test dovrebbe funzionare correttamente.
Se vuoi essere sicuro,
salviamo le modifiche e poi andiamo a vedere il nostro test in esecuzione.
Andando a quel terminale,
vedi che ora la mia app viene ricompilata e il test viene eseguito.
E nota tutti i verdi nella finestra del terminale.
Dice eseguito 1 di 2 successo, eseguito 2 di 2 successo.
Il che significa che entrambi i miei test sono stati eseguiti correttamente.
Se guardo il mio browser, in modo da vedere che il MenuComponent,
entrambi i test hanno successo.
Permettetemi di crearne altri e
aggiungerli a quel set di secondo gruppo di test che sto creando lì.
Andando al file menu_component_spec.ts, aggiungerò un altro.
Dirò aspetto componente. ,
e dirò piatti [1].
Ricordiamo che il nome del primo piatto era,
Quindi questo è quello che ho intenzione di testare, i piatti [1] .name.
Quindi questo è il modo in cui posso testare per vedere se sta ricevendo i valori correttamente.
Quali sono tutti i modi in cui posso testare?
Se metto un puntino lì, mi darà un suggerimento di tutte le possibilità qui.
Quindi dirò, userò anche di nuovo il metodo ToBe qui.
E poi il nome del secondo piatto è,
solo che lì, quindi quella è la seconda caster che ho intenzione di eseguire.
Quindi, se il mio codice è stato eseguito correttamente, anche questo dovrebbe passare.
Allo stesso modo, lasciatemi mettere in un altro qui.
Quindi dirò aspettarsi,
componente.Piatti e dirò 3.
E qui, la
proprietà in primo piano dovrebbe essere Falsy.
Che tu debba essere falso, non è vero in questo caso, permettetemi di aggiungere un altro.
Puoi iniziare ad aggiungere di più se vuoi,
giocare con esso fino a quando non sei soddisfatto.
Anche quelle aggiunte. Lasciami salvare le modifiche che ho apportato
qui, andiamo a vedere se questo test viene eseguito correttamente.
E tornando al mio terminale, vedete che il mio test e' di nuovo in esecuzione.
Vedete che entrambi i test hanno avuto successo,
ora farò fallire una di quelle cose.
Quindi entrero' e cambiero' la situazione in verita'.
Vedi, questo e' il divertimento di giocare con il codice.
Cambierò la situazione in verità e so che questo test fallirà.
Quindi salviamo le modifiche.
Dando un'occhiata al terminale, ci si vede che il test è fallito.
Vedi tutto questo rosso qui, il che significa che il secondo test non è passato correttamente.
E se si scorre all'indietro, si vedrebbe questo particolare test fallito,
perché da qualche parte laggiù dirà che non è stato così.
Ok, vedi questa affermazione qui dice che si aspettava falso essere veritiero,
quindi è per questo che ha fallito.
Quindi non doveva essere vero, ma ho detto che dovrebbe essere vero, e
ovviamente il test è sbagliato, quindi è per questo che il test è fallito.
Quindi questo è il modo in cui puoi anche testare per vedere se il test fallisce,
se hai chiesto anche le cose sbagliate.
Ma ancora una volta, lasciami tornare indietro e correggerlo ancora una volta.
Quindi tornando al mio, File li cambierò
di nuovo in falsy, perché voglio che questo test funzioni correttamente.
Ora non siamo ancora soddisfatti.
Ora in questo particolare test sto testando solo la
variabile piatti che si trova all'interno del mio MenuComponent.
Come faccio a giocare con il modello stesso?
Quindi questo è dove abbiamo bisogno di un po 'più di aiuto da Angular.
Per eseguire alcuni test sul modello, ho intenzione di entrare e
tirare un altro paio di importazioni qui.
Quindi andando alla mia parte superiore di questo file, menu_component_spec.tsfile.
Ho intenzione di importare, Un
altro chiamato da, che è un metodo.
Mi vedrai usare questo tra poco.
Questo dovrebbe essere importato da, Angular,
/platform-browser.
E anche, ho intenzione di importare un altro che è un elemento di debug.
L' elemento di debug mi consente di ottenere l'accesso al DOM in
modo da poter eseguire test sugli elementi DOM direttamente.
Quindi è lì che ho intenzione di importare questo da, il codice angolare qui, quindi questi due.
Quindi aggiungi il By e il DebugElement alle importazioni, e
poi una volta che lo fai, cammineremo nel codice qui.
E poi aggiungeremo in un altro test dove andremo nel DOM e
recuperare uno degli elementi dal doc.
Quindi lo direi, quindi un altro test qui,
cosa farà questo test?
Per questo test, specificherò
il test come dovrebbe usare piatti nel modello.
Sto solo dicendo qualcosa in modo casuale qui,
perché voglio solo verificare che la variabile piatti,
qualunque cosa stia rendendo disponibile, viene utilizzata correttamente nel modello.
Quindi questa è la parte che sto impostando, e
poi la seconda parte è la funzione freccia, e
all'interno di questa funzione freccia fornirò il codice per il prossimo test.
Quindi all'interno di questa funzione freccia quello che ho
intenzione di fare è prima chiamare l'apparecchio e
quindi rilevare le modifiche.
E poi dopo che dirò let de:,
È un DebugElement.
Attraverso questo ho intenzione di ottenere l'accesso al DOM e
quindi l'elemento sarebbe HTMLElement.
Quindi voglio avere accesso a uno degli HTMLElements dal mio DOM.
Quindi quale elemento voglio?
Quindi, per farlo, otterrò l'accesso a,
DebugElement dicendo fixture e DebugElement.
Quindi questo mi permette di ottenere l'accesso agli elementi dal mio DOM qui in modo debugElement.
E poi posso interrogare e poi scegliere solo quelli che mi interesseranno.
Quindi ho intenzione di interrogare e poi chiederò utilizzando il By.
Quindi nota dove sto usando il By che ho incluso importandolo.
Quindi By, The By supporta un sacco di metriche con cui posso
chiedere di accedere a particolari elementi nel DOM.
Quindi, come puoi vedere, mi dirà cosa posso importare e
quindi il.css mi permette di ottenere l'accesso
agli elementi corrispondenti dal selettore css specificato.
Quindi qual è il selettore css che userò?
So che c'è un elemento h1, un elemento html nel DOM e
che ho intenzione di ottenere l'accesso al primo elemento h1 dal DOM.
E uno degli elementi h1 in là è quello che
sta per mostrare il nome di ogni piatto lì.
Guardate indietro e vedete che all'interno della griglia timeline usando un h1 e
che h1 contiene il nome del piatto lì.
Quindi ho intenzione di entrare in possesso di questo e
poi ho intenzione di ottenere un elemento e poi direi de,
dall'elemento di debug, e poi direi nativeElement.
E questo mi dà accesso all'elemento specificamente nel DOM
a cui mi riferisco e ho selezionato usando questa affermazione in precedenza.
Quindi, quando interrogo il DOM e poi dico, restituitemi tutti
quelli che stanno usando il tag h1 per l'elemento HTML.
E ottengo l'accesso a questo, e posso interrogare e
dire aspettatevi (el.textContent).
Quindi sto cercando il contenuto all'interno di questo h1 nel mio
modello di contenuto fisso e poi dirò toContain.
Quindi questo è un altro metodo, toContain, questo è un metodo Jasmine chiamato toContain.
Questo controlla se contiene un valore particolare,
e quindi controllerò i piatti (0) .name.
Quindi il primo piatto è stato creato nel DOM e aggiunto nel DOM?
Se il mio modello funziona correttamente, allora deve essere presente nel DOM.
Quindi questo è quello che controllerò per vedere se la tessera della griglia corrispondente
al primo DISH è stata creata e aggiunta nel DOM o meno.
Quindi dico PIATTI (0) .name e dico in maiuscolo.
Ricordiamo che ho usato la pipe maiuscola per visualizzare il nome
del DISH convertendo il nome del piatto in
tutte le maiuscole nella tessera della griglia nel componente del menu.
Quindi e' quello che controllero', ok? Quindi sto solo controllando
uno di loro.
È possibile eseguire molti di questi test, è possibile controllare per
PIATTI (1) .name e poi PIATES (2) .name e altro se si desidera.
Sto solo illustrando un esempio di come accederesti agli elementi del DOM e
poi controllerai cosa contengono lì dentro.
Quindi questo è un test che condurrò qui, quindi lasciami salvare le modifiche
e poi vedere se il test viene eseguito correttamente.
Vai in quel terminale e quando il test viene eseguito,
vedi che il mio primo test ha avuto successo, il secondo test ha avuto successo,
e anche il terzo test ha avuto successo, meraviglioso.
Ora, lascia che il terzo test fallisca.
Andando al file menucomponentspec.ts,
rimuoverò questo in maiuscolo e quindi eseguirò lo stesso test.
Vedrai che questo test fallirà, salva le modifiche.
E quando il test viene eseguito, vedrai che il terzo test fallirà.
Perché sto causando il fallimento controllando la cosa sbagliata
lì e ci si va, il terzo test è fallito qui.
Quindi questo è il modo in cui puoi verificare se certe cose che
dovrebbero essere lì ci sono correttamente o meno.
Perché è questo caso, così puoi vedere qui, il motivo per cui questo test non è riuscito.
Si aspetta che questo sia nel DOM,
ma invece questo è ciò che è nel DOM nell'elemento h1 nel DOM.
Quindi questo è il motivo per cui il test è fallito qui.
Quindi tornando indietro fammi correggere l'errore e
poi quando rieseguo il test dovresti vedere che il test passa con successo.
Tornando al terminale vedrai che quando questo test viene eseguito ora
funzionerà correttamente.
Ed ecco, tutti e tre i test sono passati dalla mia domanda.
Inoltre, guardando il browser, è possibile vedere che i tre test
sono stati eseguiti con successo sul file modello dei componenti del menu e
anche il componente del menu stesso.
Ora, ovviamente, questo non è necessariamente il test più completo, ma
volevo solo darti un
assaggio di come andresti a costruire test all'interno della tua applicazione Angular.
Se ti lasci trasportare puoi andare in tutti i file spec.ts che hai e
quindi scrivere il tuo test per
ognuno di questi componenti usando le conoscenze che hai acquisito qui.
Inoltre, è possibile leggere ulteriori informazioni sui test nella documentazione Angular e
quindi imparare altri modi per eseguire test sull'applicazione Angular.
Il test è un campo da solo quindi se ho bisogno di insegnarti tutto sul
test che verrà un intero corso in sé per Angular.
E in questo corso, volevo solo darti un assaggio di come
eseguirai i test nella tua applicazione Angular.
E questo è un esempio di come possiamo configurare ed
eseguire un test unitario su uno dei componenti nella nostra applicazione angolare.
Questo è un buon momento per fare un buon commento con il test dei componenti del messaggio.
[ MUSIC]