大家好~我是米洛！

我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的完整教程，希望大家多多支持。

欢迎关注我的公众号米洛的测开日记，获取最新文章教程!

回顾

前文我们支持了Redis这种前置条件，但其实有个特别不友好的地方:

如果前置条件比较接近，我甚至于不能复制它们。

如果能像前置case一样，选择一个去快速复制，所以说这样是十分不友好的。

那这一节我们就来实现它。

效果图

老规矩，先放上效果图:

测试平台系列(84) 支持复制其他前置条件 - 图1

思路

其实要支持这个操作，对于后端来说还是比较简单的。

好在我们的后端的Constructor有个type字段，用于区分前置条件的类型。所以我们只需要安排一个查询接口:

根据类型查找出前置条件的明细，然后选择后，前端用表单的方式带入进来，即可复制整个前置条件。

后端先行

编写查询接口，展示它属于哪一个case，并且给出前置条件的细节。

前端呢，则是已经确定好了TreeSelect组件，所以后端采用2层的数据格式:

  1. [
  2.   {
  3.   "title": "用例",
  4.   "key": "caseid",
  5.   "children": [
  6.     {
  7.       "title": "数据构造器A",
  8.       "key":
  9.       "constructor_id"
  10.     }
  11.   ]}
  12. ]

那我们就造起来吧~

  • 编写思路
    我不打算用join(从一开始我就贯彻了自己这个思想，我更喜欢用2次查询，自己拼接数据的方式，其实是join用的不好)
    我们优先查出对应类型的前置条件，接着就能拿到所有case_id了，再用case_id去查出case的信息，岂不美哉？
    只是难点在于怎么组成这个树，但其实这个树只有2层，我们要做的就是先组装children，最后拼parent。
    这里我们就要用到defaultdict了。
    1. 查出符合条件的前置条件，并根据case_id为key，前置条件为value的方式，存放到defaultdict
    2. 根据defaultdict的keys查出case_id对应的case名称，遍历之，拼凑parent，并把defaultdict里面的value放到children字段。

来看看代码: 

  1.     @staticmethod
  2.     async def get_case_and_constructor(constructor_type: int):
  3.         # 最终返回结果树
  4.         ans = list()
  5.         async with async_session() as session:
  6.             # 此处存放case_id => 前置条件的映射
  7.             constructors = defaultdict(list)
  8.             # 根据传入的前置条件类型，找出所有前置条件, 类型一致，共享开关打开，并未被删除
  9.             query = await session.execute(
  10.                 select(Constructor).where(
  11.                     Constructor.type == constructor_type,
  12.                     Constructor.public == True,
  13.                     Constructor.deleted_at == None))
  14.             # 并把这些前置条件放到constructors里面
  15.             for q in query.scalars().all():
  16.                 constructors[q.case_id].append({
  17.                     "title": q.name,
  18.                     "key": f"{q.id}",
  19.                     "isLeaf": True,
  20.                     # 这里是为了拿到具体的代码，因为树一般只有name和id，我们这还需要其他数据
  21.                     "constructor_json": q.constructor_json,
  22.                 })
  24.             # 二次查询，查出有前置条件的case
  25.             query = await session.execute(
  26.                 select(TestCase).where(TestCase.id.in_(constructors.keys()), TestCase.deleted_at == None))
  27.             # 构造树，要知道children已经构建好了，就在constructors里面
  28.             for q in query.scalars().all():
  29.                 # 把用例id放入cs_list，这里就不用原生join了
  30.                 ans.append({
  31.                     "title": q.name,
  32.                     "key": f"case_{q.id}",
  33.                     "disabled": True,
  34.                     "children": constructors[q.id]
  35.                 })
  36.         return ans

注释写的非常详细，每一步都交代的很清楚。

接着是接口部分，就不需要多说了:

  1. # 获取所有数据构造器
  2. @router.get("/constructor/list")
  3. async def list_case_and_constructor(constructor_type: int):
  4.     try:
  5.         ans = await ConstructorDao.get_case_and_constructor(constructor_type)
  6.         return PityResponse.success(ans)
  7.     except Exception as e:
  8.         return PityResponse.failed(str(e))

前端适配

其实前端适配很简单，加一个组件，并且在组件选中值的时候更新表单的值就可以了。

oh shit~~

写到这里我才发现我居然写过类似的代码，难受= =

测试平台系列(84) 支持复制其他前置条件 - 图2

果然人会在同一个地方倒下，不过我觉得之前写的，没有对前置条件进行分类，所以我得改造改造，或者说这次写的当做v2接口使用。

不得不说，前端的改动比想象中还大一点。仔细比对了这个接口，发现它的逻辑是:

  1. 找到对应的前置条件id
  2. 查询前置条件的数据，进行替换

但之前的接口只针对case类型，所以很鸡肋。

我们目前把它做了一个船新版本来适配我们所有的类型:

  1. import {Col, Row, TreeSelect} from "antd";
  2. import {connect} from 'umi';
  3. import {useEffect} from "react";
  5. const CopyTreeSelect = ({construct, dispatch}) => {
  7.   const {constructorData, searchConstructor, constructorType} = construct;
  10.   const save = (data) => {
  11.     dispatch({
  12.       type: 'construct/save',
  13.       payload: data,
  14.     })
  15.   }
  17.   const getConstructorData = () => {
  18.     dispatch({
  19.       type: 'construct/getConstructorTree',
  20.       payload: {
  21.         constructor_type: constructorType
  22.       }
  23.     })
  24.   }
  26.   useEffect(() => {
  27.     getConstructorData();
  28.   }, [constructorType])
  30.   return (
  31.     <Row style={{marginTop: 24, marginBottom: 24}}>
  32.       <Col span={3}/>
  33.       <Col span={18}>
  34.         <Row>
  35.           <Col span={4}/>
  36.           <Col span={20}>
  37.             <TreeSelect
  38.               allowClear
  39.               showSearch
  40.               style={{width: '100%'}}
  41.               value={searchConstructor}
  42.               filterTreeNode={(inputValue, treeNode) => {
  43.                 return treeNode.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  44.               }}
  45.               dropdownStyle={{maxHeight: 600, overflow: 'auto'}}
  46.               treeData={constructorData}
  47.               placeholder="通过搜索构造条件，可以快速复制参数哦！"
  48.               treeDefaultExpandAll
  49.               onChange={(e) => {
  50.                 save({searchConstructor: e})
  51.                 if (e !== undefined) {
  52.                   dispatch({
  53.                     type: 'construct/getConstructorData',
  54.                     payload: {id: e.split("_")[1]}
  55.                   })
  56.                 } else {
  57.                   dispatch({
  58.                     type: 'construct/save',
  59.                     payload: {testCaseConstructorData: {type: constructorType, public: true, enable: true}},
  60.                   })
  61.                 }
  62.               }}
  63.             />
  64.           </Col>
  65.         </Row>
  67.       </Col>
  68.       <Col span={3}/>
  69.     </Row>
  71.   )
  72. }
  74. export default connect(({loading, construct}) => ({loading, construct}))(CopyTreeSelect);

把这个组件单独抽出，成为一个copy组件。并在前置条件类型变化的时候，自动更换数据源。

页面上再进行一些微调，就ok了。说实话这块有点臃肿，由于我自己都看不下去，所以我先放过自己，也放过大家。

下一节我们小试牛刀，编写一个简单的测试报告邮件通知功能。（其实说简单也不简单，如果要设计到样式，还挺麻烦）