วิธีการ: กำหนดทดสอบหน่วยและครอบคลุมกับ QUnit.js และ Blanket.js สำหรับสำนักงาน 365 โปรแกรมประยุกต์ SharePoint

บทนำ

ผมได้สำรวจหน่วยทดสอบ และทดสอบความครอบคลุมสำหรับ JavaScript ที่ทำงานบนโปรแกรมประยุกต์ SharePoint ที่ใหม่สำหรับ SharePoint แบบออนไลน์ในสำนักงาน 365 ท เส้นทางวิจัยที่ชัดนำให้ Qunit.js และขวาหลังจากนั้น, ถึง Blanket.js.

QUnit ให้ฉันตั้งหน่วยทดสอบ และจัดกลุ่มลงในโมดูล โมดูลเป็นเพียงวิธีง่าย ๆ ที่จะจัดการทดสอบที่เกี่ยวข้อง. (ผมไม่แน่ใจว่า ผมใช้มันตามที่ตั้งใจไว้, แต่ทำงานสำหรับฉันดังนั้นไกลกับชุดเล็กของการทดสอบดังนั้นไกลฉันกำหนด).

Blanket.js รวมกับ Qunit และมันจะแสดงบรรทัดจริงของ JavaScript ที่ มี – สำคัญ – ถูกไม่จริงปฏิบัติในหลักสูตรของการรันการทดสอบ นี่คือ "ครอบคลุม" – รายการที่ดำเนินครอบคลุม โดยการทดสอบขณะไม่มี.

ระหว่างการตั้งค่ากรณีทดสอบที่ดี และดูความครอบคลุม, เราสามารถลดความเสี่ยงที่ว่า รหัสของเราได้ซ่อนข้อบกพร่อง เวลาดี.

Qunit

สมมติว่า คุณมี Visual Studio โครงการตั้งค่า, เริ่มต้น ด้วยการดาวน์โหลดแพคเกจจาวาสคริปต์จาก http://qunitjs.com. เพิ่ม JavaScript และ CSS ตรงกับโซลูชันของคุณ มีลักษณะผมเช่นนี้:

รูป 1

