多状态页面中的 mock 方案

网络营销 2023-3-4 13:32 7106人围观方案

我们偶然辰会碰到一个营业页面存在很多个状态，甚至子状态，比如定单详情就是其中的典型，触及从定单建立到定单竣事，以及售后等流程。保护起来每个状态对应一份数据，虽然我们 QA 供给了数据机关平台，但机关一份对应状态的数据还是需要花费很多时候，而且串行流程一旦出错的话只能重新来一遍。

前期保护阶段也不轻易机关对应状态的数据，致使排查页面题目比力耗时。

别的一个题目就是重新熟悉营业的话本钱比力高，倘使有一个直观的页面可以看到页面款式会好很多。

以上就是设想一个多状态 mock 工具初衷，让开辟者在页面中间接挑选对应状态，便可以切换到对应页面。

技术选型

今朝转转 APP 测试包，webview 页面气泡浮层已经有两个了——客户端工具和 eruda，再多就乱套了，所以最好集成在现有的工具根本上。客户端部分功用我们打仗不到也不领会，在现有条件下只要 eruda 可用。

Eruda 是一个很强大的前端页面调试工具库，我们客户端 webview 也内置了，在测试包中可以很方便的借助 eruda 调试页面，观察日志。同时 eruda 也支持插件，经过插件来扩大 eruda 的功用。我们的工具就基于 eruda 插件来实现。

实现结果预览：

插件预览图

整体流程以下：

插件流程

全部流程大要三个部分组成

营业逻辑革新
Eruda 插件
mock 数据整理

营业逻辑革新

首先要实现这样一个计划焦点依靠于营业利用的请求库，以及能否可以对请求库停止点窜。

我们营业利用的基于 axios 的请求库，其表露了现实发送请求的 adapter 逻辑，我们可以基于 adapter 来实现接口方式的阻挡。

axios adapter

借助 axios-mock-adapter[1]，可以很方便的实现我们的需求。

import { axiosInstance } from '@zz/fetch';
import MockAdapter from 'axios-mock-adapter';

export const mock = new MockAdapter(axiosInstance)

try {
// 借助 localstorage 实现 eruda 插件和 axios-mock-adapter 通讯
const mockReqConf = JSON.parse(localStorage.getItem('_mock_req'))
if (mockReqConf && mockReqConf.mockId) {
mock.onGet(api.getOrderDetail).reply(config => {
// console.log('mock api', api.getOrderDetail)
return axiosInstance.get('https://mockrepository.zhuanzhuan.com/orderdetail?mockId=' + mockReqConf.mockId)
})
}

mock.onAny()
.passThrough()

const isProduction = process.env.NODE_ENV === 'production'
if (isProduction || (mockReqConf && mockReqConf.mockId === '')) {
// sessionStorage 实现开关，假如没有此设置，就重置设备的 mock 阻挡
if (!sessionStorage.getItem('mock-adapter')) {
mock.restore()
}
}
} catch (error) {
console.log('mock adapter config error', error)
}

Eruda 插件

插件的目标是实现两个功用，一个是总开关，另一个是 mock 数据的展现和切换。

总开关借助 sessionStorage，webview 封闭 sessionStorage 数据断根，这样避免了一进入页面就是mock数据，避免忘记封闭以及频仍操纵，需要的时辰才翻开。

Mock 数据的展现设置在一个设置文件中，公司有同一的设置中心，基于携程 Apollo 实现。这个文件的感化是映照对应的状态和 mock 数据来历，来历是同一的，所以只用参数区分即可。

示例以下：

[
{
"id": "/order/detail",
"list": [
{
"title": "正向流程",
"list": [
{
"title": "下单待发货",
"id": "1-0-1"
},
{
"title": "寄卖下单",
"id": "1-1-0"
},
{
"title": "发货运输中",
"id": "1-2-0"
},
{
"title": "平台质检",
"id": "1-3-0"
}
]
},
{
"title": "逆向流程",
"list": [
{
"title": "申请退回-退回中",
"id": "2-3-2"
}
]
}
]
}
]

id 用于标识当前页面链接，能否有设置mock数据，所以也支持设置多个页面。

Eruda 插件的实现参考 eruda 官方文档。