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("<"), "<", "Unikol menej ako prevádzkovateľ ('<')");
rovnaké(htmlEscape("<div class = "someclass">Nejaký text</DIV>"), "<div triedy ="someclass">Nejaký text</DIV>", "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:
- Referenčný kód
- 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
