มาเขียน Transform Testing ให้กับโค้ดของเรากันเถอะ!

ในบทความนี้เราจะพาทำ Transform data ที่ได้มาจาก API เพื่อใช้งานในฝั่ง Frontend (หน้าบ้าน) แล้วเขียนเทสคลุมด้วย Jest (Javascript Testing Framework)

เกริ่นก่อนว่าทำไมเราต้องทำ Transform raw data ที่ได้มาจาก API?

นี่คือชุดข้อมูลของเราที่ได้รับมาจาก API หน้าตาแบบนี้เลย

ในภาษา Javascript นั้น การประกาศชื่อตัวแปรมักจะนิยมใช้แบบ camelCase (กรณีที่ตัวแปรมีหลายพยางค์ — พยางค์แรกจะขึ้นต้นด้วยตัวอักษรเล็กและพยางค์ถัดไปจะขึ้นต้นด้วยตัวอักษรใหญ่) ในบริษัท Maqe ก็ใช้ rule นี้นะ :D

ดังนั้นก่อนที่เราจะเอา data เหล่านี้มาใช้งาน เราต้องนำมันไปผ่านกระบวนการที่เรียกว่า Transform data ก่อน ซึ่งทำได้ง่ายๆโดยการสร้าง function ขึ้นมา แล้วเปลี่ยนชื่อตัวแปรของ data กลับไปในรูปแบบที่เราต้องการใช้งาน

เปลี่ยนชื่อ key ซะ!

จากนั้นเราก็จะได้ data ที่พร้อมเอาไปใช้งานในฝั่งหน้าบ้านแล้ว :)

กลับมาที่เรื่องของการทำ Transform testing ทำไมต้องทำ? เขียน Unit test เพื่อเทสผลลัพท์ของ Logic ต่างๆอย่างเดียวไม่ได้หรอ?

ขอยกตัวอย่างการทำงานให้เห็นภาพดังนี้

มีอยู่วันหนึ่ง Backend Developer นามว่า “นายบอย” ทำการแก้โค้ดด้านบน จากตัวแปรที่ชื่อว่า display_name เป็น name

Frontend, QA ถึงกับกรีดร้องและอุทานออกมาว่า คุณพระ!! เพราะโค้ดที่ฝั่งหน้าบ้านพังเรียบร้อยตอนที่เรียกใช้งานตัวแปร profile.displayName …กว่าจะรู้ก็สายเกินไป หากไม่มีการเขียนเทสคลุมไว้

เรามาเริ่มเขียนเทสโดยใช้ Jest กันเถอะ!

จากโค้ดด้านบน เราเขียนเทสเพื่อทำการทดสอบว่า ฟังก์ชัน transformProfileData ทำการ transform data จาก API ได้ถูกต้องตาม structure ที่เราต้องการนำไปใช้งานไหม โดยมีหลักการเทสดังนี้

1. Key ต้องถูกต้องทั้งขาเข้าจาก API และขา Return ออก — เช่น Key จาก API เข้ามาเป็น display_name Key ที่ออกมาต้องเป็น displayName เท่านั้น
2. ชนิดของข้อมูลต้องถูกต้อง — ชนิดข้อมูลเข้ามาเป็น String ชนิดของข้อมูลที่ออกมาต้องเป็น String เท่านั้น

ผลลัพท์ที่ได้จากการเทส :D

เรามาลองเปลี่ยน Key จากฝั่ง API กัน

จาก display_name เป็น name

ฟังก์ชัน transformDataหาคีย์ที่ชื่อว่า display_name ไม่เจอ จึงคืนค่าออกมาเป็น undefined

ทำให้เทสของเราที่คาดหวังว่าค่าที่ควรจะได้จาก displayName ต้องเป็น String นั้นพังทันที 🔥 (ต้องดีใจหรือเสียใจที่เทสพังนะ 😅 )

ซึ่งถ้าเรารันเทสทุกๆครั้งก่อนนำ feature deploy ขึ้นไปที่ UAT หรือ Production ก็จะช่วยให้เราสามารถลด Bug ได้มหาศาลทีเดียว

ดังนั้นถ้าเรารู้ว่ามีไฟไหม้เร็วเท่าไหร่ (หรือเตรียมตัวให้พร้อมเสมอ ถังดับเพลิงอยู่ในมือตลอดเวลา) เราก็จะสามารถควบคุมเหตุการณ์ให้เกิดความเสียหายน้อยที่สุด หรือไม่เกิดขึ้นเลย ทีมแฮปปี้ ลูกค้าก็แฮปปี้ เพราะงั้นเรามาเขียนเทสกันเถอะ :)

References

• Getting started with jest (https://jestjs.io/docs/en/getting-started)
• Jest expect (https://jestjs.io/docs/en/expect#toequalvalue)