测试平台系列(76) 编写测试计划前端部分

大家好~我是米洛！

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

欢迎关注我的公众号测试开发坑货，获取最新文章教程!

回顾

上一节我们编写了测试计划与APScheduler相结合的方法，定时任务也能够正常跑起来了。

这一节我们就简单聊聊前端怎么去做，最近天气变冷了，博主也感冒了。自己写的过程中发现许多错误，如果有出错的地方希望大家帮忙指出下 =。=

先谈设计

如果像以往的模式，放一个表格，里面展示每个测试计划的相关信息。

添加和删除呢，就放到modal对话框里面。表单的内容用户填写就好了，那这个curd的页面就可以很快完成。

但想一下，我们的测试计划是一个比较复杂的数据。在我的想法中，他应该具备这些条件:

• 多条件搜索

  可以根据项目，测试计划名称，优先级，创建人等条件进行搜索。后续还可能根据创建时间搜索啥的。

• 步骤清晰

  我想把这块分为3块:

  • 1. 基本信息
  • 2. 用例数据
  • 3. 通知配置

顺着这个想法，所以我找到了antd的steps(步骤条)，让用户录入数据的时候也有一定的条理，提升体验。

编写TestPlan.jsx组件

import {PageContainer} from "@ant-design/pro-layout";
import {connect} from 'umi';
import {Badge, Button, Card, Col, Divider, Form, Input, Row, Select, Table, Tag, Tooltip} from "antd";
import React, {useEffect} from "react";
import {CONFIG} from "@/consts/config";
import {PlusOutlined} from "@ant-design/icons";
import TestPlanForm from "@/components/TestCase/TestPlanForm";

const {Option} = Select;

const TestPlan = ({testplan, dispatch, loading, gconfig, user, project}) => {

  const {planData} = testplan;
  const {userList, userMap} = user;
  const {projectsMap, projects} = project;
  // const {envList} = gconfig;

  const getStatus = record => {
    if (record.state === 2) {
      return 
    }
    if (record.state === 3) {
      return 
    }
    if (record.state === 1) {
      return 
    }
    return 
      
    
  }

  const columns = [
    {
      title: '项目',
      key: 'project_id',
      dataIndex: 'project_id',
      render: projectId => {projectsMap[projectId] || 'loading'}
    },
    {
      title: '测试计划',
      key: 'name',
      dataIndex: 'name'
    },
    {
      title: '优先级',
      key: 'priority',
      dataIndex: 'priority',
      render: priority => {priority}
    },
    {
      title: 'cron表达式',
      key: 'cron',
      dataIndex: 'cron',
    },
    {
      title: '顺序执行',
      key: 'ordered',
      dataIndex: 'ordered',
      render: bool => bool ? 是 : 否
    },
    {
      title: '用例数量',
      key: 'case_list',
      dataIndex: 'case_list',
      render: caseList => caseList.split(",").length,
    },
    {
      title: '状态',
      key: 'next_run',
      dataIndex: 'next_run',
      render: (_, record) => getStatus(record)
    },
    {
      title: '创建人',
      key: 'create_user',
      dataIndex: 'create_user',
      render: create_user => userMap[create_user] !== undefined ? userMap[create_user].name : '加载中...'
    },
    {
      title: '操作',
      key: 'ops',
      render: () => <>
        编辑
        
        删除
      
    },


  ]

  // form查询条件
  const [form] = Form.useForm();

  const spin = loading.effects['testplan/listTestPlan'] || loading.effects['project/listProject']

  const fetchTestPlan = () => {
    const values = form.getFieldsValue();
    dispatch({
      type: 'testplan/listTestPlan',
      payload: {
        page: 1,
        size: 10,
        ...values,
      }
    })
  }

  const fetchProjectList = () => {
    dispatch({
      type: 'project/listProject',
    })
  }

  const fetchUsers = () => {
    if (userList.length === 0) {
      dispatch({
        type: 'user/fetchUserList',
      })
    }
  }

  const fetchEnvList = () => {
    dispatch({
      type: 'gconfig/fetchEnvList',
      payload: {
        page: 1,
        size: 1000,
        exactly: true // 全部获取
      }
    })
  }

  const onSave = data => {
    dispatch({
      type: 'testplan/save',
      payload: data
    })
  }

  useEffect(() => {
    fetchEnvList()
    fetchUsers()
    fetchProjectList()
    fetchTestPlan()
  }, [])

  return (
    
      
        
        
 {
          fetchTestPlan();
        }}>
          
            
              
                
                  {projects.map(item => {item.name})}
                
              
            
            
              
                
              
            
            
              
                
                  {CONFIG.PRIORITY.map(v => {v})}
                
              
            
            
              
                
                  {userList.map(item => {item.name})}
                
              
            
          
        
        
           {
            onSave({visible: true, title: '新增测试计划'})
          }}> 添加计划
        
         row.id} loading={spin}/>
      
  )
}


export default connect(({testplan, project, user, loading, gconfig}) => ({
  testplan,
  project,
  loading,
  user,
  gconfig,
}))(TestPlan);

讲解一下代码，核心还是通过dva的model-service这种类redux管理状态。
结合最新的useEffect，获取到测试计划信息。
把搜索选项放到表单中，并给form设置onValuesChange方法，当数据有变动的时候自动重新查询测试计划。这样避免了 人肉再点击一次搜索按钮。
效果图如下:
需要注意的是，这里展示了大部分数据，如果想看更多内容，需要点击编辑按钮查看了。
编写创建测试计划表单组件
该组件还是一个Modal，按照我们刚才说的3个字段去分配对应的板块，大概样式如下:
由于测试用例的选择，还没有确定，所以暂时还需要慢慢设计。个人感觉自己前端部分写起来还是偏慢，前面还有好多坑没有填。
今天的内容就先介绍到这里吧，下一节我们演示下做好的测试计划页面以及解决多workers下的APScheduler单个任务重复执行的问题。
在线体验地址: http://test.pity.fun

							
							
			pity接口自动化测试平台FastAPIPity测试平台Pythonreact自动化测试							
						



						

						
相关
						
				
						
			

																
								

										
学习《Python编程从入门到实践》PDF+代码训练
									
									

								 

        
								
							
							

																
								

										
python-----面向对象简单理解
									
									

								 

        
								
							
							

																
								

										
python多线程控制
									
									

								 

        
								
							
							

																
								

										
Sublime 的安装、汉化、配置、Python环境和插件
									
									

								 

        
								
							
							

																
								

										
react dom移动算法
									
									

								 

        
								
							
							

																
								

										
python——time strftime() 函数表示当地时间
									
									

								 

        
								
							
							

																
								

										
python 初识函数
									
									

								 

        
								
							
							

																
								

										
python 函数对象 嵌套 闭包
									
									

								 

        
								
							
							

																
								

										
Python栈溢出——设置python栈大小
									
									

								 

        
								
							
							

																
								

										
python-面向对象-01课堂笔记
									
									

								 

        
								
							
							

																
								

										
python爬虫
									
									

								 

        
								
							
							

																
								

										
Python 之父的解析器系列之五：左递归 PEG 语法
									
									

								 

        
								
							
							
            
            
            
                                    
           
  			
						

					

														
					
					

					
									

					
									   
标签