Januára | 2014 | Paul Galvin SharePoint priestoru

Intro

Skúma jednotkové testovanie a test pokrytia JavaScript ako som pracovať na novej aplikácie SharePoint pre službu SharePoint online v Office 365 apartmán. Zjavné výskum cesty ma viedli k Qunit.js a hneď po ktoré, na Blanket.js.

QUnit dajte mi nastaviť unit testov a ich zoskupujú do modulov. Modul je len jednoduchý spôsob, ako organizovať súvisiace testy. (Nie som si istý som používať to ako určené, ale funguje to pre mňa tak ďaleko s malým sadu testov doteraz definovali).

Blanket.js integruje s Qunit a ukáže mi aktuálne riadky JavaScript boli – a dôležitejšie – nie boli skutočne vykonané v priebehu vykonávanie skúšok. To je "pokrytie"-linky, ktoré vykonávajú sú pokryté skúšobnými zatiaľ čo iní nie.

Medzi nastavenia dobrý testovacie prípady a zobrazením pokrytie, môžeme znížiť riziko, že náš kód má skryté vady. Dobré časy.

Qunit

Predpokladám, že máte vaše Visual Studio projektu nastaviť, Začnite stiahnutím JavaScript balík od http://qunitjs.com. Pridajte zodpovedajúce CSS a JavaScript na vašich riešenie. Baňa vyzerá takto:

Obrázok 1

Ako môžete vidieť, Bol som pomocou 1.13.0 v tej dobe som napísal tento blog post. Nezabudnite stiahnuť a pridať CSS súbor.

Ktoré z cesty, Ďalším krokom je vytvoriť nejaký druh testu postroj a referenčných Qunit kúsky. Som testovanie banda funkcie súboru so skriptom tzv "QuizUtil.js", tak som vytvoril stránku HTML s názvom "QuizUtil_test.html" ako je uvedené:

Obrázok 2

Tu je kód:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<vedúci>
    <názov>QuizUtil test s Qunit</názov>
    <odkaz rel= "stylesheet" href="../CSS/qunit-1.13.0.CSS" />
    <skript typ= text/javascript"" src="QuizUtil.js" údajov-kryt></skript>
    <scenár typu ="textu/javascript" src ="qunit-1.13.0.js"></skript>
    <scenár typu ="textu/javascript" src ="blanket.min.js"></skript>

    <skript>
        modul("getIDFromLookup");
        skúška("QuizUtil getIDFromLookupField", Funkcia () {
            var goodValue = "1;#Paul Galvin";

            rovnaké(getIDFromLookupField(goodValue) + 1, 2), "ID [" + goodValue + "] + 1 by mala byť 2";
            rovnaké(getIDFromLookupField(Nedefinovaný), Nedefinovaný, "Nedefinovaný vstupný argument by sa mal vrátiť Nedefinovaný výsledok.");
            rovnaké(getIDFromLookupField(""), Nedefinovaný, "Prázdne vstupný argument by sa mal vrátiť hodnotu undefined.");
            rovnaké(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), Nedefinovaný,"Mali by vždy vrátiť výsledok kabriolet Integer");
            rovnaké(getIDFromLookupField("2;#nejakej inej osobe"), "2", "Kontrola [2;#nejakej inej osobe].");
            rovnaké(getIDFromLookupField("9834524;#dlhý hodnota"), "9834524", "Veľké hodnoty testu.");
            notEqual(getIDFromLookupField("5;#niekto", 6), 6, "Testovanie notEqual (5 nerovná sa 6 pre tento vzorka: [5;#niekto]");

        });

        modul("htmlEscape");
        skúška("QuizUtil htmlEscape()", Funkcia () {
            rovnaké(htmlEscape("<"), "&lt;", "Unikol menej ako prevádzkovateľ ('<')");
            rovnaké(htmlEscape("<div class =  "someclass">Nejaký text</DIV>"), "&lt;div triedy =&quot;someclass&quot;&gt;Nejaký text&lt;/DIV&gt;", "Zložitejšie testovací reťazec.");
        });

        modul("getDateAsCaml");
        skúška("QuizUtil getDateAsCaml()", Funkcia () {
            rovnaké(getDateAsCaml(nové Dátum("12/31/2013")), "2013-12-31T:00:00:00", "Testovanie tvrdý kódovaný dátum: [12/31/2013]");
            rovnaké(getDateAsCaml(nové Dátum("01/05/2014")), "ROKU 2014-01-05T:00:00:00", "Testovanie tvrdý kódovaný dátum: [01/05/2014]");
            rovnaké(getDateAsCaml(nové Dátum("01/31/2014")), "ROKU 2014-01-31T:00:00:00", "Testovanie tvrdý kódovaný dátum: [01/31/2014]");
            rovnaké(getTodayAsCaml(), getDateAsCaml(nové Dátum()), "getTodayAsCaml() by sa mal rovnať getDateAsCaml(nový dátum())");
            rovnaké(getDateAsCaml("nezmysel hodnota"), Nedefinovaný, "Snažte sa získať dátum s hodnotou nezmysel.");
            rovnaké(getDateAsCaml(Nedefinovaný), Nedefinovaný, "Skúste získať dátum [Nedefinovaný] dátum.");
        });

        modul("getParameterByName");
        skúška("QuizUtil getParameterByName (z reťazca dotazu)", Funkcia () {
            rovnaké(getParameterByName(Nedefinovaný), Nedefinovaný, "Snažte sa dostať Nedefinovaný parameter by sa mal vrátiť Nedefinovaný.");
            rovnaké(getParameterByName("neexistuje"), Nedefinovaný, "Skúste si hodnoty parametra, keď vieme, že parameter neexistuje.");

        });

        modul("Cookies");
        skúška("QuizUtil rôznych cookie funkcie.", Funkcia () {
            rovnaké(setCookie("skúška", "1", -1), getCookieValue("skúška"), "Získať nastaviť súbor cookie by mal fungovať.");
            rovnaké(setCookie("anycookie", "1", -1), pravda, "Nastavenie platné varenie mali vrátiť"pravda".");
            rovnaké(setCookie("blázon cookie meno !@#$%"%\^&*(()?/><.,", "1", -1), pravda, "Nastavenie názvu zlé cookie by sa vrátiť"false".");
            rovnaké(setCookie(Nedefinovaný, "1", -1), Nedefinovaný, "Absolvovanie Nedefinovaný názov cookie.");
            rovnaké(getCookieValue("neexistuje"), "", "Cookie neexistuje testu.");
        });

    </skript>
</vedúci>
<telo>
    <DIV Identifikácia= "qunit"></DIV>
    <DIV Identifikácia= "qunit-svietidlo"></DIV>

</telo>
</HTML>

Existuje niekoľko vecí sa deje tu.:

Odkazovanie na môj kód (QuizUtil.js)
Odkazovanie na Qunity.js
Definovanie niektorých modulov (getIDFromLookup, Súbory cookie, a.i.)
Umiestnenie <DIV> ktorého ID je "qunit".

Potom, Môžem len vytiahnuť túto stránku a dostanete niečo takého:

Obrázok 3

Ak sa pozriete cez vrchol, máte niekoľko možností, z ktorých dva sú zaujímavé:

Skryť prešiel testami: Docela zrejmé. Môžete pomôcť vaše oči len vidieť problémové oblasti a nie veľa neporiadok.
Modul: (Rozbaľovací zoznam): To bude filtrovať testy na len tých skupín skúšok chcete.

Pokiaľ ide o samotných – pár komentárov testov:

Je samozrejmé, že musíte napísať svoj kód tak, aby sa testovatelné na prvom mieste. Pomocou nástroja môže pomôcť uplatneniu tejto disciplíne. Napríklad, Mal som funkciu s názvom "getTodayAsCaml()”. To nie je veľmi testovatelné, pretože to trvá žiadny vstupný argument a to vyskúšať pre rovnosť, budeme musieť neustále aktualizovať kód testu odrážať aktuálny dátum. Som prepracovaný Pridanie dát vstupný parameter potom absolvovanie aktuálny dátum kedy chcem dnešného dátumu vo formáte CAML.
Qunit rámci dokumenty svojej vlastnej testy a sa zdá byť docela silný. To môže robiť jednoduché veci, ako je testovanie pre rovnosť a má tiež podporu pre ajax štýle volania ("skutočné" alebo Posmívali pomocou vášho obľúbeného posměvače).
Prechádzajú procesom tiež núti vás premyslieť hrana prípady-čo sa stane s "nedefinované" alebo null je odovzdaný do funkcie. Je to mŕtvy jednoduchý test týchto scenárov von. Dobré veci.

Pokrytie s Blanket.js

Blanket.js dopĺňa Qunit sledovanie skutočného riadky kódu vykonať v priebehu beží vaše testy. Integruje priamo do Qunit takže aj keď je úplne samostatná app, hrá pekne-naozaj vyzerá to je jeden plynulý app.

To je blanket.js v akcii:

Obrázok 4

Obrázok 5

(Vlastne musíte kliknúť na "Umožniť pokrytie" políčko v hornej [Pozri obrázok 3] aby to bolo.)

Zvýraznenej čiary na obrázku 5 neboli realizované niektorý z mojich testov, Takže Musím vymyslieť test, ktorý by sa mohli spustiť ak chcem plné pokrytie.

Získajte blanket.js pracuje podľa nasledujúcich krokov:

Stiahnuť z: http://blanketjs.org/.
Pridajte ju do vášho projektu
Aktualizovať stránku postroj testu (QuizUtil_test.html v mojom prípade) takto:
1. Referenčný kód
2. Ozdobte svoj <skript> odkaz takhle:

    <skript typ= text/javascript"" src="QuizUtil.js" údajov-kryt></skript>

Blanket.js zdvihne atribút "údajov-obal" a má svoje kúzlo. Háky do Qunit, Aktualizácia používateľského rozhrania pridať možnosť "Povoliť pokrytie" a voila!

Zhrnutie (TL; DR)

Použitie Qunit písať testovacie prípady.

Stiahnite si ju
Pridajte ju do vášho projektu
Napísať test postroj stránku
Vytváranie testov
- Niektoré kód, aby sa testovatelné refactor
- Buďte kreatívny! Myslím, že blázon, možné scenáre a testovať ich Každopádne.

Použitie blanket.js zabezpečiť pokrytie

Skontrolujte, či Qunit funguje
Stiahnuť blanket.js a pridajte ho do vášho projektu
Pridajte ju do postroja testovaciu stránku:
- Pridať odkaz na blanket.js
- Pridať atribút "údajov-kryt" na vašom <skript> Tag
Spustiť Qunit testov.

Nikdy som nič z toho predtým a mal nejaké primitívne veci pracovať v niekoľkých hodín.

Happy testovanie!

</koniec>

Vyberajte môj blog.

Nasledujte ma na stebėtų na http://www.twitter.com/pagalvin

Paul Galvin SharePoint priestoru

mesačné archívy: Januára 2014

Chudák je cache v JavaScriptu

ako: Nakonfigurujte jednotku Test a Test pokrytia s QUnit.js a Blanket.js pre kanceláriu 365 SharePoint App

Intro

Qunit

Pokrytie s Blanket.js

Zhrnutie (TL; DR)