mock xmlhttprequest

จำลอง-xmlhttprequest

ไลบรารีนี้เป็นการจำลอง XMLHttpRequest ที่ให้อินเทอร์เฟซที่เรียบง่ายเพื่อจำลองการโต้ตอบกับ XMLHttpRequest เป็นการแทนที่ XMLHttpRequest แบบดรอปอินสำหรับการทดสอบของคุณ

ไลบรารีนี้ใช้อินเทอร์เฟซ XMLHttpRequest และจัดการคำขอและเหตุการณ์ตามที่ระบุไว้ในข้อกำหนด XMLHTTPRequest โดยไม่ต้องใช้คำขอเครือข่ายจริง คุณสามารถตอบกลับคำขอจำลองได้สามวิธี:

• การกำหนดค่าการตอบสนองที่ประกาศโดยใช้เซิร์ฟเวอร์จำลองพร้อมเส้นทาง
• การตอบสนองแบบเป็นโปรแกรม
• ขอ hook วงจรชีวิต

คุณสามารถจำลองการตอบสนอง ความคืบหน้าในการอัปโหลด ข้อผิดพลาด และการโต้ตอบอื่นๆ ด้วยวิธีจำลองการตอบสนอง สิ่งเหล่านี้จะจัดการกับการประมวลผลระดับล่างโดยอัตโนมัติ เช่น การปล่อยเหตุการณ์และการเปลี่ยนแปลงคุณสมบัติ readystate ของ XMLHttpRequest

สารบัญ

• การติดตั้ง
• เริ่มต้นอย่างรวดเร็ว
• การใช้งาน
  • การใช้เซิร์ฟเวอร์จำลอง
    • การจำลองความคืบหน้า
  • การตอบสนองแบบอะซิงโครนัส
  • ตอบสนองต่อคำขอ MockXhr โดยทางโปรแกรม
  • แอตทริบิวต์ timeout และการหมดเวลาของคำขอ
  • การใช้ hooks วงจรชีวิต MockXhr
• การอ้างอิง API
  • คลาส MockXhrServer
    • การตั้งค่า MockXhrServer
    • เส้นทาง
    • กำลังเพิ่มเส้นทาง
    • สาธารณูปโภค
  • คลาส MockXhr
    • API จำลอง
    • ตะขอวงจรชีวิต MockXhr
  • คลาส MockXhrRequest
    • ขอข้อมูล
    • วิธีการตอบสนองจำลอง
  • newMockXhr()
  • newServer()
• คุณสมบัติ XMLHttpRequest
• มีส่วนร่วม
• ใบอนุญาต

การติดตั้ง

ผ่าน npm (ตัวจัดการแพ็คเกจโหนด)

 $ npm install mock-xmlhttprequest

เริ่มต้นอย่างรวดเร็ว

 import { newServer } from 'mock-xmlhttprequest' ;
import { functionToTest } from '../src/SomethingToTest' ;

// Adapt based on your testing framework. This example uses Mocha and Chai's syntax.

it ( 'should produce a success response' , async ( ) => {
  const server = newServer ( {
    get : [ '/my/url' , {
      // status: 200 is the default
      headers : { 'Content-Type' : 'application/json' } ,
      body : '{ "message": "Success!" }' ,
    } ] ,
  } ) ;

  try {
    // Installs the server's XMLHttpRequest mock in the "global" context.
    // After this, "new XMLHttpRequest()" creates a mock request to which the server replies.
    server . install ( /* optional context; defaults to globalThis */ ) ;

    // Do something that send()s an XMLHttpRequest to '/my/url' and returns a Promise
    // that resolves to the parsed JSON response
    const result = await functionToTest ( ) ;
    assert . equal ( result . message , 'Success!' ) ;
  } finally {
    // Restore the original XMLHttpRequest
    server . remove ( ) ;
  }
} ) ; 

การใช้งาน

คลาสจำลอง XMLHttpRequest คือ MockXhr มันเปิดเผยอินเทอร์เฟซเดียวกันกับ XMLHttpRequest และเป็นการแทนที่แบบดรอปอินเพื่อทดสอบโค้ดที่ใช้ XMLHttpRequest

มีสองตัวเลือกในการควบคุมพฤติกรรมของอินสแตนซ์ MockXhr :

• เซิร์ฟเวอร์จำลอง นี่เป็นแนวทางที่แนะนำ
• ตะขอวงจรการใช้งาน XMLHttpRequest ใช้สิ่งนี้หากคุณต้องการควบคุมคำขอที่ไม่มีคุณสมบัติจากเซิร์ฟเวอร์จำลองได้มากขึ้น

การใช้เซิร์ฟเวอร์จำลอง

