kézikönyv: QUnit.js és Blanket.js egység vizsgálat és teszt lefedettség beállítása egy iroda 365 SharePoint App

Intro

Már vizsgálja egység tesztelése, és a teszt lefedettség a JavaScript, mint én dolgozik-ra egy új SharePoint app SharePoint online, az irodában 365 Suite. A nyilvánvaló kutatási út vezetett engem Qunit.js és azután, hogy jobb, a Blanket.js.

QUnit hadd beállítása unit tesztek, és csoportosítsa őket modulok. A modul csak egy egyszerű út-hoz szervez kapcsolódó vizsgálatok. (Nem vagyok benne biztos, én használ ez a tervezettnek, de ez működik nekem eddig eddig van meghatározott kis csoportja).

Blanket.js integrálja, a Qunit, és megmutatja nekem a tényleges sornyi JavaScript-és ami még fontosabb – voltak nem ténylegesen végrehajtott vizsgálatok futtatása során. Ez az "fedezet"-vonalak, hogy végre tartoznak a vizsgálat míg mások nem.

Jó teszt esetek felállítása és lefedettsége közötti, Mi csökkentheti annak kockázatát, hogy a kód birtokol rejtett hibák. Jó idő.

Qunit

Feltételezve, hogy a Visual Studio projekt beállítása, Töltse le a JavaScript csomag http://qunitjs.com. A JavaScript és a CSS megfelelő hozzáadása a megoldáshoz. Az enyém úgy néz ki mint ez:

Ábra 1

Mint te tud lát, Voltam használ 1.13.0 abban az időben ezt a blogbejegyzést írtam. Ne felejtsd el letölteni, és a CSS-fájl hozzáadása.

Hogy az útból, következő lépés, hogy hozzon létre valamilyen teszt felszerszámoz és hivatkozás a Qunit bit. Én vizsgálat egy csomó funkciók egy kézírás reszelő nevezett "QuizUtil.js", ezért hoztam létre egy HTML-lapot, az úgynevezett "QuizUtil_test.html", mint mutatott-ban:

Ábra 2

Itt van a kód:

