Cypress ทำความรู้จัก และตัวอย่างการใช้งาน Spy,Stub EP5

Sharing is caring!

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 มีให้ใช้งานเป็นปกติอยู่แล้ว เพื่อน ๆ ที่ติดตามบทความนี้มีปัญหา หรืออยากปรึกษา ขอความช่วยเหลือ สามารถฝากคำถามไว้ใต้โพสนี้ได้เลย

Posts created 71

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares