Test Result and Code/Test Coverage

Frontend

ขั้นตอนการ Set-Up ก่อน Run Testing

• เปิด Folder ที่ Clone มาใน Visual Studio Code

• เปิด Terminal แล้วเข้าไปที่ Folder App ด้วยคำสั่ง ‘cd app’

• ติดตั้ง Node Modules ด้วยคำสั่ง ‘yarn install’

• Run App ด้วยคำสั่ง ’yarn serve ‘

ผลลัพธ์จาก Cypress ในการทำ Component Testing

• Run Component Test โดยเปิด Terminal ใหม่แล้วพิมพ์คำสั่ง ‘cd app’ แล้วตามด้วย ‘yarn components-testing’

    

                Image : ตัวอย่าง Result Component Testing จาก Cypress

จาก Result ที่ได้ดังรูปตัวอย่างด้านบนจะเห็นได้ว่ามีการ Test ตามที่ได้ออกแบบไว้ที่ Components Testing

ผลลัพธ์จาก Cypress ในการทำ Unit Testing

• Run Unit Test โดยเปิด Terminal ใหม่แล้วพิมพ์คำสั่ง ‘cd app’ แล้วตามด้วย ‘yarn unit-testing’

    

                     Image : ตัวอย่าง Result Unit Testing จาก Cypress

จาก Result ที่ได้ดังรูปตัวอย่างด้านบนจะเห็นได้ว่ามีการ Test ตามที่ได้ออกแบบไว้ที่ Unit Testing

ผลลัพธ์จากการทำ Acceptance Testing

• ในการทดสอบ Design ของแต่ละหน้า มีการถามถึงความพึงพอใจจากคนในทีมทุกคน

  • โดยที่คนในทีมทุกคนมีความพึงพอใจกับการ Design ในแต่ละหน้า

      

      Image : ตัวอย่างความพอใจต่อ Design จากคนในทีม

---

Backend

ใช้ JEST ในการทดสอบ โดยทฤษฎีที่ทางกลุ่มของเราจะนำมาใช้คือ Data Coverage และ Code Coverage

Data Coverage

การทดสอบหาข้อผิดพลาดแบบ White-Box Testing โดยการใส่ข้อมูลที่ Valid และ Invalid ให้กับ Business logic ของระบบสุ่มอาหาร (Random Menu) และตรวจสอบผลลัพธ์ว่าเป็นไปตามที่คาดหวังหรือไม่

Code Coverage

การทดสอบ State และ Flow ของการระบบสุ่มอาหาร (Random Menu) โดยเราจะทดสอบส่วนของ Branch Coverage และ Condition Coverage

Branch Coverage and Condition Coverage

ระบบสุ่มอาหาร (Random Menu) มีเส้นทางการทำงาน 2 เส้นทาง คือ มี Tags ของข้อมูลและไม่มี Tags ของข้อมูล
ระบบสุ่มอาหาร (Random Menu) มีเงื่อนไขในการค้นหาอาหาร โดยมีตัวแปร 3 ตัว คือ ประเภทของอาหาร วิธีทำอาหาร และส่วนประกอบของอาหาร

• ผลลัพธ์จาก Jest ในแต่ละเส้นทางและแต่ละเงื่อนไข

สามารถดูข้อมูลตัวอย่างที่เตรียมไว้ใน Jest ได้จาก Testing Strategies and Tools

• Response จาก Postman ของแต่ละเส้นทางและแต่ละเงื่อนไข

ผลลัพธ์ของ Postman ในเส้นทางที่ Tags ของข้อมูลหายไป ในเส้นทางนี้เราจะทำการตรวจสอบส่วนของ Data Coverage โดยการไม่ใส่ Tags ที่เป็นข้อมูลจำเป็นลงไป

ผลลัพธ์ของ Postman ในเส้นทางที่ User ไม่ได้เลือกประเภทของอาหาร วิธีทำอาหาร และส่วนประกอบของอาหาร

ผลลัพธ์ของ Postman ในเส้นทางที่ User ไม่ได้เลือกวิธีทำอาหาร และส่วนประกอบของอาหาร

ผลลัพธ์ของ Postman ในเส้นทางที่ User ไม่ได้เลือกส่วนประกอบของอาหาร

ผลลัพธ์ของ Postman ในเส้นทางที่ User เลือกทั้งประเภทของอาหาร วิธีทำอาหาร และส่วนประกอบของอาหาร