前端接口测试

背景

由于需求不断更改，项目前后端分离后，后端开发人员经常需要改字段加字段，也有可能删掉接口，这时候前端如果没有相对应的调整，就容易造成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吧。