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

简介: 编写测试计划前端部分

大家好~我是米洛


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


回顾


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

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

先谈设计


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

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

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

  • 多条件搜索
    可以根据项目,测试计划名称,优先级,创建人等条件进行搜索。后续还可能根据创建时间搜索啥的。
  • 步骤清晰我想把这块分为3块:
  1. 基本信息
  2. 用例数据
  3. 通知配置

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

23.jpg

类似于图中这块部分

编写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方法,当数据有变动的时候自动重新查询测试计划。这样避免了 人肉再点击一次搜索按钮

效果图如下:

24.jpg

image

需要注意的是,这里展示了大部分数据,如果想看更多内容,需要点击编辑按钮查看了。

编写创建测试计划表单组件


该组件还是一个Modal,按照我们刚才说的3个字段去分配对应的板块,大概样式如下:

25.jpg

image

由于测试用例的选择,还没有确定,所以暂时还需要慢慢设计。个人感觉自己前端部分写起来还是偏慢,前面还有好多坑没有填。

今天的内容就先介绍到这里吧,下一节我们演示下做好的测试计划页面以及解决多workers下的APScheduler单个任务重复执行的问题。



相关文章
|
26天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
11天前
|
前端开发 JavaScript 测试技术
前端自动化测试
前端自动化测试是通过使用工具和脚本自动执行测试用例的过程,旨在提高测试效率、减少人为错误,并确保Web应用的功能在不同环境和设备上的一致性与稳定性。
|
22天前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
1月前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
45 4
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
108 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
2月前
|
Web App开发 前端开发 安全
前端研发链路之测试
本文由前端徐徐撰写,介绍了前端测试的重要性及其主要类型,包括单元测试、E2E测试、覆盖率测试、安全扫描和自动化测试。文章详细讲解了每种测试的工具和应用场景,并提供了选择合适测试策略的建议,帮助开发者提高代码质量和用户体验。
40 3
前端研发链路之测试
|
1月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
56 2
|
1月前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
35 2
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
66 2