<!DOCTYPE HTML>
<HTML xmlns"http =://www.w3.org/ 1999/xhtml">
<fej>
    <cím>QuizUtil vizsgálat Qunit</cím>
    <Link rel= "stylesheet" href="../CSS/qunit-1.13.0.css" />
    <parancsfájl típus= text/javascript"" src="QuizUtil.js" adatok-fedél></parancsfájl>
    <a parancsfájl típus ="text/javascript" src ="qunit-1.13.0.js"></parancsfájl>
    <a parancsfájl típus ="text/javascript" src ="blanket.min.js"></parancsfájl>

    <parancsfájl>
        modul("getIDFromLookup");
        teszt("QuizUtil getIDFromLookupField", függvény () {
            var goodValue = "1;#Paul Galvin";

            egyenlő(getIDFromLookupField(goodValue) + 1, 2), "Azonosítója [" + goodValue + "] + 1 kell 2";
            egyenlő(getIDFromLookupField(nem definiált), nem definiált, "Definiálatlan bemeneti argumentum vissza undefined eredménye.");
            egyenlő(getIDFromLookupField(""), nem definiált, "Üres bemeneti argumentum kell nem definiált értéket adnak vissza.");
            egyenlő(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), nem definiált,"Kell mindig vissza egy eredmény kabrió egy egész");
            egyenlő(getIDFromLookupField("2;#más személy"), "2", "Ellenőrzése [2;#más személy].");
            egyenlő(getIDFromLookupField("9834524;#hosszú érték"), "9834524", "Nagy érték teszt.");
            notEqual(getIDFromLookupField("5;#bárki, aki", 6), 6, "-A notEqual vizsgálat (5 nincs egyenlő 6 Ez a minta: [5;#bárki, aki]");

        });

        modul("htmlEscape");
        teszt("QuizUtil htmlEscape()", függvény () {
            egyenlő(htmlEscape("<"), "&lt;", "Menekülés a kevesebb, mint üzemeltető ('<')");
            egyenlő(htmlEscape("<div class =  "someclass">Néhány szöveg</Div>"), "&lt;div class =&quot;someclass&quot;&gt;Néhány szöveg&lt;/Div&gt;", "Bonyolultabb teszt karakterláncot.");
        });

        modul("getDateAsCaml");
        teszt("QuizUtil getDateAsCaml()", függvény () {
            egyenlő(getDateAsCaml(új Dátum("12/31/2013")), "2013-12-31T:00:00:00", "Vizsgálati fixen kódolt dátuma: [12/31/2013]");
            egyenlő(getDateAsCaml(új Dátum("01/05/2014")), "2014-01-05T:00:00:00", "Vizsgálati fixen kódolt dátuma: [01/05/2014]");
            egyenlő(getDateAsCaml(új Dátum("01/31/2014")), "2014-01-31T:00:00:00", "Vizsgálati fixen kódolt dátuma: [01/31/2014]");
            egyenlő(getTodayAsCaml(), getDateAsCaml(új Dátum()), "getTodayAsCaml() kell egyenlő getDateAsCaml(új dátum())");
            egyenlő(getDateAsCaml("képtelenség-érték"), nem definiált, "Próbálj nonszensz érték dátuma.");
            egyenlő(getDateAsCaml(nem definiált), nem definiált, "Próbálj meg időpontjában a [nem definiált] dátum.");
        });

        modul("getParameterByName");
        teszt("QuizUtil getParameterByName (a lekérdezési karakterláncban)", függvény () {
            egyenlő(getParameterByName(nem definiált), nem definiált, "Próbálj meg nem definiált paramétert kell vissza undefined.");
            egyenlő(getParameterByName("nem létezik"), nem definiált, "Megpróbál-hoz kap a paraméter értékét, ha tudjuk, hogy a paraméter nem létezik.");

        });

        modul("Cookie-k");
        teszt("QuizUtil különböző cookie-funkciók.", függvény () {
            egyenlő(setCookie("teszt", "1", -1), getCookieValue("teszt"), "Kap egy cookie-t be kell dolgozni.");
            egyenlő(setCookie("anycookie", "1", -1), igaz, "Beállítás érvényes főzés vissza"igaz".");
            egyenlő(setCookie("őrült cookie-név !@#$%"%\^&*(()?/><.,", "1", -1), igaz, "Egy rossz cookie-név beállítást vissza kell"false".");
            egyenlő(setCookie(nem definiált, "1", -1), nem definiált, "Tompított meghatározatlan, mint a cookie-név.");
            egyenlő(getCookieValue("nem létezik"), "", "Cookie nem létezik vizsgálati.");
        });

    </parancsfájl>
</fej>
<szerv>
    <Div azonosító= "qunit"></Div>
    <Div azonosító= "qunit-kellék"></Div>

</szerv>
</HTML>

Van néhány dolog történik itt:

Hivatkozva az én-m kód (QuizUtil.js)
Hivatkozó Qunity.js
Némely elemek meghatározása (getIDFromLookup, A cookie-k, és mások)
Elhelyezése a <Div> akinek azonosítás "qunit".

Majd, Csak húzza, fel ezt az oldalt és Ön kap valamit, mint ez:

Ábra 3

Ha megnézed, a tetején, van néhány lehetőség, melyek közül kettő is érdekes:

Hide teszt: Elég nyilvánvaló. Segíthet a szem csak látni a problémás területek, és nem sok rendetlenséget teremt.
Modul: (legördülő): Ez kiszűri a vizsgálatok csak azok a csoportok, teszttípusokat le.

Mivel a vizsgálatokat maguk – néhány megjegyzést:

Magától értetődik, hogy meg kell írni a kódot, hogy tesztelhető az első helyen. Az eszközzel segíteni érvényesíteni a fegyelem. Például, Volt egy úgynevezett "getTodayAsCaml funkció()”. Ez nem nagyon tesztelhető, mivel nincs bemeneti argumentum tart és kipróbálni, hogy az egyenlőség, azt kell, hogy folyamatosan frissíti a teszt-kódot, hogy az tükrözze az aktuális dátumot. Én refactored, összeadás egy adat bemeneti paramétert, majd az aktuális dátumot, ha akarom, hogy mai CAML formátumban elhaladtak.
Qunit keretében dokumentumokat a saját vizsgálatok, és úgy tűnik, elég erős. Tehetünk, egyszerű dolgok, mint a tesztelés az egyenlőséget, és is birtokol támogat részére ajax style hívások (mind a "valódi", vagy a csúfolt segítségével a kedvenc mocker).
Megy keresztül a folyamat is arra kényszerít, hogy gondolja végig, hogy edge esetek-mi történik a "meghatározatlan", vagy null átment egy függvény. Ez teszi halott egyszerű teszt forgatókönyvekben ki. Jó dolog.

Blanket.js lefedettség

Blanket.js kiegészíti Qunit nyomon követése a tényleges sornyi kódot, ami fut a vizsgálat során. Azt integrálja jobb Qunit még akkor is ha-a ' egy egész külön app, játszik szépen-ez igazán néz ki, mint egy varrás nélküli alkalmazás.

Ez a blanket.js akcióban:

Ábra 4

Ábra 5

(Valójában van, hogy kattintson a "Engedélyezi a lefedettség" jelölőnégyzetre, a tetején [ábra 3] hogy ezt a lehetőséget.)

A kijelölt vonalak ábrán 5 nem hajtottak akármi-ból az én-m teszt, így kell, hogy dolgozzon ki egy teszt, hogy okoz számukra, hogy végre, ha azt akarom, hogy teljes lefedettség.

Blanket.js dolgozik, az alábbi lépéseket kap:

Letölt ez-ból http://blanketjs.org/.
Hozzáadása a projekthez
Frissítse tesztoldalát hám (Az én esetemben QuizUtil_test.html) az alábbiak szerint:
1. Hivatkozás a kód
2. Díszíteni a <parancsfájl> referencia, mint ez:

    <parancsfájl típus= text/javascript"" src="QuizUtil.js" adatok-fedél></parancsfájl>

Blanket.js felveszi a "adatok-cover" attribútum, és nem a mágikus. Ez akaszt-ba Qunit, frissíti a felhasználói felület, hogy "A lefedettség engedélyezése" lehetőséget, és voál!

Összefoglaló (TL; DR)

Használ Qunit-hoz ír a teszt esetek.

Letölt ez
Hozzáadása a projekthez
Írjon egy teszt felszerszámoz oldalon
Hozzon létre a vizsgálatok
- Refactor, néhány, a kódot, hogy tesztelhető
- Kreatív! Gondolom, az őrült, lehetséges forgatókönyvek és a vizsgálati őket egyébként.

Lefedettség biztosítása blanket.js segítségével

Győződjön meg róla, Qunit dolgozó
Töltse le a blanket.js, és hozzáadása a projekthez
Add hozzá a tesztoldal hám:
- Blanket.js hozzáadása
- Adjunk hozzá egy "adat-cover" attribútumot a <parancsfájl> címke
Fuss a Qunit-teszt.

Soha nem tett akármi-ból ez előtt, és volt néhány kezdetleges dolog, egy maroknyi órát dolgozik.

Boldog tesztelés!

</vége>

Subscribe to my blog.

Kövesse nekem Twitter http://www.twitter.com/pagalvin

Paul Galvin SharePoint hely

kézikönyv: QUnit.js és Blanket.js egység vizsgálat és teszt lefedettség beállítása egy iroda 365 SharePoint App

Intro

Qunit

Blanket.js lefedettség

Összefoglaló (TL; DR)

hagyj válaszüzenetet válasz visszavonása