Sviluppo dell'interfaccia utente in JavaScript utilizzando i principi TDD

https://stackoverflow.com/questions/96086

01-07-2019
|

Domanda

Ho avuto molti problemi nel cercare di trovare il modo migliore per seguire correttamente i principi TDD durante lo sviluppo dell'interfaccia utente in JavaScript.Qual è il modo migliore per farlo?

È meglio separare l'aspetto visivo da quello funzionale?Sviluppi prima gli elementi visivi, poi scrivi i test e poi il codice per la funzionalità?

Soluzione

In passato ho eseguito alcuni TDD con Javascript e quello che dovevo fare era fare la distinzione tra test di unità e test di integrazione.Selenium metterà alla prova il tuo sito nel suo complesso, con l'output del server, i suoi postback, le chiamate Ajax, tutto il resto.Ma per i test unitari, niente di tutto ciò è importante.

Quello che vuoi è solo l'interfaccia utente con cui interagirai e il tuo script.Lo strumento che utilizzerai per questo è fondamentalmente JsUnit, che prende un documento HTML, con alcune funzioni Javascript sulla pagina e le esegue nel contesto della pagina.Quindi quello che farai è includere l'HTML stubbed nella pagina con le tue funzioni.Da lì puoi testare l'interazione del tuo script con i componenti dell'interfaccia utente nell'unità isolata dell'HTML simulato, del tuo script e dei tuoi test.

Potrebbe creare un po' di confusione, quindi vediamo se possiamo fare un piccolo test.Lasciamo che alcuni TDD presuppongano che dopo che un componente è stato caricato, un elenco di elementi viene colorato in base al contenuto della LI.

test.html

<html>
<head>
<script src="jsunit.js"></script>
<script src="mootools.js"></script>
<script src="yourcontrol.js"></script>
</head>
<body>
    <ul id="mockList">
        <li>red</li>
        <li>green</li>
    </ul>   
</body>
<script>
    function testListColor() {
        assertNotEqual( $$("#mockList li")[0].getStyle("background-color", "red") );

        var colorInst = new ColorCtrl( "mockList" );

        assertEqual( $$("#mockList li")[0].getStyle("background-color", "red") );
    }
</script>


</html>

Ovviamente TDD è un processo in più fasi, quindi per il nostro controllo avremo bisogno di più esempi.

yourcontrol.js (passaggio 1)

function ColorCtrl( id ) {
 /* Fail! */    
}

yourcontrol.js (passaggio 2)

function ColorCtrl( id ) {
    $$("#mockList li").forEach(function(item, index) {
        item.setStyle("backgrond-color", item.getText());
    });
    /* Success! */
}

Probabilmente puoi vedere il punto dolente qui, devi mantenere il tuo finto HTML qui sulla pagina sincronizzato con la struttura di ciò che saranno i controlli del tuo server.Ma ti offre un bel sistema per TDD con JavaScript.

Altri suggerimenti

Non ho mai eseguito correttamente il codice dell'interfaccia utente TDD.Il massimo a cui siamo arrivati è stato infatti quello di separare il più possibile il codice dell'interfaccia utente dalla logica dell'applicazione.Questo è uno dei motivi per cui il modello model-view-controller è utile: il modello e il controller possono essere modificati senza troppi problemi e senza diventare troppo complicati.

Nella mia esperienza, la vista è sempre stata lasciata ai nostri test di accettazione degli utenti (abbiamo scritto applicazioni web e i nostri UAT hanno utilizzato HttpUnit di Java).Tuttavia, a questo livello si tratta davvero di un test di integrazione, senza la proprietà di test in isolamento che desideriamo con TDD.A causa di questa configurazione, abbiamo dovuto scrivere prima il nostro controller/test/codice del modello, quindi l'interfaccia utente e l'UAT corrispondente.Tuttavia, nel codice della GUI Swing che ho scritto ultimamente, ho scritto prima il codice della GUI con stub per esplorare il mio progetto del front-end, prima di aggiungerlo al controller/modello/API.YMMV qui però.

Quindi, per ribadire, l'unico consiglio che posso dare è quello che sembri già sospettare: separa il codice dell'interfaccia utente dalla logica il più possibile e TDD.

Guarda anche: Strumenti di test unitari JavaScript per TDD

Ho trovato il MVP l'architettura sia molto adatta per scrivere interfacce utente testabili.Tuo Presentatore E Modello le classi possono semplicemente essere testate al 100%.Devi solo preoccuparti del Visualizzazione (che dovrebbe essere solo uno strato stupido e sottile che invia eventi al presentatore) per i test dell'interfaccia utente (con selenio ecc.)

Tieni presente che in sto parlando di utilizzare MVP interamente nel contesto dell'interfaccia utente, senza necessariamente passare al lato server.La tua interfaccia utente può avere il proprio presentatore e modello che risiede interamente sul lato client.Il relatore guida l'interazione/convalida dell'interfaccia utente, ecc.logica mentre il modello conserva le informazioni sullo stato e fornisce un portale al backend (dove è possibile avere un modello separato).

Dovresti anche dare un'occhiata a Presentatore per primo Tecnica TDD.

Questo è il motivo principale per cui sono passato a Google Web Toolkit...Sviluppo e provo in Java e ho una ragionevole aspettativa che il JavaScript compilato funzioni correttamente su una varietà di browser.Poiché TDD è principalmente una funzione di test unitario, la maggior parte del progetto può essere sviluppata e testata prima della compilazione e della distribuzione.

Le suite di test funzionali e di integrazione verificano che il codice risultante funzioni come previsto dopo la distribuzione su un server di test.

Sto per iniziare a eseguire Javascript TDD su un nuovo progetto su cui sto lavorando.Il mio piano attuale è quello di utilizzare qunità per eseguire il test unitario.Durante lo sviluppo i test possono essere eseguiti semplicemente aggiornando la pagina di test in un browser.

Per l'integrazione continua (e per garantire l'esecuzione dei test in tutti i browser), utilizzerò Selenio per caricare automaticamente il test cablaggio in ciascun browser e leggere il risultato.Questi test verranno eseguiti a ogni accesso al controllo del codice sorgente.

Utilizzerò anche io JSCoverage per ottenere l'analisi della copertura del codice dei test.Anche questo sarà automatizzato con Selenium.

Attualmente sono nel bel mezzo della configurazione.Aggiornerò questa risposta con dettagli più precisi una volta completata la configurazione.

Strumenti di test:

Quello che faccio è stuzzicare il Dom per vedere se ottengo ciò che mi aspetto.Un ottimo effetto collaterale di ciò è che rendendo veloci i tuoi test, rendi veloce anche la tua app.

Ho appena rilasciato un toolkit open source che aiuterà immensamente con JavaScript tdd.È una composizione di molti strumenti open source che ti offre un'app backbone funzionante pronta all'uso.

Fornisce singoli comandi da eseguire:server web di sviluppo, test runner jasmine per browser singolo, test runner multi browser jasmine js-test-driver e concatenazione/minificazione per JavaScript e CSS.Inoltre, genera una versione non minimizzata della tua app per il debug della produzione, precompila i modelli di manubrio e supporta l'internazionalizzazione.

Non è richiesta alcuna configurazione.Funziona e basta.

http://github.com/davidjnelson/agilejs

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow