บทนำ
ผมได้สำรวจหน่วยทดสอบ และทดสอบความครอบคลุมสำหรับ 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("<"), "<", "น้อยกว่าการดำเนินการหลบหนี ('<')");
เท่ากับ(htmlEscape("<คลาส div = "someclass">ข้อความบางอย่าง</div>"), "<div คลา ="someclass">ข้อความบางอย่าง</div>", "ซับซ้อนทดสอบสตริการ");
});
โมดูล("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 ในกรณีของฉัน) ดังนี้:
- รหัสอ้างอิง
- ตกแต่งของคุณ <สคริปต์> อ้างอิงดังนี้:
<สคริปต์ ชนิด= "ข้อ ความ/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
