我们有时会遇到一个业务页面有多个状态，甚至子状态。比如订单明细就是其中的典型，涉及从订单创建到订单完成、售后等流程。为了维护，每个状态对应一个数据。虽然我们QA提供了一个数据构建平台，但是构建一个state对应的数据还是需要花费大量的时间，如果串行过程出错，只能重来一遍。在后期的维护阶段，状态对应的数据不容易构建，导致排查页面问题非常耗时。另一个问题是从头开始熟悉业务的成本比较高。如果有一个直观的页面可以看到页面样式就更好了。以上就是设计多状态mock工具的初衷，让开发者直接在页面上选择对应的状态，然后切换到对应的页面。技术选择现在转到app测试包，webview页面上已经有两个气泡层-clienttools和eruda，多了就乱了，所以最好在已有工具的基础上进行整合。我们无法访问或了解客户端的某些功能。在现有条件下，只有eruda可用。Eruda是一个非常强大的前端页面调试工具库。我们的客户端webview也是内置的。在测试包中，使用eruda调试页面，观察日志，非常方便。同时eruda还支持插件，通过插件可以扩展eruda的功能。我们的工具是基于eruda插件实现的。实现效果预览：插件预览的整体流程如下：整个插件流程大概包括三部分：业务逻辑改造，Eruda插件Mock，数据整理，业务逻辑改造。请求图书馆进行更改。我们业务使用的基于axios的请求库，暴露了实际发送请求的适配器逻辑，我们可以基于适配器实现接口方法拦截。借助axios-mock-adapter[1]，axiosadapter可以轻松实现我们的需求。import{axiosInstance}from'@zz/fetch';importMockAdapterfrom'axios-mock-adapter';exportconstmock=newMockAdapter(axiosInstance)try{//使用localstorage实现eruda插件与axios-mock的通信-adapterconstmockReqConf=JSON.parse(localStorage.getItem('_mock_req'))if(mockReqConf&&mockReqConf.mockId){mock.onGet(api.getOrderDetail).reply(config{//console.log('mockapi',api.getOrderDetail)returnaxiosInstance.get('https://mockrepository.zhuanzhuan.com/orderdetail?mockId='+mockReqConf.mockId)})}mock.onAny().passThrough()constisProduction=process.env.NODE_ENV==='production'if(isProduction||(mockReqConf&&mockReqConf.mockId==='')){//sessionStorage实现开关，如果没有这个配置，重新设置mock拦截if(!sessionStorage.getItem('mock-adapter')){mock.restore()}}}catch(error){console.log('mockadapterconfigerror',error)}Erudaplugin插件的目的是为了实现两个好玩的ctions，一个是总开关，另一个是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":"ApplicationReturn-Returning","id":"2-3-2"}]}]}]id用于标识当前页面链接，是否有配置mock数据，所以它也支持配置多个页面。Eruda插件的实现可以参考Eruda的官方文档。如何在Eruda中编写插件[2]https://github.com/liriliri/eruda/blob/master/doc/PLUGIN.mdEruda工具库[3]https://licia.liriliri.io/docs_cn。htmlEruda插件编写类eruda更像是一个小型的模板库，eruda提供了插件模板，绑定事件的方法类似于jQuery语法。eruda提供的licia工具库有对应的方法，参考即可。Eruda插件示例代码：(function(root,factory){if(typeofdefine==='function'&&define.amd){define([],factory);}elseif(typeofmodule==='object'&&module.exports){module.exports=factory();}else{root.erudaPlugin=factory();}})(this,function(){returnfunction(eruda){varTool=eruda.Tool,util=eruda.util;varPlugin=Tool.extend({name:'plugin',init:function($el){this.callSuper(Tool,'init',arguments);this._style=util.evalCss(['.eruda-dev-tools.eruda-tools.eruda-plugin{padding:10px;}','.eruda-tip{padding:10px;background:#fff;color:#263238;}'].join('.eruda-dev-tools.eruda-tools.eruda-plugin'));$el.html('
