1. QUNIT คืออะไร
QUNIT (http://qunitjs.com/) เป็นกรอบการทดสอบหน่วย JavaScript ที่ทรงพลังมากที่สามารถช่วยคุณแก้ไขข้อบกพร่องของรหัสของคุณ มันถูกเขียนโดยสมาชิกของทีม JQuery และเป็นชุดทดสอบอย่างเป็นทางการสำหรับ JQuery แต่โดยทั่วไปแล้ว Qunit ก็เพียงพอที่จะทดสอบรหัส JavaScript ปกติใด ๆ มันอาจทดสอบ JavaScript ฝั่งเซิร์ฟเวอร์ผ่านเครื่องยนต์ JavaScript บางตัวเช่น Rhino หรือ V8
หากคุณไม่คุ้นเคยกับแนวคิดของ "การทดสอบหน่วย" โปรดไม่ต้องกังวล นี่ไม่ใช่เรื่องยากที่จะเข้าใจ:
การคัดลอกรหัสมีดังนี้:
ในการเขียนโปรแกรมคอมพิวเตอร์การทดสอบหน่วย (หรือที่เรียกว่าการทดสอบโมดูล) เป็นการทดสอบที่ทำการทดสอบความถูกต้องในโมดูลโปรแกรม (หน่วยที่เล็กที่สุดของการออกแบบซอฟต์แวร์) หน่วยโปรแกรมเป็นองค์ประกอบที่ทดสอบได้น้อยที่สุดสำหรับแอปพลิเคชัน ในการเขียนโปรแกรมขั้นตอนหน่วยเป็นโปรแกรมเดียวฟังก์ชั่นขั้นตอน ฯลฯ ; สำหรับการเขียนโปรแกรมเชิงวัตถุหน่วยที่เล็กที่สุดคือวิธีการรวมถึงวิธีการในคลาสฐาน (superclasses) คลาสนามธรรมหรือคลาสที่ได้รับ (คลาสย่อย) - ยกมาจาก Wikipedia
พูดง่ายๆคือคุณเขียนการทดสอบสำหรับทุกคุณสมบัติของรหัสของคุณและหากการทดสอบทั้งหมดเหล่านี้ผ่านคุณสามารถมั่นใจได้ว่ารหัสนั้นไม่ได้มีข้อบกพร่อง (โดยปกติจะขึ้นอยู่กับการทดสอบของคุณอย่างละเอียด)
2. ทำไมคุณถึงต้องการทดสอบรหัสของคุณ
หากคุณไม่เคยเขียนการทดสอบหน่วยใด ๆ มาก่อนคุณสามารถอัปโหลดรหัสของคุณโดยตรงไปยังเว็บไซต์คลิกสักพักเพื่อดูว่ามีปัญหาใด ๆ เกิดขึ้นและพยายามแก้ปัญหาที่คุณพบ จะมีปัญหามากมายกับวิธีนี้
ก่อนอื่นนี่น่ารำคาญมาก การคลิกไม่ใช่งานที่ง่ายเพราะคุณต้องตรวจสอบให้แน่ใจว่าทุกอย่างถูกคลิกและมีโอกาสที่ดีที่คุณพลาดไปหนึ่งหรือสอง
ประการที่สองทุกสิ่งที่คุณทำเพื่อทดสอบไม่สามารถนำกลับมาใช้ซ้ำได้ซึ่งหมายความว่าเป็นการยากที่จะถดถอย ผลตอบแทนคืออะไร? ลองนึกภาพคุณเขียนโค้ดและทดสอบแก้ไขข้อบกพร่องทั้งหมดที่คุณพบแล้วโพสต์ ณ จุดนี้ผู้ใช้จะส่งข้อเสนอแนะเกี่ยวกับข้อบกพร่องใหม่และต้องการคุณสมบัติใหม่บางอย่าง คุณกลับไปที่รหัสแก้ไขข้อบกพร่องใหม่เหล่านี้และเพิ่มคุณสมบัติใหม่ สิ่งที่อาจเกิดขึ้นต่อไปคือข้อบกพร่องเก่า ๆ ปรากฏขึ้นอีกครั้งซึ่งเรียกว่า "return" ดูสิตอนนี้คุณต้องคลิกอีกครั้งและเป็นไปได้ที่คุณจะไม่พบข้อบกพร่องของภาระเก่าเหล่านี้ แม้ว่าคุณจะทำเช่นนั้นมันจะใช้เวลาพอสมควรในการหาว่าปัญหาของคุณเกิดจากการถดถอย การใช้การทดสอบหน่วยคุณเขียนการทดสอบเพื่อค้นหาข้อบกพร่องและเมื่อมีการแก้ไขรหัสแล้วคุณจะกรองผ่านการทดสอบอีกครั้ง หากการถดถอยเกิดขึ้นการทดสอบบางอย่างจะล้มเหลวอย่างแน่นอนและคุณสามารถจดจำได้ง่ายและรู้ว่าส่วนใดของรหัสมีข้อผิดพลาด ตอนนี้คุณรู้ว่าสิ่งที่คุณแก้ไขตอนนี้สามารถแก้ไขได้ง่าย
ข้อดีอีกอย่างของการทดสอบหน่วยโดยเฉพาะอย่างยิ่งสำหรับการพัฒนาเว็บ: ทำให้การทดสอบความเข้ากันได้ข้ามเบราว์เซอร์ง่ายขึ้น เพียงเรียกใช้กรณีทดสอบของคุณในเบราว์เซอร์ที่แตกต่างกัน หากมีปัญหากับเบราว์เซอร์หนึ่งตัวคุณจะแก้ไขและเรียกใช้กรณีทดสอบเหล่านี้อีกครั้งเพื่อให้แน่ใจว่าไม่มีการถดถอยในเบราว์เซอร์อื่น เมื่อพวกเขาทั้งหมดผ่านการทดสอบคุณสามารถพูดด้วยความมั่นใจว่าเบราว์เซอร์เป้าหมายทั้งหมดสนับสนุน
ฉันต้องการพูดถึงโครงการโดย John Resig: Testswarm (http://testswarm.com/) ต้องใช้การทดสอบหน่วย JavaScript ไปสู่ระดับใหม่โดยการแจกจ่ายให้เป็นเว็บไซต์ที่มีหลายกรณีทดสอบที่ทุกคนสามารถไปที่นั่นเพื่อเรียกใช้กรณีทดสอบบางกรณีแล้วส่งคืนผลลัพธ์ไปยังเซิร์ฟเวอร์ ด้วยวิธีนี้รหัสจะถูกทดสอบอย่างรวดเร็วบนเบราว์เซอร์ที่แตกต่างกันหรือแม้แต่ทำงานบนแพลตฟอร์มที่แตกต่างกัน
3. วิธีการเขียนการทดสอบหน่วยด้วย Qunit
ดังนั้นคุณจะเขียนการทดสอบหน่วยกับ QUNIT ได้อย่างไร? ก่อนอื่นคุณต้องตั้งค่าสภาพแวดล้อมการทดสอบ:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> QUNIT TEST SUITE </title>
<link rel = "stylesheet" href = "http://github.com/jquery/qunit/raw/master/qunit/qunit/qunit.css" type = "text/css" media = "หน้าจอ">
<script type = "text/javascript" src = "http://github.com/jquery/qunit/raw/master/qunit/qunit/qunit.js"> </script>
<!-ไฟล์โครงการของคุณไปที่นี่->
<script type = "text/javascript" src = "myproject.js"> </script>
<!-ไฟล์ทดสอบของคุณไปที่นี่->
<script type = "text/javascript" src = "mytests.js"> </script>
</head>
<body>
<h1 id = "qunit-header"> QUNIT TEST SUITE </h1>
<h2 id = "qunnit-banner"> </h2>
<div id = "quenit-testrunner-toolbar"> </div>
<h2 id = "qunnit-useragent"> </h2>
<ol id = "qunit-tests"> </ol>
</body>
</html>
อย่างที่คุณเห็นมีการใช้เวอร์ชัน Framework Qunit ที่ได้รับการจัดการที่นี่
รหัสที่จะทดสอบได้ถูกเพิ่มลงใน myProject.js และการทดสอบของคุณควรแทรกลงใน mytest.js ในการเรียกใช้การทดสอบเหล่านี้เพียงเปิดไฟล์ HTML ในเบราว์เซอร์ ตอนนี้ถึงเวลาเขียนการทดสอบบางอย่าง
รากฐานที่สำคัญของการทดสอบหน่วยคือการยืนยัน:
การยืนยันเป็นข้อเสนอที่ทำนายผลการส่งคืนของรหัสของคุณ หากการทำนายเป็นเท็จและการยืนยันล้มเหลวคุณจะรู้ว่ามีบางอย่างผิดปกติ
เรียกใช้การยืนยันและคุณควรนำไปไว้ในกรณีทดสอบ:
การคัดลอกรหัสมีดังนี้:
// มาทดสอบฟังก์ชั่นนี้กันเถอะ
ฟังก์ชั่น iseven (val) {
ส่งคืน val % 2 === 0;
-
ทดสอบ ('iseven ()', function () {
ตกลง (iseven (0), 'Zero เป็นเลขคู่');
ตกลง (iseven (2), 'ดังนั้นสอง');
ตกลง (iseven (-4), 'ดังนั้นจึงเป็นลบสี่');
ตกลง (! iseven (1), 'หนึ่งไม่ได้เป็นเลขคู่');
ตกลง (! iseven (-7), 'ไม่เป็นลบเจ็ด');
-
ที่นี่เรากำหนดฟังก์ชั่น: iseven ซึ่งใช้ในการตรวจจับว่าตัวเลขเป็นตัวเลขคี่และเราต้องการทดสอบฟังก์ชั่นนี้เพื่อยืนยันว่าจะไม่ส่งคืนคำตอบที่ผิด
เราโทรทดสอบครั้งแรก () ซึ่งสร้างกรณีทดสอบ พารามิเตอร์แรกคือสตริงที่จะแสดงในผลลัพธ์และพารามิเตอร์ที่สองเป็นฟังก์ชันการเรียกกลับซึ่งรวมถึงต้นแบบที่ถูกขัดจังหวะของเรา
เราเขียน 5 คำยืนยันซึ่งทั้งหมดนี้เป็นบูลีน การยืนยันบูลีนที่คาดว่าจะมีข้อโต้แย้งแรกที่เป็นจริง พารามิเตอร์ที่สองยังคงเป็นข้อความที่จะแสดงในผลลัพธ์
นี่คือสิ่งที่คุณต้องการได้รับตราบใดที่คุณทำการทดสอบ:
4. การอ้างอิงการเรียนรู้เชิงลึก
ข้างต้นเพียงแนะนำ qunnit.js สั้น ๆ และมีวิธีการยืนยันมากมาย สำหรับรายละเอียดโปรดดูเอกสาร API:
http://api.qunitjs.com/
การทดสอบหน่วยเป็นวิธีที่ดีมากในการทดสอบรหัสของคุณก่อนที่คุณจะเผยแพร่ หากคุณยังไม่ได้เขียนการทดสอบหน่วยใด ๆ มาก่อนตอนนี้เป็นเวลาเริ่มต้น!