Afgu/unit testing 1

หน้านีเป็นส่วนหนึ่งของชุดแบบฝึกหัด Agile from the ground up

เราใช้หัดเขียน unit test บน java script ซึ่งเป็นภาษาที่ทุกคนน่าจะสามารถเรียกให้ทำงานได้ ในครั้งแรกเราจะเน้นให้เข้าใจว่า unit test คืออะไร และสามารถเขียน unit test แบบทั่วไปได้ ในครั้งถัด ๆ ไปเราจะศึกษาเทคนิคเพิ่มเติมเช่นการทำ isolation รวมไปถึงการเขียน unit test ที่ดี

เราสามารถทำ unit testing ได้โดยไม่ต้องใช้ framework ใด ๆ เลยก็ได้ แต่ในที่นี้เราจะใช้ mocha เป็น framework mocha รองรับไลบรารีการ assert/expect ได้หลายแบบ เราเลือกใช้ chai นอกจากนี้ mocha ยังต้องการใช้ jquery ในการแสดงผล เราจึงต้องเรียก jquery ด้วย

ไลบรารีที่ใช้:

• mocha
• Chai Assertion Library
• jQuery

ที่เราเลือกใช้ mocha และ Chai นั้นเป็นตามรสนิยมผู้สอน ในการใช้งานจริง แนะนำให้เลือกไลบรารี/เฟรมเวิร์คที่ชอบตามสะดวก

โครงสร้างไดเร็กทอรี

ในแต่ละตัวอย่างและแบบฝึกหัดที่เราจะเขียน เราจะใช้โครงสร้างไดเร็กทอรีดังนี้

- project/
  - *.js  (ไฟล์ js ของ project)
  - test/
    - index-test.html
    - test.js    (เก็บโค้ดสำหรับ test)
    - lib/
      - mocha.js
      - mocha.css
      - chai.js
      - jquery.js

สามารถดาวน์โหลด template ดังกล่าวได้: project.tgz, project.zip และเปลี่ยนชื่อไดเร็กทอรีตามความเหมาะสม

ตัวอย่าง

เราต้องการเขียนฟังก์ชัน

function cirIntersect(x1, y1, r1, x2, y2, r2) {
}

ที่รับข้อมูล

• วงกลมวงแรก ที่มีจุดศูนย์กลางที่ตำแหน่ง (x1,y1) รัศมี r1 และ
• วงกลมวงที่สอง ที่มีจุดศูนย์กลางที่ตำแหน่ง (x2,y2) รัศมี r2

จากนั้นคืนค่า

• true ถ้าวงกลมทั้งสองวงมีเส้นรอบวงที่ตัดกันหรือสัมผัสกัน (ถ้าวงกลมที่ซ้อนกันโดยที่วงเล็กอยู่ภายในวงใหญ่โดยไม่สัมผัสกันเลยจะไม่นับ)

สมมติว่ามีคนเขียนฟังก์ชันดังกล่าวมาให้เรา เราจะ "ทดสอบ" อะไรบ้าง ที่ทำให้เราเชื่อได้ว่าฟังก์ชันดังกล่าวทำงานได้ถูกต้อง?

กรณีทดสอบตัวอย่าง

ตัวอย่างหนึ่งที่เราทดสอบได้คือกรณีที่วงกลมสองวงห่างกันมาก ๆ จนเส้นรอบวงไม่ทับกัน (เราควรวาดรูปประกอบด้วย)

กรณี	กรณีที่ทดสอบ	x1	y1	r1	x2	y2	r2	return
1	วงกลมห่างกัน	0	0	10	100	0	10	false

ใน test.js เราจะอธิบายกรณีทดสอบนี้ได้ดังนี้

describe('cirIntersect', function(){

  it('should return false when two circles are far apart', function(){
    assert(cirIntersect(0,0,10,100,0,10) == false);
  });

});

ในส่วนด้านบนเราระบุ:

• describe ระบุว่าจะอธิบายอะไร
• it (should) ระบุว่าสิ่งที่จะอธิบายจะต้องทำอะไรได้
• function ที่ระบุใน it นั้นเป็นโค้ดสำหรับทดสอบว่าสิ่งที่จะอธิบาย ทำสิ่งที่ระบุได้
• assert เป็น "เงื่อนไข" ที่เราจะทดสอบ

เขียนโค้ด

สังเกตว่าเรายังไม่ได้เขียนโค้ดอะไรเลยของฟังก์ชัน cirIntersect เราลองใช้ browser เปิด index-test.html เราจะเห็นว่าโปรแกรมของเรายังไม่ผ่านการทดสอบดังกล่าว

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

เราอาจจะเขียนฟังก์ชันดังกล่าวดังนี้

function cirIntersect(x1, y1, r1, x2, y2, r2) {
  return false;
}

