จาก Part ที่ 1 นั้นเริ่มด้วยการทดสอบระบบ web ด้วย library ชื่อว่า Enzyme
ซึ่งจะจำลองการทำงานของ React component ขึ้นมาให้
เราได้ทำการติดตั้ง configuration ตลอดจนเริ่มเขียนชุดการทดสอบแรกไปแล้ว
ใน Part 2 นี้จะเริ่มพัฒนาระบบเครื่องคิดเลขกัน
โดยจะพยายามเริ่มด้วยชุดการทดสอบ
หรือคิดก่อนว่าเราจะทำอะไร และ ต้องได้อะไรออกมา
แน่นอนว่ายังคงใช้ Enzyme นั่นเอง
มาเริ่มกันดีกว่า

สิ่งที่ต้องคิดและออกแบบก่อนคือ เครื่องคิดเลขของเราเป็นอย่างไร ?

ทั้ง feature และหน้าตาของระบบ
เพื่อความง่ายของระบบเลยให้มีความสามารถดังนี้

  • มีช่อง input ให้ใส่ 2 ตัว
  • สามารถเลือกบวก ลบ คูณและหารได้
  • แสดงผลของการทำงาน

ดังนั้นเรามาเริ่มกันดีกว่า

ขั้นตอนที่ 1 ในหน้าจอการทำงานของเครื่องคิดเลข ต้องมีอะไรบ้าง ?

  • ต้องมี form 1 form
  • ต้องมีช่องให้กรอกตัวเลข 2 ช่อง
  • ต้องมีปุ่มให้กดคือ บวก ลบ คูณหาร นั่นคือ 4 ปุ่ม
  • ต้องมีที่ว่างสำหรับการแสดงผลลัพธ์

คิดอะไรไม่ออกเขียนชุดการทดสอบก่อนเลย

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

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

ดังนั้นนักพัฒนาทั้งหลายลองหยุดคิดหน่อยสิว่า
ต้องเพิ่มชุดการทดสอบอะไรบ้าง
เน้นว่า เพื่อทำให้มั่นใจหน้าแรกของเครื่องคิดเลขนะ
ยังไม่ต้องมี action หรือ event อะไรเลย
จากนั้นก็ลงมือทำกันเลยนะ
ผมมั่นใจว่า ทุก ๆ คนจะมีชุดการทดสอบที่แตกต่างกัน
ดังนั้นอย่าลืมเอามา share กันนะ

ขั้นตอนที่ 2 เมื่อการแสดงผลเรามั่นใจแล้ว มาถึงการทำงานหลักกัน

ซึ่งมีเรื่องหลัก ๆ ให้คิดคือจะทดสอบอะไรดี
ในตอนนี้มี 2 ส่วนงานคือ
ส่วนที่ 1 การคำนวณบวก ลบ คูณและหาร นั่นคือ Unit test ปกติ
ส่วนที่ 2 การทดสอบกรอกข้อมูลผ่าน form จากนั้นเลือกการคำนวณและแสดงผลด้วย Enzyme

ในตอนนี้เรากำลังฝึกเชียนชุดการทดสอบ
ดังนั้นเขียนมันไปทั้งคู่เลยดีกว่า

เริ่มจากการเขียน Unit test ของการบวก ลบ คูณและหารกันก่อน
จะเขียนบวกให้ดูกันก่อน

ผลที่ได้จากการทดสอบคือ พังสิครับ !!
เพราะว่า function plus() มันยังไม่มี
ดังนั้นก็ทำการสร้างมันขึ้นมาและเขียน logic การทำงานดังนี้

ในตอนนี้เราก็จะมีชุดการทดสอบ 2 ตัวแล้วนะ

สิ่งที่ทุกคนต้องทำเพิ่มคือ ลบ คูณ หาร นะครับ
ให้ระวังตรงหารด้วยนะ เพราะว่า หารด้วยศูนย์ไม่ได้นะครับ !!
ลงมือทำกันได้เลยนะ

เมื่อเรียบร้อยแล้ว เรามาทดสอบการทำงานของ Calculator component ด้วย Enzyme กัน

เป็นการทดสอบมุมมองของคนใช้งานนั่นคือ

  • ทำการกรอกข้อมูลตัวเลข 2 ตัว
  • ทำการเลือกว่าจะทำอะไรระหว่าง บวก ลบ คูณ หาร นั่นคือการกดปุ่ม
  • แสดงผลการทำงาน

มาเริ่มเขียนชุดการทดสอบดีกว่า ทำสักตัวให้ดูคือ
การบวกเลข 1 กับ 2
แน่นอนว่าต้องแสดงผลเป็น 3 ดังนี้

สำหรับชุดการทดสอบนี้ บอกให้เราเริ่มพัฒนา React app แบบจริงจังแล้วนะ

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

ส่วนที่ 1 คือ constructor สำหรับกำหนดค่าต่าง ๆ
ทั้ง state เริ่มต้น
ทั้ง element ต่าง ๆ
ทั้ง function สำหรับการดักจับ event ของการกดปุ่ม

ส่วนที่ 2 คือส่วนของ function เมื่อทำการกดปุ่มบวก คือ onPlus()
จะทำการแปลง input มาอยู่ในตัวเลขฐานสิบ
จากนั้นทำการเรียกใช้งานการบวกเลขที่เขียนไว้ก่อนหน้าแล้ว
เมื่อได้ผลลัพธ์จะทำการ update ค่าใน state ดังนี้

ส่วนที่ 3 คือส่วนการแสดงผลนั่นเอง

ในส่วนนี้ต้องค่อย ๆ ทำไปทีละขั้นตอนนะ
แล้วจะได้ผลการทดสอบดังนี้

เมื่อผ่านแล้ว ลองเพิ่มชุดการทดสอบของ ลบ คูณและหารดูนะครับ

ผลการทำงานของระบบที่สร้าง หน้าตาง่าย ๆ แบบนี้

จะเห็นได้ว่า ชุดการทดสอบจะช่วยสร้างความมั่นใจในการพัฒนาระบบให้เรา

แต่กว่าจะมั่นใจได้ ก็ต้องใช้เวลาสำหรับการเรียนรู้วิธีการสักพัก
แต่คิดว่า ไม่น่ายากเท่าไร ต้องฝึก และ ฝึก และ ฝึก เท่านั้น

ปล. สังเกตไหมว่า เวลาในการทดสอบของแต่ละชุดการทดสอบมันแตกต่างกัน
นั่นคือสิ่งที่ต้องพึงระวังเมื่อจำนวนชุดการทดสอบเยอะขึ้น
มิเช่นนั้นการทดสอบจะใช้เวลานานมาก ๆ

ใน Part ต่อไปเราจะมาลองทดสอบรูปแบบอื่น ๆ กันบ้างนะ
ค่อย ๆ ทำ ค่อย ๆ เรียนรู้กันไปครับ

Code ตัวอย่างอยู่ที่ Github::Up1::Workshop React Testing

ขอให้สนุกกับการ coding ครับ