如何模擬一個XMLHttpRequest請求用於單元測試——nise原始碼閱讀與分析

黃Java發表於2019-02-19
XMLHTTP原始碼

概述

在我們進行單元測試的過程中，如果我們需要對一些HTTP介面進行相關的業務測試，那麼我們就需要來模擬HTTP請求的傳送與響應，否則我們就無法完成測試的閉環。

目前，有許許多多的測試框架都提供了模擬HTTP請求相關的一些流程功能，我們在這邊文章中將會講到的，就是我們在上一篇關於單元測試的部落格提高程式碼質量——使用Jest和Sinon給已有的程式碼新增單元測試中提到的Sinon中引用的HTTP模擬框架nise。

本文的目標是讓讀者能夠通過這篇文章，知道一個成熟的測試框架是如何來模擬一個HTTP的實現，並且與業務程式碼進行結合，輔助進行測試。本文內容相對較為簡單，基本沒有難度，作為一個知識面擴充建議讀者快速略讀。

通過本文，你可以瞭解以下內容：

  • nise是什麼？
  • nise的設計思路是怎麼樣？
  • nise是如何與業務程式碼結合，輔助測試？

nise是什麼

fake XHR and Server.

nise在Github上面的介紹很簡單，雖然只有四個單詞，但是卻很精確的說明了這個庫的含義——構造一個模擬的XHR和Server物件，用來替換原生的物件用來滿足測試需求。

它是Sinon.js的一部分，用來處理HTTP相關測試問題。

該庫提供了替換原生的XHR物件和Server相關的介面，但是我們在本文中只介紹關於XHR部分，也就是瀏覽器中的XHR物件的替換。該部分位於倉庫中/lib/fake-xhr/index.js中，下文中提到的nise如果沒有特別註明，均表示nise中的XHR。

nise的設計思路是怎麼樣的

nise的API介面與使用方法

想要了解nise的設計思路，我們就需要先看下nise的使用方法。

目前，nise提供了以下三個API介面：

module.exports = {
    xhr: sinonXhr, // 用來儲存原來的XHR物件和一些環境判斷屬性
    FakeXMLHttpRequest: FakeXMLHttpRequest, // XHR物件建構函式
    useFakeXMLHttpRequest: useFakeXMLHttpRequest //呼叫後，使用fake XHR物件替換全域性，並返回一個帶有restore方法的fake XHR物件建構函式
};
複製程式碼

我們在使用時，只需呼叫userFakeXMLHttpRequest方法，即可將原生的XHR物件替換成nise提供的XHR物件。在測試完成後，我們再呼叫返回的restore方法，這樣我們就恢復了原生的XHR物件。

返回的模擬HXR物件還有部分API介面可以呼叫，這部分我們將在下一節——nise結構中進行介紹。

nise結構

建構函式——FakeXmlHttpRequest

// 建構函式，用來儲存請求相關的資料如請求狀態、請求頭等
function FakeXMLHttpRequest(config) {
    EventTargetHandler.call(this);
    this.readyState = FakeXMLHttpRequest.UNSENT; // 原生屬性，用來標識請求狀態
    this.requestHeaders = {}; // 記錄請求headers屬性
    this.requestBody = null; // 記錄請求body屬性
    this.status = 0;
    this.statusText = "";
    this.upload = new EventTargetHandler(); // 上傳事件屬性
    this.responseType = ""; // 響應型別屬性
    this.response = ""; // 響應內容屬性
    this.logError = configureLogError(config);

    if (sinonXhr.supportsTimeout) {
        this.timeout = 0;
    }

    if (sinonXhr.supportsCORS) {
        this.withCredentials = false;
    }

    if (typeof FakeXMLHttpRequest.onCreate === "function") {
        FakeXMLHttpRequest.onCreate(this);
    }
}

FakeXMLHttpRequest.useFilters = false;

FakeXMLHttpRequest.addFilter = function addFilter(fn) {} // 增加過濾函式

FakeXMLHttpRequest.defake = function defake(fakeXhr, xhrArgs) {} // 將常用事件如open、send等XHR的方法繫結到模擬的XHR物件上

FakeXMLHttpRequest.parseXML = function parseXML(text) {} // 解析XML

extend(FakeXMLHttpRequest.prototype, sinonEvent.EventTarget, {
    open: function open(method, url, async, username, password) {} // XHR原生方法模擬
    
    readyStateChange: function readyStateChange(state) {} // XHR原生方法模擬
    
    setRequestHeader: function setRequestHeader(header, value) {} // 設定請求header並儲存到requestHeaders屬性中
    
    setStatus: function setStatus(status) {} // 設定status並儲存到status屬性中
    
    setResponseHeaders: function setResponseHeaders(headers) {} // 設定響應headers並跟隨callback一起返回
    
    send: function send(data) {} // XHR原生方法模擬
    
    abort: function abort() {} // 終止HTTP請求
    
    error: function () {} // XHR原生方法模擬
    
    triggerTimeout: function triggerTimeout() {} // 觸發超時
    
    getResponseHeader: function getResponseHeader(header) {} // 獲取響應header
    
    getAllResponseHeaders: function getAllResponseHeaders() {} // 獲取全部的響應headers
    
    setResponseBody: function setResponseBody(body) {} // 設定響應內容
    
    respond: function respond(status, headers, body) {} // 觸發請求的callback函式
    
    uploadProgress: function uploadProgress(progressEventRaw) {} // 上傳進度觸發事件
    
    downloadProgress: function downloadProgress(progressEventRaw) {} // 下載進度觸發事件
    
    uploadError: function uploadError(error) {} // 上傳失敗觸發事件
    
    overrideMimeType: function overrideMimeType(type) {} // 覆蓋mineType
});
複製程式碼

nise是如何與業務程式碼結合，輔助測試

通過上面的原始碼介紹我們可以知道：nise是通過完全模擬一個模擬的XHR物件，然後再使用這個模擬的XHR物件來替換全域性的XHR物件。

而我們在進行HTTP相關測試時，引數是由我們傳入的，因此不需要進行驗證。所以我們最終需要驗證的其實是callback中的處理邏輯和結果。因此，我們可以通過以下一個示例來看下它如何與業務程式碼進行結合。這個示例是在上一篇部落格中出現過的示例：

test(`user`, () => {
    let callback = jest.fn();

    HTTPCommon.deleteRemoteSession({
        data: {},
        success: callback
    });

    expect(requests.length).toBe(1);

    requests[0].respond(200, {"Content-Type": `application/json`}, `hjava`); // 模擬返回值

    expect(callback.mock.calls[0][0]).toBe(`hjava`);
});
複製程式碼

通過respond這個方法，fakeXMLHttpRequest物件觸發了callback函式，並且將指定資料傳遞到業務程式碼中。因此，我們能夠通過callback相關的業務邏輯來判斷我們的邏輯是否正常。

總結

nise通過一個非常常規的方法——模擬一個XHR物件並且實現XHR物件的所有功能來完成針對HTTP請求進行記錄的功能。我們再通過nise記錄的資料，組合其他的單元測試框架來對業務程式碼進行測試。

nise的原始碼只有600餘行，而且非常簡單易懂。我將原有程式碼folk一份並加上了部分註釋，有興趣的同學可以看看，具體地址見此處。

附錄

相關文章