Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Testare i componenti in angolo utilizzando il gelsomino: Parte 1

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Loris Pizii (you can also view the original English article)

Final product image
What You'll Be Creating

Test Driven Development è una pratica di programmazione che è stata predicata e promossa da ogni comunità di sviluppatori del pianeta. Eppure è una routine che è in gran parte trascurata da uno sviluppatore mentre apprende un nuovo quadro. Test di unità di scrittura dal primo giorno ti aiuterà a scrivere un codice migliore, inserire facilmente i bug spot e mantenere un miglior flusso di lavoro di sviluppo.

Sviluppo test-driven in angolare

Angular, essendo una piattaforma di sviluppo frontale completa, ha un proprio set di strumenti per il test. Utilizzeremo i seguenti strumenti in questo tutorial:

  • Jasmine Framework. Jasmine è un popolare sistema di test guidato dal comportamento per JavaScript. Con Jasmine puoi scrivere test che siano più espressivi e semplici. Ecco un esempio per iniziare.
  • Karma Test Runner. Il Karma è uno strumento che ti permette di testare l'applicazione su più browser. Karma ha plugin per i browser come Chrome, Firefox, Safari e molti altri. Ma io preferisco usare un browser headless per il test. Un browser senza testa è privo di una GUI e in questo modo è possibile mantenere i risultati del test all'interno del terminale. In questo tutorial, configureremo Karma per eseguire con Chrome e, opzionalmente, una versione senza testa di Chrome.
  • Utilità di test angolare. Utilità di test angolare di fornire una libreria per creare un ambiente di prova per la vostra applicazione. Le classi come TestBed e ComponentFixtures e le funzioni di helper come async e fakeAsync fanno parte del pacchetto @angular/core/testing. È necessario conoscere queste utility se si desidera scrivere test che rivelano come i componenti interagiscono con i propri modelli, i servizi e altri componenti.

Non intendiamo coprire i test funzionali usando il protrattore in questo tutorial. Il protrattore è un approfondito test test end-to-end che interagisce con l'interfaccia utente dell'applicazione utilizzando un browser effettivo.

In questo tutorial, siamo più preoccupati di testare componenti e la logica del componente. Tuttavia, scriveremo un paio di test che dimostreranno l'interazione UI di base utilizzando il framework Jasmine.

Il nostro obbiettivo

L'obiettivo di questo tutorial è quello di creare il front-end per un'applicazione Pastebin in un ambiente di sviluppo test-driven. In questo tutorial, seguiremo il mantra popolare TDD, che è "rosso / verde / refattore". Scriveremo test che inizialmente falliscono (rosso) e poi lavoreremo sul nostro codice applicativo per farli passare (verde). Rifatteremo il nostro codice quando inizia a puzzare, il che significa che diventa gonfio e brutto.

Scriveremo test per i componenti, i modelli, i servizi e la classe Pastebin. L'immagine qui sotto illustra la struttura dell'applicazione Pastebin. Gli elementi che vengono disegnati saranno disegnati nella seconda parte del tutorial.

Structure of the application we are about to build Components services and modules are highlighted

Nella prima parte della serie ci concentriamo esclusivamente sull'impostazione dell'ambiente di prova e sulla scrittura di test di base per i componenti. Angular è un framework basato su componenti; quindi, è una buona idea trascorrere del tempo per conoscere i test di scrittura per i componenti. Nella seconda parte della serie, scriveremo test più complessi per componenti, componenti con input, componenti e servizi in routing. Alla fine della serie, avremo un'applicazione Pastebin completamente funzionante che sembra così.

Screenshot of the front-end of the application
Vista del componente Pastebin
Screenshot of the front-end of the application
Vista del componente AddPaste
ViewPaste component in action using a bootstrap modal
Vista del componente ViewPaste

In questo tutorial, imparerete come:

  • configurare Jasmine e Karma
  • creare una classe di Pastebin che rappresenta una pasta individuo
  • creare un PastebinService bare bones
  • creare due componenti, Pastebin e AddPaste
  • scrittura di unit test

L'intero codice per il tutorial è disponibile su Github.

Clonare il repo e sentitevi liberi di controllare il codice se siete in dubbio, in qualsiasi fase di questo tutorial. Iniziamo!

Configurazione di gelsomino e Karma

Gli sviluppatori di angolare hanno reso facile per noi impostare il nostro ambiente di test. Per iniziare, abbiamo bisogno di installare prima angolare. Io preferisco usare l'angolare-CLI. È la soluzione all-in-one che si occupa di creazione, generazione, costruzione e test del progetto angolare.