คลาส MockXhrServer ใช้เซิร์ฟเวอร์จำลอง คุณสร้าง MockXhrServer ด้วย newServer MockXhrServer ตอบสนองต่อคำขอ MockXhr โดยอัตโนมัติและทำให้การทดสอบการเขียนเป็นเรื่องง่าย

โครงสร้างพื้นฐานของการทดสอบที่ใช้ MockXhrServer คือ:

 import { newServer } from 'mock-xmlhttprequest' ;

const server = newServer ( /* routes */ ) ;
try {
  server . install ( /* optional context; defaults to globalThis */ ) ;
  // Test your code that creates XMLHttpRequests
} finally {
  // Reverts server.install() at the end of the test.
  // Only do this after the test case has finished creating XMLHttpRequests.
  server . remove ( ) ;
}

มีสองวิธีในการทำให้โค้ดของคุณใช้คลาส MockXhr แทน XMLHttpRequest สิ่งนี้ทำให้ MockXhrServer ตอบสนองต่อคำขอ:

1. ใช้ install() เพื่อแทนที่คลาส XMLHttpRequest ทั่วโลกด้วยคลาส MockXhr ของเซิร์ฟเวอร์ ในตอนท้ายของกรณีทดสอบ ให้เรียก remove() เพื่อคืนค่าสถานะดั้งเดิม
2. หากโค้ดของคุณอนุญาตให้คุณกำหนดค่าวิธีสร้างอินสแตนซ์ของ XMLHttpRequest ให้ใช้คลาส MockXhr โดยตรงกับคุณสมบัติ MockXhrServer อย่างใดอย่างหนึ่งต่อไปนี้:
   • xhrFactory เป็นฟังก์ชันที่สร้างอินสแตนซ์ MockXhr
   • MockXhr คือคลาสของอินสแตนซ์ที่สร้างโดย xhrFactory

รหัสนี้สาธิตการใช้ xhrFactory :

 import { newServer } from 'mock-xmlhttprequest' ;

const server = newServer ( /* routes */ ) ;
const savedFactory = MyClass . xhrFactory ;
try {
  MyClass . xhrFactory = server . xhrFactory ;
  // Test code that creates XMLHttpRequests through MyClass.xhrFactory()
} finally {
  // Only do this after the test case has finished creating XMLHttpRequests.
  MyClass . xhrFactory = savedFactory ;
}

เส้นทางกำหนดวิธีที่ MockXhrServer ตอบสนองต่อคำขอ MockXhr สิ่งเหล่านี้มีสามส่วน:

• วิธีการร้องขอ HTTP
• ตัวจับคู่ URL คำขอ
• ตัวจัดการคำขอ

เมื่อคุณส่งคำขอ MockXhr MockXhrServer จะค้นหาเส้นทางแรกที่ตรงกับวิธีการและ URL ของคำขอ จากนั้นจะตอบกลับด้วยตัวจัดการคำขอของเส้นทาง คุณยังสามารถตั้งค่าตัวจัดการคำขอเริ่มต้นได้ ตัวจัดการคำขอถูกกำหนดทั้งแบบเปิดเผยหรือโดยทางโปรแกรม

ตามค่าเริ่มต้น หากแอตทริบิวต์ timeout ของคำขอถูกตั้งค่าเป็นค่าที่ไม่ใช่ศูนย์ และ MockXhrServer ไม่ตอบสนองต่อคำขอ ก็จะหมดเวลาในที่สุด

มีสองวิธีในการเพิ่มเส้นทางไปยัง MockXhrServer :

• อาร์กิวเมนต์ routes ของ newServer
• วิธีการ MockXhrServer ที่เพิ่มเส้นทาง

MockXhrServer บันทึกคำขอ MockXhr ทั้งหมดที่ได้รับในบันทึกคำขอ ใช้สิ่งนี้เพื่อตรวจสอบคำขอ XMLHttpRequest ที่โค้ดของคุณส่ง

การจำลองความคืบหน้า

MockXhrServer สามารถสร้างเหตุการณ์ความคืบหน้าของคำขอ (อัปโหลด) และการตอบสนอง (ดาวน์โหลด) ได้โดยอัตโนมัติ สิ่งนี้ถูกปิดใช้งานตามค่าเริ่มต้น ใช้ช่อง progressRate เพื่อเปิดใช้งานสิ่งนี้

คุณยังสามารถสร้างเหตุการณ์ความคืบหน้าได้หากคุณตอบสนองต่อคำขอ MockXhr โดยทางโปรแกรมด้วยตัวจัดการคำขอประเภท Function

การตอบสนองแบบอะซิงโครนัส

