Intro
Jeg har vært å utforske enhetstesting og teste dekning for JavaScript som jeg jobber på en ny SharePoint-app for SharePoint online i Office 365 Suite. Banene som selvskreven forskning ledet meg til å Qunit.js og etter at, til Blanket.js.
QUnit la meg definere enhet tester og gruppere dem i moduler. En modul er bare en enkel måte å organisere relaterte tester. (Jeg er ikke sikker jeg bruker det som den skal, men det fungerer for meg så langt med de små tester jeg hittil har definert).
Blanket.js integreres med Qunit og det viser meg de faktiske linjene med JavaScript som var- og enda viktigere-var ikke faktisk utført i løpet av tester. Dette er "dekning"-linjer som kjøres som er dekket av testen, mens andre ikke.
Mellom definere god test sakene og vise dekning, Vi kan redusere risikoen for at våre koden har gjemt defekter. Gode tider.
Qunit
Antar du har Visual Studio prosjekt satt, Start ved å laste ned JavaScript pakken fra http://qunitjs.com. Legg til JavaScript og tilsvarende CSS i løsningen. Min ser slik ut:
Figur 1
Som du kan se, Jeg brukte 1.13.0 på tiden skrev jeg dette blogginnlegget. Ikke glem å laste ned og legge CSS-filen.
Det ut av veien, neste skritt er å lage en slags test seletøy og referanse Qunit biter. Jeg tester en haug av funksjoner i en skriptfil kalt "QuizUtil.js" så jeg laget en HTML-side som kalles "QuizUtil_test.html" som vist:
Figur 2
Her er koden:
<!DOCTYPE HTML> <HTML xmlns= "http://www.w3.org/ 1999/xhtml"> <hodet> <tittel>QuizUtil test med Qunit</tittel> <kobling rel= "stylesheet" href="../CSS/qunit-1.13.0.CSS" /> <skriptet type= text/javascript"" src="QuizUtil.js" data-cover></skriptet> <script type ="text/javascript" src ="qunit-1.13.0.js"></skriptet> <script type ="text/javascript" src ="blanket.min.js"></skriptet> <skriptet> modul("getIDFromLookup"); test("QuizUtil getIDFromLookupField", funksjonen () { var goodValue = "1;#Paul Galvin"; lik(getIDFromLookupField(goodValue) + 1, 2), "ID av [" + goodValue + "] + 1 bør være 2"; lik(getIDFromLookupField(Udefinert), Udefinert, "Udefinert inndataargumentet skal returnere udefinert resultatet."); lik(getIDFromLookupField(""), Udefinert, "Tom inndataargumentet skal returnere en udefinert verdi."); lik(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), Udefinert,"Bør alltid returnere en kabriolet resultatet til et heltall"); lik(getIDFromLookupField("2;#en annen person"), "2", "Kontrollere [2;#en annen person]."); lik(getIDFromLookupField("9834524;#lang verdi"), "9834524", "Stor verdi test."); notEqual(getIDFromLookupField("5;#noen", 6), 6, "Testing en notEqual (5 er ikke lik 6 for dette eksemplet: [5;#noen]"); }); modul("htmlEscape"); test("QuizUtil htmlEscape()", funksjonen () { lik(htmlEscape("<"), "<", «Escaping et mindre enn-operator ('<')"); lik(htmlEscape("<div class = "someclass">Tekst</div>"), "<div class ="SomeClass">Tekst</div>", "Mer komplekse teststrengen."); }); modul("getDateAsCaml"); test("QuizUtil getDateAsCaml()", funksjonen () { lik(getDateAsCaml(nye Dato("12/31/2013")), "2013-12-31T:00:00:00", "Testing hardkodet dato: [12/31/2013]"); lik(getDateAsCaml(nye Dato("01/05/2014")), "2014-01-05T:00:00:00", "Testing hardkodet dato: [01/05/2014]"); lik(getDateAsCaml(nye Dato("01/31/2014")), "2014-01-31T:00:00:00", "Testing hardkodet dato: [01/31/2014]"); lik(getTodayAsCaml(), getDateAsCaml(nye Dato()), "getTodayAsCaml() bør tilsvare getDateAsCaml(ny dato())"); lik(getDateAsCaml("tull verdi"), Udefinert, "Prøv å få datoen for en tull verdi."); lik(getDateAsCaml(Udefinert), Udefinert, "Prøv å få datoen for den [Udefinert] datoen."); }); modul("getParameterByName"); test("QuizUtil getParameterByName (fra søkestrengen)", funksjonen () { lik(getParameterByName(Udefinert), Udefinert, "Prøv å få udefinert parameter skal returnere udefinert."); lik(getParameterByName("finnes ikke"), Udefinert, "Prøv å få parameterverdi når vi vet parameteren ikke finnes."); }); modul("Cookies"); test("QuizUtil ulike cookie funksjoner.", funksjonen () { lik(setCookie("test", "1", -1), getCookieValue("test"), "Få en informasjonskapsel jeg skal fungere."); lik(setCookie("anycookie", "1", -1), sann, "Angi en gyldig matlaging skal returnere 'true'."); lik(setCookie("crazy informasjonskapselnavn !@#$%"%\^&*(()?/><.,", "1", -1), sann, "Angi en dårlig informasjonskapselnavn skal returnere false'."); lik(setCookie(Udefinert, "1", -1), Udefinert, "Passerer udefinert som informasjonskapselen."); lik(getCookieValue("finnes ikke"), "", "Cookien ikke finnes test."); }); </skriptet> </hodet> <kroppen> <div ID= "qunit"></div> <div ID= "qunit-lampen"></div> </kroppen> </HTML>
Det er flere ting skjer her:
- Referanse kode (QuizUtil.js)
- Henviser Qunity.js
- Definere noen moduler (getIDFromLookup, Informasjonskapsler, og andre)
- Plassere en <div> Hvis ID er "qunit".
Deretter, Jeg trekke bare opp denne siden og du får noe som dette:
Figur 3
Hvis du ser øverst, har du noen alternativer, to av dem er interessant:
- Skjul bestått tester: Ganske åpenbart. Kan hjelpe deg bare se problemområder og ikke en masse rot.
- Modul: (rullegardinmenyen): Dette vil filtrere testene til bare de gruppene av tester du vil.
Som for prøver selv-noen kommentarer:
- Det går uten å si at du trenger å skrive koden slik at det er testbare i første omgang. Ved hjelp av verktøyet kan bidra til å håndheve den disiplinen. For eksempel, Jeg hadde en funksjon kalt "getTodayAsCaml()”. Dette er ikke etterprøvbar siden det tar ingen inndataargumentet og teste det for likestilling, Vi må kontinuerlig oppdatere test koden for å gjenspeile gjeldende dato. Jeg refactored det ved å legge til en data-inndataparameteren deretter passerer gjeldende dato når jeg vil dagens dato i CAML-format.
- Qunit rammen dokumenter sine egne tester og det synes ganske robust. Det kan gjøre enkle ting som tester for likestilling og har også støtte for ajax-stil samtaler (både "ekte" eller spottet benytter din favoritt spotter).
- Gå gjennom prosessen tvinger deg til å tenke gjennom kanten-hva skjer med "udefinert" eller null er sendt til en funksjon. Det gjør det døde enkelt å teste disse scenariene ut. Gode ting.
Dekning med Blanket.js
Blanket.js utfyller Qunit ved å spore faktiske kodelinjene som utføres i løpet av din tester. Det integreres rett i Qunit så selv om det er en helt egen app, Det spiller pent-det egentlig ser ut som det er en sømløs app.
Dette er blanket.js i aksjon:
Figur 4
Figur 5
(Faktisk må du klikke på avkrysningsruten «Aktiver dekning» øverst [se figur 3] aktivere dette.)
De uthevede linjene i figur 5 ikke er utført av noen av mine tester, så jeg trenger å tenke ut en test som forårsaker dem til å kjøre hvis jeg vil full dekning.
Få blanket.js fungerer på følgende måte:
- Laste det ned fra http://blanketjs.org/.
- Legge det til i prosjektet
- Oppdatere testsiden sele (QuizUtil_test.html i mitt tilfelle) slik:
- Referanse koden
- Dekorere din <skriptet> referanse som dette:
<skriptet type= text/javascript"" src="QuizUtil.js" data-cover></skriptet>
Blanket.js plukker opp attributtet "data-cover" og gjør sin magi. Det kroker i Qunit, oppdaterer Grensesnittet for å legge til alternativet "Aktiver dekning" og voila!
Sammendrag (TL; DR)
Bruk Qunit til å skrive din test tilfeller.
- Dataoverføre den
- Legge det til i prosjektet
- Skrive en test seletøy for
- Opprette tester
- Refactor noen av din koden skal være testbare
- Vær kreativ! Tenk på gal, umulig scenarier og teste dem allikevel.
Bruk blanket.js å sikre dekning
- Kontroller at Qunit fungerer
- Last ned blanket.js og legger den til prosjektet
- Legge det til sele testsiden:
- Legg til en referanse blanket.js
- Legge til en "data-cover" attributt til din <skriptet> Tag
- Kjøre Qunit tester.
Jeg har aldri gjorde noe av dette før og hadde noen enkle ting i en håndfull timer.
Happy testing!
</slutten>
Følg meg på Twitter på http://www.twitter.com/pagalvin