เช่นที่คุณเห็น, ผมใช้ 1.13.0 เวลา ผมเขียนบทความบล็อกนี้. อย่าลืมดาวน์โหลด และเพิ่มแฟ้ม 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" />
    <สคริปต์ ชนิด= "ข้อ ความ/javascript" src="QuizUtil.js" ครอบคลุมข้อมูล></สคริปต์>
    <สคริปต์ชนิด ="ข้อ ความ/javascript" src ="qunit-1.13.0.js"></สคริปต์>
    <สคริปต์ชนิด ="ข้อ ความ/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;skfja sdjfbvubvqrubqer0873407t534piutheqw;วีเอ็น"), ยังไม่ได้กำหนด,"ควรเสมอกลับแปลงผลลัพธ์เป็นจำนวนเต็ม");
            เท่ากับ(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), จริง, "การทำอาหารถูกต้องควรกลับ 'จริง'");
            เท่ากับ(setCookie("ชื่อคุกกี้บ้า !@#$%"%\^&*(()?/><.,", "1", -1), จริง, "การตั้งชื่อดีคุกกี้ควรกลับ 'เท็จ'");
            เท่ากับ(setCookie(ยังไม่ได้กำหนด, "1", -1), ยังไม่ได้กำหนด, "ช่วยไม่ได้กำหนดเป็นชื่อคุกกี้");
            เท่ากับ(getCookieValue("ไม่มีอยู่"), "", "คุกกี้ไม่มีทดสอบ");
        });

    </สคริปต์>
</หัว>
<เนื้อความ>
    <div รหัส= "qunit"></div>
    <div รหัส= "แข่ง qunit"></div>

</เนื้อความ>
</html>

มีหลายสิ่งที่เกิดขึ้นที่นี่:

การอ้างอิงรหัสของฉัน (QuizUtil.js)
อ้างอิง Qunity.js
กำหนดโมดูบาง (getIDFromLookup, คุกกี้, และผู้อื่น)
วางเป็น <div> มีรหัสเป็น "qunit".

แล้ว, ผมดึงขึ้นหน้านี้ และคุณได้รับเช่นนี้:

รูป 3

ถ้าคุณมองข้ามด้านบน, คุณมีตัวเลือกน้อย, สองซึ่งเป็นที่น่าสนใจ:

ซ่อนที่ผ่านการทดสอบ: สวยชัดเจน สามารถช่วยให้ตาของคุณจะเห็นพื้นที่ที่มีปัญหาและไม่มีความไม่เป็นระเบียบ.
โมดูล: (แบบหล่นลง): นี้จะกรองการทดสอบไปยังกลุ่มผู้ทดสอบต้อง.

สำหรับการทดสอบตัวเอง – ความเห็นไม่กี่:

มันไปโดยไม่บอกว่า คุณต้องเขียนรหัสของคุณจะอยู่ testable แรก ใช้เครื่องมือช่วยบังคับวินัยนั้น. สำหรับอินสแตนซ์, มีฟังก์ชันเรียกว่า "getTodayAsCaml()”. นี้ไม่ testable มากเนื่องจากมันจะไม่มีอาร์กิวเมนต์ป้อนเข้า และทดสอบสำหรับความเสมอภาค, เราจะต้องปรับปรุงรหัสทดสอบเพื่อแสดงวันปัจจุบันอย่างต่อเนื่อง ผม refactored โดยการเพิ่มพารามิเตอร์สำหรับการป้อนค่าข้อมูล แล้วช่วยไว้เมื่อต้องวันนี้ในรูปแบบ CAML.
กรอบ Qunit เอกสารทดสอบตัวเอง และดูเหมือนว่าแข็งแรงสวย มันสามารถทำสิ่งต่าง ๆ อย่างเช่นทดสอบความเท่าเทียมกัน และยัง มีการสนับสนุนสำหรับเรียกสไตล์อาแจ็กซ์ ("จริง" หรือ mocked โดยใช้ mocker ของคุณชื่นชอบ).
ไปผ่านกระบวนการยังบังคับให้คุณต้องคิดถึงขอบกรณี – สิ่งที่เกิดขึ้นกับ "ไม่" หรือเป็นการส่งผ่าน 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. ตกแต่งของคุณ <สคริปต์> อ้างอิงดังนี้:

    <สคริปต์ ชนิด= "ข้อ ความ/javascript" src="QuizUtil.js" ครอบคลุมข้อมูล></สคริปต์>

Blanket.js รับค่าแอตทริบิวต์ "ข้อมูลปก" และไม่วิเศษของ มันไม้เป็น Qunit, ปรับปรุง UI เพื่อเพิ่มตัวเลือก "เปิดใช้งานความคุ้มครอง" และ voila!

สรุป (TL; DR)

Qunit ใช้เขียนกรณีทดสอบของคุณ.

ดาวน์โหลด
เพิ่มลงในโครงการของคุณ
เขียนหน้าเทียมทดสอบ
สร้างการทดสอบของคุณ
- Refactor บางส่วนของรหัสจะ testable
- มีความคิดสร้างสรรค์! คิดถึงบ้า, สถานการณ์ที่เป็นไปไม่ได้ และทดสอบต่อไป.

ใช้ blanket.js เพื่อให้ครอบคลุม

แน่ใจ Qunit ทำงาน
ดาวน์โหลด blanket.js และเพิ่มลงในโครงการของคุณ
เพิ่มหน้าเทียมทดสอบ:
- เพิ่มการอ้างอิงถึง blanket.js
- เพิ่มแอตทริบิวต์ "ข้อมูลปก" เพื่อคุณ <สคริปต์> แท็ก
รันการทดสอบของ Qunit.

ฉันไม่ได้นี้ก่อน และมีบางสิ่ง rudimentary กำมือของชั่วโมงทำงาน

ทดสอบความสุข!

</สิ้นสุด>

สมัครสมาชิกไปยังบล็อกของฉัน.

ทำตามฉันใน Twitter ที่ http://www.twitter.com/pagalvin

พื้นที่ Paul Galvin SharePoint

วิธีการ: กำหนดทดสอบหน่วยและครอบคลุมกับ QUnit.js และ Blanket.js สำหรับสำนักงาน 365 โปรแกรมประยุกต์ SharePoint

บทนำ

Qunit

ความครอบคลุมกับ Blanket.js

สรุป (TL; DR)

ทิ้งคำตอบไว้ ยกเลิกการตอบ