如何模拟一个XMLHttpRequest请求用于单元测试——nise源码阅读与分析

概述

在我们进行单元测试的过程中,如果我们需要对一些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一份并加上了部分注释,有兴趣的同学可以看看,具体地址见此处

附录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

Ajax

1、XMLHttpRequest对象 各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以:

15140
来自专栏佳爷的后花媛

php基础(一)

static 是静态变量,在局部函数中存在且只初始化一次,使用过后再次使用会使用上次执行的结果; 作为计数,程序内部缓存,单例模式中都有用到。

27220
来自专栏前端杂谈

vue使用Axios做ajax请求

511120
来自专栏Netkiller

Application Firewall Design

Application Firewall Design Web Application Firewall, 7layer Firewall ---- 目录 1....

30640
来自专栏木宛城主

Unity应用架构设计(13)——日志组件的实施

对于应用程序而言,日志是非常重要的功能,通过日志,我们可以跟踪应用程序的数据状态,记录Crash的日志可以帮助我们分析应用程序崩溃的原因,我们甚至可以通过日志...

21450
来自专栏编程软文

redis的使用和安装,redis基础和高级部分

40870
来自专栏前端小吉米

打造多线程 Web

10830
来自专栏进击的君君的前端之路

AJAX

27150
来自专栏更流畅、简洁的软件开发方式

ajax的再次封装!

js的动态加载、缓存、更新以及复用 系列有点卡文,放心会继续的。先来点更基础的,为js的加载做点铺垫。   jQuery的ajax本来就很方便了,为啥还要在进一...

33080
来自专栏西枫里博客

最简单的AJAX初级教程

    项目实现目标:验证邮箱是否已经注册 项目实现过程:用户注册页面输入完邮箱后即时提醒邮箱是否可以注册 先来看html表单代码

11630

扫码关注云+社区

领取腾讯云代金券