Qunit

Ú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.

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("<"), "&lt;", "Únik méně než operátor ('<')");
            rovná(htmlEscape("<div třída =  "someclass">Nějaký text</div>"), "&lt;div třída =&quot;someclass&quot;&gt;Nějaký text&lt;/div&gt;", "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:
1. Referenční kód
2. 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

Paul Galvin SharePoint prostor

Tag Archives: Qunit

Jak: Konfigurace jednotky Test a Test pokrytí s QUnit.js a Blanket.js pro kancelář 365 Aplikace SharePoint

Úvod

Qunit

Krytí s Blanket.js

Shrnutí (TL; DR)