Ecco la struttura di directory creata da angolare-CLI.

Poiché i nostri interessi sono inclinati più verso gli aspetti test in angolare, abbiamo bisogno di guardare fuori per due tipi di file.

Karma.conf.js è il file di configurazione per il test runner di Karma e l'unico file di configurazione che ci servirà per la scrittura di unit test in angolare. Per impostazione predefinita, Chrome è il browser-launcher predefinito utilizzato dal Karma per acquisire prove. Creeremo un lanciatore personalizzato per l'esecuzione il cromo senza testa e aggiungerlo nella matrice di browser.

L'altro tipo di file che abbiamo bisogno di guardare fuori per è tutto ciò che finisce con.spec.ts. Per convenzione, i test scritti in Jasmine sono chiamati specifiche. Tutte le specifiche di prova dovrebbero essere situate all'interno di src/app dell'applicazione/directory perché questo è dove il Karma Cerca le specifiche di prova. Se si crea un nuovo componente o un servizio, è importante che si inserisce il tuo prova specifiche all'interno della stessa directory in cui risiede il codice per il componente o il servizio in.

Il nuovo comando ng new ha creato un file di app.component.spec.ts per il nostro app.component.ts. Sentitevi liberi di aprirlo e avere una buona occhiata al gelsomino test in angolare. Anche se il codice non ha alcun senso, va bene. Noi tenere AppComponent come è per ora e utilizzarlo per ospitare le rotte in un momento successivo nel tutorial.

Creazione della classe Pastebin

Abbiamo bisogno di una classe di Pastebin per modellare il nostro Pastebin all'interno i componenti e le prove. È possibile crearne uno utilizzando l'angolare-CLI.

Aggiungere la logica seguente Pastebin.ts:

Abbiamo definito una classe Pastebin, e ogni istanza di questa classe avrà le seguenti proprietà:

  • id
  • titolo
  • lingua
  • incolla

Creare un altro file chiamato pastebin.spec.ts per la suite di test.

La suite di test inizia con un blocco di descrivere, che è una funzione globale di gelsomino che accetta due parametri. Il primo parametro è il titolo del gruppo di test, e il secondo è l'effettiva applicazione. Le specifiche sono definite utilizzando un it funzione che accetta due parametri, simili a quella del blocco descrivere.

Più specifiche (it blocca) possono essere nidificati all'interno di un gruppo di test (descrivere il blocco). Tuttavia, garantire che i titoli di suite di test sono denominati in modo tale che essi sono inequivocabili e più leggibile perché essi sono destinati a servire come una documentazione per il lettore.

Aspettative, implementate utilizzando la funzione, sono utilizzate da Jasmine per determinare se una specifica dovrebbe passare o fallire. La funzione accetta un parametro che è conosciuto come il valore effettivo. Esso è quindi concatenata con un'altra funzione che accetta il valore previsto. Queste funzioni vengono chiamate funzioni matcher, e useremo le funzioni matcher come toBeTruthy(), toBeDefined(), toBe() e toContain() molto in questo tutorial.

Così, con questo codice, abbiamo creato una nuova istanza della classe Pastebin e mi aspettavo che fosse vero. Aggiungiamo un'altra specifica per confermare che il modello Pastebin funziona come previsto.

Abbiamo istanziato la classe Pastebin e aggiungere poche aspettative per il nostro test spec. Run ng test per verificare che tutti i test sono verdi.

Creazione di un servizio di Bare-Bones

Generare un servizio utilizzando il seguente comando.

PastebinService ospiterà la logica per l'invio di richieste HTTP al server; Tuttavia, non abbiamo un server API per l'applicazione che stiamo costruendo. Di conseguenza, ci accingiamo a simulare la comunicazione server utilizzando un modulo noto come InMemoryWebApiModule.

Configurazione angolare-in-memoria-Web-API

Installare angolare-in-memoria-web-api via npm:

Aggiornamento AppModule con questa versione.

Creare un InMemoryDataService che implementa InMemoryDbService.

Pastebin, qui, è una matrice di paste di campione che verranno restituiti o aggiornato quando eseguiamo un'azione HTTP come http.get o http.post.

Il metodo getPastebin() esegue una richiesta di HTTP.get e restituisce una promessa che si risolve in una matrice di oggetti Pastebin restituito dal server.

