มาสนุกกับการทดลองง่ายๆด้วย JavaScript กันเถอะ… Action!

สวัสดีครับท่านผู้สนใจในงานประดิษฐ์ซอฟแวร์ ที่ได้อ่านอยู่ในขณะนี้ วันนี้ผม จะมาแสดงตัวอย่างการทดลอง หรือการพิศูจน์แนวคิดอะไรก็แล้วแต่ที่เรากำลังให้ความสนใจอยู่ ด้วย JavaScript กันครับ

โดยเริ่มต้นด้วย แนวคิด 7 ขั้นตอนสร้างสิ่งประดิษฐ์แบบ #:P กันก่อน ขั้นตอนทั้ง 7 มีดังนี้

1 สงสัยใคร่รู้ หรือความปราถณาอยากได้ ในสิ่งหนึ่ง (คิด)

2 จินตนาการถึงการมีอยู่ และประโยชน์ที่จะได้รับจากของสิ่งหนึ่งนี้ (จินตนาการ)

3 พยายามสร้างแบบจำลองของ สิ่งหนึ่งนี้ ขึ้นมา (ทำ)

4 ทดลองพิสูจน์ หรือทดลองใช้  แบบจำลองของ สิ่งหนึ่งนี้ดู (ทดลอง)

5 สิ่งหนึ่งนี้ ใช้ประโยชน์ได้ดี นำไปประยุกต์ใช้ในโลกความจริงได้ (ขาย)

6 สิ่งหนึ่งนี้ ใช้การยังไม่ดีพอ กลับไปทำขั้นตอนที่ 3 (ปรับ)

7 สิ่งหนึ่งนี้ ใช้การไม่ได้เลย กลับไปขั้นตอนที่ 1 ใหม่ (สู้ต่อไป)

บทความนี้ผมก็จะเน้นความสนใจ ไปที่ขั้นตอนที่ 4 เลยนะครับ ซึ่งจะเริ่มต้นโดยเขียนชุดคำสั่งสำหรับทดสอบเป็น code JavaScript เพราะผมคิดว่า คุณสามารถเขียน code JavaScript  และทดลอง run มันดูบน browser อย่าง IE หรือ Chrome บนเครื่องของคุณเอง ตามผมมาได้เลยง่ายๆ

เริ่มต้นเขียนเครื่องมือทดสอบ(Test Suit)กันก่อน

ถ้าจะเปลี่ยบชุดทดสอบ ก็จะเปลียบได้กับอุปกรณ์ที่ เสียบเข้ากับชิ้นงานของเรา แล้วมันจะทำงานโดยการใช้งาน หรือ ทดสอบตัวชิ้นงานทั้งหมดให้เองอัตโนมัติ จนกระทั่งหมดกรณีทดสอบที่เราต้องการ แล้วมันก็จะแสดงผลการทดสอบนั้นออกมาให้เราเห็นได้ว่า ชิ้นงานของเราผ่าน หรือไม่ผ่านทุกๆกรณีการใช้หรือยัง

วงจรการทำงานของชุดทดสอบใดๆ กับสิ่งที่เราสนใจอยู่นั้น มีขั้นตอนดังนี้ครับ

1 Setup\Initialize\Given คือ การกำหนดบริบทเริ่มต้นต่างๆให้กับสิ่งที่เราสนใจเพื่อทดสอบ
2 Exercise\Test\When คือ ทำการทดสอบสิ่งที่เราสนใจนี้
3 Verify\Assert\Then คือ เมื่อทดสอบแล้ว สิ่งที่เราสนใจจะต้องได้ผลลัพย์อะไรออกมานั่นเอง

ต่อไปนี้ผมจะแสดงตัวอย่างง่ายๆ ของชุดทดสอบ code JavaScript โดยผมจะ sketch ให้เห็นเป็นลักษณะอุปกรณ์ทดสอบที่เห็นเป็นภาพได้ง่ายๆ เพื่อทดสอบ Math module ทั้งหมดนี้ แต่การสร้างชิ้นงานตาม sketch นั้นจริงๆแล้วเป็น code JavaScript ทั้งหมดเลยนะครับ

ภาพ sketch ข้างล่างนี้เป็นแบบจำลอง ตัวอย่างชุดอุปกรณ์ที่ใช้ทดสอบ Math module ชิ้นงานหนึ่ง

