Tag Archives: blank.js

Kuidas: Konfigureerida üksuse testi ja Test laovarude QUnit.js ja Blanket.js büroo 365 SharePoint App

Intro

Uurinud üksus katsetamine ja testi katvus JavaScript nagu ma tööd uue SharePoint app for Office SharePoint online 365 sviit.  Ilmne teadusuuringute teed sundis mind Qunit.js ja pärast seda, et Blanket.js.

QUnit Tahaksin luua unit teste ja rühmitage need moodulid.  Moodul on lihtsalt lihtne viis korraldada vastavad katsetused. (Ma ei tea, ma olen seda kasutada eesmärgipäraselt, Aga see ei tööta minu jaoks siiani väike kogum on seni määratletud).

Blanket.js sulandub Qunit ja see näitab mulle tegelik read JavaScript, mis olid – ja mis veelgi olulisem – tegelikult ei hukati käigus katsetuste korraldamine.  See on "hõlmatus"-read, mida reguleeritakse katse samas ei.

Seadistamine hea katse juhtudel ja tulemeid katvus, saame vähendada riski, et meie kood on peidetud vead.  Headel aegadel.

Qunit

Eeldades, et olete oma Visual Studio projekti seadistamine, alustada allalaadimisega JavaScript pakett: http://qunitjs.com.  JavaScript ja vastava CSS lisamiseks lahendusse.  Mine näeb välja selline:

image

Joonis 1

Nagu näete, Olin kasutades 1.13.0 hetkel ma kirjutasin seda blogi postitus. Ära unusta alla laadida ja lisada CSS faili.

Et teelt, Järgmine samm on luua mingi test rakmete ja Qunit bitti.  Testin kimp funktsioone skripti fail nimega "QuizUtil.js" nii et ma loodud HTML lehe nimega "QuizUtil_test.html" nagu näidatud:

image Joonis 2

