前后端分离架构中接口测试最佳实践

背景

你是否遇到过这种情况:前后端分离体系中,后端开发人员通知你接口有改动,前端代码需要做相应调整。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

有更好的处理方式,欢迎下方留言。

转载于:https://my.oschina.net/dkvirus/blog/2998826

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值