แนะนำ QUnit Testing Framework สำหรับ Test JavaScript

ณ ตอนนี้เทคโนโลยี web เดินมาไกลมาซึ่งตอนนี้ html สามารถทำได้หลายอย่างแต่สิ่งที่พัฒนามาพร้อมกันคือ javascript ซึ่งหากการพัฒนา javascript ที่มีการทำงานซับซ้อนมากนั้นสิ่งที่จำเป็นก็คือการทดสอบความถูกต้อง และในแต่ละภาษานั้นก็จะมีวิธีและ tool ในการทดสอบที่ต่างกัน และวันนี้ผมขอแนะนำเครื่องมือในการทดสอบ javascript ที่มีชื่อว่า QUnit ซึ่งผมว่าค่อยข้าง config เริ่มการใช้งานอย่างเลยที่เดียวขั้นแรกก็คือให้เริ่มทำการดาวโหลดไฟล์จากเว็บ

qunit

http://qunitjs.com/ ซึ่งจะแบ่งออกเป็น 2 ไฟล์คือ  qunit-1.9.0.js และ qunit-1.9.0.css ซึ่ง 1.9.0 นี้เป็นเลข version ซึ่งในอนาคตมันจะเปลี่ยนแน่นอนนะครับ ต่อมาก็เริ่มการใช้งานกันเลยดีกว่า ขั้นแรกก็นำไฟล์ทั้ง 2 ไปไว้ในที่เราต้องการจะทดสอบ โดยของผมจะสร้าง folder ที่ชื่อว่า qunit แล้วนำไฟล์ทั้ง 2 ไปไว้ จากนั้นผมก็สร้างไฟล์ myfuncion.js ขึ้นซึ่งจะเป็นไฟล์ที่เก็บ function ที่ต้องการทดสอบ จากนั้นก็จะสร้างอีกไฟล์คือ tests.js ซึ่งจะเป็นไฟล์ที่เก็บ test case สำหรับทดสอบการทำงานของ function ในไฟล์ myfunction.js สุดท้ายคือไฟล์ html ธรรมดาจะเป็นไฟล์ที่แสดงผลการทดสอบซึ่งผมตั้งชื่อว่า output.html

จะมีโค้ดดังนี้
[sourcecode language=”html”]

QUnit – Thaicoding.net


[/sourcecode]

 

สังเกตว่าจะมีการสร้าง div ขึ้นมาโดยที่มี ID เป็น qunit เพราะเจ้า QUnit นี้จะแสดงผลการทดสอบใน div นี้นั้นเอง แล้วส่วนที่เหลือก็จะเป็น tag script เพื่อนำไฟล์ที่เกี่ยวข้องเข้ามา ต่อมาเราดูไฟล์ myfunction.js กันต่อดีกว่าในนี้จะเก็บฟังก์ชันที่ต้องการทดสอบโดยในนี้จะมีฟังก์ชั่นอยู่ 2 ตัวครับโดยมีโค้ดดังนี้

[sourcecode language=”js”]
function isEven(number)
{
if(number % 2 == 0)
{
return true;
}
else
{
return false;
}
}

function isOdd(number)
{
if(number % 2 == 1)
{
return true;
}
else
{
return false;
}
}
[/sourcecode]

ซึ่งจะมีฟังก์ชั่น isEven และ isOdd สำหรับทดสอบว่าเป็นเลขคู่หรือเลขคี่ จากนั้นเราก็มาดูไฟล์ที่จะเขียนกรณีทดสอบคือไฟล์ tests.js  โดยขั้นแรกผมจะเขียนกรณีทดสอบเฉพาะ function isEven ก่อน

โดยมีโค้ดดังนี้ครับ
[sourcecode language=”js”]
test(‘isEven()’, function() {
ok(isEven(0), ‘pass 0 to function isEven’);
ok(isEven(2), ‘pass 2 to function isEven’);
ok(isEven(-4), ‘pass -4 to function isEven’);
ok(!isEven(1), ‘pass 1 to function isEven’);
ok(isEven(3), ‘pass 3 to function isEven’);
})
[/sourcecode]

ใช้ Qunit
จากผลลัพธ์จะเห็นว่ามีการส่งค่าตัวเลขที่แตกต่างกันและจะแสดงเป็นสีแดงเมื่อฟังก์ isEve คืนค่า false มาให้และในกรณีที่เกิด Error มันก็จะแสดงสีแดงเหมือนกันนะครับ ต่อมาจะลองมาทดสอบการเปรียบเทียบค่าบ้างโดยให้เปลี่ยนโค้ดใน tests.js เป็นดังนี้ครับ
[sourcecode language=”js”]
test(‘assertions’, function() {
ok( 1 == 1, ‘one equals one’);
})
[/sourcecode]

ใช้ Qunit

จะเห็นว่าเราสามารถใช้ QUnit สำหรับทดสอบการเท่ากันหรือแตกต่างกันของค่าได้ และสุดท้ายในกรณีที่เราจะทดสอบการทำงานหลาย function พร้อมกันทำยังไงละ ? คำตอบก็คือให้ใช้คำสั่ง module(‘ชื่อที่ต้องการ’); แล้วตามด้วยคำสั่ง test ครับโดยมีโค้ดดังนี้ครับ
[sourcecode language=”js”]

module(‘Module A’);
test(‘isEven()’, function() {
ok(isEven(0), ‘pass 0 to function isEven’);
ok(isEven(2), ‘pass 2 to function isEven’);
ok(isEven(-4), ‘pass -4 to function isEven’);
ok(!isEven(1), ‘pass 1 to function isEven’);
ok(isEven(3), ‘pass 3 to function isEven’);
})

module(‘Module B’);
test(‘isOdd()’, function() {
ok(isOdd(5), ‘pass 5 to function isOdd’);
ok(isOdd(3), ‘pass 3 to function isOdd’);
ok(isOdd(7), ‘pass 7 to function isOdd’);
ok(!isOdd(1), ‘pass 1 to function isOdd’);
ok(isOdd(3), ‘pass 3 to function isOdd’);
})

module(‘Module C’);
test(‘assertions’, function() {
ok( 1 == 1, ‘one equals one’);
})

[/sourcecode]

ใช้ Qunit

จากผลลัพธ์จะเห็นผลการทดสอบจะแบ่งออกเป็นชุดตามนี้เราใช้คำสั่ง module ซึ่งจะทำให้สามารถทดสอบการทำงานได้หลายฟังก์ชั่นพร้อมกัน และนี้เป็นวิธีการใช้งาน Qunit เบื้องต้น แต่มันสามารถทดสอบได้หลายนะครับทั้งการทดสอบ Asynchronous ซึ่งเป็นการใช้งานอีกอย่าง 1 ที่น่าสนใจลองศึกษากันดูนะครับ

Download SourceCode

Leave a Reply

Your email address will not be published. Required fields are marked *