แต่เรามองแว่บเดียวก็เห็นแล้วว่าฟังก์ชันดังกล่าวทำงานไม่ถูกแน่ ๆ แต่ถ้ากรณีทดสอบเรามีแค่ข้อเดียวดังข้างต้น เราก็ไม่สามารถบอกได้ว่าโค้ดขำ ๆ ข้างบนนี้ทำงานผิดพลาด

กรณีที่ตัดกันแบบง่าย ๆ

เราจะเพิ่มกรณีง่าย ๆ ที่เรานึกออก โดยให้วงกลมใหญ่หน่อยและตัดกัน

กรณี	กรณีที่ทดสอบ	x1	y1	r1	x2	y2	r2	return
2	วงกลมตัดกันบนแกน x	0	0	10	15	0	10	true

และเพิ่มโค้ดใน test.js เป็น

describe('cirIntersect', function(){

  it('should return false when two circles are far apart', function(){
    assert(cirIntersect(0,0,10,100,0,10)==false);
  });

  it('should return true when two circles on the x-axis intersect', function(){
    assert(cirIntersect(0,0,10,15,0,10)==true);
  });
});

เราสามารถแก้โค้ดให้ทำงานผ่านได้ง่าย ๆ โดยเปรียบเทียบระยะทางแกน x ได้ดังด้านล่าง

function cirIntersect(x1, y1, r1, x2, y2, r2) {
  return Math.abs(x2 - x1) < (r1+r2);
}

โค้ดถูกต้องหรือยัง? แน่นอนว่ายัง...

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

เพิ่มกรณีทดสอบ

โค้ดเรายังทำงานไม่ถูก แต่เราจะทำอย่างไรให้ทำงานถูกต้อง เราจะใช้กรณีทดสอบบังคับโค้ดให้ทำงานให้ถูกต้อง

ลองเขียนกรณีทดสอบเพิ่ม โดยระบุในส่วน it('.....',function(){}); ดังตัวอย่าง:

describe('cirIntersect', function(){
  // ...
  it('should blah blah', function(){
    // ...
  });
});

และสลับไปเขียนโค้ดให้ทำงานผ่าน ถ้าโค้ดทำงานผ่านอยู่แล้วก็ไม่ต้องแก้ไขอะไร

แบบฝึกหัด 0: การแปลงวันที่

ในการพัฒนาโปรแกรมหลาย ๆ แบบเราต้องการรับ "วันที่" จากผู้ใช้ อย่างไรก็ตามรูปแบบในการป้อนวันที่มีหลากหลาย และไม่ใช่ว่าการกางปฏิทินให้ผู้ใช้กดจะเป็นทางเลือกที่ดีเสมอไป ใน JavaScript มีคลาส Date แต่เมทอดสำหรับแปลงวันที่จากสตริงนั้นค่อนข้างมีขอบเขตที่จำกัด และถ้าสตริงเป็นวันที่ภาษาไทย เช่น 11 พ.ย. 56 เมทอดนี้คงจะทำงานไม่ได้แน่ ๆ เราต้องการเขียนฟังก์ชัน

function toDate(str) {}

ที่รับสตริงและคืนค่าเป็น Date

ตัวอย่างแรก

อย่างน้อยฟังก์ชันของเราควรจะแปลสตริงแบบมาตรฐาน (ที่ Date แปลงได้) เป็นวันที่ให้ได้ก่อน เราเขียนอธิบายใน test.js ดังนี้

describe('toDate', function(){
  it('should convert date in YYYY-MM-DD format', function(){
    var d = toDate('2013-11-12');
    var correctDate = new Date(2013,10,12);
    assert(d == correctDate);
  });
});

หมายเหตุ: Date รับพารามิเตอร์ month โดยเริ่มที่ 0 ดังนั้นเดือนพฤศจิกายน จะมีค่าเป็น 10 (ไม่ใช่ 11)

จากนั้นไปแก้ฟังก์ชัน toDate (ใน project.js หรือในไฟล์อื่น) เป็น

function toDate(str) {
  return new Date(str);
}

ทดลองรันเราจะพบว่า test เรายังไม่ผ่าน ทั้งนี้เนื่องมาจากการเปรียบเทียบวันที่โดยเครื่องหมาย == นั้น ทำไม่ได้ เราต้องแก้โค้ดใน test.js ใหม่ ให้เป็นดังนี้

describe('toDate', function(){
  it('should convert date in YYYY-MM-DD format', function(){
    var d = toDate('2013-11-12');
    var correctDate = new Date(2013,10,12);
    assert.equal(d.toDateString(),correctDate.toDateString());
  });
});

หมายเหตุ: เราเรียก toDateString() เพื่อป้องกันปัญหาพวก time-zone ด้วย ในการพัฒนาโปรแกรมจริง ๆ เราจะต้องคำนึงถึงปัญหาดังกล่าวมากกว่าในตัวอย่างง่าย ๆ ที่เราใช้ฝึกหัดนี้

ตัวอย่างที่สอง

เราลองเพิ่มรูปแบบของวันที่ภาษาอังกฤษที่ซับซ้อนเข้าไป

