测试开发实战[提测平台]16-状态流转和提测详情展示

2021-11-28

微信搜索【大奇测试开】,关注这个坚持分享测试开发干货的家伙。

本篇讲解概要,快速了解内容关键点,也可先参照脉络点先实现再对照。这样的印象会更深刻。

TPMServer

状态流转接口

在提测功这个大功能涉及到状态直接流转的有两处,一个是提测成功后,对应测试在计划时间内需要点击 “开始测试” 将状态标记为下个阶段,即数据库表中status=2(测试进行中),另一个就在测试报告提交的时候如果状态为废弃后,可以将将其数据删除不展示(即软删除表字段isDel=1),从这两个动作来看都是同一个表的更新操作,所以可以合并一个接口实现,减少接口的冗余。

@test_manager.route("/api/test/change", methods=['POST'])
def changeStatus():
    # 初始化返回对象
    resp_success = format.resp_format_success
    resp_failed = format.resp_format_failed
    # 获取请求参数Body
    reqbody = json.loads(request.get_data())
    if 'id' not in reqbody:
        resp_failed['message'] = '提测ID不能为空'
        return resp_failed
    elif 'status' not in reqbody:
        resp_failed['message'] = '更改的状态不能为空'
        return resp_failed
    # 重新链接数据库
    connection = pool.connection()
    with connection.cursor() as cursor:
        # 判断状态流转的操作,如果status==start为开始测试,status==delete 软删除
        if reqbody['status'] == 'start':
            sql = "UPDATE `request` SET `status`=2 WHERE id=%s"
            resp_success['message'] = '状态流转成功,进入测试阶段。'
        elif reqbody['status'] == 'delete':
            sql = "UPDATE `request` SET `isDel`=1 WHERE id=%s"
            resp_success['message'] = '提测已被删除!'
        else:
            resp_failed.message = '状态标记错误'
            return resp_failed
        cursor.execute(sql, reqbody['id'])
        connection.commit()
    return resp_success

接口实现很简单,通过一个额外的字段标记做哪个字段更新,参考代码如上。

依然不要忘了对后端接口的测试:

Case1:请求不给定id或者status参数验证是否有参数错误提示返回

Case2:状态操作status=start验证是否将提测状态改为2

Case3:状态操作status=delete验证是否对数据进行软删除标记isDel=1

其实还有一种严格情况就是如果更改的id不存在该怎么处理,示例代码没有给出,看看是你的话如何进行优化呢?也当作个小练习吧。

 

TPMWeb

状态流转功能实现

前端分别对之前操作栏中的“开始测试”和“删除测试”添加 @click 方法,对后端状态改变接口进行调用,步骤套用不变

1.test.js 定义接口请求

export function changeStatus(body) {
  return request({
    url: '/api/test/change',
    method: 'post',
    data: body
  })
}

2. /src/views/test/index.vue的<template>添加触发方法

3.同页面vue的method中进行方法逻辑处理,此次对于请求的返回注意加了个$message 提示,在有正确的结果返回的时候给出服务端的消息提示,另外不要忘记代码中在更新成功后要进行一次查询请求,列表刷新最新的数据。

startTest(row) {
  const reqBody = {
    id: row.id,
    status: 'start'
  }
  changeStatus(reqBody).then(resp => {
    this.$message({
      message: resp.message,
      type: 'success'
    })
    this.searchClick()
  })
},
deleteTest(row) {
  const reqBody = {
    id: row.id,
    status: 'delete'
  }
  changeStatus(reqBody).then(resp => {
    this.$message({
      message: resp.message,
      type: 'success'
    })
    this.searchClick()
  })
},

为了提升用户感知度,这里还对table增加了延迟loading的,参考图的标记位置,即定义是否显示加载动画的动态变量,然后搜索前操作打开,有结果后关闭。

由于本地查询可能比较快,特别设置300毫秒作为延迟,如果你在测试的过程中还是不是很明显,可以加大时间到1000毫秒体验一下。请注意图中还有两个变量声明 requestInfoVisible 和 requestInfo 是要在接下来的实现提测详情展示用到的。

提测详情展示

在实际使用中,提测内容很多,是需要有在平台查看详细的功能,这里通过弹出对话框,并内嵌 "描述列表" 来进行展示,组件的使用方法参考官方 [ https://element.eleme.io/2.15/#/zh-CN/component/descriptions ],这里就不再粘贴了,点击操作”提测详情“弹窗的实现Demo样式相关片段代码如下:

1. template 部分,核心组件 dialog 和 descriptions

<el-link type="primary" @click="showRequestInfo(scope.row)">提测详情</el-link>

 

<div>
  <el-dialog :title="requestInfo.title" :visible.sync="requestInfoVisible">
    <el-descriptions title="提测信息">
    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
    <el-descriptions-item label="备注">
    <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
 </el-dialog>
</div>

2. js部分,行数据赋值,显示无底角标按对话框

showRequestInfo(row) {
  this.requestInfo = row
  this.requestInfoVisible = true
},

运行查看效果却发现没有按照预期展示正常样式

这是由于项目引用的element-ui是2.13.0版本,并没有这个组件,需要升级到 "element-ui": "2.15.17"才可以,记得在package.json更改版本后要进行npm install 安装最新依赖包。

然后一并修改下<el-descriptions-item>展示内容为项目的内容,最终实现的效果如下。

样式还有点奇怪,注意到有一些字段是会很长的,进行下处理,利用官方自定义分栏和合并列属性进一步优化,最终效果如图。

这部分的优化后的完整代码参考

到此为止,本篇要实现的两个功能已经全部完成。

缺陷修复

在更新本次内容中,实际上发现两个隐藏的问题,如果之前大家在认真实践操作中应该早被发现了,我这里也Mark下

问题1: 错误消息体(字典/Json)变量赋值引用错误,正确应该是下角标的方式。

 

问题2: 列表查询翻页报错,是因为统计总数不应该带有limit条件,需要独立处理语句。

 两个缺陷前后优化了什么代码,可以通过git工具得到完整的诠释。

最后说一下,如果你在跟着本系列分享教程中有任何的问题和想法建议,欢迎私信或者加我个人微信、群等进行交流,微信可以通过公众号留言和菜单两种方法是获取。真心希望公众号博客更新的原创实战内容,能在茫茫泛滥网络文章带来帮助和切实干货价值。

【代码更新】

  • 地址:https://github.com/mrzcode/TestProjectManagement

  • TAG:TPMShare16

坚持原创,坚持实践,坚持干货,如果你觉得有用,请点击推荐,也欢迎关注我博客园和微信公众号。