Testare Ext JS con Siesta

Siesta Siesta è un tool per testare applicazioni javascript che possono usare al interno librerie come jQuery, Ext JS, NodeJS, Dojo, YUI etc. Questo tool è realizzato e commercializzato da Bryntum. Ci sono due modalità di eseguire i test con Siesta: la prima è tramite l’interfaccia web (molto utile per gli UI test), la seconda è da terminale usando PhantomJS. Si può configurare anche un ambiente di continuous integration per rendere molti processi automatici e ottenere report, statistiche, grafici e copertura del codice per vedere le classi più fragili e che richiedono più attenzione. Per testare le applicazioni Ext JS con Siesta ci sono tre diversi tipi di test: test unitari UI test o test di interfaccia test di applicazione. Test Unitari I test unitari vengono solitamente scritti per testare una singola funziona di una classe Ext JS, seguendo l’approccio TDD (test-driven development), prima di scrivere il codice della funzione che si vuole testare si scrive il test. Il secondo passo è far girare il test e farlo fallire. Successivamente bisogna implementare la logica dentro alla funzione che si vuole testare ed infine far girare il test e farlo passare. UI Test Gli UI (User Interface) test servono per testare il comportamento di un componente grafico di Ext JS. Sono più fragili e più lenti dei test unitari, infatti, per lavorare meglio con gli UI test, sono necessarie conoscenze approfondite di Ext.ComponentQuery. Per venirci in aiuto Siesta ha implementato una funzione di registrazione di eventi, che vengono poi convertiti in azioni dentro ad un test case Siesta. La potenza di questo tool consiste nel fatto che anche un non-programmatore può creare la struttura dei test. Application Test I test di applicazione servono per testare il comportamento di tutta l’applicazione. Sono test molto lenti e possono rompersi facilmente se l’applicazione si evolve. Per questo motivo di solito si scrivono pochissimi Application test. La copertura dei test dovrebbe essere a piramide come mostrato nell'immagine: Organizzazione del progetto Dopo aver creato l’applicazione con Sencha cmd, quello che si è soliti fare è creare una cartella “test” al livello di app dove si mettono tutti i file di test. All' interno di questa cartella si possono creare altre sotto cartelle a piacere: le “best practice” suggeriscono di creare una struttura ad albero che rispecchia la struttura del progetto, ma non vi è alcun vincolo a riguardo. Dentro alla cartella di test vengono creati due file, index.html, che contiene i link necessari per far funzionare Siesta, e index.js, dove viene definito l’harness. Un esempio di index.html potrebbe essere:

“Harness” il punto di partenza Nel file index.js, all' interno della cartella di test, avviene la magia: per prima cosa viene inizializzato un harness che è una specie di dashboard dove vengono configurati i test e vengono raccolti i risultati. Un esempio di index.js potrebbe essere: var harness = new Siesta.Harness.Browser.ExtJS(); harness.configure( { title: 'My Tests' } ); harness.start( { group: 'Unit Tests', pageUrl: '../index.html', items: [{ url: 'unit-tests/unit1.t.js' }] }, { group: 'UI Tests', items: [] } ); Come si può vedere dall' esempio i test si possono organizzare in gruppi e per ogni gruppo avere diversi file di test. Di default ogni test verrà eseguito in un contesto isolato e pulito quindi non c’è bisogno di pulire o resettare variabili globali. Scrivere i test Per non entrare molto in dettaglio questa parte viene tralasciata, comunque è abbastanza semplice scrivere dei test per testare un applicazione scritta in Ext JS. Per maggiori informazioni fare riferimento alle documentazione siesta. Tenere sempre presente che è consigliabile usare l’approccio TDD (test-driven development) e lo stile BDD(behavior-driven development) per rendere i test più leggibili. Tool simili Da tempo Sencha sta cercando di creare un suo tool per testare applicazioni scritte in Ext JS e sembra, dal rilascio di qualche giorno fa, che sono ad un punto di svolta: Sencha Test. Il Tool necessità ancora di ulteriori implementazioni, ma a prima vista sembra molto simile e Siesta. Link Utili http://www.bryntum.com/docs/siesta/#!/guide https://vimeo.com/98664641