Ianuarie | 2014 | Paul Galvin SharePoint Space

Intro

I-am fost explorarea unitate de testare şi test de acoperire pentru JavaScript ca am de lucru pe un nou app SharePoint pentru SharePoint online la birou 365 Suită. Direcţii de cercetare evidente a condus-mi Qunit.js şi chiar după aceea, pentru a Blanket.js.

QUnit să-mi configura unitatea de teste şi grupaţi-le în module. Un modul este doar un mod simplu de a organiza teste conexe. (Eu nu sunt sigur că eu sunt, folosind ca destinate, dar este de lucru pentru mine până acum cu mic set de teste am definit-o până acum).

Blanket.js se integrează cu Qunit şi mă va arăta liniile reale de JavaScript care au fost – și mai important – au fost nu fapt executate în teste. Acest lucru este "acoperire"-linii care execută sunt acoperite de încercare, în timp ce altele nu sunt.

Între crearea bun cazuri de testare şi vizualizarea de acoperire, putem reduce riscul că codul nostru a ascuns defecte. Vremuri bune.

Qunit

Presupunând că aveţi dumneavoastră Visual Studio proiect înfiinţat, începe prin a descărca pachetul JavaScript la http://qunitjs.com. Adauga JavaScript şi corespondente CSS la solutia ta. A mea arata ca acest lucru:

Figura 1

După cum puteţi vedea, Am fost folosind 1.13.0 în timp am scris acest blog post. Nu uitaţi să descărcaţi şi să adăugaţi fişierul CSS.

Că din modul în care, Următorul pas este de a crea un fel de test de harnaşament şi biţi Qunit de referinţă. Eu sunt de testare o grămadă de funcţii într-un fişier script denumit "QuizUtil.js", asa ca am creat o pagina HTML numită "QuizUtil_test.html", aşa cum se Arată:

Figura 2

Aici este codul:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<cap>
    <titlul>Test de QuizUtil cu Qunit</titlul>
    <link-ul rel= "foaia de stil" href="../CSS/qunit-1.13.0.CSS" />
    <script-ul tip= text/javascript"" src="QuizUtil.js" date-acoperi></script-ul>
    <script-ul de tip ="text/javascript" src ="qunit-1.13.0.js"></script-ul>
    <script-ul de tip ="text/javascript" src ="blanket.min.js"></script-ul>

    <script-ul>
        Modulul("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", funcţia () {
            var goodValue = "1;#Paul Galvin";

            egal(getIDFromLookupField(goodValue) + 1, 2), "ID-ul de [" + goodValue + "] + 1 ar trebui să fie 2";
            egal(getIDFromLookupField(nedefinit), nedefinit, "Argumentul intrare nedefinit ar trebui să reveni nedefinit rezultatul.");
            egal(getIDFromLookupField(""), nedefinit, "Argumentul intrare gol trebuie să revină o valoare nedefinit.");
            egal(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), nedefinit,"Ar trebui să întotdeauna întoarce o decapotabilă rezultatul la un întreg");
            egal(getIDFromLookupField("2;#unei alte persoane"), "2", "Verificarea [2;#unei alte persoane].");
            egal(getIDFromLookupField("9834524;#valoare lung"), "9834524", "Test de mare valoare.");
            notEqual(getIDFromLookupField("5;#oricine", 6), 6, "O notEqual de testare (5 nu este egal cu 6 pentru acest eşantion: [5;#oricine]");

        });

        Modulul("htmlEscape");
        test("QuizUtil htmlEscape()", funcţia () {
            egal(htmlEscape("<"), "&lt;", "Evadarea la mai puţin de operator ('<')");
            egal(htmlEscape("<clasa div =  "someclass">Un text</div>"), "&lt;clasa div =&quot;someClass&quot;&gt;Un text&lt;/div&gt;", "Şir de testare mai complexe.");
        });

        Modulul("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", funcţia () {
            egal(getDateAsCaml(noi Data("12/31/2013")), "2013-12-31T:00:00:00", "Testarea greu codificate data: [12/31/2013]");
            egal(getDateAsCaml(noi Data("01/05/2014")), "2014-01-05T:00:00:00", "Testarea greu codificate data: [01/05/2014]");
            egal(getDateAsCaml(noi Data("01/31/2014")), "2014-01-31T:00:00:00", "Testarea greu codificate data: [01/31/2014]");
            egal(getTodayAsCaml(), getDateAsCaml(noi Data()), "getTodayAsCaml() ar trebui să egal getDateAsCaml(Noua dată())");
            egal(getDateAsCaml("valoare de prostii"), nedefinit, "Încercaţi să obţineţi la data de o valoare de prostii.");
            egal(getDateAsCaml(nedefinit), nedefinit, "Încercaţi să obţineţi la data de [nedefinit] data.");
        });

        Modulul("getParameterByName");
        test("QuizUtil getParameterByName (din şirul de interogare)", funcţia () {
            egal(getParameterByName(nedefinit), nedefinit, "Încercaţi să obţineţi nedefinit parametru ar trebui să reveni nedefinit.");
            egal(getParameterByName("nu există"), nedefinit, "Încercaţi să obţineţi valoarea parametrului atunci când ştim că parametrul nu exista.");

        });

        Modulul("Cookies");
        test("QuizUtil diverse funcţii de cookie-ul.", funcţia () {
            egal(setCookie("test", "1", -1), getCookieValue("test"), "Ia un cookie seta ar trebui să funcţioneze.");
            egal(setCookie("anycookie", "1", -1), adevărat, "Setarea un gătit valabil trebuie să revină"adevărat".");
            egal(setCookie(numele de "cookie" nebun" !@#$%"%\^&*(()?/><.,", "1", -1), adevărat, "Setarea un nume de rău cookie ar trebui să reveni"falsă".");
            egal(setCookie(nedefinit, "1", -1), nedefinit, "Trecerea nedefinit ca numele cookie-ul.");
            egal(getCookieValue("nu există"), "", "Cookie nu exista test.");
        });

    </script-ul>
</cap>
<corpul>
    <div ID-ul= "qunit"></div>
    <div ID-ul= "qunit de fixare"></div>

</corpul>
</HTML>

Există mai multe lucruri se întâmplă aici:

Codul meu de referinţă (QuizUtil.js)
Corelarea Qunity.js
Definirea unor module (getIDFromLookup, Cookie-urile, şi altele)
Introducerea unei <div> ale căror ID-ul este "qunit".

Apoi, I trage doar această pagină şi veţi obţine ceva de genul asta:

Figura 3

Dacă te uiţi în partea de sus, aveţi câteva opţiuni, dintre care două sunt interesante:

Ascundere a trecut testele: Destul de evident. Poate ajuta ochi doar vedea zonele de problemă şi nu o mulţime de dezordine.
Modulul: (drop jos): Acest lucru va filtra testele la doar acele grupuri de teste care doriţi.

Pentru testele de sine-câteva Comentarii:

Se subînţelege că aveţi nevoie pentru a scrie cod, astfel încât să fie testabile în primul rând. Utilizând instrumentul poate ajuta pună în aplicare această disciplină. De exemplu, Am avut o funcţie numită "getTodayAsCaml()”. Acest lucru nu este foarte testabile, deoarece este nevoie de nici un argument de intrare şi să testaţi-l pentru egalitatea de şanse, noi ar trebui să în mod constant actualizare codul de test pentru a reflecta data curentă. L-am refactored prin adăugarea un parametru de intrare de date, apoi trece la data când vreau data de astăzi în format florin.
Cadrul Qunit documente propriile teste şi se pare destul de robust. Se pot face lucruri simple cum ar fi testarea pentru egalitatea de şanse şi, de asemenea, are suport pentru apeluri de stil ajax (ambele "reală" sau batjocorit folosind dumneavoastră preferat mocker).
Trece prin procesul, de asemenea, vă obligă să cred că, prin marginea cazuri – ce se întâmplă cu "nedefinită" sau null este trecut într-o funcţie. Ea face mort simplu pentru a testa aceste scenarii afară. Bun îndesat.

Acoperire cu Blanket.js

Blanket.js completează Qunit de urmărire efectiv linii de cod care executa în cursul execută testele. Aceasta integrează dreptul în Qunit astfel încât, chiar dacă este un întreg separate app, Acesta joacă frumos – se pare chiar ca este un app fără sudură.

Acest lucru este blanket.js în acţiune:

Figura 4

Figura 5

(De fapt trebuie să faceţi clic pe caseta de selectare "Enable acoperire" din partea de sus [a se vedea figura 3] pentru a permite acest lucru.)

Liniile evidențiată în figura 5 nu au fost executate de către oricare din testele mele, aşa că am nevoie pentru a concepe un test care le determina să execute dacă vreau o acoperire completă.

Ia blanket.js de lucru urmând aceşti paşi:

Descarca-l de la http://blanketjs.org/.
Adăugaţi-l la proiect
Actualizare pagina de harnaşament dumneavoastră test (QuizUtil_test.html în cazul meu) după cum urmează:
1. Codul de referinţă
2. Decora vă <script-ul> referinţă de genul asta:

    <script-ul tip= text/javascript"" src="QuizUtil.js" date-acoperi></script-ul>

Blanket.js preia atributul "date-capac" şi face magie sale. Aceasta cârlige în Qunit, actualizări UI pentru a adăuga opţiunea "Enable acoperire" şi voila!

Rezumat (TL; DR)

Utilizaţi Qunit pentru a scrie ţi cazuri de testare.

Descarca-l
Adăugaţi-l la proiect
Scrie o pagină de test pe ham
Creează testele
- Unele dintre codul dumneavoastră să fie testabile Refactor
- Fii creativ! Cred că de nebun, Imposibil de scenarii şi de testare-le oricum.

Utilizaţi blanket.js pentru a asigura acoperirea

Asiguraţi-vă că Qunit este de lucru
Descarca blanket.js şi adăugaţi-l la proiect
Adăugaţi-l la încercare Ham pagina:
- Adauga o trimitere la blanket.js
- Adauga un atribut "date-acoperi" ul <script-ul> Tag-ul
Rulaţi testele Qunit.

Niciodată nu am făcut orice de acest lucru înainte şi a avut unele chestii rudimentare de lucru într-o mână de ore.

Fericit de testare!

</scop>

Aboneaza-te la blog-ul meu.

Urmaţi-mă pe Twitter, la http://www.twitter.com/pagalvin

Paul Galvin SharePoint Space

arhive lunare: Ianuarie 2014

Bietul om pe cache în JavaScript

cum să: Configuraţi unitatea de testare şi încercare de acoperire cu QUnit.js şi Blanket.js pentru oficiu 365 SharePoint App

Intro

Qunit

Acoperire cu Blanket.js

Rezumat (TL; DR)