Πώς να: Ρυθμίσετε τη δοκιμασία της ενότητας και δοκιμή κάλυψης με QUnit.js και Blanket.js για ένα γραφείο 365 SharePoint App

Εισαγωγή

Εγώ εξερεύνηση δοκιμών μονάδας και δοκιμή κάλυψη για JavaScript, όπως το έργο σε μια νέα εφαρμογή SharePoint για το SharePoint online στο γραφείο 365 Σουίτα. Τα μονοπάτια προφανές έρευνα με οδήγησε να Qunit.js και αμέσως μετά, να BLANKET.js.

QUnit θέλω να δημιουργήσει μονάδα δοκιμές και να τους ομαδοποιήσουν σε ενότητες. Μια ενότητα είναι ένας απλός τρόπος για να οργανώσει τις σχετικές δοκιμές. (Δεν είμαι σίγουρος ότι είμαι το χρησιμοποιεί ως θελήσει, αλλά λειτουργεί για μένα μέχρι στιγμής με το μικρό σύνολο των δοκιμών που έχω μέχρι στιγμής ορίζεται).

BLANKET.js ενσωματώνει με Qunit και θα μου δείξει το πραγματικό γραμμές της JavaScript που ήταν- και πιο σημαντικό-δεν πραγματικά εκτελέστηκαν κατά τη διάρκεια εκτέλεσης των δοκιμών. Αυτό είναι "κάλυψη"-γραμμές που εκτελούνται καλύπτονται από τη δοκιμή, ενώ άλλοι δεν είναι.

Μεταξύ τη δημιουργία καλές περιπτώσεις δοκιμής και της προβολής κάλυψη, μπορούμε να μειώσουμε τον κίνδυνο ότι μας κώδικα έχει παρουσιάσει ένα κρυμμένο ελάττωμα. Καλές εποχές.

Qunit

Υποθέτοντας ότι έχετε το Visual Studio σας έργο, το οποίο έχει συσταθεί, έναρξη με τη μεταφόρτωση του πακέτου JavaScript από http://qunitjs.com. Προσθέστε το JavaScript και CSS αντίστοιχη λύση σας. Ορυχείο μοιάζει με αυτό:

Σχήμα 1

Όπως μπορείτε να δείτε, Ήμουν χρησιμοποιώντας 1.13.0 τη στιγμή που έγραψα αυτό το blog post. Μην ξεχάσετε να κατεβάσετε και να προσθέσετε το αρχείο CSS.

Που έξω από το δρόμο, επόμενο βήμα είναι να δημιουργήσουμε κάποιο είδος της δοκιμής καλωδίων και αναφοράς τα Qunit κομμάτια. Εγώ δοκιμή μια δέσμη των λειτουργιών σε ένα αρχείο δέσμης ενεργειών που ονομάζεται "QuizUtil.js" έτσι δημιούργησα μια σελίδα HTML που ονομάζεται "QuizUtil_test.html", όπως φαίνεται:

Σχήμα 2

Εδώ είναι ο κώδικας:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<κεφάλι>
    <Τίτλος>QuizUtil δοκιμή με Qunit</Τίτλος>
    <σύνδεση rel= "φύλλο στυλ" href="../CSS/qunit-1.13.0.CSS" />
    <σενάριο Τύπος= text/javascript"" src="QuizUtil.js" δεδομένα-κάλυψη></σενάριο>
    <σενάριο τύπου ="text/javascript" src ="qunit-1.13.0.js"></σενάριο>
    <σενάριο τύπου ="text/javascript" src ="blanket.min.js"></σενάριο>

    <σενάριο>
        ενότητα("getIDFromLookup");
        δοκιμή("QuizUtil getIDFromLookupField", συνάρτηση () {
            var goodValue = "1;#Paul Galvin";

            ίση(getIDFromLookupField(goodValue) + 1, 2), "Το ID του [" + goodValue + "] + 1 θα πρέπει να είναι 2";
            ίση(getIDFromLookupField(απροσδιόριστο), απροσδιόριστο, «Απροσδιόριστη όρισμα εισόδου θα πρέπει να επιστρέψει απροσδιόριστο αποτέλεσμα.");
            ίση(getIDFromLookupField(""), απροσδιόριστο, "Κενό όρισμα εισόδου θα πρέπει να επιστρέψει μια τιμή που δεν έχει οριστεί.");
            ίση(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), απροσδιόριστο,"Πρέπει να επιστρέφει πάντα ένα μετατρέψιμο αποτέλεσμα σε ακέραιο");
            ίση(getIDFromLookupField("2;#κάποιου άλλου προσώπου"), "2", "Έλεγχος [2;#κάποιου άλλου προσώπου].");
            ίση(getIDFromLookupField("9834524;#τιμή Long"), "9834524", "Μεγάλη αξία δοκιμής.");
            notEqual(getIDFromLookupField("5;#κάποιος", 6), 6, "Δοκιμή ένα notEqual (5 δεν είναι ίσο με 6 για αυτό το δείγμα: [5;#κάποιος]");

        });

        ενότητα("htmlEscape");
        δοκιμή("QuizUtil htmlEscape()", συνάρτηση () {
            ίση(htmlEscape("<"), "&lt;", "Δραπετεύοντας από μια λιγότερο από το χειριστή ('<')");
            ίση(htmlEscape("<div τάξη =  "someclass">Κάποιο κείμενο</div>"), "&lt;div τάξη =&quot;someclass&quot;&gt;Κάποιο κείμενο&lt;/div&gt;", «Πιο περίπλοκη συμβολοσειρά δοκιμή.");
        });

        ενότητα("getDateAsCaml");
        δοκιμή("QuizUtil getDateAsCaml()", συνάρτηση () {
            ίση(getDateAsCaml(νέα Ημερομηνία("12/31/2013")), «2013-12-31T:00:00:00", «Δοκιμαστεί σκληρά κωδικοποιημένο ημερομηνία: [12/31/2013]");
            ίση(getDateAsCaml(νέα Ημερομηνία("01/05/2014")), "2014-01-05T:00:00:00", «Δοκιμαστεί σκληρά κωδικοποιημένο ημερομηνία: [01/05/2014]");
            ίση(getDateAsCaml(νέα Ημερομηνία("01/31/2014")), "2014-01-31T:00:00:00", «Δοκιμαστεί σκληρά κωδικοποιημένο ημερομηνία: [01/31/2014]");
            ίση(getTodayAsCaml(), getDateAsCaml(νέα Ημερομηνία()), "getTodayAsCaml() θα πρέπει να ισούται με getDateAsCaml(νέα ημερομηνία())");
            ίση(getDateAsCaml(«ανοησίες αξία"), απροσδιόριστο, "Προσπαθήστε να πάρετε την ημερομηνία αξίας ανοησίες.");
            ίση(getDateAsCaml(απροσδιόριστο), απροσδιόριστο, "Προσπαθήστε να πάρετε την ημερομηνία της [απροσδιόριστο] ημερομηνία.");
        });

        ενότητα("getParameterByName");
        δοκιμή("QuizUtil getParameterByName (από τη συμβολοσειρά ερωτήματος)", συνάρτηση () {
            ίση(getParameterByName(απροσδιόριστο), απροσδιόριστο, "Προσπαθήστε να πάρετε απροσδιόριστη παράμετρος θα πρέπει να επιστρέψει απροσδιόριστη.");
            ίση(getParameterByName("δεν υπάρχει"), απροσδιόριστο, "Προσπαθήστε να πάρετε τιμή παραμέτρου, όταν γνωρίζουμε ότι δεν υπάρχει η παράμετρος.");

        });

        ενότητα("Cookies");
        δοκιμή("QuizUtil διάφορες λειτουργίες του cookie.", συνάρτηση () {
            ίση(setCookie("δοκιμή", "1", -1), getCookieValue("δοκιμή"), "Πάρτε ένα cookie που έθεσα πρέπει να λειτουργήσει.");
            ίση(setCookie("anycookie", "1", -1), TRUE, "Ρύθμιση ένα έγκυρο ψήσιμο πρέπει να επιστρέψει «αληθινή».");
            ίση(setCookie("το όνομα του cookie τρελό !@#$%"%\^&*(()?/><.,", "1", -1), TRUE, "Ρύθμιση ένα όνομα κακή cookie θα πρέπει να επιστρέψει 'false'.");
            ίση(setCookie(απροσδιόριστο, "1", -1), απροσδιόριστο, «Περνώντας αόριστη ως το όνομα του cookie.");
            ίση(getCookieValue("δεν υπάρχει"), "", "Cookie δεν υπάρχει τεστ.");
        });

    </σενάριο>
</κεφάλι>
<οργανισμός>
    <div αναγνωριστικό= "qunit"></div>
    <div αναγνωριστικό= "qunit-φωτιστικό"></div>

</οργανισμός>
</HTML>

Υπάρχουν διάφορα πράγματα που συμβαίνουν εδώ:

Παραπομπή κωδικός (QuizUtil.js)
Αναφορά Qunity.js
Ακρίβεια ορισμένων μονάδων (getIDFromLookup, Τα cookies, και άλλοι)
Τοποθέτηση ένα <div> του οποίου η ταυτότητα είναι "qunit".

Στη συνέχεια, Μόλις σηκώσετε αυτή τη σελίδα και μπορείτε να πάρετε κάτι σαν αυτό:

Σχήμα 3

Αν κοιτάξετε πέρα από την κορυφή, έχετε μερικές επιλογές, δύο από τα οποία είναι ενδιαφέροντα:

Απόκρυψη περάσει δοκιμές: Αρκετά προφανές. Μπορεί να βοηθήσει το μάτι σας δείτε απλά τις προβληματικές και δεν έχει πολλή ακαταστασία.
Ενότητα: (αναπτυσσόμενο): Αυτό θα φιλτράρετε τις δοκιμές κάτω ακριβώς από αυτές τις ομάδες των δοκιμών που θέλετε.

Όσο για τις δοκιμές τους – μερικά σχόλια:

Είναι αυτονόητο ότι θα πρέπει να γράψετε τον κωδικό σας ώστε να είναι ελέγξιμο στην πρώτη θέση. Χρησιμοποιώντας το εργαλείο μπορεί να βοηθήσει να επιβάλει την πειθαρχία που. Για παράδειγμα, Είχα μια λειτουργία που ονομάζεται "getTodayAsCaml()”. Αυτό δεν είναι πολύ δοκιμάσιμος δεδομένου ότι παίρνει κανένα όρισμα εισόδου και να το δοκιμάσετε για την ισότητα, θα πρέπει να συνεχώς να ενημερώσετε τον κωδικό του τεστ να αντικατοπτρίζουν την τρέχουσα ημερομηνία. Εγώ το αλλαγμένος από προσθέτοντας μια παράμετρο εισόδου δεδομένων, στη συνέχεια, περνώντας την τρέχουσα ημερομηνία όταν θέλω σήμερα σε μορφή CAML.
Το πλαίσιο Qunit τεκμηριώνει τις δικές της δοκιμές και φαίνεται αρκετά ισχυρή. Αυτό μπορεί να κάνει τα απλά πράγματα όπως τη δοκιμή για την ισότητα και έχει επίσης την υποστήριξη για ajax κλήσεις ύφους (τόσο «πραγματική» ή εμπαίζονται χρησιμοποιώντας σας αγαπημένο στασιαστικά·).
Περάσει από τη διαδικασία και τις δυνάμεις σας για να σκέφτονται μέσα από περιπτώσεις ακρών-τι θα συμβεί με το "απροσδιόριστο" ή null είναι πέρασε σε μια λειτουργία. Καθιστά νεκρός απλό να ελέγξετε αυτά τα σενάρια έξω. Καλά πράγματα.

Κάλυψη με Blanket.js

BLANKET.js συμπληρώνει Qunit παρακολουθώντας τις πραγματικές γραμμές κώδικα που εκτελούνται κατά τη διάρκεια του τρεξίματος σας δοκιμές. Ενσωματώνει δικαίωμα στο Qunit ώστε ακόμα κι αν είναι ένα ολόκληρο ξεχωριστό app, παίζει ωραία-φαίνεται πραγματικά σαν να είναι ένα άνευ ραφής app.

Αυτό είναι blanket.js σε δράση:

Σχήμα 4

Σχήμα 5

(Στην πραγματικότητα, έχετε να κάνετε κλικ για το κουτάκι "Ενεργοποίηση κάλυψη" στην κορυφή [βλέπε σχήμα 3] για να επιτρέψετε αυτό.)

Γραμμές που επισημαίνονται στο σχήμα 5 δεν έχουν εκτελεστεί από οποιαδήποτε από τις δοκιμές μου, έτσι πρέπει να επινοήσουν μια δοκιμή που να τους αναγκάσει να εκτελέσει αν θέλω πλήρη κάλυψη.

Πάρετε blanket.js εργασίας ακολουθώντας τα παρακάτω βήματα:

Κατεβάσετε από http://blanketjs.org/.
Προσθέστε στο έργο σας
Ενημέρωση σας λουρί δοκιμαστική σελίδα (QuizUtil_test.html στη δική μου περίπτωση) ως εξής:
1. Ο κωδικός αναφοράς
2. Διακοσμήσετε σας <σενάριο> αναφοράς, όπως αυτό:

    <σενάριο Τύπος= text/javascript"" src="QuizUtil.js" δεδομένα-κάλυψη></σενάριο>

BLANKET.js παίρνει το χαρακτηριστικό "δεδομένα-κάλυψη" και κάνει τη μαγεία. Αυτό να γάντζους σε Qunit, ενημερώνει το UI για να προσθέσετε την επιλογή "Ενεργοποίηση κάλυψη" και voila!

Περίληψη (TL; DR)

Χρήση Qunit να γραφτούν περιπτώσεις σας.

Το κατεβάσετε
Προσθέστε στο έργο σας
Γράψτε μια δοκιμαστική σελίδα λουρί
Δημιουργήστε τις δοκιμές σας
- Μερικά του κώδικά σας να δοκιμάσιμος Refactor
- Να είστε δημιουργικός! Σκεφτείτε τρελό, αδύνατο σενάρια και δοκιμή τους ούτως ή άλλως.

Χρήση blanket.js για να εξασφαλισθεί η κάλυψη

Βεβαιωθείτε ότι εργάζεται Qunit
Λήψη blanket.js και να το προσθέσετε στο έργο σας
Προσθέσετε στη σελίδα δοκιμής καλωδίων:
- Προσθέστε μια αναφορά για το blanket.js
- Προσθέστε ένα χαρακτηριστικό "δεδομένα-κάλυψη" να σας <σενάριο> ετικέτα
Εκτελέστε τις δοκιμές σας Qunit.

Ποτέ δεν έκανα κανένα από αυτό πριν και είχε κάποια στοιχειώδη πράγματα που εργάζονται σε μια χούφτα ώρες.

Καλή δοκιμή!

</Τέλος>

Εγγραφείτε στο blog μου.

Συνέχεια μου για Twitter σε http://www.twitter.com/pagalvin

Paul Galvin του SharePoint χώρου

Πώς να: Ρυθμίσετε τη δοκιμασία της ενότητας και δοκιμή κάλυψης με QUnit.js και Blanket.js για ένα γραφείο 365 SharePoint App

Εισαγωγή

Qunit

Κάλυψη με Blanket.js

Περίληψη (TL; DR)

Αφήνω μια απάντηση Ακύρωση απάντησης