การตอบสนองต่อคำขอ MockXhr เป็นแบบอะซิงโครนัส สิ่งนี้จำลองวิธีการทำงานของคำขอ XMLHttpRequest จริง ดังนั้นคุณจึงมักจะต้องใช้การสนับสนุนการทดสอบแบบอะซิงโครนัสของเฟรมเวิร์กการทดสอบของคุณ ตัวอย่างเช่น เอกสารที่เกี่ยวข้องสำหรับเฟรมเวิร์กการทดสอบ Mocha อยู่ที่นี่

hook วงจรการใช้งาน onSend จำเป็นต่อการตอบสนองต่อคำขอ MockXhr เซิร์ฟเวอร์จำลองจะจัดการสิ่งนี้โดยอัตโนมัติ อีกทางเลือกหนึ่งคือการใช้ hooks วงจรการใช้งาน MockXhr โดยตรง ในทั้งสองกรณี hook วงจรการใช้งาน onSend จะดำเนินการหลังจากบริบทการดำเนินการที่เรียก XMLHttpRequest.send() เสร็จสิ้นหรือล้างข้อมูลแล้ว ภายในไลบรารีนี้ใช้ Promise ที่ได้รับการแก้ไขทันทีเพื่อรับ callstack ที่ว่างเปล่า

ตอบสนองต่อคำขอ MockXhr โดยทางโปรแกรม

มีวิธีและคุณสมบัติ MockXhr หลายวิธีที่จะตอบสนองต่อคำขอ วิธีการเหล่านี้อนุญาตให้มีการโต้ตอบต่อไปนี้:

• ตรวจสอบพารามิเตอร์คำขอ
• จำลองความคืบหน้าในการอัพโหลดและดาวน์โหลด
• ระบุส่วนหัวและเนื้อหาการตอบกลับ
• จำลองการหมดเวลาหรือข้อผิดพลาดของคำขอ

ดูส่วนวิธีการตอบกลับจำลองสำหรับรายละเอียด

แอตทริบิวต์ timeout และการหมดเวลาของคำขอ

ตามค่าเริ่มต้น หากคุณตั้งค่าแอตทริบิวต์ timeout ของ XMLHttpRequest ในโค้ดของคุณ คำขอ MockXhr จะหมดเวลาโดยอัตโนมัติหลังจากการหน่วงเวลาที่ระบุ สิ่งนี้จะส่งเสียงเหตุการณ์ timeout และยกเลิกคำขอตามที่อธิบายไว้ในข้อกำหนด

โดยทั่วไปแล้ว การอาศัยเวลาที่ผ่านไปเพื่อทดสอบว่าโค้ดของคุณจัดการกับการหมดเวลาอย่างไรทำให้การทดสอบเปราะและแก้ไขจุดบกพร่องได้ยาก คุณสามารถทริกเกอร์การหมดเวลาโดยทางโปรแกรมด้วย setRequestTimeout() แทน

ปิดใช้งานการหมดเวลาคำขออัตโนมัติด้วยหนึ่งในตัวเลือกเหล่านี้:

• เรียก disableTimeout() บน MockXhrServer สิ่งนี้ส่งผลต่ออินสแตนซ์ MockXhr ทั้งหมดที่จัดการ
• MockXhr.timeoutEnabled = false คุณสมบัติคงที่บนคลาส MockXhr ส่งผลต่อแต่ละอินสแตนซ์
• ตั้งค่า timeoutEnabled เป็น false บนอินสแตนซ์ MockXhr สิ่งนี้ส่งผลต่ออินสแตนซ์นั้นเท่านั้น

การใช้ hooks วงจรชีวิต MockXhr

นี่เป็นรูปแบบการใช้งานทางเลือกที่ไม่ได้ใช้ MockXhrServer คุณใช้ hooks วงจรการใช้งาน MockXhr โดยตรงแทน สิ่งนี้ต้องการโค้ดเพิ่มเติม แต่คุณสามารถควบคุมคำขอ MockXhr ได้มากขึ้น

โปรดทราบว่าคุณยังสามารถใช้ hooks วงจรการใช้งาน MockXhr ร่วมกับ MockXhrServer ได้ หากคุณต้องการขยายเซิร์ฟเวอร์จำลองเท่านั้น

ตัวอย่าง:

 import { newMockXhr } from 'mock-xmlhttprequest' ;
import { functionToTest } from '../src/SomethingToTest' ;

// Adapt based on your testing framework. This example uses Mocha and Chai's syntax.