Siin on kood:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<juht>
    <pealkiri>QuizUtil test Qunit</pealkiri>
    <link rel= "stiil" href="../CSS/qunit-1.13.0.CSS" />
    <skripti tüüp= tekst/javascript"" src="QuizUtil.js" andmete kaitse></skripti>
    <script tüüp ="teksti/javascript" src ="qunit-1.13.0.js"></skripti>
    <script tüüp ="teksti/javascript" src ="blanket.min.js"></skripti>

    <skripti>
        moodul("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", funktsioon () {
            var goodValue = "1;#Paul Galvin";

            võrdse(getIDFromLookupField(goodValue) + 1, 2), "ID. [" + goodValue + "] + 1 peaks olema 2";
            võrdse(getIDFromLookupField(pole määratletud), pole määratletud, "Määratlemata sisendargumendi peaks tagasi määratlemata tulemus.");
            võrdse(getIDFromLookupField(""), pole määratletud, "Tühi sisendargumendi peaks tagasi undefined väärtus.");
            võrdse(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), pole määratletud,"Tuleks alati naasta tulemus Kabriolett täisarv");
            võrdse(getIDFromLookupField("2;#mõne teise isiku"), "2", "Kontrollimine [2;#mõne teise isiku].");
            võrdse(getIDFromLookupField("9834524;#pika väärtuse"), "9834524", "Suure väärtuse test.");
            notEqual(getIDFromLookupField("5;#keegi", 6), 6, "Katsetamine on notEqual (5 ei võrdu 6 see proov: [5;#keegi]");

        });

        moodul("htmlEscape");
        test("QuizUtil htmlEscape()", funktsioon () {
            võrdse(htmlEscape("<"), "&lt;", "Põgenevad vähem kui operaator ('<')");
            võrdse(htmlEscape("<div klassi =  "someclass">Mingi tekst</DIV>"), "&lt;div klassi =&quot;someclass&quot;&gt;Mingi tekst&lt;/DIV&gt;", "Keerukam test string.");
        });

        moodul("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", funktsioon () {
            võrdse(getDateAsCaml(Uus Kuupäev("12/31/2013")), "2013-12-31T:00:00:00", "Testimise kõva kodeeritud kuupäev: [12/31/2013]");
            võrdse(getDateAsCaml(Uus Kuupäev("01/05/2014")), "2014-01-05T:00:00:00", "Testimise kõva kodeeritud kuupäev: [01/05/2014]");
            võrdse(getDateAsCaml(Uus Kuupäev("01/31/2014")), "2014-01-31T:00:00:00", "Testimise kõva kodeeritud kuupäev: [01/31/2014]");
            võrdse(getTodayAsCaml(), getDateAsCaml(Uus Kuupäev()), "getTodayAsCaml() peab võrduma getDateAsCaml(uus kuupäev())");
            võrdse(getDateAsCaml("mõttetu väärtus"), pole määratletud, "Püüa saada jama väärtus kuupäev.");
            võrdse(getDateAsCaml(pole määratletud), pole määratletud, "Üritavad kuupäev ning [pole määratletud] kuupäev.");
        });

        moodul("getParameterByName");
        test("QuizUtil getParameterByName (päringu stringi)", funktsioon () {
            võrdse(getParameterByName(pole määratletud), pole määratletud, "Üritavad määratlemata parameeter peaks tagasi määratlemata.");
            võrdse(getParameterByName("pole olemas"), pole määratletud, "Proovige saada parameetri väärtus, kui teame, et parameeter ei ole olemas.");

        });

        moodul("Küpsised");
        test("QuizUtil erinevaid küpsise funktsioone.", funktsioon () {
            võrdse(setCookie("katse", "1", -1), getCookieValue("katse"), "Get seadsin küpsise peaks toimima.");
            võrdse(setCookie("anycookie", "1", -1), True, "Milles kehtiv cooking peaks tagasi"true".");
            võrdse(setCookie("hull küpsise nimi !@#$%"%\^&*(()?/><.,", "1", -1), True, "Milles halb küpsise nimi peaks tagasi 'vale'.");
            võrdse(setCookie(pole määratletud, "1", -1), pole määratletud, "Läbides määratlemata küpsise nimi.");
            võrdse(getCookieValue("pole olemas"), "", "Cookie olemas test.");
        });

    </skripti>
</juht>
<keha>
    <DIV ID= "qunit"></DIV>
    <DIV ID= "qunit-armatuur"></DIV>

</keha>
</HTML>

On mitmeid asju toimub siin:

  1. Viitamine minu kood (QuizUtil.js)
  2. Viitamine Qunity.js
  3. Määratleda mõned moodulid (getIDFromLookup, Küpsised, jt)
  4. Pannes on <DIV> kelle ID on "qunit".

Seejärel, Ma lihtsalt tõmba seda lehekülge ja sa saad midagi sellist:

image

Joonis 3

Kui sa vaatad üle ülaosa, Sul on mõned võimalused, millest kaks on huvitav:

  • Peida läbinud testid: Üsna ilmne.  Aitab silma just näha probleemsed valdkonnad ja mitte palju peegeldushäirete.
  • Moodul: (rippmenüü): See filtreerib alla just need katsesarju soovitud testid.

Nagu katsed, ise – mõned kommentaarid:

  • Loomulikult tuleb kirjutada koodi nii, et see on testitavad esimese koha.  Kasutades tööriista aitavad rakendada distsipliini. Näiteks, Mul oli funktsioon nimega "getTodayAsCaml()”.  See ei ole väga testitavad, kuna see pole sisendargumendi ja võrdsuse testimiseks, Meil oleks vaja pidevalt uuendada testimisreeglistiku peegeldab praegust kuupäeva.  Ma refactored lisades andmed sisendparameeter siis kulgeb praegune kuupäev Millal ma tahan tänast kuupäeva CAML-vormingus.
  • Qunit raamistiku dokumendid oma katseid ja tundub päris tugev.  Seda saate teha lihtsaid asju nagu võrdõiguslikkuse katsetamine ja ka toetust ajax stiilis kõnede ("päris" või pilkasid kasutades oma lemmik mocker).
  • Läbimas protsessi ka sunnib sind mõelda läbi serv juhtudel – mis juhtub "määratlemata" või null läks funktsioon.  See muudab surnud lihtne testida neid stsenaariume läbi.  Hea kraam.

Laovarude Blanket.js

Blanket.js täiendab Qunit jälgida tegelikud rida koodi, mis töötab oma katsete käigus täita.  See integreerib paremale Qunit nii et kuigi see on täiesti eraldi app, ta mängib kenasti-see tõesti näeb välja nagu oleks üks õmblusteta app.

See on blanket.js tegevuses:

image Joonis 4

image

Joonis 5

(Tegelikult on klõpsa ülaosas ruut "Luba ulatus" [vt joonis 3] võimaldab seda.)

Esiletõstetud ridade arv 5 ei ole täidetud ükski minu testide, nii et mul on vaja töötada välja testi, mis põhjustavad neil täita täies ulatuses soovi.

Saad blanket.js tööd tehes järgmist:

  1. Alla laadida http://blanketjs.org/.
  2. Mille soovite projektile lisada
  3. Uuenda rakmed testleht (QuizUtil_test.html minu puhul) järgmiselt.:
    1. Viide selle koodiga
    2. Kaunista oma <skripti> selline viide:
    <skripti tüüp= tekst/javascript"" src="QuizUtil.js" andmete kaitse></skripti>

Blanket.js kirkad "andmete alumiiniumlehte" atribuut ja ei oma magic.  Õnged sisse Qunit, uuendab UI lisada "Luba ulatus" valik ja voila!

Kokkuvõte (TL; DR)

Qunit abil saate kirjutada oma katse juhtudel.

  • Lae see
  • Mille soovite projektile lisada
  • Kirjutage rakmed testleht
  • Loo oma katsed
    • Refaktoorime mõned oma koodi testitavad
    • Loominguline!  Crazy mõelda, võimatu stsenaariume ja testida neid Igatahes.

Kasutage blanket.js tagamiseks

  • Qunit töötamise
  • Lae blanket.js ja lisada see oma projekti
  • Test rakmed lehele lisada:
    • Lisada blanket.js
    • Lisa "andmete alumiiniumlehte" omistada oma <skripti> Tag
  • Kestab Qunit katsete.

Kunagi tegin kõik see enne ja oli mõned algeline asjad töötavad üksikud tundi. 

Head katsetamist!

</lõpp>

undefinedTelli minu blogi.

Järgi mind vidistama kell http://www.twitter.com/pagalvin