背景
你是否遇到过这种情况:前后端分离体系中,后端开发人员通知你接口有改动,前端代码需要做相应调整。but,改了啥没有明确说明,这时候需要一个个页面去点击,一个个按钮去人肉测试,好不费事。
接口变动主要分两种:
- 接口名称变化(导致接口请求失败);
- 接口返回的数据结构变化(添字段或者删字段)。
通过编写测试代码,只要输入 npm run test
即可自动测试接口是否正常,这是本文要解决的问题。
tein
读音:[tai-ing](test-interface,取两个单词前两个字符组成),一个简短的接口测试脚本。本来想拿现成的测试框架 Jest 在上面修修改改,后来想了想要做的事非常简单,代码全部码好也不超过 400 行。
思路:
- 提前写好接口返回数据的数据结构。tein 提供命令行工具
$ tein ui
,会创建一个网页自动转换数据结构; - 内部利用 axios 发请求判断接口名称是否变化,请求失败八成是接口名字又改了;
- 接口请求成功后,将返回值再一次进行数据结构转换,与第一步写好的结构进行对比,判断是否变化。
transform.gif
运行效果如下,有字段修改的会以不同颜色标识出来,方便定位。
dein.gif
如果你的项目也需要对接口进行测试,不妨体验一波。=> tein quick-start。
对于 outh2 请求,需要先拿到 token,之后每个请求都需要携带 token 进行请求,tein 也做了相应处理。具体 demo 参考 fixture-object-oauth2 与 issue#1。
有更好的处理方式,欢迎下方留言。