blank.js | Paul Galvin SharePoint vietas

Intro

Es esmu bijis izpētīt vienības pārbaude un testa segumu JavaScript, kā es strādāju par jaunu SharePoint app tiešsaistē SharePoint, Office 365 komplekts. Acīmredzams pētniecības ceļi aizveda mani uz Qunit.js un pēc tam pa labi, lai Blanket.js.

QUnit atļaujiet iestatīt vienības testos un tos grupēt moduļus. Modulis ir tikai vienkāršs veids, kā organizēt saistītos testus. (Es neesmu pārliecināts, ka es lietoju to, kā paredzēts, bet tas strādā man līdz šim ar nelielu testu es līdz šim definēto kopu).

Blanket.js integrējas ar Qunit un to parādi faktiskās rindas JavaScript, kas bija- un vēl svarīgāk – netika faktiski izpildītas laikā darbojas testu. Tas ir "segums"-līnijām, kas izpildīts attiecas pārbaudes, kamēr citi nav.

Starp labu precedentiem iestatīšanu un skatīšanu pārklājums, mēs varam samazināt risku, ka mūsu kods ir slēpta defekti. Labos laikos.

Qunit

Pieņemot, ka jums ir Visual Studio projektu iestatīt, Sāciet ar JavaScript pakotnes lejupielāde no http://qunitjs.com. Pievienot JavaScript un CSS atbilstošās savu risinājumu. Raktuves izskatās:

Stāvs 1

Kā jūs varat redzēt, Bija, izmantojot 1.13.0 brīdī, kad es uzrakstīju šo blog post. Neaizmirstiet lejupielādēt un pievienot CSS failu.

Kas no tā, kā, Nākamais solis ir izveidot sava veida testa siksnas un references Qunit biti. Es esmu testēšanas funkcijas ķekars skripta fails, ko sauc par "QuizUtil.js", tāpēc es radīju HTML lapas, ko sauc par "QuizUtil_test.html", kā parādīts:

Stāvs 2