describe('toDate', function(){
  it('should convert date in YYYY-MM-DD format', function(){
    var d = toDate('2013-11-12');
    var correctDate = new Date(2013,10,12);
    assert.equal(d.toDateString(), correctDate.toDateString());
  });

  it('should convert date in DD Month YYY format', function(){
    var d = toDate('12 Nov 2013');
    var correctDate = new Date(2013,10,12);
    assert.equal(d.toDateString(), correctDate.toDateString());
  });
});

ปรากฏว่าโค้ดเดิมของเราทำงานได้ ดังนั้นเราจึงไม่ต้องแก้โค้ดแต่อย่างใด

ความซ้ำซาก: หลักการ DRY (Don't Repeat Yourself)

ในโค้ดข้างต้น ถ้าเราสังเกตดี ๆ จะมีความไม่น่าพิศมัยหลายอย่าง เช่น

• เราพบว่าเรามีการสร้าง correctDate หลายครั้ง
• ในการตรวจสอบวันที่ เรายังมีโค้ดสำหรับแปลง toDateString ปรากฏอยู่ทั่วไป
• ชื่อตัวแปร correctDate ไม่ได้สื่อความหมายอะไรเท่าใด (คือ จรึง ๆ มันก็พอจะสื่อความหมายอยู่ "บ้าง" แต่ในที่นี้เราดูชื่อตัวแปรแล้วไม่ทราบว่าวันที่ต้องเป็นเท่าใดถึงจะถูกต้อง)

สิ่งที่ไม่น่าพิศมัยสองข้อแรกนั้น เกิดจากการที่เรามีโค้ดสำหรับแนวคิดหนึ่งปรากฏอยู่หลายที่ (Repeat Yourself) ทำให้ถ้าเรา (หรือคนอื่น) ต้องปรับแก้ เราต้องตามไปแก้ทุกที่ ซึ่งมีความเสี่ยงอย่างมากที่จะแก้ขาดหรือแก้เกิน

หลักการหนึ่งที่อธิบายเกี่ยวกับปรากฏการณ์นี้เรียกว่า

DRY: Don't Repeat Yourself

ในความเห็นผม ถ้าคุณจะยึดถือหลักการเดียวในการพัฒนาซอฟต์แวร์ ก็ควรจะเป็นหลักการนี้

เราจะปรับโค้ดใน test.js ใหม่ เพื่อปรับแก้ปัญหาดังกล่าว ดังนี้

describe('toDate', function(){

  var nov12_2013 = new Date(2013,10,12);
  
  it('should convert date in YYYY-MM-DD format', function(){
    var d = toDate('2013-11-12');
    assertDateEqual(d, nov12_2013);
  });

  it('should convert date in DD Month YYY format', function(){
    var d = toDate('12 Nov 2013');
    assertDateEqual(d, nov12_2013);
  });

  function assertDateEqual(dateActual, dateExpected, message){
    assert.equal(dateActual.toDateString(),
                 dateExpected.toDateString(),
                 message);
  }
});

หมายเหตุ: ใน javascript ถ้าเราประกาศฟังก์ชันที่ตำแหน่งใด scope ฟังก์ชันนั้นจะถูกขยายไปจนถึงขอบบนของ scope นัั้น นั่นคือสาเหตุว่าทำไมเราสามารถเรียกใช้ assertDateEqual ได้ตั้งแต่ต้นโปรแกรม ทั้ง ๆ ที่เราประกาศฟังก์ชันนี้ไว้ตอนท้าย

วันที่ภาษาไทย

เราจะเพิ่มอีกตัวอย่างที่เป็นวันที่ภาษาไทย

describe('toDate', function(){
  // ...

  it('should convert date in วว เดือน พศพศ format', function(){
    var d = toDate('12 พฤศจิกายน 2556');
    assertDateEqual(d, nov12_2013);
  });

  // ...
});

แล้วก็กลับไปแก้ toDate ให้ผ่าน...

วนเวียนเป็นวงรอบไปเรื่อย ๆ

แบบฝึกหัด 1a: วงกลมตัดกับสี่เหลี่ยม

เขียนฟังก์ชั่น

function cirRectIntersect(xc,yc,rc,x1,y1,x2,y2) {}

ที่รับข้อมูลของวงกลมที่มีจุดศูนย์กลางที่ (xc,yc) มีรัศมี rc กับสี่เหลี่ยมที่มีมุมบนซ้ายที่ (x1,y1) มุมล่างขวาที่ (x2,y2) จากนั้นคืนค่า true ถ้าเส้นรอบรูปของวงกลมกับสี่เหลี่ยมสัมผัสกัน

แบบฝึกหัด 1b: สถานะเกม OX

เขียนฟังก์ชัน

function OXStatus(board) {}

แบบฝึกหัด 2: วัตถุและสถานะ - Tennis Game

จาก KataTennis ที่ Coding Dojo