测试平台系列(28) 编写用例详情页(3)
回顾
上一节我们编写了添加用例的表单，并且成功添加了一些用例，但是我们在Tree里面点击对应的用例，右侧Card还是没有显示数据，所以今天我们就来把这块信息补全。
插曲
其实周二晚上，笔者尝试了一下录制视频的方式，因为我觉得这样节约时间，讲完一节课呢，我也写了一部分代码了，也不用去输出对应的文字，十分便利。但发现效果很一般，所以视频就夭折了。第一次试讲呢，总结了以下几个问题:
- 没有背稿子，简单的说就是即兴发挥，指哪打哪，毫无章法！所以中途会遇到迷茫期，不知道该说啥子了。就会有一部分卡顿的情况出现。
- 耳麦质量。因为设备很廉价，用的是头戴式耳机的麦克风，所以会出现很大的电流声，虽然录制之前稍微调试过，但是录完了发现视频充满了电流声。
- 时间把握的不太好，一不小心就讲了1个小时。本来是打算40-45分钟吧，一集连续剧的时间。
- 录视频的话，就没有文字支撑了，对于不方便看视频的读者很难受。如果配上文字/PPT，那么笔者就更花时间了。
所以其实结论是今晚再来一集，看看效果吧！
改造project接口
之前我们说过了，我们的字段不一定全，如果后续我们需要跟进微服务项目的话，那么在服务发布的时候执行对应服务的测试用例，就是一件很重要的事情。所以我们需要给project定义一个app字段，为了后面的持续集成工作的顺利展开。
- 在models/project.py添加app字段
image
- 修改新增/编辑project方法
新增项目
编辑项目
- 调整接口
image
在编辑和新增项目接口都添加了app字段，因为代码改动比较小，就截图了github的提交记录，方便对比。
编写查询用例信息相关功能
-
编写根据用例id获取用例信息的接口
在文件
app/dao/test_case/TestCaseDao.py新增query_test_case方法。
image
比较简单，根据id查询对应的用例即可。
- 编写
/testcase/query接口
image
先判断case_id是否有传并且是否是数字，再去查询对应的数据。
编写前端部分
前端部分的内容这次改动并不多，我们需要展示用例信息，我们去ant design官网 找到Description组件。
image
可以看到这个展示列表，基本上符合我们的要求。先看看成品:
image
虽然样式不是很好看，但是先凑合用，毕竟咱们功能先行。
import React, { useEffect, useState } from 'react';
import { queryTestCase } from '@/services/testcase';
import auth from '@/utils/auth';
import { Badge, Col, Descriptions, Row, Tag } from 'antd';
import { CONFIG } from '@/consts/config';
export default ({ caseId, userMap }) => {
const [data, setData] = useState({ status: 1, tag: '' });
useEffect(async () => {
if (caseId === null) {
return;
}
const res = await queryTestCase({ caseId: caseId });
if (auth.response(res)) {
setData(res.data);
}
}, [caseId]);
return (
<Row gutter={[8, 8]}>
<Col span={24}>
<Descriptions title='用例详情' bordered size='small'>
<Descriptions.Item label='用例名称'><a>{data.name}</a></Descriptions.Item>
<Descriptions.Item label='用例目录'>{data.catalogue}</Descriptions.Item>
<Descriptions.Item label='用例优先级'>{<Tag
color={CONFIG.CASE_TAG[data.priority]}>{data.priority}</Tag>}</Descriptions.Item>
<Descriptions.Item label='请求类型'>{CONFIG.REQUEST_TYPE[data.request_type]}</Descriptions.Item>
<Descriptions.Item label='请求方式'>
{data.request_method}
</Descriptions.Item>
<Descriptions.Item label='用例状态'>{<Badge {...CONFIG.CASE_BADGE[data.status]} />}</Descriptions.Item>
<Descriptions.Item label='用例标签' span={2}>{
<div style={{ textAlign: 'center' }}>
{data.tag ? data.tag.split(',').map(v => <Tag style={{ marginRight: 4 }} color='blue'>{v}</Tag>): '无'}
</div>
}</Descriptions.Item>
<Descriptions.Item
label='创建人'>{userMap[data.create_user] !== undefined ? userMap[data.create_user].name : 'loading...'}</Descriptions.Item>
<Descriptions.Item
label='更新人'>{userMap[data.update_user] !== undefined ? userMap[data.update_user].name : 'loading...'}</Descriptions.Item>
<Descriptions.Item label='创建时间'>{data.created_at}</Descriptions.Item>
<Descriptions.Item label='更新时间'>{data.updated_at}</Descriptions.Item>
<Descriptions.Item label='请求url' span={3}>
<a href={data.url}>{data.url}</a>
</Descriptions.Item>
<Descriptions.Item label='请求Headers' span={3}>
<pre>{data.request_header}</pre>
</Descriptions.Item>
<Descriptions.Item label='请求body' span={3}>
<pre>{data.body}</pre>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
);
}
解释一下代码:
- useEffect
image
caseId通过父组件控制，如果为null则不进行任何操作。如果发生改变，且不为null的情况下，则说明用户在切换左侧用例，所以我们需要重新获取用例信息。也就是根据caseId调用/testcase/query接口。
-
Component部分
基本上是把antd官网的demo拿过来修改了一下，没有太大的改动。
下期预告
这节没有太多内容，只是把用例数据渲染了出来，类似于jmeter的前置/后置操作，后面也会陆续展开。我们暂且先实现一个最基础的单接口测试。
前端代码仓库: https://github.com/wuranxu/pityWeb
后端代码仓库: https://github.com/wuranxu/pity
