Miten tehdään: Määritä yksikkö testi ja testin kattavuus QUnit.js ja Blanket.js toimisto 365 SharePoint App

Intro

Tutkineet yksikön testaus ja testata kattavuus ohjelman kuten olen työtä uusi SharePoint-app SharePoint Onlinessa toimistossa 365 Sviitti. Ilmeinen tutkimus polkuja sai minut Qunit.js ja sen jälkeen, - Blanket.js.

QUnit haluan perustaa yksikkö testit ja ryhmittele ne moduulit. Moduuli on yksinkertainen tapa järjestää liittyvät testit. (En ole varma, olen käyttänyt sitä tarkoitetulla tavalla, mutta se toimi minulle toistaiseksi pieni joukko tähän mennessä määritellyt).

Blanket.js integroituu Qunit ja se näyttää minulle todellinen riviä JavaScript, jotka olivat – ja mikä tärkeintä-ei itse asiassa suoritettu aikana testit. Tämä on "kattavuus"-linjat, jotka suorittaa katetaan testi, toiset taas eivät.

Välillä perustaa hyvä testitapaukset kattavuus, voimme vähentää riskejä meidän koodi on piilotettu vikoja. Hyvinä aikoina.

Qunit

Olettaen sinulla on Visual Studio project määrittää, Aloita lataamalla ohjelman Paketti http://qunitjs.com. Lisää JavaScript- ja vastaavia CSS ratkaisusi. Mine näyttää tältä:

Kuva 1

Kuten näette, Käytin 1.13.0 silloin kirjoitin tämä blogi. Älä unohda ladata ja lisätä CSS-tiedosto.

Että pois tieltä, Seuraava askel on luoda jonkinlainen testi valjaat ja viitata Qunit-bittiä. Olen testaus joukko toimintoja kutsutaan "QuizUtil.js", joten olen luonut HTML sivu nimeltä "QuizUtil_test.html" kuten komentosarjatiedoston:

Kuva 2

Tässä on koodi:

