สร้างฟิกซ์เจอร์แบบไดนามิกเพื่อจำลองการตอบสนองของ API โดยใช้ออบเจ็กต์หรือฟังก์ชัน JavaScript
1. บทนำ
เมื่อแอปพลิเคชันเติบโตขึ้น การเปลี่ยนแปลงเล็กๆ น้อยๆ ก็อาจทำให้เกิดผลลัพธ์ที่ไม่อาจคาดเดาได้ ในฐานะนักพัฒนา เป็นการยากที่จะจดจำทุกเงื่อนไขและผลกระทบทั้งหมดที่การเปลี่ยนแปลงสามารถมีได้ นั่นคือเหตุผลที่การทดสอบอัตโนมัติเป็นวิธีที่ดีเยี่ยมเพื่อให้แน่ใจว่าแอปพลิเคชันของคุณทำงานได้อย่างถูกต้อง
Cypressเป็นเครื่องมือทดสอบที่ยอดเยี่ยมสำหรับเว็บแอปพลิเคชันที่ใช้ JavaScript และในบทความนี้ ผมจะแบ่งปันการเรียนรู้ที่อาจช่วยให้คุณเพิ่มประสิทธิภาพของคุณได้
หากคุณกำลังทำงานกับ API คุณจะไม่สามารถโทรออกทุกครั้งเมื่อคุณทำการทดสอบ บางครั้งคุณต้องใช้ mocks ซึ่งช่วยให้คุณสามารถเลียนแบบการตอบสนองที่มาจาก API และทดสอบสถานการณ์บางอย่างโดยไม่ต้องทำการโทรจริง Cypress มีโซลูชันในตัวเพื่อทำเช่นนั้น: คุณสามารถจัดเก็บฟิกซ์เจอร์เหล่านี้ในโฟลเดอร์ฟิกซ์เจอร์ หรือเพิ่มการตอบกลับโดยตรงไปยังฟังก์ชัน cy.route() ซึ่งโดยปกติจะเป็น JSON .
การอัปเดตอุปกรณ์ติดตั้งของคุณอยู่เสมออาจเป็นเรื่องที่เจ็บปวดในบางครั้ง และบางครั้งคุณต้องตรวจสอบบางสิ่งบางอย่างแบบไดนามิก
2. การใช้วัตถุ JavaScript เป็นการจำลองแบบไดนามิก
ตัวอย่างอาจเป็นได้ว่าคุณกำลังจำกัดบางสิ่งบางอย่างตามวันที่ ในกรณีนั้นคุณไม่สามารถใช้การเยาะเย้ยแบบคงที่ได้ คุณต้องสร้างบางสิ่งแบบไดนามิก โชคดีที่ cypress ให้คุณทำเช่นนั้นได้ โดยใช้ วัตถุ JavaScript เป็นการตอบกลับ ตัวอย่างอาจมีลักษณะดังนี้:
ตัวแปร sessionpage ที่เราประกาศที่ บรรทัด 5 สิ้นสุดที่ บรรทัด 85เป็นวัตถุจาวาสคริปต์ที่เราจะเพิ่มในฟังก์ชัน cy.route() ที่ บรรทัด 90 เป็นการตอบกลับ ในนั้น เรากำลังสร้าง 2 เซสชัน เซสชันแรกมีวันที่เริ่มต้น/สิ้นสุดแบบไดนามิก (บรรทัด 12 - บรรทัด 13)โดยใช้วันนี้ (บรรทัด 4) เป็นข้อมูลอ้างอิงเพื่อทดสอบ เงื่อนไขบางอย่างในโค้ดเบสของเรา และเงื่อนไขที่สองที่มีวันที่แน่นอนซึ่งไม่สำคัญ ใช้งานได้แต่ทำให้การทดสอบของเราเกะกะอย่างมาก
เนื่องจากเราอยู่ใน JavaScript เราจึงสามารถแยกวัตถุนี้และนำเข้าในการทดสอบของเราได้อย่างง่ายดาย เช่นเดียวกับที่เราจะทำด้วยวิธีตัวช่วยในส่วนประกอบ React ของเรา:
แทนที่จะใช้หน้าเซสชั่นตัวแปรท้องถิ่น เราจะนำเข้ามันจากไฟล์ใหม่ที่เราสร้างขึ้น (ที่บรรทัด 3) โดยที่ส่งออกวัตถุเดียวกันเป็นค่าเริ่มต้น และใช้ใน cy.route() ฟังก์ชั่น (ที่บรรทัด 10).
สิ่งนี้ทำให้การทดสอบของเราชัดเจนขึ้น (37 บรรทัดแทนที่จะเป็น 117) ทำให้อ่านได้ง่าย และเปิดความเป็นไปได้มากยิ่งขึ้นในวัตถุจำลองของเรา
3. การใช้ฟังก์ชัน JavaScript เป็นการจำลองแบบไดนามิก
ฉันมีกรณีที่ฉันต้องสร้างไฟล์จำลอง 2 ไฟล์ที่แตกต่างกันเพียงเพราะแอตทริบิวต์ 1 หรือ 2 รายการแตกต่างกัน เพื่อหลีกเลี่ยงปัญหานี้ คุณสามารถสร้างฟังก์ชันจาวาสคริปต์เป็นการเยาะเย้ยแบบไดนามิกได้ คุณสามารถแทนที่แอตทริบิวต์คงที่ด้วยการอ้างอิงแบบไดนามิก เพิ่มสถานะเริ่มต้น และส่งผ่านค่าที่คุณต้องการเปลี่ยนแปลง โครงสร้างที่ฉันเลือกคล้ายกับตัวลด/การดำเนินการรีดักซ์
ในตัวอย่างสุดท้ายนี้ ฉันทำให้การเยาะเย้ยตอบสนองมากขึ้น ดังนั้นหากคุณต้องการสถานะที่แตกต่างกันในการบล็อกที่แตกต่างกัน คุณสามารถส่งต่อเพย์โหลดที่แตกต่างกันในการตอบกลับได้ หากคุณแปลงการเยาะเย้ยแบบไดนามิกของคุณให้เป็นฟังก์ชัน
ในไฟล์ sessionpage.js ฉันเพิ่ม defaults object เป็นค่าเริ่มต้นและใช้เป็นข้อมูลอ้างอิงในฟังก์ชัน sessionpage() บน line 22 และ บรรทัดที่ 61. หากฉันไม่ส่งต่อสิ่งใด ๆ วัตถุเริ่มต้นจะถูกนำมาใช้ อย่างไรก็ตามหากฉันส่งผ่านอาร์กิวเมนต์ในฟังก์ชันที่จะแทนที่ค่าเริ่มต้นที่ฉันเพิ่ม นั่นคือสิ่งที่ฉันทำใน บรรทัด 10 ใน users_can_access_videocall_spec.js
เนื่องจากคุณมีฟังก์ชั่นเหมือนการเยาะเย้ยแล้ว คุณจึงสามารถทำอะไรได้อีกมากมาย คุณสามารถเพิ่มจำนวนวัตถุที่คุณต้องการส่งคืนในเพย์โหลด ทำการคำนวณ และเพิ่มเอฟเฟกต์แบบสุ่ม ความเป็นไปได้ไม่มีที่สิ้นสุด!
