Spy & Stub เป็น API Command ที่มีความพิเศษกว่า API Command อื่น ๆ เราจะไม่ค่อยได้ใช้งาน command นี้มากนัก แต่ถ้าถึงสถานะการนั้นแล้ว spy ,stub นี้แหละที่จะมาเป็นพระเอกช่วยเราได้ในแต่ละสถานะการนั้น ๆ เลย
Spy ,Stub คืออะไร
ก่อนที่จะไปรู้ถึงว่าจะนำ Spy ,Stub ไปใช้กับลักษณะงานแบบไหน ควรต้องเข้าใจก่อนว่า 2 commands นี้ คืออะไร มีความสามารถอย่างไรบ้าง
Stub ทำหน้าที่จำลอง Behavior ของโปรแกรมที่เรากำลังจะทดสอบ โดยหลักการทำงานของ Stub ก็ดัก function ของ Object ของโปรแกรมในที่นี้คือ Object ที่กำลังสนใจมีส่วนการทำงานเกี่ยวข้องกับระบบ หรือ feature ที่กำลังทำงานในขณะนั้น โดยจะคอยดักจับ และยังสามารถเปลี่ยนแปลงการทำงานของ Behavior function นั้น ไปให้เป็นไปตามผลลัพธ์ที่เราต้องการจะให้เป็น โดยข้อดีของการใช้ Stub เพื่อแก้ไข function (Behavior) นี้เพื่อลด dependencies ต่าง ๆ ของโปรแกรมทำไม่ให้เกิด Flaky Test เช่น window.confirm ของ window object ที่ต้องการ action ของปุ่ม Ok (ตกลง) หรือ Cancel (ยกเลิก) เพื่อทำให้โปรแกรมทำงานใน Step ถัด ๆ ไป โดยปกติ API Command ที่มีให้นั้นไม่สามารถจะแก้ไขหรือเลือก choice นี้ได้ จำเป็นต้องใช้ Stub มาเปลี่ยนแปลง Behavior นี้
Spy เกือบที่จะเหมือนกับ Stub ถ้าในทางการเรียกใช้งานแทบจะแยกไม่ออกเลยว่าแตกต่างกันอย่างไร แต่มีสิ่งที่ Spy เองไม่สามารถทำได้เหมือน Stub คือการเปลี่ยนแปลง Behavior ของการทำงานได้เหมือน Stub แต่ทำหน้าที่ได้เพียงแฝงตัว สอดแนม อาจจะเพิ่มการ capture ,record หรือ track log ของการทำงานได้เท่านั้น
Spy /Stub การทำงานเหล่านี้ได้นำเข้ามาจาก Sinon.js จึงสามารถเปิด document ได้เลย สามารถอ่านเนื้อหาการใช้งานได้จากที่นี่
Stub https://sinonjs.org/releases/latest/stubs/
Spy https://sinonjs.org/releases/latest/spies/
เมื่อไหร่ และสถานการณ์แบบไหนถึงจะนำมาใช้ละ
มอง scenarios case จะเกี่ยวกับ behavior ของ javascript function ต่าง ๆ ที่ทีในโปรแกรมที่กำลังทดสอบ เช่น window.alert ,window.confirm ,window.promt หรือแม้แต่ function ต่าง ๆ ที่ custom define ที่ window object ก็สามารถดัก track ติดตามได้หมด
ตัวอย่างโปรแกรม
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button type="button" onclick="clickPromt()">Click Promt</button>
<script>
function clickPromt(){
const data = window.prompt('enter your name.')
if(data){
window.alert(data)
}
}
</script>
</body>
</html>
describe('ทดสอบการทำงานของ Stub', () => {
it('ทดสอบดักจับ behavior ของ window.promt', () => {
cy.visit('http://127.0.0.1:5500/cypress/integration/spy-stub/index.html')
.window().then(win =>{
cy.stub(win,'prompt',()=>{
return 'Hardcode "Hello World"'
}).as('stubPromt')
})
.get('button').click()
.get('@stubPromt').should('be.calledOnce')
});
});
ตัวอย่างการทำงานของ Stub
เมื่อมีการเขียนคำสั่ง stub เพื่อเริ่มใช้งาน cypress จะสร้างแถบ SPIES/STUBS มาพร้อมแสดงชื่อการทำงานของ behavior นั้น เมื่อโปรแกรมมีการเรียกใช้งาน behavior (function) stub จะแสดงเลข 1 หมายถึงการถูกเรียกทำงาน 1 ครั้ง และโปรแกรมจะ alert ค่าที่รับจาก promt ว่า “Hardcode “Hello World”” ที่ถูก command stub return ค่ามาให้ จึงทำให้การ call function ภายในโปรแกรมทุกครั้งจะได้ promt value ว่า “Hardcode Hello World” เสมอ เพราะถูก stub ดักเปลี่ยนค่าในระหว่างการทำงาน
เพิ่มการ assert เพื่อตรวจสอบการ call function นั้นด้วย “be.calledOnce” อีกครั้งเพื่อให้แน่ใจว่าโปรแกรมทำงาน function อย่างน้อย 1 ครั้ง
นี่คือตัวอย่างการใช้งาน stub กับ function promt ที่ทาง window object ของ browser มีให้ใช้งานเป็นปกติอยู่แล้ว เพื่อน ๆ ที่ติดตามบทความนี้มีปัญหา หรืออยากปรึกษา ขอความช่วยเหลือ สามารถฝากคำถามไว้ใต้โพสนี้ได้เลย