it ( 'should produce a success response' , async ( ) => {
  // Get a "local" MockXhr subclass
  const MockXhr = newMockXhr ( ) ;

  // Mock JSON response
  MockXhr . onSend = ( request ) => {
    const responseHeaders = { 'Content-Type' : 'application/json' } ;
    const response = '{ "message": "Success!" }' ;
    request . respond ( 200 , responseHeaders , response ) ;
  } ;

  try {
    // Install in the global context so "new XMLHttpRequest()" creates MockXhr instances
    global . XMLHttpRequest = MockXhr ;

    // Do something that send()s an XMLHttpRequest to '/my/url' and returns a Promise
    // that resolves to the parsed JSON response
    const result = await functionToTest ( ) ;
    assert . equal ( result . message , 'Success!' ) ;
  } finally {
    // Restore the original XMLHttpRequest
    delete global . XMLHttpRequest ;
  }
} ) ; 

การอ้างอิง API

คลาส MockXhrServer

คลาสนี้เป็นเซิร์ฟเวอร์จำลองที่ตอบสนองต่อคำขอ MockXhr ตาม URL และวิธีการ

การตั้งค่า MockXhrServer

MockXhrServer(routes)

ข้อโต้แย้ง:

• routes : วัตถุที่มีชุดเส้นทางเริ่มต้นของเซิร์ฟเวอร์ (ไม่จำเป็น)

ในกรณีส่วนใหญ่ คุณควรใช้ newServer แทน Constructor นี้โดยตรง

คีย์ของวัตถุ routes คือวิธี HTTP ค่าเป็นอาร์เรย์ที่มีสององค์ประกอบ: [url_matcher, request_handler]

ดูเพิ่มเติมที่ตัวจับคู่ URL คำขอและตัวจัดการคำขอ

ตัวอย่าง:

 const handlerFn = ( request ) => { request . respond ( ) ; } ;
newServer ( {
  get : [ '/get' , { status : 200 } ] ,
  'my-method' : [ '/my-method' , { status : 201 } ] ,
  post : [ '/post' , [ handlerFn , { status : 404 } ] ] ,
} ) ; 

install(context = globalThis)

ข้อโต้แย้ง:

• context : หากคุณระบุค่า วิธี install จะตั้งค่าคุณสมบัติ XMLHttpRequest ในบริบทนี้แทนที่จะเป็นบริบทส่วนกลาง (ไม่จำเป็น)

ติดตั้งการจำลอง MockXhr ของเซิร์ฟเวอร์ในบริบทส่วนกลางเพื่อแทนที่คลาส XMLHttpRequest เปลี่ยนกลับด้วยการลบ ()

remove()

คืนค่าการเปลี่ยนแปลงที่ทำโดยการติดตั้ง () เรียกสิ่งนี้หลังจากการทดสอบของคุณ

progressRate

หากคุณตั้ง progressRate เป็น number ที่มากกว่า 0 เซิร์ฟเวอร์จะสร้างเหตุการณ์ความคืบหน้าของคำขอ (อัปโหลด) และการตอบกลับ (ดาวน์โหลด) โดยอัตโนมัติ แต่ละเหตุการณ์ความคืบหน้าจะเพิ่มขึ้นตาม progressRate ไบต์

progressRate ใช้เฉพาะกับตัวจัดการคำขอประเภท object เท่านั้น

disableTimeout() และ enableTimeout()

วิธีการเหล่านี้ปิดใช้งานหรือเปิดใช้งานเอฟเฟกต์ของ timeout ของ MockXhr ดู "แอตทริบิวต์ timeout และคำขอหมดเวลา"

เส้นทาง

เส้นทางกำหนดค่าวิธีที่เซิร์ฟเวอร์ตอบสนองต่อคำขอ MockXhr ทั้งสามส่วนอธิบายไว้ด้านล่าง

แนวคิดเส้นทางจะขึ้นอยู่กับกรอบงาน Express อย่างหลวมๆ

วิธีการร้องขอ HTTP

อนุญาตให้ใช้ string ใดๆ ที่มีวิธีการร้องขอ HTTP ที่ถูกต้อง วิธีการที่ถูกต้องประกอบด้วยวิธีการมาตรฐาน เช่น GET , POST , PUT และ DELETE รวมถึงชื่อวิธีการอื่นๆ ชื่อวิธีการมาตรฐานไม่คำนึงถึงขนาดตัวพิมพ์

ขอตัวจับคู่ URL

ตัวจับคู่ URL คำขออาจเป็นประเภทใดประเภทหนึ่งต่อไปนี้

• string (เช่น '/my-url' ) เพื่อให้ตรงกับ URL ของคำขอทุกประการ
• RegExp ที่ตรงกับ URL ของคำขอ
• Function ที่คืนค่า true หาก URL ของคำขอตรงกัน ฟังก์ชันรับ URL เป็นอาร์กิวเมนต์

ตัวจัดการคำขอ

ตัวจัดการคำขอสามารถเป็นหนึ่งในประเภทเหล่านี้:

• object ที่มีคุณสมบัติตอบสนอง ค่าเริ่มต้นคือ:

   { status: 200, headers: {}, body: null, statusText: 'OK' }
  

• Function ที่เรียกวิธีการตอบสนองจำลองโดยตรง ฟังก์ชันได้รับอินสแตนซ์ MockXhrRequest เป็นอาร์กิวเมนต์

• string ที่มีค่า 'error' หรือ 'timeout' สิ่งนี้ทำให้เกิดข้อผิดพลาดหรือการหมดเวลาตามลำดับ

• อาร์เรย์ของประเภทตัวจัดการคำขออื่นๆ ข้างต้น คำขอแรกจะได้รับตัวจัดการตัวแรก คำขอที่สองจะได้รับตัวจัดการตัวที่สองและต่อๆ ไป ตัวจัดการสุดท้ายจะถูกนำมาใช้ซ้ำเมื่อไม่มีตัวจัดการเพิ่มเติมในอาร์เรย์

สำหรับตัวจัดการคำขอ object เซิร์ฟเวอร์จะเพิ่มส่วนหัวการตอบสนอง Content-Length โดยอัตโนมัติพร้อมความยาวของเนื้อหาการตอบสนอง

ตัวจัดการทั้งหมดเหล่านี้เทียบเท่ากัน:

 const handlerObj = { } ;
const handlerFn = ( request ) => { request . respond ( 200 , { 'Content-Length' : '0' } ) ; } ;
const handlerArray = [ { } ] ; 

กำลังเพิ่มเส้นทาง

get(urlMatcher, handler)

ข้อโต้แย้ง:

• urlMatcher : ขอตัวจับคู่ URL
• handler : ตัวจัดการคำขอ

เพิ่มเส้นทางสำหรับวิธี GET HTTP

post(urlMatcher, handler)

ข้อโต้แย้ง:

• urlMatcher : ขอตัวจับคู่ URL
• handler : ตัวจัดการคำขอ

เพิ่มเส้นทางสำหรับวิธี POST HTTP

put(urlMatcher, handler)

ข้อโต้แย้ง:

• urlMatcher : ขอตัวจับคู่ URL
• handler : ตัวจัดการคำขอ

เพิ่มเส้นทางสำหรับวิธี PUT HTTP

delete(urlMatcher, handler)

ข้อโต้แย้ง:

• urlMatcher : ขอตัวจับคู่ URL
• handler : ตัวจัดการคำขอ

เพิ่มเส้นทางสำหรับวิธี DELETE HTTP

addHandler(method, urlMatcher, handler)

ข้อโต้แย้ง:

• method : วิธี HTTP เป็น string
• urlMatcher : ขอตัวจับคู่ URL
• handler : ตัวจัดการคำขอ

เพิ่มเส้นทางสำหรับ method การวิธี HTTP

setDefaultHandler(handler)

ข้อโต้แย้ง:

• handler : ตัวจัดการคำขอ

ตั้งค่าตัวจัดการคำขอเริ่มต้นสำหรับคำขอที่ไม่ตรงกับเส้นทางใดๆ

setDefault404()

ตั้งค่าตัวจัดการคำขอเริ่มต้นที่ส่งคืนการตอบกลับ 404

สาธารณูปโภค

xhrFactory

ฟังก์ชั่นที่ส่งคืนอินสแตนซ์ MockXhr ใหม่

MockXhr

คลาส MockXhr ที่เซิร์ฟเวอร์เชื่อมต่อ xhrFactory สร้างอินสแตนซ์ของคลาสนี้

getRequestLog()

ส่งคืนอาร์เรย์ของคำขอทั้งหมดที่เซิร์ฟเวอร์ได้รับจนถึงขณะนี้ การโทรแต่ละครั้งจะส่งกลับอาร์เรย์ใหม่ แต่ละองค์ประกอบอาร์เรย์เป็นวัตถุที่มีคุณสมบัติเหล่านี้:

• method : string วิธี HTTP
• url : string URL
• body : ขอร่างกาย
• headers : ขอส่วนหัวเป็นวัตถุ ชื่อส่วนหัวเป็นตัวพิมพ์เล็ก

คลาส MockXhr

คลาสนี้เป็นการเยาะเย้ยของ XMLHttpRequest ส่วนนี้จะบันทึกวิธีการและคุณสมบัติที่ไม่อยู่ในข้อกำหนด

API จำลอง

MockXhr.timeoutEnabled

คุณสมบัติ boolean แบบคงที่นี้ควบคุมการหมดเวลาอัตโนมัติของคำขอจากทุกอินสแตนซ์ของคลาส

timeoutEnabled

คุณสมบัติ boolean นี้ควบคุมการหมดเวลาอัตโนมัติจากอินสแตนซ์ MockXhr นี้

