blank.js | Spazio di SharePoint su Paul Galvin

Intro

Hai esplorato unit test e test copertura per JavaScript come io lavoro su una nuova applicazione di SharePoint per SharePoint online in ufficio 365 Suite. I percorsi di ricerca ovvio mi ha portato a Qunit.js e subito dopo che, A Blanket.js.

QUnit mi permetta di creare unit test e raggrupparli in moduli. Un modulo è solo un semplice modo per organizzare i test correlati. (Non sono sicuro che sto usandolo come previsto, ma si sta lavorando per me finora con il piccolo insieme di test che finora ho definito).

Blanket.js integra con Qunit e mi mostrerà le linee effettive di JavaScript che sono stati – e ancora più importante – non sono stati effettivamente eseguite nel corso di esecuzione dei test. Questa è la "copertura" – linee che eseguiti sono coperti dal test, mentre altri non sono.

Tra impostazione buone test case e visualizzazione di copertura, possiamo ridurre il rischio che il nostro codice ha nascosto i difetti. Bei tempi.

Qunit

Assumendo che abbiate il vostro Visual Studio progetto impostato, inizia scaricando il pacchetto JavaScript da http://qunitjs.com. Aggiungere JavaScript e CSS corrispondente alla soluzione. Miniera assomiglia a questo:

Figura 1

Come si può vedere, Stavo usando 1.13.0 al momento ho scritto questo post del blog. Non dimenticate di scaricare e aggiungere il file CSS..

Che fuori del modo, il passo successivo è creare una sorta di prova imbrago e i bit Qunit di riferimento. Sto testando un sacco di funzioni in un file di script chiamato "QuizUtil.js", così ho creato una pagina HTML denominata "QuizUtil_test.html" come mostrato:

Figura 2

Ecco il codice:

<!DOCTYPE html>
<html xmlns= "http://www.w3.org/ 1999/xhtml">
<testa>
    <titolo>QuizUtil prova con Qunit</titolo>
    <link rel= "stylesheet" href="../CSS/qunit-1.13.0.CSS" />
    <script di tipo= text/javascript"" src="QuizUtil.js" dati-copertina></script di>
    <tipo di script ="text/javascript" src ="qunit-1.13.0.js"></script di>
    <tipo di script ="text/javascript" src ="blanket.min.js"></script di>

    <script di>
        modulo("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", funzione () {
            var goodValue = 1";#Paul Galvin";

            uguale(getIDFromLookupField(goodValue) + 1, 2), "ID del [" + goodValue + "] + 1 dovrebbero essere 2";
            uguale(getIDFromLookupField(non definito), non definito, "Undefined argomento di input deve restituire un risultato indefinito.");
            uguale(getIDFromLookupField(""), non definito, "Argomento di input vuoto deve restituire un valore indefinito.");
            uguale(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), non definito,"Deve sempre restituire un convertibile del risultato in un valore Integer");
            uguale(getIDFromLookupField(2";#qualche altra persona"), 2"", "Checking [2;#qualche altra persona].");
            uguale(getIDFromLookupField("9834524;#valore Long"), "9834524", "Prova di grande valore.");
            notEqual(getIDFromLookupField("5;#chiunque", 6), 6, "Prova un notEqual (5 non è uguale a 6 per questo esempio: [5;#chiunque]");

        });

        modulo("htmlEscape");
        test("QuizUtil htmlEscape()", funzione () {
            uguale(htmlEscape("<"), "&lt;", "Fuga a meno che l'operatore ('<')");
            uguale(htmlEscape("<classe div =  "someclass">Qualche testo</div>"), "&lt;div class =&quot;SomeClass&quot;&gt;Qualche testo&lt;/div&gt;", "Stringa di test più complesso.");
        });

        modulo("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", funzione () {
            uguale(getDateAsCaml(Nuovo Data("31/12/2013")), "31T-12-2013:00:00:00", "Test data duramente codificato: [12/31/2013]");
            uguale(getDateAsCaml(Nuovo Data("01/05/2014")), "05T-01-2014:00:00:00", "Test data duramente codificato: [01/05/2014]");
            uguale(getDateAsCaml(Nuovo Data("01/31/2014")), "31T-01-2014:00:00:00", "Test data duramente codificato: [01/31/2014]");
            uguale(getTodayAsCaml(), getDateAsCaml(Nuovo Data()), "getTodayAsCaml() dovrebbe essere uguale getDateAsCaml(nuova data())");
            uguale(getDateAsCaml("valore di sciocchezze"), non definito, "Cercare di ottenere la data di un valore di sciocchezze.");
            uguale(getDateAsCaml(non definito), non definito, "Cercare di ottenere la data della [non definito] Data.");
        });

        modulo("getParameterByName");
        test("QuizUtil getParameterByName (dalla stringa di query)", funzione () {
            uguale(getParameterByName(non definito), non definito, "Cercare di ottenere indefinito parametro deve restituire indefinito.");
            uguale(getParameterByName("non esiste"), non definito, "Cercare di ottenere il valore del parametro quando sappiamo che il parametro non esiste.");

        });

        modulo("Cookies");
        test("QuizUtil varie funzioni di biscotto.", funzione () {
            uguale(setCookie("prova", 1"", -1), getCookieValue("prova"), "Get un cookie ho impostato dovrebbe funzionare.");
            uguale(setCookie("anycookie", 1"", -1), true, "L'impostazione di una cucina valida deve restituire 'vero'.");
            uguale(setCookie("nome del cookie pazzo !@#$%"%\^&*(()?/><.,", 1"", -1), true, "L'impostazione di un nome di cookie male deve restituire 'falsa'.");
            uguale(setCookie(non definito, 1"", -1), non definito, "Passing indefinito come il nome del cookie.");
            uguale(getCookieValue("non esiste"), "", "Cookie non esiste prova.");
        });

    </script di>
</testa>
<corpo>
    <div Identificazione= qunit""></div>
    <div Identificazione= "qunit-apparecchio"></div>

</corpo>
</html>

Ci sono parecchie cose che succedono qui:

Il mio codice di riferimento (QuizUtil.js)
Riferimento Qunity.js
Definizione di alcuni moduli (getIDFromLookup, Cookies, e gli altri)
Posizionando un <div> cui ID è "qunit".

Poi, Basta tirare su questa pagina e si ottiene qualcosa di simile:

Figura 3

Se guardi nella parte superiore, avete alcune opzioni, di cui due sono interessanti:

Nascondi superato test: Abbastanza evidente. Può aiutare il vostro occhio vedere solo le aree di problema e non un sacco di confusione.
Modulo: (cadere giù): Questo consente di filtrare i test fino a solo quei gruppi di test che si desidera.

Per quanto riguarda i test stessi – alcune osservazioni:

Va da sé che è necessario scrivere codice, tale che in primo luogo è testabile. Utilizzando lo strumento può aiutare a far rispettare tale disciplina. Per esempio, Ho avuto una funzione chiamata "getTodayAsCaml()”. Questo non è verificabile molto poiché non prende nessun argomento di input e per verificare l'uguaglianza, dobbiamo costantemente aggiornare il codice di test per riflettere la data corrente. Si rifattorizzato aggiungendo un parametro di input dati e passando la data corrente quando voglio la data odierna nel formato CAML.
Quadro Qunit documenta le proprie prove e sembra piuttosto robusto. Possono fare cose semplici come test per l'uguaglianza e ha anche il supporto per le chiamate in stile ajax ("reale" o utilizzando il tuo preferito mocker deriso).
Passando attraverso il processo anche ti costringe a pensare attraverso casi limite – cosa succede con "undefined" o in una funzione viene passato null. Lo rende morto semplice testare questi scenari fuori. Roba buona.

Copertura con Blanket.js

Blanket.js completa Qunit l'effettive righe di codice che vengono eseguite durante il corso dell'esecuzione di test di rilevamento. Esso integra diritto in Qunit anche se che è una app completamente separati, gioca bene – sembra davvero che è una app senza soluzione di continuità.

Questo è blanket.js in azione:

Figura 4

Figura 5

(In realtà devi cliccare sulla casella di controllo "Attiva la copertura" nella parte superiore [Vedi figura 3] per consentire questo.)

Le righe evidenziate in figura 5 non sono stati eseguiti da alcuna delle mie prove, quindi ho bisogno di elaborare un test che causano loro di eseguire se voglio piena copertura.

Ottenere blanket.js lavorando seguendo questi passi:

Scaricalo da http://blanketjs.org/.
Aggiungerlo al progetto
Aggiornare la tua pagina di prova imbrago (QuizUtil_test.html nel mio caso) come segue:
1. Il codice di riferimento
2. Decorare il vostro <script di> riferimento come questo:

    <script di tipo= text/javascript"" src="QuizUtil.js" dati-copertina></script di>

Blanket.js preleva l'attributo "dati-copertina" e fa la sua magia. Aggancia Qunit, Aggiorna l'interfaccia utente per aggiungere l'opzione "Abilita la copertura" e voilà!

Riassunto (TL; DR)

Utilizzare Qunit per scrivere i test case.

Scaricarlo
Aggiungerlo al progetto
Scrivere una pagina di prova imbrago
Creare i test
- Rifattorizzare alcuni del codice sia testabile
- Essere creativi! Pensare di crazy, scenari impossibili e li prova comunque.

Utilizzare blanket.js per garantire una copertura

Assicurarsi che il Qunit sta lavorando
Scarica blanket.js e aggiungerlo al progetto
Aggiungere alla tua pagina di prova imbrago:
- Aggiungere un riferimento a blanket.js
- Aggiungere un attributo "dati-copertura" al vostro <script di> Tag
Eseguire i test Qunit.

Non ho mai fatto nulla di tutto questo prima e aveva alcune cose rudimentali in una manciata di ore di lavoro.

Test felice!

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Spazio di SharePoint su Paul Galvin

marcatori archivi: blank.js

Come si fa: Configurare Unit Test e Test Coverage con QUnit.js e Blanket.js per un ufficio 365 SharePoint App

Intro

Qunit

Copertura con Blanket.js

Riassunto (TL; DR)