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("<"), "<", "Dianc sy'n llai na gweithredwr ('<')");
cyfartal(htmlEscape("<dosbarth DIV =. "someclass">Rhywfaint o destun</div>"), "<dosbarth DIV ="someclass">Rhywfaint o destun</div>", "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:
- Cyfeirio at y Cod
- 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