getResponseHeadersHash()

ส่งกลับส่วนหัวการตอบสนองทั้งหมดเป็นวัตถุ ชื่อส่วนหัวเป็นตัวพิมพ์เล็ก

ตะขอวงจรชีวิต MockXhr

คุณสามารถกำหนดวิธีการโทรกลับสำหรับ hooks วงจรการใช้งาน MockXhr ได้ที่ตำแหน่งเหล่านี้:

1. คุณสมบัติคงที่ในคลาส MockXhr hook ใช้กับอินสแตนซ์ทั้งหมดของ MockXhr และคลาสย่อยของมัน
2. คุณสมบัติคงที่บนคลาสย่อย MockXhr ที่ส่งคืนโดย MockXhrServer.MockXhr หรือ newMockXhr() hook ใช้กับอินสแตนซ์ทั้งหมดของคลาสนั้น
3. คุณสมบัติบนอินสแตนซ์ของ MockXhr hook ใช้กับอินสแตนซ์นั้นเท่านั้น

หากคุณกำหนด hooks หลายรายการสำหรับเหตุการณ์รอบการใช้งาน ระบบจะเรียกใช้ฮุคเหล่านั้นตามลำดับด้านบน

โดยทั่วไปคุณควรเลือกตัวเลือกที่สามซึ่งจะทำให้แยกกรณีทดสอบของคุณได้ง่ายขึ้น

onCreate

วิธีการโทรกลับที่ได้รับข้อโต้แย้งเหล่านี้:

• xhr : อินสแตนซ์ MockXhr ใหม่

ใช้ตะขอวงจรการใช้งานนี้เพื่อสกัดกั้นอินสแตนซ์ของ MockXhr เมื่อถูกสร้างขึ้น

เรียกว่าเมื่อมีการสร้างอินสแตนซ์ของ MockXhr ที่ส่วนท้ายของ Constructor hook วงจรการใช้งานนี้จึงพร้อมใช้งานเป็นคุณสมบัติคงที่เท่านั้น

 import { MockXhr , newMockXhr } from 'mock-xmlhttprequest' ;

// Called for all instances of MockXhr and all its subclasses
MockXhr . onCreate = ( xhr ) => { /*...*/ } ;

// Called for all instances of this MockXhr subclass
const MockXhrSubclass = newMockXhr ( ) ;
MockXhrSubclass . onCreate = ( xhr ) => { /*...*/ } ; 

onSend

วิธีการโทรกลับที่ได้รับข้อโต้แย้งเหล่านี้:

• request : MockXhrRequest สำหรับการร้องขอ
• xhr : อินสแตนซ์ MockXhr

ใช้ hook วงจรการใช้งานนี้เพื่อตอบสนองต่อคำขอด้วยวิธีการตอบสนองจำลอง

เรียกว่าอะซิงโครนัสหลังจากการเรียกแต่ละครั้งเพื่อ send() การเรียกแต่ละครั้งเพื่อ send() จะสร้างการเรียกไปยัง onSend โดยมีอินสแตนซ์แยกต่างหากของ MockXhrRequest

 import { MockXhr , newMockXhr } from 'mock-xmlhttprequest' ;

// Called for all instances of MockXhr and all its subclasses
MockXhr . onSend = ( request ) => { /*...*/ } ;

// Called for all instances of this MockXhr subclass
const MockXhrSubclass = newMockXhr ( ) ;
MockXhrSubclass . onSend = ( request ) => { /*...*/ } ;

// Called for this instance only
const xhr = new MockXhrSubclass ( ) ;
xhr . onSend = ( request ) => { /*...*/ } ;

คลาส MockXhrRequest

การเรียกแต่ละครั้งเพื่อ send() จะสร้าง MockXhrRequest ที่มีข้อมูลเกี่ยวกับ XMLHttpRequest และจัดเตรียมวิธีการตอบสนองโดยทางโปรแกรม

ขอข้อมูล

requestHeaders

HeadersContainer ที่มีสำเนาของส่วนหัวของคำขอ

method

string ที่มีเมธอด HTTP ของคำขอ

url

string ที่มี URL ของคำขอ

body

เนื้อความของคำขอ

withCredentials

boolean ที่มีค่า withCredentials ของคำขอ

getRequestBodySize()

number ไบต์ในเนื้อหาคำขอ

