איך: קביעת תצורה של יחידת מבחן, מבחן כיסוי עם QUnit.js ו- Blanket.js עבור משרד 365 יישום SharePoint

מבוא

אני בודק אפשרות בדיקות יחידה ולבדוק כיסוי של 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 בזמנו כתבתי בבלוג זה. לא לשכוח להוריד ולהוסיף לקובץ ה-CSS.

את זה מהדרך, השלב הבא הוא ליצור סוג של מבחן לרתום להפנות את הקטעים Qunit. אני בודק כל מיני פונקציות בקובץ script ששמו "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" />
    <קובץ script סוג= טקסט/javascript"" src="QuizUtil.js" נתונים-cover></קובץ script>
    <סקריפט סוג ="טקסט/javascript" src ="qunit-1.13.0.js"></קובץ script>
    <סקריפט סוג ="טקסט/javascript" src ="blanket.min.js"></קובץ script>

    <קובץ script>
        מודול("getIDFromLookup");
        מבחן("QuizUtil getIDFromLookupField", פונקציה () {
            var goodValue = "1;#פול Galvin";

            שווה(getIDFromLookupField(goodValue) + 1, 2), "מזהה של [" + goodValue + "] + 1 צריכים להיות 2";
            שווה(getIDFromLookupField(לא מוגדרת), לא מוגדרת, "לא מוגדר ארגומנט הקלט אמורה להחזיר תוצאה לא מוגדר.");
            שווה(getIDFromLookupField(""), לא מוגדרת, "ריק ארגומנט הקלט אמורה להחזיר ערך לא מוגדר.");
            שווה(getIDFromLookupField("gobbledigood3-thq;עדה dkvn;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), לא מוגדרת,"צריך תמיד להחזיר מכונית התוצאה למספר שלם");
            שווה(getIDFromLookupField("2;#אדם אחר"), "2", "בדיקת [2;#אדם אחר].");
            שווה(getIDFromLookupField("9834524;#ערך ארוך"), "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("לא קיים"), לא מוגדרת, "מה אתה עושה. לנסות לקבל ערך פרמטר כשאנחנו יודעים שהפרמטר אינו קיים.");

        });

        מודול("עוגיות");
        מבחן("QuizUtil קוקי פונקציות שונות.", פונקציה () {
            שווה(setCookie("מבחן", "1", -1), getCookieValue("מבחן"), "לקבל עוגייה. אני צריך לעבוד.");
            שווה(setCookie("anycookie", "1", -1), נכון, "הגדרת חוקי הבישול צריכה להחזיר 'true'.");
            שווה(setCookie("עוגיות מטורף שם !@#$%"%\^&*(()?/><.,", "1", -1), נכון, "קביעת שם רע קוקי להחזיר 'false'.");
            שווה(setCookie(לא מוגדרת, "1", -1), לא מוגדרת, "עובר לא מוגדר כשם קובץ cookie.");
            שווה(getCookieValue("לא קיים"), "", "קוקי לא קיים מבחן.");
        });

    </קובץ script>
</הראש>
<הגוף>
    <div מזהה= "qunit"></div>
    <div מזהה= "qunit-אביזר"></div>

</הגוף>
</html>

ישנם מספר דברים קורים כאן:

המפנה את הקוד שלי (QuizUtil.js)
הפניה Qunity.js
הגדרת מספר מודולים (getIDFromLookup, עוגיות, ואחרים)
הצבת <div> שהמזהה שלה הוא "qunit".

לאחר מכן, אני פשוט תמשוך למעלה בדף זה ותקבל משהו כזה:

איור 3

אם תסתכל לרוחב החלק העליון, יש לך כמה אפשרויות, שניים מהם הם מעניינים:

הסתר עברו מבחנים: . זה דיי ברור יכול לעזור העין שלך לראות את האזורים הבעייתיים, לא הרבה בלאגן.
מודול: (ברשימה הנפתחת): זה לסנן את הבדיקות עד קבוצות רק אלה של הבדיקות שהרצויות.

לגבי המבחנים עצמם – כמה הערות:

למותר לציין כי אתה צריך לכתוב את הקוד שלך כזה כי זה ברת מלכתחילה. באמצעות הכלי יכול לעזור לאכוף משמעת הזה. למשל, היה לי פונקציה שנקראת "getTodayAsCaml()”. זה לא מאוד ברת מאז לוקח אין ארגומנט הקלט כדי לבחון אותה לשוויון, היינו צריכים כל הזמן לעדכן את הקוד המבחן כך שישקף את התאריך הנוכחי. אני refactored את זה על ידי הוספת פרמטר קלט נתונים ואז עובר את התאריך הנוכחי כשיבוא הנוכחי היום בתבנית CAML.
המסגרת Qunit מסמכי בדיקות משלה ונראה די חזקים. הוא יכול לעשות דברים פשוטים כמו בדיקות לשוויון, יש גם תמיכה עבור שיחות בסגנון ajax (שניהם "אמיתי" או mocked באמצעות להתחשבנות האהוב שלך).
גם עובר התהליך מכריח אותך לחשוב דרך מקרים קצה – מה קורה עם "undefined" או null מועבר בתוך פונקציה. זה מקל מאוד לבדוק תרחישים אלה.. . חומר טוב.

כיסוי עם Blanket.js

Blanket.js משלים Qunit על-ידי מעקב אחר הקווים בפועל של קוד לבצע במהלך בדיקות שלך. זה משתלב נכון Qunit אז למרות שזה יישום נפרדת לגמרי, זה משחק יפה – נראה ממש כאילו זה app חלקה אחת.

. זה blanket.js בפעולה:

איור 4

איור 5

(למעשה יש ללחוץ על תיבת הסימון "אפשר כיסוי" בחלק העליון [ראה איור 3] כדי לאפשר את זה.)

השורות המודגשות באיור 5 לא הוצאו להורג על ידי אחת הבדיקות שלי, אז אני צריך לתכנן ניסוי לגרום להם. להוציא להורג, אם אני רוצה כיסוי מלא.

להשיג blanket.js עבודה על-ידי ביצוע השלבים הבאים:

להוריד אותו מ http://blanketjs.org/.
להוסיף את הפרוייקט שלך
עדכון דף הרתמה שלך במבחן (QuizUtil_test.html במקרה שלי) כדלקמן:
1. להפנות את הקוד
2. לקשט שלך <קובץ script> הפניה כזו:

    <קובץ script סוג= טקסט/javascript"" src="QuizUtil.js" נתונים-cover></קובץ script>

Blanket.js מרים את התכונה "נתונים-cover" ועושה את הקסם שלו. זה הוקס לתוך Qunit, מעדכן את ממשק המשתמש כדי להוסיף את האפשרות "אפשר כיסוי" וזהו!

סיכום (TL; ד ר)

השתמש Qunit כדי לכתוב מקרי מבחן שלך.

להוריד את זה
להוסיף את הפרוייקט שלך
לכתוב עמוד לרתום ניסיון
ליצור את המבחנים שלך
- והרץ חלק בקוד כדי להיות ברת
- להיות יצירתי! חושב של מטורף, תרחישים בלתי אפשרי, לבדוק אותם בכל מקרה.

השתמש blanket.js כדי להבטיח כיסוי

ודא ש-qunit פועל
הורדה blanket.js ולהוסיף אותו לפרוייקט שלך
להוסיף אותו לדף הרתמה שלך במבחן:
- להוסיף הפניה blanket.js
- להוסיף תכונה "מכסה נתונים" כדי שלך <קובץ script> תג
את הבדיקות Qunit.

אף פעם לא עשה את כל זה בעבר והיו כמה דברים בסיסיים בעבודה קומץ של שעות.

בדיקה מאושר!

</קצה>

מנוי על הבלוג שלי.

עקוב אחרי הטוויטר ב http://www.twitter.com/pagalvin

שטח SharePoint של פול גלווין

איך: קביעת תצורה של יחידת מבחן, מבחן כיסוי עם QUnit.js ו- Blanket.js עבור משרד 365 יישום SharePoint

מבוא

Qunit

כיסוי עם Blanket.js

סיכום (TL; ד ר)

תשאיר הודעה בטל תגובה