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

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:

image

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é:

image 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.:

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

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

image

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:

image Obrázok 4

image

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:

  1. Stiahnuť z: http://blanketjs.org/.
  2. Pridajte ju do vášho projektu
  3. 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>

undefinedVyberajte môj blog.

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

nechať odpoveď

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *