Comment: Configurer le Test unitaire et couverture de Test avec QUnit.js et Blanket.js pour un bureau 365 App de SharePoint

Laisser une réponse

Intro

J'ai avez exploré les tests unitaires et testez couverture JavaScript comme je travaille sur une nouvelle application SharePoint pour SharePoint en ligne au bureau 365 suite.  Les chemins de recherche évidente m'a amené à QUnit.js et juste après que, À Blanket.js.

QUnit je voudrais mettre en place des tests unitaires et regroupez-les en modules.  Un module est juste une façon simple d'organiser des tests connexes. (Je ne suis pas sûr que je l'utilise comme prévu, mais ça marche pour moi jusqu'à maintenant avec le petit ensemble de tests, que j'ai défini à ce jour).

Blanket.js s'intègre avec Qunit et il va me montrer les lignes réelles de JavaScript qui étaient – et surtout – pas réellement exécutés au cours de l'exécution des tests.  Il s'agit d'une « couverture »-lignes exécutées sont couvertes par l'épreuve tandis que d'autres ne le sont pas.

Entre la mise en place de bonnes cas de test et la visualisation de couverture, Nous pouvons réduire le risque que notre code a des vices cachés.  Bons moments.

QUnit

En supposant que vous avez votre Visual Studio projet mis en place, Commencez par Télécharger le package de JavaScript de http://qunitjs.com.  Ajouter le JavaScript et CSS correspondant à votre solution.  Mine ressemble à ceci:

image

Figure 1

Comme vous pouvez le voir, J'utilisais 1.13.0 au moment où j'ai écrit ce billet de blog. N'oubliez pas de télécharger et ajouter le fichier CSS.

Que, sur le chemin, étape suivante consiste à créer une sorte d'atelier de test et les bits de Qunit de référence.  Je teste un tas de fonctions dans un fichier de script appelé « QuizUtil.js » donc j'ai créé une page HTML appelée « QuizUtil_test.html » comme indiqué:

image Figure 2

Voici le code:

