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>
Nasledujte ma na stebėtų na http://www.twitter.com/pagalvin