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

回顾

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

插曲

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

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

所以其实结论是今晚再来一集,看看效果吧!

改造project接口

之前我们说过了,我们的字段不一定全,如果后续我们需要跟进微服务项目的话,那么在服务发布的时候执行对应服务的测试用例,就是一件很重要的事情。所以我们需要给project定义一个app字段,为了后面的持续集成工作的顺利展开。

  • 在models/project.py添加app字段

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

  • 修改新增/编辑project方法

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

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

  • 调整接口

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

在编辑和新增项目接口都添加了app字段,因为代码改动比较小,就截图了github的提交记录,方便对比。

编写查询用例信息相关功能

  • 编写根据用例id获取用例信息的接口

    在文件app/dao/test_case/TestCaseDao.py新增query_test_case方法。

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

比较简单,根据id查询对应的用例即可。

  • 编写/testcase/query接口

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

先判断case_id是否有传并且是否是数字,再去查询对应的数据。

编写前端部分

前端部分的内容这次改动并不多,我们需要展示用例信息,我们去ant design官网 找到Description组件

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

可以看到这个展示列表,基本上符合我们的要求。先看看成品:

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

虽然样式不是很好看,但是先凑合用,毕竟咱们功能先行。

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

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

caseId通过父组件控制,如果为null则不进行任何操作。如果发生改变,且不为null的情况下,则说明用户在切换左侧用例,所以我们需要重新获取用例信息。也就是根据caseId调用/testcase/query接口。

  • Component部分

    基本上是把antd官网的demo拿过来修改了一下,没有太大的改动。

下期预告

这节没有太多内容,只是把用例数据渲染了出来,类似于jmeter的前置/后置操作,后面也会陆续展开。我们暂且先实现一个最基础的单接口测试。

前端代码仓库: https://github.com/wuranxu/pityWeb

后端代码仓库: https://github.com/wuranxu/pity

上一篇:Java8、9中的Collection API的增强功能


下一篇:用freemark 生成word形式