测试平台系列(28) 编写用例详情页(3)

回顾

上一节我们编写了添加用例的表单，并且成功添加了一些用例，但是我们在Tree里面点击对应的用例，右侧Card还是没有显示数据，所以今天我们就来把这块信息补全。

插曲

其实周二晚上，笔者尝试了一下录制视频的方式，因为我觉得这样节约时间，讲完一节课呢，我也写了一部分代码了，也不用去输出对应的文字，十分便利。但发现效果很一般，所以视频就夭折了。第一次试讲呢，总结了以下几个问题:

1. 没有背稿子，简单的说就是即兴发挥，指哪打哪，毫无章法！所以中途会遇到迷茫期，不知道该说啥子了。就会有一部分卡顿的情况出现。
2. 耳麦质量。因为设备很廉价，用的是头戴式耳机的麦克风，所以会出现很大的电流声，虽然录制之前稍微调试过，但是录完了发现视频充满了电流声。
3. 时间把握的不太好，一不小心就讲了1个小时。本来是打算40-45分钟吧，一集连续剧的时间。
4. 录视频的话，就没有文字支撑了，对于不方便看视频的读者很难受。如果配上文字/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