大家好~我是米洛
!
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的完整
教程
,希望大家多多支持。
回顾
上一节我们编写了测试计划
与APScheduler
相结合的方法,定时任务也能够正常跑起来了
。
这一节我们就简单聊聊前端怎么去做,最近天气变冷了,博主也感冒了。自己写的过程中发现许多错误,如果有出错的地方希望大家帮忙指出下 =。=
先谈设计
如果像以往的模式,放一个表格
,里面展示每个测试计划的相关信息。
添加和删除呢,就放到modal对话框里面。表单的内容用户填写就好了,那这个curd的页面就可以很快完成
。
但想一下,我们的测试计划是一个比较复杂
的数据。在我的想法中,他应该具备这些条件:
- 多条件搜索
可以根据项目,测试计划名称,优先级,创建人等条件进行搜索。后续还可能根据创建时间搜索啥的。 - 步骤清晰我想把这块分为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 <Tooltip title="定时任务可能添加失败, 请尝试重新添加"><Badge status="error" text="出错"/></Tooltip> } if (record.state === 3) { return <Tooltip title="任务已暂停"><Badge status="warning" text="已暂停"/></Tooltip> } if (record.state === 1) { return <Tooltip title="任务正在执行中"><Badge status="processing" text="执行中"/></Tooltip> } return <Tooltip title={`下次运行时间: ${record.next_run}`}> <Badge status="success" text="等待中"/> </Tooltip> } const columns = [ { title: '项目', key: 'project_id', dataIndex: 'project_id', render: projectId => <a href={`/#/apiTest/project/${projectId}`} target="_blank" rel="noreferrer">{projectsMap[projectId] || 'loading'}</a> }, { title: '测试计划', key: 'name', dataIndex: 'name' }, { title: '优先级', key: 'priority', dataIndex: 'priority', render: priority => <Tag color={CONFIG.CASE_TAG[priority]}>{priority}</Tag> }, { title: 'cron表达式', key: 'cron', dataIndex: 'cron', }, { title: '顺序执行', key: 'ordered', dataIndex: 'ordered', render: bool => bool ? <Tag color="blue">是</Tag> : <Tag>否</Tag> }, { 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: () => <> <a>编辑</a> <Divider type="vertical"/> <a>删除</a> </> }, ] // 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 ( <PageContainer title={false}> <Card> <TestPlanForm/> <Form form={form} {...CONFIG.LAYOUT} onValuesChange={() => { fetchTestPlan(); }}> <Row gutter={[12, 12]}> <Col span={6}> <Form.Item label="项目" name="project_id"> <Select allowClear showSearch placeholder="选择项目"> {projects.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)} </Select> </Form.Item> </Col> <Col span={6}> <Form.Item label="名称" name="name"> <Input placeholder="输入测试计划名称"/> </Form.Item> </Col> <Col span={6}> <Form.Item label="优先级" name="priority"> <Select placeholder="选择优先级" allowClear> {CONFIG.PRIORITY.map(v => <Option key={v} value={v}>{v}</Option>)} </Select> </Form.Item> </Col> <Col span={6}> <Form.Item label="创建人" name="state"> <Select placeholder="选择创建人" showSearch allowClear> {userList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)} </Select> </Form.Item> </Col> </Row> </Form> <Row style={{marginBottom: 12}}> <Button type="primary" onClick={() => { onSave({visible: true, title: '新增测试计划'}) }}><PlusOutlined/> 添加计划</Button> </Row> <Table columns={columns} dataSource={planData} rowKey={row => row.id} loading={spin}/> </Card> </PageContainer> ) } export default connect(({testplan, project, user, loading, gconfig}) => ({ testplan, project, loading, user, gconfig, }))(TestPlan);
讲解一下代码,核心还是通过dva的model-service这种类redux
管理状态。
结合最新的useEffect,获取到测试计划信息。
把搜索选项放到表单中,并给form设置onValuesChange方法,当数据有变动的时候自动重新查询测试计划
。这样避免了 人肉再点击一次搜索按钮
。
效果图如下:
image
需要注意的是,这里展示了大部分数据,如果想看更多内容,需要点击编辑
按钮查看了。
编写创建测试计划表单组件
该组件还是一个Modal,按照我们刚才说的3个字段去分配对应的板块,大概样式如下:
image
由于测试用例的选择,还没有确定,所以暂时还需要慢慢设计。个人感觉自己前端部分写起来还是偏慢,前面还有好多坑没有填。
今天的内容就先介绍到这里吧,下一节我们演示下做好的测试计划页面
以及解决多workers下的APScheduler单个任务重复执行的问题。