Úvod
Jsem zkoumá testování a testování pokrytí pro JavaScript, když pracuji na nové aplikace SharePoint pro SharePoint online v kanceláři 365 apartmá. Zřejmý výzkumné cesty mě vedly k Qunit.js a hned po tomto, do Blanket.js.
QUnit dovolte mi nastavit unit testy a seskupit je do modulů. Modul je prostě jednoduchý způsob, jak uspořádat související testy. (Nejsem si jistý, že ho používám, jak bylo zamýšleno, ale funguje to pro mě zatím s malou sadou testů, které jsem doposud definovali).
Blanket.js se integruje s Qunit a bude mi ukázat skutečné linie JavaScript, které byly – a hlavně – nebyly spuštěny ve skutečnosti během spuštění testů. To je "pokrytí"-linky, které se vztahuje testu, zatímco jiné nejsou.
Mezi nastavení dobré testovací případy a zobrazení pokrytí, můžeme snížit riziko, že náš kód má skryté vady. Dobré časy.
Qunit
Za předpokladu, že máte Visual Studio projekt nastavení, Začněte stažením balíčku JavaScript z http://qunitjs.com. Přidáte JavaScript a odpovídající CSS k řešení. Důl vypadá takto:
Obrázek 1
Jak můžete vidět, Byl jsem pomocí 1.13.0 tehdy jsem napsal tento příspěvek blogu. Nezapomeňte si stáhnout a přidání souboru CSS.
To z cesty, Dalším krokem je vytvořit nějaký druh testu postroj a referenční Qunit bitů. Jsem testování spoustu funkcí v souboru skriptu s názvem "QuizUtil.js", tak jsem vytvořil stránku HTML s názvem "QuizUtil_test.html", jak je uvedeno:
Obrázek 2
Zde je kód:
<!DOCTYPE HTML> <HTML xmlns.= "http://www.w3.org/. 1999/xhtml"> <hlava> <titul>QuizUtil test s Qunit</titul> <odkaz rel= "šablony stylů" HREF="../CSS/qunit-1.13.0.CSS" /> <skript Typ= text/javascript"" src="QuizUtil.js" dat obal></skript> <skript typ ="text/javascript" src ="qunit-1.13.0.js"></skript> <skript typ ="text/javascript" src ="blanket.min.js"></skript> <skript> modul("getIDFromLookup"); Testovat("QuizUtil getIDFromLookupField", funkce () { var goodValue = "1;#Paul Galvin"; rovná(getIDFromLookupField(goodValue) + 1, 2), "ID [" + goodValue + "] + 1 mělo by být 2"; rovná(getIDFromLookupField(nedefinované), nedefinované, "Nedefinované vstupní argument by měla vrátit výsledek nedefinovaný."); rovná(getIDFromLookupField(""), nedefinované, "Prázdný vstupní argument by měla vrátit hodnotu."); rovná(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), nedefinované,"By měl vždy vrátí výsledek kabriolet na celé číslo"); rovná(getIDFromLookupField("2;#jiná osoba"), "2", "Kontrola [2;#jiná osoba]."); rovná(getIDFromLookupField("9834524;#hodnota Long"), "9834524", "Velké hodnoty testu."); notEqual(getIDFromLookupField("5;#Každý, kdo", 6), 6, "Testování notEqual (5 není rovno 6 pro tento příklad: [5;#Každý, kdo]"); }); modul("htmlEscape"); Testovat("QuizUtil htmlEscape()", funkce () { rovná(htmlEscape("<"), "<", "Únik méně než operátor ('<')"); rovná(htmlEscape("<div třída = "someclass">Nějaký text</div>"), "<div třída ="someclass">Nějaký text</div>", "Složitější testovací řetězec."); }); modul("getDateAsCaml"); Testovat("QuizUtil getDateAsCaml()", funkce () { rovná(getDateAsCaml(nové Datum("12/31/2013")), "2013-1231:00:00:00", "Testování naprogramováno datum: [12/31/2013]"); rovná(getDateAsCaml(nové Datum("01/05/2014")), "2014-01-05T:00:00:00", "Testování naprogramováno datum: [01/05/2014]"); rovná(getDateAsCaml(nové Datum("01/31/2014")), "2014-0131:00:00:00", "Testování naprogramováno datum: [01/31/2014]"); rovná(getTodayAsCaml(), getDateAsCaml(nové Datum()), "getTodayAsCaml() by měla rovnat getDateAsCaml(nové datum())"); rovná(getDateAsCaml("nesmysl hodnota"), nedefinované, "Snažte se dostat datum hodnotu nesmysl."); rovná(getDateAsCaml(nedefinované), nedefinované, "Pokuste se získat data [nedefinované] datum."); }); modul("getParameterByName"); Testovat("QuizUtil getParameterByName (z řetězce dotazu)", funkce () { rovná(getParameterByName(nedefinované), nedefinované, "Zkus se nedefinovaný parametr by měla vrátit nedefinované."); rovná(getParameterByName("neexistuje"), nedefinované, "Pokuste se získat hodnotu parametru, když víme, že parametr neexistuje."); }); modul("Soubory cookie"); Testovat("QuizUtil různé funkce souborů cookie.", funkce () { rovná(setCookie("test", "1", -1), getCookieValue("test"), "Získat soubor cookie, který jsem měla fungovat."); rovná(setCookie("anycookie", "1", -1), pravda, "Nastavení platné vaření by měla vrátit"true"."); rovná(setCookie("crazy cookie název !@#$%"%\^&*(()?/><.,", "1", -1), pravda, "Nastavení názvu špatný soubor cookie zpět 'false'."); rovná(setCookie(nedefinované, "1", -1), nedefinované, "Předávání definován jako název souboru cookie."); rovná(getCookieValue("neexistuje"), "", "Cookie neexistuje test."); }); </skript> </hlava> <tělo> <div ID= "qunit"></div> <div ID= "qunit svítidlo"></div> </tělo> </HTML>
Existuje několik věcí, které se zde děje:
- Odkazování na můj kód (QuizUtil.js)
- Odkazování na Qunity.js
- Definice některých modulů (getIDFromLookup, Soubory cookie, a další)
- Umístění <div> ID je "qunit".
Pak, Jsem jen vytáhnout tuto stránku a dostanete něco takového:
Obrázek 3
Pokud se podíváte na horním, Máte několik možností, dvě z nich jsou zajímavé:
- Skrýt testy: Docela zřejmé. Mohou pomoci vaše oči vidět problémové oblasti a mnoho nakupit.
- Modul: (rozevírací seznam): To bude filtrovat testy dolů jen ty skupiny testů, které chcete.
Co se týče testy samy – pár poznámek:
- Je samozřejmé, že musíte napsat kód tak, že je to v prvé řadě testovatelné. Použití nástroje může pomoci prosadit kázeň. Například, Měl jsem funkci nazvanou "getTodayAsCaml()”. To není velmi testovatelné, protože to trvá žádné vstupní argument a testování rovnosti, Musíme neustále aktualizovat testovací kód tak, aby odrážel aktuální datum. Já refaktorování tím přidáním dat vstupní parametr a pak předá aktuální datum, kdy chci, dnešní datum ve formátu CAML.
- Qunit rámec dokumenty své vlastní testy a vypadá to docela silný. To může dělat jednoduché věci, jako je testování rovnosti a má také podporu pro ajax styl volání ("skutečný" nebo zesměšňován, pomocí vašeho oblíbeného mocker).
- Prochází procesem také síly, abyste si při okraji případy – co se stane s "nedefinovanou" nebo null je předán do funkce. To usnadňuje mrtvý otestovat tyto scénáře se. Dobré věci.
Krytí s Blanket.js
Blanket.js doplňuje Qunit tím, že sledování skutečné řádky kódu, které vykonávají v průběhu spouštění vašich testů. I když že je to úplně samostatná aplikace integruje přímo do Qunit, to hraje pěkně – opravdu vypadá, že je to jedna bezproblémové aplikace.
To je blanket.js v akci:
Obrázek 4
Obrázek 5
(Ve skutečnosti budete muset kliknout na políčko "Povolit krytí" v horní [viz obrázek 3] aby to bylo.)
Zvýrazněné řádky v obrázku 5 nebyly provedeny některou z mých testů, Takže musím vymyslet test, který způsobuje jejich spuštění, pokud chci plné pokrytí.
Získejte blanket.js práci podle následujících kroků:
- Stáhnout z http://blanketjs.org/.
- Přidejte do projektu
- Aktualizovat stránku testovací pás (QuizUtil_test.html v mém případě) takto:
- Referenční kód
- Ozdobte váš <skript> referenční takhle:
<skript Typ= text/javascript"" src="QuizUtil.js" dat obal></skript>
Blanket.js zvedne atribut "data obal" a má své kouzlo. Háky do Qunit, aktualizuje uživatelské rozhraní přidat možnost "Povolit pokrytí" a voila!
Shrnutí (TL; DR)
Použít Qunit k napsání testovacích případů.
- Stáhnout
- Přidejte do projektu
- Napište zkušební stránky postroje
- Vytvořit vaše testy
- Některé z kódu být testovatelné refaktorovat
- Být kreativní! Myslete na crazy, možné scénáře a testovat je stejně.
Pomocí blanket.js zajistit pokrytí
- Ujistěte se, že Qunit pracuje
- Stáhnout blanket.js a přidejte jej do projektu
- Přidejte jej do testovací stránky postroje:
- Přidat odkaz na blanket.js
- Přidejte atribut "data obal" do vašeho <skript> Značka
- Testy Qunit.
Nikdy jsem žádnou z předtím a měl nějaké základní věci v několik hodin.
Šťastný testování!
</Konec>
Za mnou na Twitter na http://www.twitter.com/pagalvin