TDD is not the f*ucking red, green and blue Part 1

อ่าาาา จั่วหัวมาแบบนี้อาจได้กลิ่นดราม่าเล็กน้อยแบบว่า เอ๊ะมึงบ้าเปล่าที่เรียนกันมาก็แบบนี้ทั้งนั้น Search Google คำว่า TDD ก็มีรูปวงกลม 3 วง สีแดง(Fail) สีเขียว(Pass) สีน้ำเงิน(Refactor) แล้วจั่วหัวแบบนี้คืออะไรวะ แต่อย่าเพิ่งหัวเสียไปครับถ้าคุณเผลอกดเข้ามาอ่าน แสดงว่าคุณเป็นคนขี้สงสัย คุณมีความอยากรู้ คุณมีความอยากพัฒนาตัวเอง

ต่อไปนี้ผมจะอธิบายเป็นข้อๆไปว่าทำไมผมถึงคิดว่า TDD is not the fucking red, green and blue จากประสบการณ์ส่วนตัวของผมเอง ซึ่งจะตอบข้อสงสัยของคุณได้หรือไม่นั้น..มาดูกัน

บทความนี้ไม่ขอเคลมว่าถูกต้อง 100% และมีคำหยาบคาย โปรดใช้จักรยานในการอ่าน ผ่ามมม วิจารณญาณในการอ่าน และผู้อ่านควรเข้าใจเรื่อง unit test มาบ้างนะ

มึง…….กูรู้สึกว่างเปล่าเมื่ออยู่ในหน้าจอ test ( 2 สิ่งที่ต้องนึกถึง )

สิ่งหนึ่งที่ผมรู้สึกเมื่อตัวเองอยู่หน้าจอ test ก็คือความว่างเปล่าว่าจะทำอะไรต่อดีมันมืดไปหมด ลองเขียน function test_foo_bar แล้วรันให้มันเขียวเล่นจากนั้นโพสลง social ว่ากูเนี่ยเขียนได้ แต่แล้วยังไงต่อวะ ทำไปทำไม ทำไปเพื่ออะไร….

เนื่องจาก TDD ต้องเขียนเทสก่อนตามชื่อมัน Test Driven Development แล้ว ในตอนนี้ production code ก็ยังไม่มีอะไรเลยซักบรรทัดแล้วเราจะ test อะไรวะ
จากประสบกาณณ์ของผมจะมี 2 สิ่งที่ต้องนึกถึงอยู่เสมอก่อนจะทำ TDD คือ

1. UI อ่ะมีหรือยังไปทำ UI ให้เสร็จก่อนซึ่งจากประสบการณ์แล้ว การทำ TDD ไปพร้อมกับ UI ไม่ work ปวดหัวเกิน และเหตุผลอีกอย่างที่ควรทำ UI ให้เสร็จก่อนคือในระหว่างทำ UI หัวของคุณก็จะคิดภาพไปด้วยว่าจะออกแบบ logic ออกมาเป็นยังไงดี
2. Spec อ่ะมีหรือยัง Spec ก็คือพวก FlowChart, UserStory, Acceptance criteria หรือห่าเหวอะไรก็ได้ที่บอกว่า Feature นี้มันทำงานยังไงโดยละเอียดนะ พยายามรวบรวมมาให้ได้มากที่สุด

พอของสองอย่างนี้พร้อมแล้วเราก็ไปเขียน Test กันได้เลยครับ

และพระเอกของเราก็คือ Spec นั่นเองงงงงงงงงงงงง และปกติมันก็จะบอกรายละเอียดว่า Feature นี้มันทำงานยังไงเช่น

“เมื่อกดปุ่ม ok ให้แสดง popup”
“ถ้า list ของสินค้าเกิน 10 อันให้แสดง 10 อันพอและ filter สินค้าที่หมดอายุออก”
“ถ้า api ส่ง type = red แสดงรูปภาพสีแดง”
“ถ้า user setting ภาษาอังกฤษไว้ เวลา render UI ให้แสดง text ของปุ่มว่า OK ”
“ถ้า user setting ภาษาไทยไว้ เวลา render UI ให้แสดง text ของปุ่มว่า ตกลง”
“ถ้า user เห็น popup ครั้งนึงแล้วครั้งต่อไปไม่ต้องแสดง popup อีก”

พอจะนึกออกกันปะ ถ้ายิ่งได้ FlowChart ดีๆละเอียดๆ มาซักอันถือว่าเป็นบุญหัว
ทีนี้พอได้ spec แบบนี้มาแล้วยังไงต่อ ให้สังเกตุที่ spec ของเรามักจะใส่ condition มาเสมอ เช่น ถ้า…ให้ทำ… หรือ เมื่อ… ให้ทำ … เราก็จะเอาตรงนี้เนี่ยแหล่ะมาเขียน test กัน

“ถ้า list ของสินค้าเกิน 10 อันให้แสดง 10 อันพอและ filter สินค้าที่หมดอายุออก”

เริ่มจากการเขียน function test เปล่าๆก่อนโดยยังไม่ต้อง implement อะไร
ซึ่ง Given When Then คือ pattern การเขียน test ที่ผมใช้อยู่เสมอเพื่อให้อ่านง่ายและรู้ได้ทันทีว่า test ตัวนี้ทำอะไร

Given : SetProduct20Items (ถ้า list ของสินค้าเกิน 10 อัน)
When : GetProduct (สินค้า)
Then : ShouldShowOnly10ItemWithoutExpired (แสดง 10 อันพอและ filter สินค้าที่หมดอายุออก)

ขอสรุปใน part1 ว่าเรามี 2 สิ่งที่ต้องนึกถึงก่อนทำ TDD คือ UI ที่จะทำให้เราเห็นภาพ flow ของ feature ในหัวคร่าวๆ และ Spec จะเป็นสิ่งที่คอยนำทางเราว่าจะทำอะไรต่อไป ซึ่งตอนหน้าเราจะมาลอง implement กัน