วันนี้ทำการแนะนำเรื่องของ Automation testing ในฝั่ง frontend
ซึ่งพัฒนาด้วย Angular 8
จึงลองพาทำความเข้าใจเกี่ยวกับการทดสอบ
รวมทั้งแนวคิดและลงมือเขียนขึ้นมา เป็นดังนี้
เริ่มต้นจากการอธิบายการทดสอบแต่ละแบบ
ยึดตามแนวทางของ Microservices Testing
ซึ่งการทดสอบประกอบไปด้วย
- Unit testing
- Integration testing
- Component testing
- Contract testing
- End-to-end testing
โดยใน workshop เน้นไปที่ Unit testing
แสดงดังรูป
จากรูปแสดงโครงสร้างของระบบงาน
ที่แบ่งออกเป็นส่วน ๆ ตามหน้าที่รับผิดชอบอย่างชัดเจน ยกตัวอย่างเช่น
- Resources คือส่วนที่ผู้ใช้งานทำการติดต่อสื่อสาร เช่นรับ request ที่ส่งเข้ามา และส่ง response หรือผลลัพธ์กลับไป
- Service layer คือส่วนควบคุม flow การทำงาน
- Gateways คือส่วนติดต่อสื่อสารไปยัง external service
- Repositories คือส่วนการจัดการข้อมูลกับ data store หรือที่จัดเก็บข้อมูล
โดยแต่ละส่วนต้องสามารถทดสอบได้ว่า
ทำงานตามที่ต้องการหรือคาดหวังหรือไม่
ทั้ง success และ failure cases
จากนั้นจึงทดสอบในภาพรวมหรือการทดสอบชนิดอื่น ๆ ต่อไป
กลับมาที่การทดสอบ Unit testing สำหรับ Angular 8 กัน
สิ่งที่ Angular เตรียมไว้ให้สำหรับการทดสอบคือ TestBed
ทำหน้าที่ดังนี้
- ทำการ config และ initial สิ่งแวดล้อมต่าง ๆ สำหรับการทำ Unit test
- เตรียม method ต่าง ๆ สำหรับการสร้าง component และ service ต่าง ๆ ที่ต้องใช้งานใน Unit test
ซึ่งเพียงพอต่อการใช้งาน
ดังนั้นมาลองเขียนกันหน่อย
ส่วนที่ 1 Unit test สำหรับ Component ต่าง ๆ
ในแต่ละ component นั้น
เราจำเป็นต้องทดสอบให้ได้ว่าทำงานได้ตามที่คาดหวังหรือไม่
นั่นคือ ผลการทำงานหรือสิ่งที่ส่งออกไปจาก component นั้นถูกต้อง
แน่นอนว่า ต้องแสดงข้อมูลในรูปแบบ HTML
การทดสอบก็ไม่ยาก
แต่ตอนลงมือทำก็ไม่ง่าย ถ้ายังไม่เข้าใจและลงมือทำ
ขั้นตอนเป็นดังนี้
- ทำการ config และ initial ของ object หรือ dependency ต่าง ๆ ที่ต้องใช้งาน ยกตัวอย่าง Component, Service, Module ที่ใช้งาน
- ทำการสร้าง component ที่ต้องการทดสอบและใช้งาน
- ทำการสร้างและ stub การทำงานของ service ต่าง ๆ ใน component ใช้งาน
- ถ้ามีการทำงานร่วมกับ service หรือส่วนงานที่ทำงานแบบ Asynchronous ก็จำเป็นต้องทดสอบด้วย fakeAsync(), async() และ tick()
- ทำการสร้าง Test double สำหรับ dependency ต่าง ๆ เพื่อควบคุมการทำงานตามที่ต้องการ
- ทำการทดสอบและตรวจสอบผลการทำงาน
ตัวอย่าง code ทดสอบในส่วน Component ที่ใช้งาน service เป็นดังนี้
[gist id="7f123ec596cb230accbe35f1dad83370" file="component_test.ts"]ส่วนที่ 2 Unit test สำหรับ Service ที่ทำงานกับ Http Client
จากตัวอย่างที่ใช้งานนั้น
จะเป็น Service ที่ทำการดึงข้อมูลจาก RESTFul API ผ่าน HTTP Client
โดยในการ implement จะใช้งานผ่าน HttpClientModule ที่ Angular เตรียมไว้ให้
ตัวอย่าง code ทดสอบในส่วน Service ที่ใช้งาน HTTP client เป็นดังนี้
[gist id="7f123ec596cb230accbe35f1dad83370" file="service_test.ts"]คำอธิบาย
การทดสอบจะคล้าย ๆ กับ Component ในแง่ของการ config และ initial
สิ่งต่าง ๆ ที่ต้องใช้งานในการทดสอบ
แต่เพิ่มเข้ามาด้วย HttpTestingController
เพื่อจำลองการทำงานของ HTTP ทั้ง request และ response
ทำให้สะดวกต่อการตรวจสอบการทำงานผ่าน HTTP Client
นี่คือแนวทางหนึ่งสำหรับการทดสอบใน Angular 8
ที่นักพัฒนาน่าจะต้องมีความรู้และเข้าใจด้วยเช่นกัน
ขอให้สนุกกับการ coding ครับ