ว่าด้วยเรื่องของ Widget testing ใน Flutter

สำหรับระบบงานที่พัฒนาด้วย Flutter นั้น
เมื่อทำการสร้าง project ใหม่ขึ้นมา
จะพบว่าจะมี folder test มาให้ด้วยเสมอ
พร้อม test case เริ่มต้นมาให้

แต่จากที่เห็นหลาย ๆ project ก็จะไม่มี test case อะไรเพิ่มขึ้นเลย
หนักกว่านั้นทำการลบทิ้งไปอีก !!
ทำไมนะ ?
ทดสอบระบบงานกันแบบไหนนะ ?

ใน Flutter นั้นจะเตรียมเอกสารในการทดสอบไว้ให้แล้ว

อยู่ที่ Flutter Testing มีใครอ่านและทำบ้างยกมือขึ้น !!!
ประกอบไปด้วย

• Unit testing
• Widget testing
• Integration testing

รวมไปถึง Continuous Integration กันเลยทีเดียว ครบถ้วนมาก ๆ

แต่จากที่พัฒนาระบบงานมาพบว่า Widget testing นั้นมีประโยชน์มากพอสมควร

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

สิ่งที่ทำได้ใน Widget testing ประกอบไปด้วย

• การทดสอบในแต่ละ widget แยกกันไปเลย
• ตรวจสอบการแสดงผล
• สามารถ interact กับ widget ได้ เช่น tab, drag และ กรอกข้อมูล

โดยการทำงานต่าง ๆ ด้วย class WidgetTester ที่ทาง Flutter เตรียมไว้ให้แล้ว

ตัวอย่างของ Test ที่เตรียมไว้ให้เมื่อสร้าง project ใหม่

[gist id="0c54da80f30a01d467a006678f7d2dff" file="widget_test.dart"]

คำอธิบาย

• จะสร้าง test case ผ่าน method testWidgets()
• ในแต่ละ test case จะม่การ inject WidgetTester มาให้เสมอ
• การทำงานจะเป็นแบบ asynchronous ดังนั้นรูปแบบการเขียนจึงเป็น async-await
• WidgetTester จะทำการจำลอง environment ของ flutter ขึ้นมา โดยไม่ใช้งาน device จริง ๆ
• ปัญหาของการจำลองคือ เรื่องของ state จะพบว่าไปเปลี่ยน ดังนั้นในการทดสอบต้องใช้ method pump() เข้ามา เพื่อให้ widget ทำการ render ตามค่าที่เปลี่ยนแปลงไปนั่นเอง
• การทดสอบจะมี 3 ขั้นตอนคือ หา และสร้าง widget ที่ต้องการทดสอบ ต่อมาทำการ interact กับ UI นั้น ๆ สุดท้ายก็ตรวจสอบผลการทำงาน ว่าเป็นไปตามที่คาดหวังหรือไม่

ทำการ run test ง่าย ๆ ด้วยคำสั่ง testและมี coverage ให้ด้วย

[gist id="0c54da80f30a01d467a006678f7d2dff" file="1.txt"]

โดยในแต่ละ test case นั้น เราสามารถควบคุมได้เหมือนปกติ

ยกตัวอย่างเช่น

• Skip test
• Timeout ของการ test
• ใส่ tag เพื่อแยกกลุ่มของ test ได้ ทั้งระดับไฟล์และ test case

[gist id="0c54da80f30a01d467a006678f7d2dff" file="widget_test2.dart"]

ส่วน Life cycle ของ test นั้นก็เหมือนกับ test framework ทั่วไปคือ

• setupAll() ทำเพียงครั้งเดียว ก่อนที่จะเริ่มทดสอบ
• tearDownAll() ทำเพียงครั้งเดียวเมื่อทดสอบทุก ๆ test case แล้ว
• setup() ทำก่อนที่จะทดสอบแต่ละ test case
• tearDown() ทำหลังจากที่แต่ละ test case ถูกทดสอบแล้ว

[gist id="0c54da80f30a01d467a006678f7d2dff" file="widget_lifecycle_test.dart"]

สิ่งที่ต้องเจอแน่ ๆ คือ การจัดการ dependency

ที่แต่ละ widget ใช้งาน
นั่นสามารถจัดการด้วย Mockito
หรืออาจจะสร้างจำลองขึ้นมาก็ได้ เช่นพวก Mock server หรือใช้ Nock เป็นต้น

ในการพัฒนาระบบงาน จะขาดการทดสอบไปได้อย่างไร ?
ขอให้สนุกกับการ coding ครับ