<!DOCTYPE HTML>
<HTML xmlns"http =://www.w3.org/ 1999/xhtml">
<pää>
    <otsikko>QuizUtil testi Qunit</otsikko>
    <linkki rel= "stylesheet" href="../CSS/qunit-1.13.0.CSS" />
    <Script tyyppi= text/javascript"" src="QuizUtil.js" tietoja-kansi></Script>
    <komentosarjan tyyppi ="text/javascript" src ="qunit-1.13.0.js"></Script>
    <komentosarjan tyyppi ="text/javascript" src ="blanket.min.js"></Script>

    <Script>
        moduuli("getIDFromLookup");
        testi("QuizUtil getIDFromLookupField", funktio () {
            var goodValue = "1;#Paul Galvin";

            yhtä suuri(getIDFromLookupField(goodValue) + 1, 2), "Tunnus [" + goodValue + "] + 1 olisi 2";
            yhtä suuri(getIDFromLookupField(ei määritetty), ei määritetty, "Määrittämätön syöteargumentin tulisi palauttaa tulos.");
            yhtä suuri(getIDFromLookupField(""), ei määritetty, "Tyhjä syöteargumentin tulisi palauttaa Määrittämätön arvo.");
            yhtä suuri(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), ei määritetty,"Olisi aina palata tulos convertible kokonaisluku");
            yhtä suuri(getIDFromLookupField("2;#jonkun toisen henkilön"), "2", "Tarkistaminen [2;#jonkun toisen henkilön].");
            yhtä suuri(getIDFromLookupField("9834524;#Long-arvo"), "9834524", "Suuri arvo testi.");
            notEqual(getIDFromLookupField("5;#Kuka tahansa", 6), 6, "Testaus notEqual (5 ei vastaa 6 Tässä esimerkissä: [5;#Kuka tahansa]");

        });

        moduuli("htmlEscape");
        testi("QuizUtil htmlEscape()", funktio () {
            yhtä suuri(htmlEscape("<"), "&lt;", "Paeta vähemmän kuin-operaattori ('<')");
            yhtä suuri(htmlEscape("<div class =  "someclass">Tekstiä</div>"), "&lt;div class =&quot;someclass&quot;&gt;Tekstiä&lt;/div&gt;", "Monimutkaisempi merkkijono.");
        });

        moduuli("getDateAsCaml");
        testi("QuizUtil getDateAsCaml()", funktio () {
            yhtä suuri(getDateAsCaml(Uusi Päivämäärä("12/31/2013")), "2013-12-31T:00:00:00", "Testaus kova koodattu päivämäärä: [12/31/2013]");
            yhtä suuri(getDateAsCaml(Uusi Päivämäärä("01/05/2014")), "2014-01-05T:00:00:00", "Testaus kova koodattu päivämäärä: [01/05/2014]");
            yhtä suuri(getDateAsCaml(Uusi Päivämäärä("01/31/2014")), "2014-01-31T:00:00:00", "Testaus kova koodattu päivämäärä: [01/31/2014]");
            yhtä suuri(getTodayAsCaml(), getDateAsCaml(Uusi Päivämäärä()), "getTodayAsCaml() olisi sama getDateAsCaml(Uusi päivämäärä())");
            yhtä suuri(getDateAsCaml("hölynpölyä arvo"), ei määritetty, "Yritä saada päivämäärä hölynpölyä arvo.");
            yhtä suuri(getDateAsCaml(ei määritetty), ei määritetty, "Yritä saada päivämäärä [ei määritetty] päivämäärä.");
        });

        moduuli("getParameterByName");
        testi("QuizUtil getParameterByName (kyselyn merkkijonosta)", funktio () {
            yhtä suuri(getParameterByName(ei määritetty), ei määritetty, "Yritä saada määrittelemättömän parametrin tulee palauttaa undefined.");
            yhtä suuri(getParameterByName("ei ole olemassa"), ei määritetty, "Yritä saada parametrin arvon, kun tiedämme –parametria ei ole.");

        });

        moduuli("Evästeet");
        testi("QuizUtil eri evästeen toimintoja.", funktio () {
            yhtä suuri(setCookie("test", "1", -1), getCookieValue("test"), "Get asettaa evästeen pitäisi toimia.");
            yhtä suuri(setCookie("anycookie", "1", -1), tosi, "Asettaminen voimassa ruoanlaitto tulisi palauttaa"totta".");
            yhtä suuri(setCookie("hullu evästenimi !@#$%"%\^&*(()?/><.,", "1", -1), tosi, "Asettaminen huono evästenimi tulisi palauttaa"väärä".");
            yhtä suuri(setCookie(ei määritetty, "1", -1), ei määritetty, "Ohimennen epämääräinen kuin evästenimi.");
            yhtä suuri(getCookieValue("ei ole olemassa"), "", "Eväste ei ole testi.");
        });

    </Script>
</pää>
<kehon>
    <div tunnus= "qunit"></div>
    <div tunnus= "qunit-valaisin"></div>

</kehon>
</HTML>

On useita asioita tapahtuu täällä:

Vertailemalla minun koodi (QuizUtil.js)
Vertailemalla Qunity.js
Osien tarkentaminen (getIDFromLookup, Evästeet, ym.)
Saattaminen <div> jonka tunnus on "qunit".

Sitten, Vedän vain tämän sivun ja saat jotain tällaista:

Kuva 3

Jos katsot yläosassa, sinulla on muutamia vaihtoehtoja, joista kaksi mielenkiintoista:

Piilota läpäissyt testit: Selvältä. Auttaa silmään vain nähdä ongelma-alueet ja ei paljon sotkua.
Moduuli: (pudota alas): Tämä suodattaa alas vain näiden ryhmien haluamasi testit testit.

Mitä testit itse-huomautuksia:

On sanomattakin selvää, että sinun täytyy kirjoittaa koodia niin, että se on testattavissa ensimmäinen paikka. Työkalulla voi auttaa valvoa tätä kurinalaisuus. Esimerkiksi, Minulla oli toiminto nimeltä "getTodayAsCaml()”. Tämä ei ole hyvin todentaa, koska ei ole syöteargumentin ja testata sitä tasa-arvoa, Meidän on jatkuvasti päivittää testi koodi vastaamaan nykyistä päivämäärää. Refactored lisäämällä tietojen syöttöparametri sitten kulkee kun haluan päivästä CAML muodossa päivämäärä.
Qunit puitteet asiakirjat omat testit ja se näyttää melko vankka. Se voi tehdä yksinkertaisia asioita, kuten testaus tasa-arvoa ja on myös tukea ajax tyyli vaatii ("oikeaa" tai pilkkasivat käyttämällä suosikki Mockeria).
Menossa läpi myös pakottaa ajattelemaan kautta edge tapauksissa – mitä tapahtuu "Määrittämätön" tai tulee toimia välitettiin Null-arvo. Siinä on kuollut yksinkertainen testata näitä skenaarioita ulos. Hyvää kamaa.

Kattavuus Blanket.js

Blanket.js täydentää Qunit seuraamalla todellinen riviä koodia, joka suoritetaan aikana näkyä testeissä. Se yhdistää oikea Qunit joten vaikka se on koko erillinen app, sillä kauniisti-se todella näyttää se on saumaton app.

Tämä on blanket.js toiminnassa:

Kuva 4

Kuva 5

(On todellakin yläreunassa olevaa "Ota kattavuus"-valintaruutua [Katso kuva 3] jotta mahdollistaa nyt kuluva.)

Kuvassa korostettuna rivit 5 ei ole suoritettu mitään minun testit, joten minun täytyy suunnitella testi, joka aiheuttaa ne suoritetaan jos haluan Täysi kattavuus.

Saada blanket.js toimi seuraavasti:

Lataa se http://blanketjs.org/.
Lisääminen projektiin
Päivitä testi valjaat sivu (QuizUtil_test.html minun tapauksessani) Seuraava:
1. Viite koodi
2. Sisustaa oman <Script> viittaus näin:

    <Script tyyppi= text/javascript"" src="QuizUtil.js" tietoja-kansi></Script>

Blanket.js poimii "data-cover" määritteen ja ei sen taika. Se koukut osaksi Qunit, päivittää UI lisätä "Salli kattavuus" vaihtoehto ja voila!

Yhteenveto (TL; DR)

Kirjoittaa testi tapauksissa Qunit avulla.

Lataa se
Lisääminen projektiin
Kirjoittaa testi valjaat sivu
Luo testit
- Refactor koodi voidaan todentaa
- Olla luova! Crazy ajatella, mahdotonta skenaarioita ja testata niitä joka tapauksessa.

Blanket.js avulla voidaan kattaa

Varmista Qunit toimii
Lataa blanket.js ja lisääminen projektiin
Lisääminen testisivulle valjaat:
- Lisätään viittaus blanket.js
- Lisää "tiedot-cover"-määritteen sinun <Script> Tag
Qunit testit.

Ei koskaan ollut mitään vastaavaa ja oli alkeellinen juttuja työskentelevien kourallinen tunteja.

Happy testaus!

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin

Paul Galvin ansiosta

Miten tehdään: Määritä yksikkö testi ja testin kattavuus QUnit.js ja Blanket.js toimisto 365 SharePoint App

Intro

Qunit

Kattavuus Blanket.js

Yhteenveto (TL; DR)

Jätä vastaus Peruuta vastaus