มีโอกาสไปแบ่งปันความรู้เรื่องการทดสอบระบบ web ที่พัฒนาด้วย Vue และ NuxtJS
ในงาน Vue ไทย Conf 2024 ครั้งที่ 1
โดยพูดเรื่อง Better testing with Vue application
ซึ่งมีเนื้อหาหลัก ๆ ดังนี้ มาเริ่มกันเลย
เริ่มจากเรื่องการพัฒนาระบบงาน
ถ้ามีเวลาจำกัด เราจะเลือกอะไร ระหว่าง ปริมาณ กับ คุณภาพ
เป็นทางเลือกที่โหดร้ายมาก ๆ
ไม่ว่าจะเลือกทางไหน ก็มี trade off เสมอ
สิ่งที่ควรทำคือ การ balance ทั้งสอง
และสร้างความเชื่อมั่นในการพัฒนาและส่งมอบระบบงาน
โดยหนึ่งในวิธีการสร้างความเชื่อมั่น
ทั้งตัวเราเอง และ ผู้อื่นคือ การทดสอบ นั่นเอง
ไม่ว่าจะทดสอบอย่างไร รูปแบบไหน
ผลที่ได้คือ ความเชื่อมั่นต่อระบบงานที่สูงขึ้น
รวมทั้งปัญหาต่าง ๆ น้อยลง
ไม่ใช่ว่าทดสอบแล้ว ครอบคลุมเยอะมาก ๆ (test coverage สูงมาก)
แต่กลับยังมีปัญหาต่าง ๆ มากมายอยู่
แบบนี้คือ การทำให้มี แต่ไม่ดีและไม่มีประโยชน์มากนัก
ดังนั้นเรื่องคุณภาพ และ ความเชื่อมั่นจึงสำคัญ
การทดสอบที่ดี ควรมีคุณสมบัติคร่าว ๆ ดังนี้
- ทำงานได้รวดเร็ว
- เป็นอิสระต่อส่วนต่าง ๆ ที่ต้องการ
- ต้องสามารภทดสอบซ้ำ ๆ ได้ตลอดเวลา
- มีการตรวจสอบที่เชื่อถือได้
- ชุดการทดสอบสามารถเข้าใจได้ง่าย ไม่ต้องมานั่งตีความ
และสุดท้ายคือ การทดสอบจะเกิดขึ้นใน คือ
- Test-first คิดก่อนทำ
- Test-last ทำแล้วค่อยคิดจะทดสอบ
- Test-later ทำเยอะ ๆ แล้วค่อยคิดจะทดสอบ
หลังจากออกทะเลไปไหล กลับมาที่ Vue กันบ้าง
เริ่มจากโครงสร้างของ Vue project ที่ควรจัดการให้ดี ๆ
หนึ่งในแนวทางที่แนะนำคือ การลดขนาดของ project เพื่อลดการ build
ระบบที่ดีควรเลือก feature/domain ที่ต้องการจะ build ได้
จึงแนะนำการแบ่งเป็น feature/domain
เมื่อจะทำการ build ก็ทำการ add เข้ามาได้ (extend หรือ module)
ต่อมาในการทดสอบ มีหลายรูปแบบทั้ง
- Unit test
- Component test
- UI test
- Visual test
- Snapshot test
หนึ่งในแนวทางที่แนะนำไปคือ UI test ด้วย Playwright และ Vitest + Testing library with Vue
ซึ่ง test ที่ดีควรมีคุณสมบัติดังนี้
- ไม่ผูกมัดกับ implementation หรือ UI มาเกินไป เช่นการใช้ test id เข้ามาช่วย
- ไม่ผูกมัดกับ test framework โดยเราสามารถสร้าง driver interface เพื่อให้ test framework มา implement ตาม driver interface ไว้ได้เลย จากตัวอย่าง เราสามารถเปลี่ยนไปมาระหว่าง Playwright และ Vitest ได้ โดยใช้ test case เดียวกันได้เลย อาจจะมองว่ามัน over engineer มากเกินไป แต่ก็เป็นแนวทางที่น่าสนใจอย่างหนึ่ง รู้ไว้ไม่เสียหาย !!
- ควรต้องอ่านเข้าใจได้ง่าย ไม่ technical มากจนเกินไป
ปิดท้ายด้วย Component test สำหรับแต่ละ component ใน Vue นั่นเอง
ช่วยให้เรามั่นใจกับการทำงานของแต่ component
ก่อนที่จะนำ component ต่าง ๆ ไปทำงานร่วมกัน
ทั้งหมดนี้ เป็นส่วนหนึ่งของการสร้างความมั่นใจ ให้เพิ่มขึ้น
และเพิ่มคุณภาพของระบบงานให้มากขึ้น
หลังจากนี้ไม่รู้เรื่องแล้ว เมาาาาาาา
ตัวอย่างของ code ที่ใช้ อยู่ที่ GitHub:Up1