<!DOCTYPE html>
<html xmlns= "http://www.w3.org/ 1999/xhtml">
<tête>
    <titre>Essai de QuizUtil avec Qunit</titre>
    <lien rel= "stylesheet" href="../CSS/QUnit-1.13.0.CSS" />
    <script type= text/javascript"" SRC="QuizUtil.js" données-couverture></script>
    <script type ="text/javascript" SRC =« qunit-1.13.0.js"></script>
    <script type ="text/javascript" SRC ="blanket.min.js"></script>

    <script>
        module("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", fonction () {
            var goodValue = 1";#Paul Galvin";

            égal(getIDFromLookupField(goodValue) + 1, 2), "ID de [" + goodValue + "] + 1 devrait être 2";
            égal(getIDFromLookupField(indéfini), indéfini, "Undefined argument d'entrée doit retourner le résultat indéfini.");
            égal(getIDFromLookupField(""), indéfini, "Argument d'entrée vide doit retourner une valeur non définie.");
            égal(getIDFromLookupField(« gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), indéfini,« Doit toujours retourner une décapotable de résultat en un nombre entier");
            égal(getIDFromLookupField(2";#une autre personne"), 2"", « La vérification des [2;#une autre personne].");
            égal(getIDFromLookupField("9834524;#valeur de type long"), "9834524", « Test de grande valeur.");
            notEqual(getIDFromLookupField(5";#n'importe qui", 6), 6, "Tester un notEqual (5 n'est pas égal à 6 pour cet exemple: [5;#n'importe qui]");

        });

        module("htmlEscape");
        test("QuizUtil htmlEscape()", fonction () {
            égal(htmlEscape("<"), "&lt;", « Échapper un opérateur less than ('<')");
            égal(htmlEscape("<div class =  « someclass »>Certains texte</Div>"), "&lt;div class =&quot;SomeClass&quot;&gt;Certains texte&lt;/Div&gt;", "Chaîne de test plus complexe.");
        });

        module("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", fonction () {
            égal(getDateAsCaml(Nouveau Date(« 31/12/2013")), « 2013-12-31 T:00:00:00", "Tests codés en dur date: [12/31/2013]");
            égal(getDateAsCaml(Nouveau Date("01/05/2014")), « 2014-01-05T:00:00:00", "Tests codés en dur date: [01/05/2014]");
            égal(getDateAsCaml(Nouveau Date("01/31/2014")), « 2014-01-31 T:00:00:00", "Tests codés en dur date: [01/31/2014]");
            égal(getTodayAsCaml(), getDateAsCaml(Nouveau Date()), "getTodayAsCaml() doit être égal à getDateAsCaml(nouvelle Date())");
            égal(getDateAsCaml(« valeur de non-sens"), indéfini, "Essayer d'obtenir la date d'une valeur de l'absurdité.");
            égal(getDateAsCaml(indéfini), indéfini, "Essayer d'obtenir la date de la [indéfini] Date.");
        });

        module("getParameterByName");
        test("QuizUtil getParameterByName (de la chaîne de requête)", fonction () {
            égal(getParameterByName(indéfini), indéfini, "Essayer d'obtenir non défini paramètre doit retourner non défini.");
            égal(getParameterByName("n'existe pas"), indéfini, "Essayer d'obtenir la valeur du paramètre quand on sait que le paramètre n'existe pas.");

        });

        module("Cookies");
        test(« QuizUtil diverses fonctions de cookie.", fonction () {
            égal(setCookie(« test", 1"", -1), getCookieValue(« test"), "Obtenir un cookie j'ai mis devrait fonctionner.");
            égal(setCookie("anycookie", 1"", -1), True, "Définissant une cuisson valide doit retourner à 'true'.");
            égal(setCookie("nom du cookie fou !@#$%"%\^&*(()?/><.,", 1"", -1), True, "Définir un nom de cookie mauvaise doit retourner"faux".");
            égal(setCookie(indéfini, 1"", -1), indéfini, "En passant pas défini comme nom de cookie.");
            égal(getCookieValue("n'existe pas"), "", « Cookie n'existe pas de test.");
        });

    </script>
</tête>
<corps>
    <Div ID= qunit""></Div>
    <Div ID= "qunit-luminaire"></Div>

</corps>
</html>

Il y a plusieurs choses qui se passe ici:

  1. Référencement de mon code (QuizUtil.js)
  2. Référencement Qunity.js
  3. Définition de certains modules (getIDFromLookup, Cookies, et d'autres)
  4. Placer un <Div> dont l'ID est « qunit ».

Puis, J'ai juste tirer vers le haut de cette page et vous obtenez quelque chose comme ça:

image

Figure 3

Si vous regardez dans la partie supérieure, vous avez quelques options, deux d'entre eux sont intéressants:

  • Masquer les tests passés: Assez évident.  Peut aider le œil il suffit de voir les zones à problèmes et pas beaucoup de fouillis.
  • Module: (déroulant): Ceci filtrera les tests vers le bas pour que les groupes de tests que vous voulez.

En ce qui concerne les tests eux-mêmes – quelques commentaires:

  • Il va sans dire que vous devez écrire votre code tel qu'il est testable en premier lieu.  À l'aide de l'outil peut aider à faire respecter cette discipline. Par exemple, J'ai eu une fonction appelée "getTodayAsCaml()”.  Ce n'est pas très testable puisque cela ne prend aucun argument d'entrée et de le tester pour l'égalité, Nous aurions besoin de constamment mettre à jour le code de test afin de tenir compte de la date du jour.  J'ai refait il par ajout d'un paramètre d'entrée de données, puis en passant la date actuelle quand je veux la date du jour en format CAML.
  • Le cadre Qunit documente ses propres tests, et il semble assez robuste.  Il peut faire des choses simples comme test d'égalité et possède aussi un support pour les appels de style ajax (les « vrais » ou moqué en utilisant votre mocker préféré).
  • Franchi les étapes également vous oblige à penser par cas – ce qui se passe avec « undefined » ou la valeur null est passée dans une fonction.  Il le rend simple tester ces scénarios sur.  Bonnes choses.

Couverture avec Blanket.js

Blanket.js complète Qunit en suivant les lignes réelles du code qui s'exécutent au cours de l'exécution de vos tests.  Il intègre droit dans Qunit donc, bien que c'est une application à part entière, Il joue bien : il semble vraiment que c'est une appli sans soudure.

Il s'agit de blanket.js en action:

image Figure 4

image

Figure 5

(Vous devez cliquer sur la case « Activer la couverture » en haut [Voir Figure 3] pour permettre cela.)

Les lignes en surbrillance sur la Figure 5 n'ont pas été exécutées par l'un de mes tests, J'ai donc besoin de concevoir un test qui provoque leur exécution si je veux une couverture complète.

Obtenir blanket.js en suivant ces étapes de travail:

  1. Télécharger à partir http://blanketjs.org/.
  2. Ajoutez-le à votre projet
  3. Mettre à jour votre page d'atelier de test (QuizUtil_test.html dans mon cas) comme suit:
    1. Le code de référence
    2. Décorez votre <script> référencer comme suit: 
    <script type= text/javascript"" SRC="QuizUtil.js" données-couverture></script>

Blanket.js récupère l'attribut « données-couverture » et fait sa magie.  Il raccorde à Qunit, met à jour l'interface utilisateur pour ajouter l'option « Activer la protection » et voila!

Résumé (TL; DR)

Utilisez Qunit pour écrire vos scénarios de test.

  • Téléchargez-le
  • Ajoutez-le à votre projet
  • Écrire une page d'atelier de test
  • Créer vos tests
    • Refactoriser du code pour pouvoir être testée
    • Faire preuve de créativité!  Pensez à fou, scénarios impossibles des tester en tout cas.

Utilisez blanket.js pour assurer une couverture

  • Assurez-vous que Qunit fonctionne
  • Télécharger blanket.js et ajoutez-le à votre projet
  • Ajouter à votre page d'atelier de test:
    • Ajoutez une référence à blanket.js
    • Ajoutez un attribut « données-couverture » à votre <script> Tag
  • Exécuter vos tests de Qunit.

Jamais, j'ai fait tout cela avant et avait quelques trucs rudimentaire dans une poignée d'heures de travail. 

Essais heureux!

</fin>

undefinedS'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Laisser une réponse

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *