[React Testing] ว่าง ๆ มาเริ่มเขียนชุดการทดสอบสำหรับ React กัน Part 2

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

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

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

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

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

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

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

คิดอะไรไม่ออกเขียนชุดการทดสอบก่อนเลย [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="test_01.js"] แน่นอนว่าผลการทดสอบต้องไม่ผ่านอย่างแน่นอน ดังนั้นเริ่มเขียน code เพื่อให้ชุดการทดสอบผ่าน ตรงนี้ก็เอาที่สบายใจนะครับ ว่าจะสวยงามกันอย่างไร สำหรับผมก็เขียนง่าย ๆ แบบนี้เพื่อให้ผ่านก็พอ [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="1.js"] หลังจากที่ชุดการทดสอบแรกผ่านไปแล้ว คำถามที่ใครหลาย ๆ คนน่าจะคิดคือ ชุดการทดสอบนี้มันไม่น่าเชื่อถือเลยนะ ? เนื่องจากทำการตรวจสอบแบบหลวม ๆ มาก คำตอบคือ ใช่แล้ว นั่นคือสิ่งที่นักพัฒนาต้องเพิ่มชุดการทดสอบ เพื่อทำให้เรามีความมั่นใจขึ้น ดังนั้นนักพัฒนาทั้งหลายลองหยุดคิดหน่อยสิว่า ต้องเพิ่มชุดการทดสอบอะไรบ้าง เน้นว่า เพื่อทำให้มั่นใจหน้าแรกของเครื่องคิดเลขนะ ยังไม่ต้องมี action หรือ event อะไรเลย จากนั้นก็ลงมือทำกันเลยนะ ผมมั่นใจว่า ทุก ๆ คนจะมีชุดการทดสอบที่แตกต่างกัน ดังนั้นอย่าลืมเอามา share กันนะ

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

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

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

เริ่มจากการเขียน Unit test ของการบวก ลบ คูณและหารกันก่อน จะเขียนบวกให้ดูกันก่อน [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="test_02.js"] ผลที่ได้จากการทดสอบคือ พังสิครับ !! เพราะว่า function plus() มันยังไม่มี ดังนั้นก็ทำการสร้างมันขึ้นมาและเขียน logic การทำงานดังนี้ [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="2.js"] ในตอนนี้เราก็จะมีชุดการทดสอบ 2 ตัวแล้วนะ

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

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

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

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

มาเริ่มเขียนชุดการทดสอบดีกว่า ทำสักตัวให้ดูคือ การบวกเลข 1 กับ 2 แน่นอนว่าต้องแสดงผลเป็น 3 ดังนี้ [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="test_03.js"]

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

ทั้งการจัดการข้อมูลของ input ทั้งสองตัว ทั้งการดักจับ action ของการกดปุ่มบวก ทั้งการใช้งาน state เพื่อจัดเก็บข้อมูลผลการบวก ซึ่งถือว่ามีหลายสิ่งอย่างมาก ๆ มาดูในแต่ละส่วนกัน ส่วนที่ 1 คือ constructor สำหรับกำหนดค่าต่าง ๆ ทั้ง state เริ่มต้น ทั้ง element ต่าง ๆ ทั้ง function สำหรับการดักจับ event ของการกดปุ่ม [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="3_1.js"] ส่วนที่ 2 คือส่วนของ function เมื่อทำการกดปุ่มบวก คือ onPlus() จะทำการแปลง input มาอยู่ในตัวเลขฐานสิบ จากนั้นทำการเรียกใช้งานการบวกเลขที่เขียนไว้ก่อนหน้าแล้ว เมื่อได้ผลลัพธ์จะทำการ update ค่าใน state ดังนี้ [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="3_2.js"] ส่วนที่ 3 คือส่วนการแสดงผลนั่นเอง [gist id="14c1928deed2f1adb94bcad4a834d7f2" file="3_3.js"] ในส่วนนี้ต้องค่อย ๆ ทำไปทีละขั้นตอนนะ แล้วจะได้ผลการทดสอบดังนี้

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

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

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

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

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

ใน Part ต่อไปเราจะมาลองทดสอบรูปแบบอื่น ๆ กันบ้างนะ ค่อย ๆ ทำ ค่อย ๆ เรียนรู้กันไปครับ Code ตัวอย่างอยู่ที่ Github::Up1::Workshop React Testing ขอให้สนุกกับการ coding ครับ