Com a: Configurar la prova de unitat i prova de cobertura amb QUnit.js i Blanket.js per a una oficina 365 App de SharePoint

Deixa una resposta

Introducció

Jo he estat explorant proves unitàries i cobertura de prova per JavaScript com treballo en un app nou SharePoint SharePoint en línia a l'oficina 365 Suite.  Els camins evident recerca em va portar a QUnit.js i just després que, per Blanket.js.

QUnit permetin establir proves d'unitat i agrupar-los en mòduls.  Un mòdul és només una manera simple d'organitzar proves relacionades. (No estic segur que estic utilitzant-lo segons el previst, però està treballant per a mi fins ara amb el petit conjunt de proves que fins ara han definit).

Blanket.js s'integra amb Qunit i em mostrarà les línies actuals de JavaScript que eren – i més importantment-no eren realment executada en el curs d'execució de les proves.  Això és "cobertura"-línies que executava són coberts per la prova, mentre que altres no són.

Entre establint bons casos de prova i veure cobertura, podem reduir el risc que el nostre codi ha amagat defectes.  Bons moments.

QUnit

Suposant que té el seu estudi Visual projecte va establir, Comenci descarregant el paquet JavaScript des http://qunitjs.com.  Afegir el JavaScript i CSS corresponent a la seva solució.  Mina els aspectes com això:

image

Figura 1

Com es pot veure, Estava utilitzant 1.13.0 en el moment que vaig escriure aquesta entrada de blog. No oblidi descarregar i afegir l'arxiu CSS.

Que fora de la manera, següent pas és crear algun tipus de prova arnès i els bits Qunit de referència.  Estic provant un munt de funcions en un arxiu d'escriptura anomenat "QuizUtil.js", així que he creat una pàgina HTML anomenat "QuizUtil_test.html" tal com es Mostra:

image Figura 2

Aquí és el codi:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<responsable>
    <títol>Prova QuizUtil amb Qunit</títol>
    <enllaç rel= "full d'estil" href="../CSS/QUnit-1.13.0.CSS" />
    <script tipus= text/javascript"" src="QuizUtil.js" dades-portada></script>
    <tipus d'escriptura ="text/javascript" src ="qunit-1.13.0.js"></script>
    <tipus d'escriptura ="text/javascript" src ="blanket.min.js"></script>

    <script>
        mòdul("getIDFromLookup");
        prova("QuizUtil getIDFromLookupField", funció () {
            var goodValue = "1;#Paul Galvin";

            igual(getIDFromLookupField(goodValue) + 1, 2), "ID de [" + goodValue + "] + 1 hauria de ser 2";
            igual(getIDFromLookupField(indefinit), indefinit, "Argument d'entrada indefinit nar resultat indefinit.");
            igual(getIDFromLookupField(""), indefinit, "Argument d'entrada buit hauria de retornar un valor indefinit.");
            igual(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), indefinit,"Sempre nar un convertible resultat un enter");
            igual(getIDFromLookupField("2;#una altra persona"), "2", «Comprovació [2;#una altra persona].");
            igual(getIDFromLookupField("9834524;#valor llarg"), "9834524", "Prova de gran valor.");
            notEqual(getIDFromLookupField("5;#ningú", 6), 6, "Provant un notEqual (5 no és igual a 6 d'aquesta Mostra: [5;#ningú]");

        });

        mòdul("htmlEscape");
        prova("QuizUtil htmlEscape()", funció () {
            igual(htmlEscape("<"), "&lt;", "Escapar a menys que l'operador ('<')");
            igual(htmlEscape("<classe div =  "someclass">Un text</Div>"), "&lt;classe div =&quot;someclass&quot;&gt;Un text&lt;/Div&gt;", "Cadena de prova més complex.");
        });

        mòdul("getDateAsCaml");
        prova("QuizUtil getDateAsCaml()", funció () {
            igual(getDateAsCaml(nou Data("12/31/2013")), "2013-12-31T:00:00:00", "Provant durament codificat data: [12/31/2013]");
            igual(getDateAsCaml(nou Data("01/05/2014")), "2014-01-05T:00:00:00", "Provant durament codificat data: [01/05/2014]");
            igual(getDateAsCaml(nou Data("01/31/2014")), "2014-01-31T:00:00:00", "Provant durament codificat data: [01/31/2014]");
            igual(getTodayAsCaml(), getDateAsCaml(nou Data()), "getTodayAsCaml() ha la igualtat getDateAsCaml(nova data())");
            igual(getDateAsCaml("valor tonteries"), indefinit, "Intenta aconseguir la cita d'un valor de tonteries.");
            igual(getDateAsCaml(indefinit), indefinit, «Tractar d'aconseguir la data de la [indefinit] data.");
        });

        mòdul("getParameterByName");
        prova("QuizUtil getParameterByName (de la cadena de consulta)", funció () {
            igual(getParameterByName(indefinit), indefinit, "Intenta aconseguir paràmetre indefinit nar indefinit.");
            igual(getParameterByName("no existeix"), indefinit, "Intenta aconseguir el valor del paràmetre quan sabem que el paràmetre no existeix.");

        });

        mòdul(Galetes"");
        prova("QuizUtil diverses funcions de galeta.", funció () {
            igual(setCookie(«prova", "1", -1), getCookieValue(«prova"), "Get una galeta I posar funcionarà.");
            igual(setCookie("anycookie", "1", -1), True, "Creació d'una cuina vàlid hauria de retornar 'veritable'.");
            igual(setCookie("nom de cookie boig !@#$%"%\^&*(()?/><.,", "1", -1), True, "Creació d'un nom de cookie mal hauria de retornar"fals".");
            igual(setCookie(indefinit, "1", -1), indefinit, "Passant indefinit com a nom de galeta.");
            igual(getCookieValue("no existeix"), "", "Galeta no existeixen proves.");
        });

    </script>
</responsable>
<cos>
    <Div ID= «qunit"></Div>
    <Div ID= "qunit-fixació"></Div>

</cos>
</HTML>

Hi ha diverses coses passant aquí:

  1. El meu codi de referència (QuizUtil.js)
  2. Referència Qunity.js
  3. Definició d'alguns mòduls (getIDFromLookup, Galetes, i altres)
  4. Posant una <Div> ID del qual és "qunit".

Llavors, Només aixecar aquesta pàgina i aconsegueix alguna cosa com això:

image

Figura 3

Si ens fixem a la part superior, té unes quantes opcions, dues de les quals són interessants:

  • Amaga passar proves: Força obvi.  Pot ajudar el seu ull només veure les àrees problemàtiques i no molt de desendreçar.
  • Mòdul: (desplegable): Això filtrarà les proves fins a només aquells grups de proves de que vol.

Pel que fa a les proves si mateixos-uns quants comentaris:

  • Cal dir que cal escriure el seu codi tal que això sigui provable en primer lloc.  Utilitzant l'eina pot ajudar a fer complir aquesta disciplina. Per exemple, Tenia una funció anomenada "getTodayAsCaml()”.  Això no és molt comprovables ja que pren cap argument d'entrada i per analitzar-lo per a la igualtat, hauríem d'actualitzar constantment el codi de prova per reflectir la data actual.  Jo ho traslladades afegint un paràmetre d'entrada de dades a continuació, passar la data actual quan vull cita avui en CAML format.
  • El marc Qunit documenta seves pròpies proves i sembla bastant robust.  Es poden fer coses simples com testatge d'igualtat i també té suport per a les trucades de estil ajax (tant "real" o burlat utilitzant el teu mocker favorit).
  • Travessant el procés també t'obliga a pensar a través de casos vora-què passa amb "indefinit" o nul és superat en una funció.  Es fa totalment simple provar aquests escenaris fora.  Coses bones.

Cobertura amb Blanket.js

Blanket.js complementa Qunit mitjançant el seguiment de les actuals línies de codi que executar durant el transcurs de l'execució de les proves.  Integra dret en Qunit així tot i que és un conjunt de seperate app, sona molt bé-realment sembla com si fos un app sense costura.

Això és blanket.js en acció:

image Figura 4

image

Figura 5

(Realment has de fer clic a la casella de selecció "Enable cobertura" a la part superior [veure figura 3] per permetre això.)

Les línies ressaltats en la figura 5 no han estat executades per qualsevol de les meves proves, Així que necessito per dissenyar una prova que els provoquen executar si vull cobertura completa.

Obtenir blanket.js treballant seguint aquests passos:

  1. Descarregar-lo des de http://blanketjs.org/.
  2. Afegir-lo al seu projecte
  3. Actualitzar la seva pàgina de prova arnès (QuizUtil_test.html en el meu cas) les següents:
    1. El codi de referència
    2. Decorar el seu <script> referència com aquest: 
    <script tipus= text/javascript"" src="QuizUtil.js" dades-portada></script>

Blanket.js recull l'atribut "cobrir dades" i té la seva màgia.  Es pot enganxar-se Qunit, la interfície d'usuari per afegir l'opció "Habilita cobertura" d'actualitzacions i voila!

Resum (TL; DR.)

Ús Qunit per escriure el seu casos de prova.

  • Descarregar-lo
  • Afegir-lo al seu projecte
  • Escriure una pàgina de prova de Arnés
  • Crear les proves
    • Reestructurar alguns del vostre codi de ser comprovables
    • Ser creatiu!  Crec que de boig, escenaris impossibles i provar-los de totes maneres.

Ús blanket.js per garantir la cobertura

  • Assegureu-vos que Qunit està treballant
  • Descarregar blanket.js i afegir-lo al seu projecte
  • Afegir-lo a la seva pàgina de prova arnès:
    • Afegir una referència a blanket.js
    • Afegeix un atribut de "dades cobrir" pel seu <script> etiqueta
  • Executar les proves Qunit.

Mai va fer res d'això abans i tenia algunes coses rudimentària treballant en un grapat d'hores. 

Proves feliç!

</final>

undefinedSubscriure's al meu blog.

Follow me on Twitter http://www.twitter.com/pagalvin

Deixi una contestació

no es publicarà la seva adreça de correu electrònic. Els camps necessaris estan marcats *