Ú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>
Přihlásit se na mém blogu.
Za mnou na Twitter na http://www.twitter.com/pagalvin
