Sut i: Ffurfweddu Prawf Uned a Prawf Pwnc o dan sylw gyda QUnit.js a Blanket.js Am Swyddfa 365 SharePoint App

Intro

Dwi wedi bod yn archwilio uned profion a prawf darllediadau ar gyfer JavaScript ag rwy'n gweithio ar app SharePoint newydd ar gyfer SharePoint ar-lein yn y Swyddfa 365 gyfres. Arweiniodd y llwybrau ymchwil amlwg i mi Qunit.JS a hawl ar ôl hynny, i Blanket.JS.

Mae QUnit yn gadael i mi sefydlu uned profion a eu grwpio mewn modiwlau. Modiwl yn unig ffordd syml i drefnu profion cysylltiedig. (Nid wyf yn siŵr yr wyf ei ddefnyddio fel y bwriadwyd, ond mae'n gweithio i mi hyd yn hyn gyda'r set fach o brofion a diffiniais hyd yma).

Mae'r Blanket.js yn integreiddio â Qunit a bydd yn dangos y llinellau gwirioneddol o JavaScript a oedd – ac yn bwysicach – nid oedd gweithredu mewn gwirionedd yn ystod y profion yn rhedeg i mi. Mae hyn yn "sylw" – ymdrinnir â llinellau y gweithredu gan y prawf ac nid eraill.

Rhwng sefydlu achosion prawf da a gwylio darllediadau, gallwn leihau'r risg y mae ein Cod yn cuddio diffygion. Amseroedd da.

Qunit

Gan dybio bod gennych eich stiwdio gweledol prosiect yn sefydlu, dechrau drwy lawrlwytho y pecyn JavaScript o http://qunitjs.com. Ychwanegu JavaScript a CSS cyfatebol at eich ateb. Lofa yn edrych fel hyn:

Ffigur 1

Fel y gallwch weld, Oedd yn ei defnyddio 1.13.0 ar y pryd, ysgrifennais hwn post blog. Peidiwch ag anghofio i lawrlwytho ac ychwanegu ffeil CSS.

Bod allan y ffordd, cam nesaf yw i greu rhyw fath o brawf harnais a cyfeirnod y darnau Qunit. Yr wyf yn profi yn griw o swyddogaethau mewn ffeil sgript o'r enw "QuizUtil.js" fel yr wyf wedi creu tudalen HTML o'r enw "QuizUtil_test.html" fel y dangosir:

Ffigur 2

Yma yn y Cod:

<!DOCTYPE html>
<html xmlns= "http://www.W3.org/1999/xhtml">
<Pennaeth>
    <Teitl>Prawf QuizUtil â Qunit</Teitl>
    <cyswllt rel= "Taflen arddull" href=".. /CSS/qunit-1.13.0.CSS" />
    <sgript Math= testun/javascript"" src="QuizUtil.JS" data-clawr></sgript>
    <Math o sgript ="Text / javascript" src ="qunit-1.13.0.js"></sgript>
    <Math o sgript ="Text / javascript" src ="blanket.min.js"></sgript>

    <sgript>
        modiwl("getIDFromLookup");
        prawf("QuizUtil getIDFromLookupField", swyddogaeth () {
            Roedd goodValue = "1;#Paul Galvin";

            cyfartal(getIDFromLookupField(goodValue) + 1, 2), "ID o [" + goodValue + "] + 1 Dylid 2";
            cyfartal(getIDFromLookupField(heb ei ddiffinio), heb ei ddiffinio, "Dylai ddadl mewnbwn heb ei ddiffinio yn ôl canlyniad amhendant.");
            cyfartal(getIDFromLookupField(""), heb ei ddiffinio, "Dylai'r ddadl mewnbwn gwag yn dychwelyd gwerth heb ei ddiffinio.");
            cyfartal(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), heb ei ddiffinio,"Dylid wastad yn dychwelyd convertible canlyniad i gyfanrif");
            cyfartal(getIDFromLookupField("2;#person arall"), "2", "A gwirio [2;#person arall].");
            cyfartal(getIDFromLookupField("9834524;#gwerth hir"), "9834524", "Prawf gwerth mawr.");
            notEqual(getIDFromLookupField("5;#unrhyw un", 6), 6, "Profion notEqual (5 Nid yw yn hafal i 6 ar gyfer sampl hwn: [5;#unrhyw un]");

        });

        modiwl("htmlEscape");
        prawf("QuizUtil htmlEscape()", swyddogaeth () {
            cyfartal(htmlEscape("<"), "&lt;", "Dianc sy'n llai na gweithredwr ('<')");
            cyfartal(htmlEscape("<dosbarth DIV =. "someclass">Rhywfaint o destun</div>"), "&lt;dosbarth DIV =&quot;someclass&quot;&gt;Rhywfaint o destun&lt;/div&gt;", "Llinyn prawf mwy cymhleth.");
        });

        modiwl("getDateAsCaml");
        prawf("QuizUtil getDateAsCaml()", swyddogaeth () {
            cyfartal(getDateAsCaml(newydd Dyddiad("12/31/2013")), "2013-12-31T:00:00:00", "Profi dyddiad galed codio: [12/31/2013]");
            cyfartal(getDateAsCaml(newydd Dyddiad("01/05/2014")), "2014-01-05T:00:00:00", "Profi dyddiad galed codio: [01/05/2014]");
            cyfartal(getDateAsCaml(newydd Dyddiad("01/31/2014")), "2014-01-31T:00:00:00", "Profi dyddiad galed codio: [01/31/2014]");
            cyfartal(getTodayAsCaml(), getDateAsCaml(newydd Dyddiad()), "getTodayAsCaml() Dylai cyfartal getDateAsCaml(Dyddiad newydd())");
            cyfartal(getDateAsCaml("nonsens gwerth"), heb ei ddiffinio, "Ceisio cael dyddiad gwerth nonsens.");
            cyfartal(getDateAsCaml(heb ei ddiffinio), heb ei ddiffinio, "Ceisio cael dyddiad y [heb ei ddiffinio] Dyddiad.");
        });

        modiwl("getParameterByName");
        prawf("QuizUtil getParameterByName (o'r llinyn ymholiad)", swyddogaeth () {
            cyfartal(getParameterByName(heb ei ddiffinio), heb ei ddiffinio, "Geisio diffinio paramedr dylai ddychwelyd heb ei ddiffinio.");
            cyfartal(getParameterByName("nad yw'n bodoli"), heb ei ddiffinio, "Ceisiwch gael gwerth paramedr pan wyddom nad yw y paramedr yn bodoli.");

        });

        modiwl("Cwcis");
        prawf("QuizUtil amrywiol swyddogaethau briwsion.", swyddogaeth () {
            cyfartal(setCookie('brofi", "1", -1), getCookieValue('brofi"), "Dylid cael briwsionyn sefydlais y gwaith.");
            cyfartal(setCookie("anycookie", "1", -1), wir, "Gosod coginio dilys dylid dychwelyd 'wir'.");
            cyfartal(setCookie("briwsionyn wallgof enw !@#$%"%\^&*(()?/><.,", "1", -1), wir, "Gosod enw briwsionyn gwael dylid dychwelyd 'gau'.");
            cyfartal(setCookie(heb ei ddiffinio, "1", -1), heb ei ddiffinio, "Heb ei ddiffinio fel yr enw briwsionyn yn pasio.");
            cyfartal(getCookieValue("nad yw'n bodoli"), "", "Briwsionyn nad oes prawf.");
        });

    </sgript>
</Pennaeth>
<corff>
    <div id"qunit ="></div>
    <div id= "qunit-gêm"></div>

</corff>
</html>

Ceir nifer o bethau yn digwydd yma:

Cyfeirio at fy Cod (QuizUtil.js)
Cyfeirio at Qunity.js
Diffinio rhai modiwlau (getIDFromLookup, Briwsion, ac eraill)
Gosod <div> Mae eu ID yw "qunit".

Yna, Dim ond yr wyf yn tynnu fyny dudalen hon a ydych yn cael rhywbeth fel hyn:

Ffigur 3

Os edrychwch chi ar draws top, Mae gennych ychydig o opsiynau, dau ohonynt yn ddiddorol:

Cuddio pasio profion: Eithaf amlwg. Gall helpu eich llygaid yn unig weld y meysydd sy'n broblem ac nid llawer o annibendod.
Modiwl: (gollwng i lawr): Bydd hyn yn treiddio y profion i lawr at y grwpiau hynny yn unig o brofion rydych chi am.

O ran y profion eu hunain – ychydig o sylwadau:

Afraid dweud bod yn rhaid ichi ysgrifennu eich cod yn golygu ei bod yn cael ei brofi'n yn y lle cyntaf. Gellir defnyddio'r offeryn yn helpu i orfodi'r ddisgyblaeth honno. Er enghraifft, Cefais swyddogaeth o'r enw "getTodayAsCaml()". Nid yw hyn yn cael ei brofi'n iawn ers y mae'n cymryd oes dadl mewnbwn ac i brofi ar gyfer cydraddoldeb, Byddai angen i ddiweddaru y prawf Cod i adlewyrchu'r dyddiad cyfredol yn gyson. Yr refactored ei gan ychwanegu paramedr mewnbynnu data yna pasio y dyddiad cyfredol pan am ddyddiad heddiw mewn fformat CAML.
Yn y fframwaith Qunit yn ddogfennau profion ei hun ac mae'n ymddangos yn eithaf cadarn. Gall wneud pethau syml fel profion ar gyfer cydraddoldeb a hefyd wedi cael cefnogaeth ar gyfer galwadau arddull ajax ("go iawn" neu gwawdio gan ddefnyddio eich hoff mocker).
Mae mynd drwy'r broses hefyd yn eich gorfodi i feddwl drwy achosion ymyl – beth sy'n digwydd gyda "diffinio" neu trosglwyddir NWL swyddogaeth. Ei gwneud yn gwbl syml i brofi y senarios hyn allan. Stwff da.

Darllediadau gyda Blanket.js

Mae Blanket.js yn ategu Qunit drwy olrhain llinellau gwirioneddol Cod sy'n gweithredu yn ystod y cwrs o redeg eich profion. Mae'n cyfuno'r hawl i Qunit felly er mae'n ap cyfan ar wahân, Mae'n chwarae ddel – mewn gwirionedd mae'n edrych fel mae'n un ap di-dor.

Mae hyn yn blanket.js yn gweithredu:

Ffigur 4

Ffigur 5

(Mae gennych mewn gwirionedd i glicio ar y blwch ticio "Galluogi darllediadau" ar y brig [gweler Ffigur 3] i alluogi hyn.)

Y llinellau amlygir yn ffigur 5 Nid cael ei gweithredu gan unrhyw un o'r profion fy, Felly mae angen imi dyfeisio prawf a yw'n achosi iddynt a gweithredu os wyf eisiau sylw llawn.

Blanket.js yn gweithio drwy ddilyn y camau hyn yn cael:

Llwytho i lawr o'r http://blanketjs.org/.
Ychwanegu at eich prosiect
Diweddaru eich tudalen harnais prawf (QuizUtil_test.html yn fy achos i) fel a ganlyn:
1. Cyfeirio at y Cod
2. Addurno eich <sgript> Cyfeirnod fel hyn:

    <sgript Math= testun/javascript"" src="QuizUtil.JS" data-clawr></sgript>

Mae Blanket.js yn cyflymu'r priodoledd "data-cyflenwi" a yw ei hud. Mae ei bachau i Qunit, diweddaru UI i ychwanegu opsiwn "Galluogi darllediadau" a voila!

Crynodeb (TL; DR)

Defnyddio Qunit i ysgrifennu eich achosion prawf.

Llwytho
Ychwanegu at eich prosiect
Ysgrifennu tudalen brawf yn harneisio
Creu eich profion
- Refactor rhai eich cod yn cael ei brofi'n
- Fod yn greadigol! Feddwl am ffoli, amhosibl senarios a'u profi beth bynnag.

Defnyddio blanket.js i sicrhau bod sylw

Gwnewch yn siŵr bod yn Qunit yn gweithio
Lawrlwytho blanket.js ac ychwanegu at eich prosiect
Ychwanegu at eich tudalen harnais prawf:
- Ychwanegu cyfeiriad at blanket.js
- Nodwedd "data-cyflenwi" i ychwanegu eich <sgript> diwrnod
Rhedeg eich profion Qunit.

Byth, oedd unrhyw un o'r blaen ac roedd rhai pethau elfennol a gweithio mewn llond llaw o oriau.

Profion hapus!

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

Paul Galvin yn SharePoint Gofod

Sut i: Ffurfweddu Prawf Uned a Prawf Pwnc o dan sylw gyda QUnit.js a Blanket.js Am Swyddfa 365 SharePoint App

Intro

Qunit

Darllediadau gyda Blanket.js

Crynodeb (TL; DR)

Ad a Ateb Diddymu ateb