หมายเหตุ: สิ่งนี้จะไม่ถูกต้องอย่างสมบูรณ์เมื่อ body เป็น FormData ที่เข้ารหัส multipart/form-data ส่วนหัว การเข้ารหัส และปัจจัยอื่นๆ ที่ส่งผลต่อขนาด body ที่แท้จริงของ XMLHttpRequest ที่ไม่ได้จำลองจะไม่ได้รับการพิจารณา คุณสามารถใช้วิธีนี้เพื่อรับค่าพื้นสำหรับขนาด body ที่แท้จริงของคำขอ สิ่งนี้มีประโยชน์ในการจำลองเหตุการณ์ความคืบหน้าในการอัปโหลด

วิธีการตอบสนองจำลอง

วิธีการเหล่านี้จัดเตรียมอินเทอร์เฟซทางโปรแกรมเพื่อตอบสนองต่อคำขอ MockXhr

หากการเรียกวิธีการตอบกลับไม่ถูกต้อง ระบบจะแสดง Error พร้อมข้อความที่มีข้อความ "Mock usage error detected"

uploadProgress(transmitted)

ข้อโต้แย้ง:

• transmitted : number ไบต์ที่ส่ง

ดำเนินการความคืบหน้าในการอัปโหลดคำขอ

คุณสามารถเรียกสิ่งนี้ได้เฉพาะเมื่อ body ของคำขอไม่เป็น null และการอัปโหลดไม่สมบูรณ์

หลังจากที่คุณเรียกเมธอดนี้แล้ว คุณสามารถใช้เมธอดจำลองการตอบสนองอื่นๆ ได้

respond(status = 200, headers = {}, body = null, statusText = 'OK')

ข้อโต้แย้ง:

• status : number สถานะ HTTP การตอบสนอง (ไม่จำเป็น)
• headers : object ที่มีส่วนหัวการตอบกลับ (ไม่จำเป็น)
• body : ร่างกายตอบสนอง (ไม่จำเป็น)
• statusText : ข้อความสถานะ HTTP การตอบสนอง string (ไม่จำเป็น)

วิธีการตอบกลับที่สมบูรณ์ซึ่งตั้งค่าทั้งส่วนหัวและเนื้อหาการตอบกลับ เปลี่ยน readyState ของคำขอเป็น DONE

ยิงเหตุการณ์ที่เหมาะสม เช่น readystatechange progress และ load

นี่คือชวเลขสำหรับ setResponseHeaders() ตามด้วย setResponseBody()

หลังจากที่คุณเรียกใช้วิธีนี้ คุณจะไม่สามารถใช้วิธีตอบกลับจำลองอื่นได้ ข้อจำกัดนี้จะถูกยกเลิกหากคุณเรียก open() อีกครั้ง

setResponseHeaders(status = 200, headers = {}, statusText = 'OK')

ข้อโต้แย้ง:

• status : number สถานะ HTTP การตอบสนอง (ไม่จำเป็น)
• headers : object ที่มีส่วนหัวการตอบกลับ (ไม่จำเป็น)
• statusText : ข้อความสถานะ HTTP การตอบสนอง string (ไม่จำเป็น)

ตั้งค่าส่วนหัวการตอบกลับ เปลี่ยน readyState ของคำขอเป็น HEADERS_RECEIVED

ยิงเหตุการณ์ที่เหมาะสม เช่น readystatechange progress และ load

หลังจากที่คุณเรียกวิธีนี้ คุณสามารถใช้วิธีการตอบสนองจำลองต่อไปนี้:

• downloadProgress()
• setResponseBody()
• setNetworkError()
• setRequestTimeout() .

downloadProgress(transmitted, length)

ข้อโต้แย้ง:

• transmitted : number ไบต์ที่ส่ง
• length : number ไบต์ในการตอบกลับ

ยิงเหตุการณ์ความคืบหน้าการตอบกลับ เปลี่ยน readyState ของคำขอเป็น LOADING หากเป็น HEADERS_RECEIVED

คุณต้องเรียก setResponseHeaders() ก่อนวิธีนี้

setResponseBody(body = null)

ข้อโต้แย้ง:

• body : ร่างกายตอบสนอง (ไม่จำเป็น)

ตั้งค่าเนื้อหาการตอบสนอง เปลี่ยน readyState ของคำขอเป็น DONE

ยิงเหตุการณ์ที่เหมาะสม เช่น readystatechange progress และ load

เรียก setResponseHeaders() หากยังไม่ได้เรียก ส่วนหัวการตอบกลับจะมีเฉพาะ Content-Length ที่มีค่าเท่ากับความยาวของเนื้อหาการตอบกลับ

หลังจากที่คุณเรียกใช้วิธีนี้ คุณจะไม่สามารถใช้วิธีตอบกลับจำลองอื่นได้ ข้อจำกัดนี้จะถูกยกเลิกหากคุณเรียก open() อีกครั้ง

setNetworkError()

จำลองข้อผิดพลาดของเครือข่าย เปลี่ยน readyState ของคำขอเป็น DONE