Se si ottiene un provider di No per errore HTTP durante l'esecuzione di una specifica, è necessario importare l'HTTPModule per il file spec interessato.

Guida introduttiva a componenti

I componenti sono la struttura più base di un'interfaccia utente in un'applicazione angolare. Un'applicazione angolare è un albero di componenti angolari.
— Documentazione angolare

Come evidenziato in precedenza nella sezione Panoramica, lavoreremo su due componenti in questo tutorial: PastebinComponent e AddPasteComponent. Il componente Pastebin è costituito da una struttura di tabella che elenca tutti gli incolla recuperato dal server. Il componente AddPaste contiene la logica per la creazione di nuove paste.

Progettare e testare il componente Pastebin

Vai avanti e generare i componenti tramite angolare-CLI.

Un --spec=false racconta l'angolare-CLI non per creare un file spec. Questo è perché vogliamo scrivere unit test per componenti da zero. Creare un file di pastebin.component.spec.ts all'interno della cartella pastebin-componente.

Ecco il codice per pastebin.component.spec.ts.

C'è molto da fare qui. Let's disgregare e prendere un pezzo alla volta. All'interno del blocco di descrivere, noi abbiamo dichiarato alcune variabili, e quindi abbiamo usato una funzione beforeEach. beforeEach() è una funzione globale fornita da Jasmine e, come suggerisce il nome, viene richiamato una volta, prima di bloccare ogni spec nella descrive in che viene chiamato.

Classe TestBed è una parte dell'utilità di test angolare, e crea un modulo per il test simile a quello della classe @NgModule. Inoltre, è possibile configurare TestBed utilizzando il metodo configureTestingModule. Per esempio, è possibile creare un ambiente di test per il progetto che emula l'effettiva applicazione angolare, e si può quindi tirare un componente dal tuo modulo di domanda e ricollegarlo a questo modulo di prova.

Dalla documentazione angolare:

Il metodo createComponent restituisce un ComponentFixture, un handle sull'ambiente di prova che circondano il componente creato. L'apparecchio fornisce l'accesso per l'istanza del componente stesso e per il DebugElement, che è un handle sull'elemento DOM del componente.

Come accennato in precedenza, abbiamo creato un apparecchio del PastebinComponent e quindi utilizzato che apparecchio per creare un'istanza del componente. Ora possiamo accedere proprietà e i metodi del componente all'interno del nostro test chiamando comp.property_name. Poiché l'apparecchio fornisce inoltre l'accesso alla debugElement, noi possiamo ora eseguire query gli elementi DOM e i selettori.

C'è un problema con il nostro codice che non abbiamo ancora pensato. Il nostro componente ha un modello di esterno e un file CSS. Il recupero e la lettura dal file system è un'attività asincrona, a differenza del resto del codice, che è tutto sincrono.

Angolare offre una funzione chiamata async che si prende cura di tutte le cose asincrona. Cosa async fa è tenere traccia di tutte le attività asincrone all'interno di esso, mentre nascondere la complessità di esecuzione asincrona da noi. Così ora avremo due funzioni di beforeEach, un beforeEach() asincrona e un beforeEach() sincrono.

Noi non abbiamo scritto ancora alcun specifiche di prova. Tuttavia, è una buona idea per creare una struttura delle specifiche in anticipo. L'immagine sottostante raffigura una progettazione approssimativa del componente Pastebin.

Mock design of the Pastebin Application

Abbiamo bisogno di scrivere test con le seguenti aspettative.

  • Il componente Pastebin dovrebbe esistere.
  • Proprietà title del componente deve essere visualizzata nel modello.
  • Il modello dovrebbe avere una tabella HTML per visualizzare le paste esistenti.
  • pastebinService viene iniettato il componente, e i suoi metodi sono accessibili.
  • Nessun paste devono essere visualizzate finché non viene chiamato relativa.
  • Paste non vengono visualizzate fino a dopo la promessa nel nostro servizio è stato risolta.

Le prime tre prove sono facili da implementare.

In un ambiente di test, angolare non associa automaticamente le proprietà del componente con gli elementi del modello. È necessario chiamare in modo esplicito fixture.detectChanges() ogni volta che si desidera associare una proprietà del componente con il modello. Esecuzione del test dovrebbe darvi un errore perché abbiamo ancora non abbiamo dichiarato la proprietà title all'interno del nostro componente.

Non dimenticate di aggiornare il modello con una struttura di tabella di base.

Per quanto riguarda il resto dei casi, abbiamo bisogno di iniettare il Pastebinservice e scrivere i test che si occupano di componente-servizio interazione. Un vero e proprio servizio potrebbe effettuare chiamate a un server remoto e iniettarlo nella sua forma grezza sarà un compito laborioso e impegnativo.

Invece, dovremmo scrivere test che si concentrano su se il componente interagisce con il servizio come previsto. Aggiungeremo le specifiche tecniche che spia il pastebinService e il relativo metodo getPastebin().

In primo luogo, è possibile importare il PastebinService nella nostra suite di test.

Successivamente, aggiungerlo all'array di provider all'interno di TestBed.configureTestingModule().

Il codice riportato di seguito crea una spia gelsomino che è progettata per tenere traccia di tutte le chiamate al metodo getPastebin() e restituire una promessa che immediatamente si risolve in mockPaste.

La spia non è preoccupata per i dettagli di implementazione del servizio reale, ma invece, ignora qualsiasi chiamata al metodo effettivo getPastebin(). Inoltre, tutte le chiamate remote seppellite all'interno di getPastebin() sono ignorate dai nostri test. Abbiamo scriverà isolato unit-test per servizi angolare nella seconda parte del tutorial.

Aggiungete i seguenti test per pastebin.component.spec.ts.

I primi due test sono quelli sincroni. La spec prima controlla se il innerText dell'elemento div rimane vuoto finché il componente non è inizializzato. Il secondo argomento matcher funzione di Jasmine è opzionale e viene visualizzato quando il test ha esito negativo. Questo è utile quando si dispone di più si aspettano istruzioni all'interno di una specifica.

Nelle specifiche del seconda, il componente viene inizializzato (perché viene chiamato fixture.detectChanges()) e la spia dovrebbe inoltre essere richiamato, ma il modello non deve essere aggiornato. Anche se la spia restituisce una promessa risolta, il mockPaste non è ancora disponibile. Non dovrebbe essere disponibile a meno che il test è un test asincrono.

La terza prova utilizza una funzione di Async discussa in precedenza per eseguire il test in una zona di prova di async. Async è usato per fare un test sincrono asincrono. fixture.whenStable() viene chiamato quando tutti in sospeso le attività asincrone sono completati, e poi un secondo giro di fixture.detectChanges() viene chiamato per aggiornare il DOM con i nuovi valori. L'aspettativa nella prova finale assicura che il nostro DOM viene aggiornato con i valori di mockPaste.

Per ottenere i test per passare, dobbiamo aggiornare il nostro pastebin.component.ts con il codice riportato di seguito.

Anche il modello deve essere aggiornato.

Aggiunta di una nuova pasta

Generare un componente AddPaste tramite angolare-CLI. L'immagine sottostante raffigura la progettazione del componente AddPaste.

Mock design of the AddPaste component

Logica del componente dovrebbe passare le seguenti specifiche.

  • Modello di AddPaste componente dovrebbe avere un pulsante chiamato pasta creare.
  • Facendo clic sul pulsante Incolla creare deve visualizzare una finestra modale con id 'origine-modale'.
  • L'azione di clic deve anche aggiornare la proprietà showModal del componente su true. (showModal è una proprietà booleana che diventa vero quando viene visualizzato il modal e false quando il modal è chiuso).
  • Premendo Salva pulsante deve richiamare il metodo addPaste() del servizio Pastebin.
  • Facendo clic sul pulsante Chiudi dovrebbe rimuovere l'id 'origine-modale' dal DOM e aggiornare la proprietà showModal su false.

Abbiamo lavorato fuori i primi tre test per te. Vedere se è possibile effettuare le prove di tramandare il proprio.

DebugElement.triggerEventHandler() è l'unica cosa nuova qui. Esso viene utilizzato per attivare un evento click sull'elemento pulsante su cui è chiamato. Il secondo parametro è l'oggetto dell'evento, e noi abbiamo lasciato vuoto poiché click () del componente non si aspetta uno.

Riepilogo

Questo è tutto per il giorno. In questo primo articolo, abbiamo imparato:

  • come impostare e configurare Jasmine e Karma
  • come scrivere test di base per le classi
  • come progettare e scrivere unit test per componenti
  • come creare un servizio di base
  • come utilizzare angolare test utilità nel nostro progetto

Nel prossimo tutorial, creeremo nuovi componenti, scrittura più prove di componenti con ingressi e uscite, servizi e percorsi. Restate sintonizzati per la seconda parte della serie. Condividi i tuoi pensieri attraverso i commenti.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.