前端接口测试

背景

由于需求不断更改,项目前后端分离后,后端开发人员经常需要改字段加字段,也有可能删掉接口,这时候前端如果没有相对应的调整,就容易造成bug。为了解决这个问题,我们需要对接口进行测试。

测试被调用接口

  1. 返回的数据类型判断
  2. 接口返回的数据结构变化(添字段或者删字段)
  3. 接口路径变化(导致接口请求失败)
  4. 接口是否异常

单元测试jest

单元测试选择jest,在jest没有找到我要的断言方法,所有需要自己通过expect.extend扩展。

使用方式,例如response data
received

{
	"code":"0",
	"msg":"",
	"version":3.14,
	"data":[
		{"name":"平台同步","id":0},
		{"name":"商城同步","id":1},
		{"name":"人工录入","id":2},
		{"name":"开放平台","id":3}
	]
}

模板(expected)

{
	"code":"@String",
	"msg":"@String",
	"version":"@Number && @this < 4 ",
	"data":[
		{"name":"@String","id":"@Number"},
	]
}

模板的属性值介绍

@String其实是个表达式, 自定义插件内部会将@String转化为:

Object.prototype.toString.call(val) === [object  String']

其实你还可以这么写@String || @Number转化后:

Object.prototype.toString.call(val) === '[object  String]' || Object.prototype.toString.call(val) === '[object  Number]'

@this等于当前属性值, 例如: @this < 4会转换为3.14 < 4表达式

只要条件表达式为false, 那说明这个字段异常,那么断言就失败。

返回的数据类型判断

received

{
	"code":"0",
	"msg":"",
	"version":"3.13",
	"data":[
		{"name":true,"id":0},
		{"name":"商城同步","id":1},
		{"name":"人工录入","id":2},
		{"name":"开放平台","id":3}
	]
}

模板(expected)

{
	"code":"@String",
	"msg":"@String",
	"version":"@Number",
	"data":[
		{"name":"@String","id":"@Number"},
	]
}

运行结果

假设后台将字段version类型改为String, data[0].name类型改为Number

接口返回的数据结构变化(添字段或者删字段)

received

{
	"code":"0",
	"msg":"",
	"data":[
		{"name":"平台同步","id":0, "orderId": 2},
		{"name":"商城同步","id":1},
		{"name":"人工录入","id":2},
		{"name":"开放平台","id":3}
	]
}

模板(expected)

{
	"code":"@String",
	"msg":"@String",
	"version":"@Number",
	"data":[
		{"name":"@String","id":"@Number"},
	]
}

运行结果

假设后台删除了version字段, 在data数组第一个元素加入orderId字段

快速生成模板工具

如果一个接口有几十上百个字段,每个字段都手动定义类型,这个工作量就太大了。如果我们将后台response 的json数据复制过来转换成对比模板 , 这样效率就大大提升,不需要为每个字段去定义类型。
为了快速生成对比模板,我们应该写个工具,比如:
在这里插入图片描述

执行脚本配置

package.json

	"scripts": {
		"build:prod": "npm run test:prod && webpack --config build/webpack.prod.conf.js",
		"build:dev": "npm run test && node build/webpack.dev.conf.js",
		"test": "cross-env NODE_ENV=development jest --config test/unit/jest.conf.js",
		"test:prod": "cross-env NODE_ENV=production jest --config test/unit/jest.conf.js",
		"test:ui": "anywhere -d test/unit/extends/eqTemplate/ui -p 20010"
	},

build:dev跑完接口测试再build吧。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44520133/article/details/89101995
0条评论
添加一条新回复