จาก 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

หัวใคสำคัญคือ ความเข้าใจร่วมกัน ก่อนที่จะเริ่มพัฒนามากกว่านะ
เพื่อไม่ให้หลงทางกันไปไกล