zoukankan      html  css  js  c++  java
  • 测试平台系列(27) 编写用例详情页(2)

    回顾

    上一节我们编写好了添加用例的接口,并且采用了jsonschema进行参数校验,当然不是很好的方式,起码解决了字段校验的问题。

    那这一节我们就来做2个事情,一个是完成新增用例的页面,另一个呢,是展示我们已经添加好的用例

    思考新增用例页面

    上一节我们已经提供了这样一个用例树的页面,注意这里有个+的按钮,但是之前呢,他是没有任何效果的。

    我这里解释一下,为什么点击+不直接弹出新增用例的表单呢,那是因为后续我们可能会把用例的目录给放开,而不是像现在这样只有目录/用例,所以后续可能是添加目录用。

    好了,我们现在要编写的就是用例的表单。按照鄙人的设计,里面就是填入一些核心数据,也就是一个用例的必备字段。

    这里我把用例的setup+teardown会抽出来,作为单独的模块,一个最基础的用例不包含setUp和tearDown。又由于我们暂时只支持了HTTP请求,所以核心字段如下:

    • 用例名称

    • 用例目录

    • 优先级

    • 状态

    • 请求类型

    • tag

    • 请求方式

    • 请求地址

      其他的作为可选性,如果需要的话可以自行添加,比如headers等等。笔者考虑的是把这些信息放入Drawer组件里面,供用户填写并提交表单的形式。

    一些想法

    之前笔者是边做边想,可能有很多东西在做的时候并不合理,不会是一个很完善的版本。所以笔者现在改变了打法,是先做完一部分,然后针对这部分内容讲解。所以如下是笔者编写的初版页面:

    大致的页面分为2个部分吧,分别是用例信息请求信息

    改造之前的postman页面

    之前的postman.jsx是没有包装表单组件的,啥意思呢?也就是说,没有如下这种效果:

    Form组件是antd中比较重要的一种,专门用于表单的校验。

    但是因为我们之前的Postman页面需要开放给用户调试,所以我们需要编写一个新的组件,叫PostmanForm.jsx。

    由于后面我们需要获取到headers的值,所以我们把headers/body和setHeaders/setBody方法抽离出来。

    其实这里我要补充说明一下,因为对于react的hooks笔者不是很熟悉,可能存在状态管理混乱的问题,但是考虑到之前熟悉的DVA和Reducers相关的知识较为晦涩,所以我这边就不通俗地讲了,毕竟我们也不是专业的前端,有些东西要先去解决,再去优化才行。当然,如果有大佬有更好的处理方式,笔者也愿意虚心学习。

    注意,我在url和请求方式都套上了Form.Item这个组件,这个组件可以将之变为表单的一项,所以就出现了上面gif的效果。但是却不得不拆分这2个控件,不然显示会有问题。

    headers由于是列表,不好支持form,body又是第三方组件,所以我们就此别过。其他的代码基本上差别不大,与postman.jsx类似。

    编写添加用例表单

    • 效果图

    • 代码部分

    • onOk

      提交表单触发的方法,这边新添加body和header2个参数。

    • translateHeaders

      因为我们的headers是list,所以我们要转换它为字符串。

    Drawer也就是图中的抽屉组件,它和modal很像。里面的footer是它底部的"提交"和"取消"按钮,分别对应onOk和onCancel方法。

    接着就是Form嵌套的2个大模块: 用例信息和请求信息。

    可以看到用例信息请求信息都是H3标签,并且编写了border-left,看着就有图中的效果了。

    中间的fields.map就是自定义的表单组件了,通过解析json完成表单组件的填写。

    其实这么讲起来,如果不懂React的人,好像白讲了。。感觉不是很适合入门!!!ε=(´ο`*)))唉

    总之呢,就是实现了gif的效果,后面接着讲展示页面。如果大家有兴趣的话,可以多多课下熟悉熟悉React和ant design,测开的话虽然做的是内部工具,但是如果涉及到团队协作,大家很多人用类似的技术栈完成不同的功能模块,我个人觉得测开还是要学一些vue/react的,不然纯粹做后端的话,前端真的很难找到合适的伙伴帮你做。

    后端也有改动

    • 新的models/TestCase.py
    from app.models import db
    from datetime import datetime
    
    
    class TestCase(db.Model):
        id = db.Column(db.INT, primary_key=True)
        name = db.Column(db.String(32), unique=True, index=True)
        request_type = db.Column(db.INT, default=1, comment="请求类型 1: http 2: grpc 3: dubbo")
        url = db.Column(db.TEXT, nullable=False, comment="请求url")
        request_method = db.Column(db.String(12), nullable=True, comment="请求方式, 如果非http可为空")
        request_header = db.Column(db.TEXT, comment="请求头,可为空")
        # params = db.Column(db.TEXT, comment="请求params")
        body = db.Column(db.TEXT, comment="请求body")
        project_id = db.Column(db.INT, comment="所属项目")
        tag = db.Column(db.String(64), comment="用例标签")
        status = db.Column(db.INT, comment="用例状态: 1: 调试中 2: 暂时关闭 3: 正常运作")
        priority = db.Column(db.String(3), comment="用例优先级: p0-p3")
        catalogue = db.Column(db.String(12), comment="用例目录")
        # expected = db.Column(db.TEXT, comment="预期结果, 支持el表达式", nullable=False)
        created_at = db.Column(db.DATETIME, nullable=False)
        updated_at = db.Column(db.DATETIME, nullable=False)
        deleted_at = db.Column(db.DATETIME)
        create_user = db.Column(db.INT, nullable=False)
        update_user = db.Column(db.INT, nullable=False)
    
        def __init__(self, name, request_type, url, project_id, status, priority, create_user,
                     catalogue, tag=None, request_header=None, body=None, request_method=None):
            self.name = name
            self.request_type = request_type
            self.url = url
            self.priority = priority
            self.project_id = project_id
            self.tag = tag
            self.catalogue = catalogue
            self.status = status
            # self.expected = expected
            self.body = body
            self.create_user = create_user
            self.update_user = create_user
            self.request_header = request_header
            self.request_method = request_method
            self.created_at = datetime.now()
            self.updated_at = datetime.now()
    
    

    去掉了expected和params字段,因为params咱们目前会带入url,所以不需要这个字段了。

    今天的内容,也只能到这里了,啰嗦了老半天了。下一节展示用例详情页。

  • 相关阅读:
    Flume实现写入es
    JMeter创建上传文件脚本
    JQuery的dataTable实现分页
    Dubbo服务发布机制-源码学习
    spring容器启动过程(Spring源码阅读)
    Hadoop学习笔记一(HDFS架构)
    hbase修改表TTL
    hive复制表
    提交docker镜像到远程仓库
    centos7 安装ssh
  • 原文地址:https://www.cnblogs.com/we8fans/p/15275969.html
Copyright © 2011-2022 走看看