ยิงเหตุการณ์ที่เหมาะสมรวมถึงเหตุการณ์ error

หลังจากที่คุณเรียกใช้วิธีนี้ คุณจะไม่สามารถใช้วิธีตอบกลับจำลองอื่นได้ ข้อจำกัดนี้จะถูกยกเลิกหากคุณเรียก open() อีกครั้ง

setRequestTimeout()

จำลองการหมดเวลาของคำขอ เปลี่ยน readyState ของคำขอเป็น DONE

ยิงเหตุการณ์ที่เหมาะสมรวมถึงเหตุการณ์ timeout

ส่งข้อผิดพลาดหากแอตทริบิวต์ request เท่ากับ 0 เนื่องจากการหมดเวลาไม่เกิดขึ้นในกรณีนั้น

หลังจากที่คุณเรียกใช้วิธีนี้ คุณจะไม่สามารถใช้วิธีตอบกลับจำลองอื่นได้ ข้อจำกัดนี้จะถูกยกเลิกหากคุณเรียก open() อีกครั้ง

newMockXhr()

ส่งกลับคลาสย่อย MockXhr ใหม่

หากคุณใช้คลาสย่อยที่แตกต่างกันของ MockXhr ในแต่ละกรณีการทดสอบ จะง่ายกว่าที่จะตรวจสอบให้แน่ใจว่าพวกเขามีความสมบูรณ์ในตัวเอง ตัวอย่างเช่น หากคุณตั้งค่าคุณสมบัติคง timeoutEnabled บนคลาสย่อย จะมีผลกับคลาสย่อยนั้นเท่านั้น ไม่ใช่คลาสย่อยอื่นที่สร้างขึ้นในกรณีทดสอบอื่น เนื่องจากคลาสย่อยไม่ได้ถูกนำมาใช้ซ้ำ จึงไม่จำเป็นต้องมีโค้ดล้างข้อมูลที่คืนค่าการเปลี่ยนแปลงที่ทำกับคลาสย่อย

newServer(routes)

ข้อโต้แย้ง:

• routes : วัตถุที่มีชุดเส้นทางเริ่มต้นของเซิร์ฟเวอร์ (ไม่จำเป็น)

ส่งคืน MockXhrServer ใหม่พร้อมคลาสย่อย MockXhr ที่เป็นเอกลักษณ์ของตัวเอง ดู newMockXhr()

เพิ่มเส้นทางไปยัง MockXhrServer ด้วยอาร์กิวเมนต์ routes เสริม ดูตัวสร้างสำหรับรายละเอียด

คุณสมบัติ XMLHttpRequest

อิงตามข้อกำหนด XMLHTTPRequest เวอร์ชัน '15 สิงหาคม 2022'

รองรับ

• เหตุการณ์และรัฐ
• open() , setRequestHeader() , send() และ abort()
• อัปโหลดและดาวน์โหลดกิจกรรมความคืบหน้า
• สถานะการตอบกลับ statusText ส่วนหัวและเนื้อหา
• แอตทริบิวต์ timeout (สามารถปิดใช้งานได้)
• การจำลองข้อผิดพลาดของเครือข่าย (ดู MockXhr.setNetworkError() )
• การจำลองการหมดเวลาของคำขอ (ดู MockXhr.setRequestTimeout() )

การสนับสนุนบางส่วน

• overrideMimeType() พ่นเมื่อจำเป็น แต่ไม่มีผลกระทบอื่นใด
• responseType : '' , 'text' และ 'json' ได้รับการสนับสนุนอย่างสมบูรณ์ ค่า responseType ไม่มีผลกระทบต่อเนื้อหาการตอบสนองที่ส่งไปยัง setResponseBody()
• responseXml : เนื้อหาการตอบกลับจะไม่ถูกแปลงเป็นการตอบกลับของเอกสาร หากต้องการรับการตอบกลับของเอกสาร ให้ส่งโดยตรงเป็นเนื้อหาการตอบกลับใน setResponseBody()
• responseUrl : URL คำขอสุดท้ายหลังจากการเปลี่ยนเส้นทางไม่ได้ถูกตั้งค่าโดยอัตโนมัติ สิ่งนี้สามารถจำลองได้ในตัวจัดการคำขอ

ไม่รองรับ

• คำขอแบบซิงโครนัส (เช่น async ตั้งค่าเป็น false ใน open() )
• แยกวิเคราะห์ URL คำขอใน open() และโยน SyntaxError เมื่อเกิดความล้มเหลว

มีส่วนร่วม

ยินดีต้อนรับผู้ร่วมให้ข้อมูล! ดูคู่มือนี้สำหรับข้อมูลเพิ่มเติม

ใบอนุญาต

เอ็มไอที