ดูภาพ sketch ประกอบไปด้วย อุปกรณ์หลักๆทั้งหมด 3 ชิ้น อันได้แก่

Test Suit แสดงเป็นรูปสี่เหลี่ยม 3 มิติ่นั่นคือ อุปกรณ์ทดสอบ มี dependency กับ อุปกรณ์เพื่อแสดงผล และ ตัวของชิ้นงาน Math module โดยผ่าน interface
Console แสดงเป็นรูปสี่เหลี่ยมอยู่ด้านขวา นั่นคืออุปกรณ์แสดงผลการทดสอบ ซึ่งจะต้อง implement interface เพื่อแสดงผล แล้วสามารถเชื่อต่อกับตัวอุปกรณ์ได้ interface เพื่อแสดงผล คือ Info และ Error
Math module แสดงเป็นรูปสี่เหลี่ยมอยู่ด้านล่าง เจ้าตัว module นี้จะ implement interface Math ง่ายๆ อันได้แก่ Add, Min, Max และ Pow เพื่อเชื่อมต่อกับ Test Suit ได้

ข้างล่างนี้เป็น code ของอุปกรณ์ Test Suit กับตัวแสดงผล Console ครับ

code Test Suit จะอยู่ใน file test-suite.html

—————————————————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Test-Suite</title>
<style>
#console li.pass {color: Green;}
#console li.fail {color: Red;}
</style>
</head>
<body>
<ul id=”display”></ul>
<script>

var Console = {
           display: null,
           createLi: function (desc, className) {
               var li = document.createElement(“li”);
               li.className = className;
               li.appendChild(document.createTextNode(desc));
               this.display.appendChild(li);
               return li;
           },
           info: function (desc) {
               var li = this.createLi(desc, “pass”);
               return li;
           },
           error: function (desc) {
               var li = this.createLi(desc, “fail”);
               li.parentNode.parentNode.className = “fail”;
               return li;
           }
 };

(function () {

this.verify = function verify(value, desc) {

if (value) {

return Console.info(desc);

}else {

return Console.error(desc);

}

};

this.exercise = function exercise (name, fn) {

Console.display = document.getElementById(“display”);
Console.display = verify(true, name).appendChild(document.createElement(“ul”));
fn();

};

})();

</script>
</body>
</html>
—————————————————————————————————

ตัวอักษรสีส้มๆนั่นคือตัว Console ที่ใช้แสดงผลทดสอบ โดยจะแสดงผลที่ tag HTML UL display บน browser โดยจะแสดงสีแดงกรณีทดสอบไม่ผ่าน(fail) และจะแสดงสีเขียวในกรณี ทดสอบผ่าน(pass)แล้ว ดูที่ function info กับ error ของ Console

ต่อไปเป็น code Math module ที่เป็นตัวชิ้นงานจริงๆกันละครับ module นี้ ก็เปลียบได้กับการผ่านขั้นตอนที่ 1, 2 และ 3 ของหลักการทั้ง 7 มาแล้ว

ต่อไปนี้คือ code JavaScript  ของ math module ง่ายๆ ที่เขียนเสร็จแล้ว หน้าตาเป็นแบบนี้ครับ

code Math module  จะอยู่ใน file math-module.js
—————————————————————————————————

var MathModule = {

add: function add(a, b) {return a + b;},
min: function min(a, b) {if (a <= b) return a;return b;},
max: function max(a, b) {if (a >= b) return a;return b;},
pow: function add(a, b) {return Math.pow(a, b);}

};

—————————————————————————————————

ขั้นตอนสุดท้ายละ เราก็มาทำการทดสอบ Math module กันเลย โดยเปิด file test-suit.html แล้วเสียบปลัก Math module เข้ามาใน Test Suit ครับ พร้อมทั้งเขียน test script เพื่อทดสอบ Math module ลงไปด้วย สำหรับตัวอย่างที่นี้ผมได้เขียน test script ในรูปแบบของ User Stories ครับ

ข้างล่างนี้คือ code test-suit.html ที่เพิ่มการทดสอบตัวชิ้นงานเข้าไปแล้ว

—————————————————————————————————

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Test-Suite</title>
<style>
#console li.pass {color: Green;}
#console li.fail {color: Red;}
</style>
</head>
<body>
<ul id=”display”></ul>
<script src=”math-module.js”></script>
<script>

var Console = {

display: null,
createLi: function (desc, className) {

var li = document.createElement(“li”);
li.className = className;
li.appendChild(document.createTextNode(desc));
this.display.appendChild(li);
return li;

},
info: function (desc) {

var li = this.createLi(desc, “pass”);
return li;

},
error: function (desc) {

var li = this.createLi(desc, “fail”);
li.parentNode.parentNode.className = “fail”;
return li;

}

};

(function () {

this.verify = function verify(value, desc) {

if (value) {

return Console.info(desc);

}else {

return Console.error(desc);

}

};

this.exercise = function exercise(name, fn) {

Console.display = document.getElementById(“display”);
Console.display = verify(true, name).appendChild(document.createElement(“ul”));
fn();

};

})();

  window.onload = function () {
           exercise(“As a Math Module, I want to add a and b so that I have a plus b.”, function () {
               verify(MathModule.add(2, 3) == 5, “SCENE-1: Given 2 and 3 when I call method add then I have 5.”);
               verify(MathModule.add(-1, -9) == -10, “SCENE-2: Given -1 and -9 when I call method add then I have -10.”);
           });
           exercise(“As a Math Module, I want to find minimum value a and b so that I have minimum value.”, function () {
               verify(MathModule.min(6, 2) == 2, “SCENE-1: Given 6 and 2 when I call method min then I have 2.”);
           });
           exercise(“As a Math Module, I want to find maximum value a and b so that I have maximum value.”, function () {
               verify(MathModule.max(10, 5) == 10, “SCENE-1: Given 10 and 5 when I call method max then I have 10.”);
           });
           exercise(“As a Math Module, I want to find power value a raised to power b so that I have power value.”, function () {
               verify(MathModule.pow(2, 2) == 4, “SCENE-1: Given 2 and 2 when I call method pow then I have 4.”);
               verify(MathModule.pow(4, 0.5) == 2, “SCENE-2: Given 4 and 0.5 when I call method pow then I have 2.”);
           });
       };

</script>
</body>
</html>

—————————————————————————————————

ตรงตัวอักษรสีแดงคือการอ้างอิง หรือเสมือนกับการปลัก math module ที่เป็นชิ้นงานเป้าหมายเพื่อทดสอบ เข้าไปกับตัวอุปกรณ์ทดสอบ(Test Suit) ของผมนั่นเองครับ

ส่วนตัวอักษรสีเขียวๆนั่นก็คือ test script ที่เขียนด้วย code JavaScript ในรูปแบบของ User Stories ครับ

เมือลอง run file Test Suit บน browser(ผมใช้ Chrome) ขึ้นมาดูตัว Test Suit จะแสดงผลทดสอบของผม ออกมาตามหน้าจอข้างล่างนี้เลยครับ

OK จบกันแค่นี้ละครับ สำหรับบทความ มาสนุกกับการทดลองง่ายๆด้วย JavaScript กันเถอะ… Action!

บทความนี้ เขียนแล้ว อยากจะให้มันสั้นๆ เข้าไว้นะครับ มันจึงเป็นบทความที่ เต็มไปด้วยความรู้ที่ซ่อนอยู่ และความไม่รู้ของผมที่ทำให้ผมเข้าใจผิดพลาดได้ ซึ่งมันอาจจะทำให้คุณผู้อ่านไม่เข้าใจได้ งงๆได้ ก็ส่งคำถามมาคุยกันได้นะครับ ผมจะได้รู้ และกลับมาแก้ไขบทความของผมนี้ให้ดีขึ้นต่อไป

ขอบคุณครับ
#:P

เพิ่มเติม:

  • ถ้าคุณเริ่มเข้าใจการทำงาน ของเจ้าตัวทดสอบนี้แล้ว ก็ไม่จำเป็นต้องเขียน Test Suit แบบนี้ขึ้นมาเอง เป็นสิ่งที่ดีกว่าโดยหยิบยืมของคนอื่นที่ทำดีอยู่แล้วมาใช้ ผมแนะนำ QUnit
  • Code Test Suit ปรับมาจากหนังสือ JavaScript Ninja

 

Advertisements

#agile-software-development, #javascript, #unit-test