Šeit ir kods:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<galvu>
    <nosaukums>QuizUtil tests ar Qunit</nosaukums>
    <saite rel= "izvēršamā stila lapu" href="../CSS/qunit-1.13.0.CSS" />
    <skriptu tips= text/javascript"" src="QuizUtil.js" datu segums></skriptu>
    <skripta tips ="text/javascript" src ="qunit-1.13.0.js"></skriptu>
    <skripta tips ="text/javascript" src ="blanket.min.js"></skriptu>

    <skriptu>
        modulis("getIDFromLookup");
        tests("QuizUtil getIDFromLookupField", funkcija () {
            var goodValue = "% 1;#Paul Galvin";

            vienāds(getIDFromLookupField(goodValue) + 1, 2), "ID [" + goodValue + "] + 1 vajadzētu būt 2";
            vienāds(getIDFromLookupField(nedefinēta), nedefinēta, "Undefined ievades argumentu vajadzētu atgriezties nenoteikts rezultāts.");
            vienāds(getIDFromLookupField(""), nedefinēta, "Nedefinēts vērtību vajadzētu atgriezties tukšu ievades arguments.");
            vienāds(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), nedefinēta,"Vienmēr jāatgriežas kabriolets rezultātu līdz veselam skaitlim");
            vienāds(getIDFromLookupField("% 2;#kāda cita persona"), "% 2", "Pārbaudot [2;#kāda cita persona].");
            vienāds(getIDFromLookupField("9834524;#Long vērtība"), "9834524", "Lielu vērtību tests.");
            notEqual(getIDFromLookupField("5;#ikviens", 6), 6, "Testēšana notEqual (5 nav vienāds ar 6 šajā izlasē: [5;#ikviens]");

        });

        modulis("htmlEscape");
        tests("QuizUtil htmlEscape()", funkcija () {
            vienāds(htmlEscape("<"), "&lt;", "Bēg mazāk nekā operators ('<')");
            vienāds(htmlEscape("<div class =  "someclass">Nedaudz teksta</DIV>"), "&lt;div class =&quot;someclass&quot;&gt;Nedaudz teksta&lt;/DIV&gt;", "Vairāk sarežģītu testu virkne.");
        });

        modulis("getDateAsCaml");
        tests("QuizUtil getDateAsCaml()", funkcija () {
            vienāds(getDateAsCaml(jaunā Datums("12 31 2013")), "2013-12-31T:00:00:00", "Grūti kodētu datuma pārbaude: [12/31/2013]");
            vienāds(getDateAsCaml(jaunā Datums("01/05/2014")), "2014-01-05T:00:00:00", "Grūti kodētu datuma pārbaude: [01/05/2014]");
            vienāds(getDateAsCaml(jaunā Datums("01/31/2014")), "2014-01-31T:00:00:00", "Grūti kodētu datuma pārbaude: [01/31/2014]");
            vienāds(getTodayAsCaml(), getDateAsCaml(jaunā Datums()), "getTodayAsCaml() jābūt vienādai getDateAsCaml(jaunais datums())");
            vienāds(getDateAsCaml("muļķības vērtība"), nedefinēta, "Centieties iegūt muļķības vērtība datuma.");
            vienāds(getDateAsCaml(nedefinēta), nedefinēta, "Centieties iegūt dienas [nedefinēta] datumu.");
        });

        modulis("getParameterByName");
        tests("QuizUtil getParameterByName (no vaicājuma virknes)", funkcija () {
            vienāds(getParameterByName(nedefinēta), nedefinēta, "Centieties iegūt nenoteiktu parametru vajadzētu atgriezties Nedefinēts.");
            vienāds(getParameterByName("nepastāv"), nedefinēta, "Mēģināt iegūt parametra vērtība, kad mēs zinām, ka parametrs vairs nepastāv.");

        });

        modulis("Sīkfaili");
        tests("QuizUtil sīkfailu dažādas funkcijas.", funkcija () {
            vienāds(setCookie("test", "% 1", -1), getCookieValue("test"), "Get sīkfails, es noteikti būtu jāstrādā.");
            vienāds(setCookie("anycookie", "% 1", -1), patiess, "Nosakot spēkā vārīšanas vajadzētu atgriezties"taisnība".");
            vienāds(setCookie("traks cookie nosaukums !@#$%"%\^&*(()?/><.,", "% 1", -1), patiess, "Nosakot sliktu sīkfaila nosaukumu vajadzētu atgriezties 'false'.");
            vienāds(setCookie(nedefinēta, "% 1", -1), nedefinēta, "Iet nedefinētu nosaukums sīkdatne.");
            vienāds(getCookieValue("nepastāv"), "", "Sīkdatne neeksistē tests.");
        });

    </skriptu>
</galvu>
<organizācija>
    <DIV ID= "qunit"></DIV>
    <DIV ID= "qunit armatūra"></DIV>

</organizācija>
</HTML>

Ir vairākas lietas, kas te notiek:

Apskatot manu kodu (QuizUtil.js)
Atsauces Qunity.js
Definējot dažiem moduļiem (getIDFromLookup, Sīkfaili, un citi)
Ievietojot <DIV> kura ID ir "qunit".

Pēc tam, Es vienkārši velciet šo lapu uz augšu, un jums kaut kas līdzīgs šim:

Stāvs 3

Ja paskatās pāri augšpusei, jums ir dažas iespējas, no kuriem divi ir interesanti:

Paslēpt izturējis testus: Diezgan skaidrs. Var palīdzēt jūsu acu tikai redzēt problemātiskās jomas un nav daudz traucējumu.
Modulis: (nolaižamais saraksts): Tas filtrēs testus uz leju, lai tikai tām grupām, testi, ko vēlaties.

Attiecībā uz testiem, sevi-daži komentāri:

Pats par sevi saprotams, ka jums rakstīt kodu, tāda, ka pirmām kārtām ir testable. Izmantojot rīku var palīdzēt īstenot šo disciplīnu. Piemēram, Man bija funkciju sauc "getTodayAsCaml()”. Tas nav ļoti testable, jo tas aizņem ievades arguments un pārbaudītu to līdztiesības, mums būtu nepieciešams pastāvīgi atjaunināt testa kodu, lai parādītu pašreizējo datumu. Es to refactored pievienošanu datiem ievades parametrs, pēc tam iet, kad es gribu, lai šodienas datumu formātā CAML pašreizējo datumu.
Qunit ietvaros dokumentus saviem testiem un šķiet diezgan stabila. To var darīt vienkāršas lietas, piemēram, pārbaudes par vienlīdzību un ir arī atbalsts stilā ajax zvanus ("īstu" vai izsmēja, izmantojot savu iecienītāko smējējs).
Iet cauri procesam arī liek domāt ar malu gadījumos – kas notiek ar "Nedefinēts" vai null tiek nodota funkcijai. Tas padara miris vienkārši pārbaudīt ārā šos scenārijus. Labs stuff.

Ar Blanket.js segumu

Blanket.js papildina Qunit, izsekojot faktisko koda rindiņas, kas darbojas jūsu pārbaudes gaitā izpildīt. Tā integrē tiesības Qunit tik pat, ja tas ir pilnīgi atsevišķs app, tas spēlē labi – tiešām izskatās, ka tas ir viens bezšuvju app.

Tas ir blanket.js darbībā:

Stāvs 4

Stāvs 5

(Jūs faktiski ir noklikšķiniet uz "Aktivizēt segums" rūtiņas augšpusē [sk. 3] lai iespējotu šo.)

Iezīmētās līnijas attēlā 5 nav izpildīts jebkurš no maniem testiem, tāpēc man ir nepieciešams izstrādāt testa, kas izraisa to izpildīt, ja es gribu pilnu pārklājumu.

Iegūt blanket.js darbu, rīkojieties šādi:

Lejupielādējiet to no http://blanketjs.org/.
Pievienot savam projektam
Atjaunināt jūsu iejūgs testa lappuse (QuizUtil_test.html manā gadījumā) šādi:
1. Atsauces kods
2. Izrotāt jūsu <skriptu> atsauci, piemēram, tas:

    <skriptu tips= text/javascript"" src="QuizUtil.js" datu segums></skriptu>

Blanket.js paceļ "datu segums" atribūts un paveic savu brīnumu. To āķi vērā Qunit, atjaunina UI pievienot "Enable segums" variants un voila!

Kopsavilkums (TL; DR)

Lietojiet Qunit, lai rakstītu pārbaudes lietas.

To lejupielādēt
Pievienot savam projektam
Rakstīt testa siksnas lappusi
Izveidojiet savu testu
- Daži no jūsu kodam jābūt testable refactor
- Esiet radošs! Domāju, ka crazy, neiespējami scenārijus un testa viņiem vienalga.

Izmantojiet blanket.js lai nodrošinātu pārklājumu

Pārliecinieties, vai darbojas Qunit
Blanket.js lejupielādēt un pievienot to savam projektam
To pievienotu jūsu iejūgs testa lappuse:
- Pievienot atsauci uz blanket.js
- "Datu segums" atribūtu, lai pievienotu jūsu <skriptu> tagu
Darboties, Qunit pārbaudes.

Es nekad nebija jebkura šāda pirms un bija daži rudimentārs stuff darbojas nedaudzas stundas.

Laimīgs testēšana!

</beigās>

Abonēt manu blogu.

Sekot mani uz čivināt pie http://www.twitter.com/pagalvin

Paul Galvin SharePoint vietas

Tagu arhīvi: blank.js

kā: Konfigurēt vienības testu un testa segumu ar QUnit.js un Blanket.js Office 365 SharePoint App

Intro

Qunit

Ar Blanket.js segumu

Kopsavilkums (TL; DR)