จาก Post นี้ใน facebook ก็เลยมาเขียนสรุปหน่อยว่า
ในฝั่ง Frontend นั้น ผมทำการพัฒนาและที่สำคัญคือ ทดสอบอย่างไรบ้าง
โดยปกติจะเริ่มต้นอธิบายให้เข้าใจถึงโครงสร้างก่อน
ซึ่งแสดงดังรูป เพื่อให้เห็นว่าระบบงานของเราเป็นอย่างไรบ้าง
จะเห็นได้ว่ามีส่วนการทำงานต่าง ซึ่งต่างมีหน้าที่การทำงานชัดเจน
ยกตัวอย่างเช่น
- Component จะเป็น component ฝั่งของ frontend ตามแต่ละ framework ที่ใช้งาน เป็นการแสดงผลและรับ action ต่าง ๆ จากผู้ใช้งาน ในการทดสอบจะเป็น component test ในแต่ละตัว สามารถเชื่อมต่อกันได้ ไม่มีประเด็นอะไร ตามความต้องการเลย
- Service/Gateway/Business เป็นส่วนของ business logic การทำงานในฝั่ง frontend นั่นเอง ในส่วนนี้ เขียน unit test ปกติได้เลย อาจจะมีการ mock พวก dependency ได้ หรือ จะต่อ integration หรือ จะ fake ก็ได้ตามความต้องการ
- ส่วนพวก External service ที่ฝั่ง frontend ที่ต้องเรียกใช้งานนั้น เราสามารถต่อจริงได้ หรือ จำลองให้เหมือนจริง (Fake external service) ได้ เพื่อให้เราสามารถทดสอบซ้ำได้ง่ายขึ้น ในส่วนนี้ผมชอบใช้ cypreess + network request มาก ๆ
หรืออาจจะทดสอบในฝั่ง UI แบบทั้งมุมมองของ developer และ QA/Tester ได้
ซึ่งก็มีเครื่องมือให้ใช้เยอะ ทั้ง
- Cypress
- Selenium
- Playwright
- Puppeteer
หัวใคสำคัญคือ ความเข้าใจร่วมกัน ก่อนที่จะเริ่มพัฒนามากกว่านะ
เพื่อไม่ให้หลงทางกันไปไกล
