Quantcast
Viewing all articles
Browse latest Browse all 2045

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

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

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

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

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

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

  • Unit testing
  • Widget testing
  • Integration testing

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

Image may be NSFW.
Clik here to view.

แต่จากที่พัฒนาระบบงานมาพบว่า 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 ครับ


Viewing all articles
Browse latest Browse all 2045

Trending Articles