前端与后端通常要做ajax的数据交互,在双方互调之前,前端是如何做模拟测试的?
彼此先定好交互方式和接口,然后前端就不用等待后端提供测试接口了,自己测试,修正问题。
有好的解决方案么?
我只知道有个jQuery的插件,mockjax,但是这样做,有种测试代码乱入的感觉。
自己封装一个proxy本地代理层,检测如果是本地环境(比如可以检测location.host是否为localhost)的话就去请求本地模拟好的json或者js数据文件,如果不是,则向服务器请求数据,需要自己封装请求模块
我们公司现在就是这样做的,非常方便的,只要数据交换格式确定以后,前后端可以并行开发,前端不依赖后端的接口以及数据
先明确需求和重点,在分工开发的时候,如果你仅仅是让程序跑通,而不是要做分支覆盖测试/性能测试/正确性和可用性测试神马的话。
那么请根据自己的需求和时间排期来,比如你可以:
- 使用特殊参数(变量)让程序走特殊分支以及使用写死的数据量调试;
- 调用本地的数据源;
- 如果你们公司这类需求多,应该会有统一的mock数据API,调用现成服务。
如果是要进行可用和正确性的相关测试,那么你需要的多半是mocha一类的测试框架了,使用他们的时候,你一样可以使用上面提到的方法,只是你的重点放在了接口正确性以及程序容错能力上。
最后补充一点,如果你要模拟接口,多半会出现回调的情况(如果没有,全部是同步的,那恭喜你了,这个年头业务模型简单的活不多了,且做且珍惜):
遇到回调,需要填写回调头,如果你恰好机器上可以跑php,可以把这个脚本放上去,一步完成需求;
当然,如果你使用express,自己起一个接口更为简单,:D
- 本地使用的简单PHP接口模拟程序
直接用Sinon, 然後stub一個method.
舉個例子, 其他的自己看docs.
sinon.stub($, 'ajax')
@model.fetch()
expect($.ajax.getCall(0).args[0].url).to.contain("/api/2/book/")
$.ajax.restore()
moco就是为解决你的问题而生的。以下是官方的Quickstart:
- Download Standalone Moco Runner
-
Write your own configuration file to describe your Moco server configuration as follow:
[
{
"response" :
{
"text" : "Hello, Moco"
}
}
] Run Moco server
java -jar moco-runner--standalone.jar start -p 12306 -c foo.json - Now, open your favorite browser to visit http://localhost:12306 and you will see "Hello, Moco".
- 约定数据结构
- 约定数据字段名称
- 模拟数据传输场景
1 跟 2 前端与后端开发商量,我觉得一般还是前端来定好一些,当然看项目主导是谁了。
3 的话用 fiddle 等一般的工具可以模拟,这是另一个话题,就不细说了。
定好json交换的格式,可以选择自己定义一个json对象当作后台传入的数据。当然,如果你觉得仿真度不高,可以用一些前台的模板。
npm install http-server
- 从npm安装http-server。
- 命令行里
http-server
即可快速地以当前目录启动一个临时的http服务。 - 然后从
localhost:端口号
打开要调试的页面就可以了。 - 需要什么模拟数据就在相应URL对应目录下创建一个文件把模拟数据放进去就可以
例子:
- 假设工作目录在
/workspace/project
cd /workspace/project
-
http-server
启动服务 -
/workspace/project/mockdata/foobar
这个文件里放着模拟数据 -
/workspace/project/html/index.html
这个为要调试的页面 - 在调试页面里请求
/mockdata/foobar
即可获取模拟数据 -
注意:调试的页面要从
localhost:端口号/html/index.html
打开
以上各种路径URL请根据自己情况替换