回顾

上一节我们我们主要针对用户的角色进行添加修改功能,还剩下查询删除,这个笔者已经用代码实现了。就不讲解思路,只是贴代码回顾一下。具体的可以去项目里面查看!

搜索用户

因为一个项目的数据都已经展示给前端了,所以我们这里用前端来进行过滤即可,不需要再调用后端接口

  • 在添加成员同一行添加了一个搜索框,用来搜索成员

测试平台系列(25) 编写用例树 - 图1

  • 搜索方法

测试平台系列(25) 编写用例树 - 图2

这个搜索方法的思路是,当用户输入空字符串的时候,则还原之前的数据。而用户输入了对应的name,那么则搜索roles数组中所有邮件/姓名包含name的数据,并更新data数组。(毕竟data数组才是具体显示数据的地方)

  • 删除方法

测试平台系列(25) 编写用例树 - 图3

删除方法也很简单,就是通过id删除对应的数据,如果成功就重新加载下数据

后端更新

测试平台系列(25) 编写用例树 - 图4

编写删除用户角色的方法,我们上节编写过类似的权限校验方法。但是每次都先判断他是不是超管,再判断他是不是项目owner,最后再判断他是不是组长,这样的步骤其实在增/删/改都是需要的,为何不抽出一个公共方法呢?

所以我们这里抽离了has_permission的方法

测试平台系列(25) 编写用例树 - 图5

逻辑也比较简单,基本是按照上面说的一样,先判断超管,再是项目owner,这里有个组长值得注意,因为组长不能修改组长的权限,所以一旦他不是超管且不是owner,那么他要修改组长的权限(删除或者改动),那都是禁止的。

看看效果

测试平台系列(25) 编写用例树 - 图6

那我们现在进入正题吧!

改动测试用例表

其实如果做的更完美的话,用例应该是有模块的划分的,但是这里我们就不分那么细致了,用例的目录不单独抽出来维护了,就图一个字儿: 省事

测试平台系列(25) 编写用例树 - 图7

  • 用例等级
    字符串类型,支持p0-p3或者更多,这个根据具体的业务需求制定。

  • 用例所属目录
    为了更方便地去查看用例,我们把用例按照目录进行分类,这样的话用例就形成了3级结构:
    项目->目录->用例
    虽然这边没有把接口这种关键信息带入进来,但是后续可以糅合yapi相关的文档,用例通过新增一个字段: api_id,用来打通测试用例和api之间的联系。这里就先不纠结这么多了!

完善用例列表相关接口

  • 新增获取用例树的接口
  1. from collections import defaultdict
  2. from app.models.test_case import TestCase
  3. from app.utils.logger import Log
  4. class TestCaseDao(object):
  5. log = Log("TestCaseDao")
  6. @staticmethod
  7. def list_test_case(project_id):
  8. try:
  9. case_list = TestCase.query.filter_by(project_id=project_id, deleted_at=None).order_by(
  10. TestCase.name.asc()).all()
  11. return TestCaseDao.get_tree(case_list), None
  12. except Exception as e:
  13. TestCaseDao.log.error(f"获取测试用例失败: {str(e)}")
  14. return [], f"获取测试用例失败: {str(e)}"
  15. @staticmethod
  16. def get_tree(case_list):
  17. result = defaultdict(list)
  18. # 获取目录->用例的映射关系
  19. for cs in case_list:
  20. result[cs.catalogue].append(cs)
  21. keys = sorted(result.keys())
  22. tree = [dict(key=f"cat_{key}",
  23. children=[{"key": f"case_{child.id}", "title": child.name} for child in result[key]],
  24. title=key, total=len(result[key])) for key in keys]
  25. return tree

其实是一个很简单的查询接口: 根据project_id获取用例。因为antd中的树需要这样的数据结构:

如下图的json

  1. const treeData = [
  2. {
  3. title: 'parent 1',
  4. key: '0-0',
  5. children: [
  6. {
  7. title: 'parent 1-0',
  8. key: '0-0-0',
  9. disabled: true,
  10. children: [
  11. {
  12. title: 'leaf',
  13. key: '0-0-0-0',
  14. disableCheckbox: true,
  15. },
  16. {
  17. title: 'leaf',
  18. key: '0-0-0-1',
  19. },
  20. ],
  21. },
  22. {
  23. title: 'parent 1-1',
  24. key: '0-0-1',
  25. children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
  26. },
  27. ],
  28. },

key是用来确定树里面节点的唯一性,title就是名字了,children就是挂在该目录下的后续节点。

实际效果:

测试平台系列(25) 编写用例树 - 图8

注意这边我们给key加了前缀: case_cat_,目的是为了区分用例目录,因为不同的数据需要展示不同的icon,接下来我们会展示。

  • 继续改写/project/query接口

测试平台系列(25) 编写用例树 - 图9

测试平台系列(25) 编写用例树 - 图10

后续如果一个项目数据多的话,可能会引入Redis来缓存project的信息,这样不必每次都去数据库大查特查。

编写用例列表页面

首先我们把页面一分为二,左侧展示树,右侧根据用户选择的用例进行展示。

效果图:

测试平台系列(25) 编写用例树 - 图11

测试平台系列(25) 编写用例树 - 图12

左侧7份,右侧17份,2个card,如果高度超出则自动变为滚动条。

今天就不详细讲前端的细节了,毕竟本身树就复杂,感觉还不如不讲,哈哈!

项目地址

  • 前端地址:

https://github.com/wuranxu/pityWeb

  • 后端地址:

https://github.com/wuranxu/pity

不知不觉写了这么久时间,不过今天还是以写代码为主,码文的时间缩水了,先尽量加快脚步吧!