feat(componentTest): 新增测试用例配置弹窗组件
parent
bba9318e9d
commit
f9e7a55b96
@ -0,0 +1,180 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Modal, Form, Input, Button, Select, Space } from '@arco-design/web-react';
|
||||||
|
import styles from './style/testCaseModal.module.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const Option = Select.Option;
|
||||||
|
|
||||||
|
interface TestCaseModalProps {
|
||||||
|
design: Record<string, any>;
|
||||||
|
visible: boolean;
|
||||||
|
operationIdent: string;
|
||||||
|
onCancel: () => void;
|
||||||
|
onOk: (values: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dict = [
|
||||||
|
{
|
||||||
|
label: '通过用例',
|
||||||
|
value: '通过用例'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '失败用例',
|
||||||
|
value: '失败用例'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数有误',
|
||||||
|
value: '参数有误'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据为空',
|
||||||
|
value: '数据为空'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '缺少参数',
|
||||||
|
value: '缺少参数'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '记录不存在',
|
||||||
|
value: '记录不存在'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operationIdent, onCancel, onOk }) => {
|
||||||
|
const [testCaseFunctions, setTestCaseFunctions] = useState(null);
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const handleOk = async () => {
|
||||||
|
try {
|
||||||
|
const formValues = await form.validate();
|
||||||
|
|
||||||
|
// 构造完整的数据结构，包含原始字段信息和用户输入的值
|
||||||
|
const result = {
|
||||||
|
testCaseName: formValues.testCaseName,
|
||||||
|
operation: operationIdent,
|
||||||
|
expectDataIns: testCaseFunctions.parameters.map((param, index) => ({
|
||||||
|
ident: param.ident,
|
||||||
|
type: param.type,
|
||||||
|
generic: param.generic,
|
||||||
|
desc: param.desc,
|
||||||
|
// 用户输入的值
|
||||||
|
value: formValues[`parameters_${index}`] || ''
|
||||||
|
})),
|
||||||
|
expectDataOuts: testCaseFunctions.responses.map((resp, index) => ({
|
||||||
|
ident: resp.ident,
|
||||||
|
type: resp.type,
|
||||||
|
generic: resp.generic,
|
||||||
|
desc: resp.desc,
|
||||||
|
// 用户输入的值
|
||||||
|
value: formValues[`responses_${index}`] || ''
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
|
onOk(result);
|
||||||
|
form.resetFields();
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
form.resetFields();
|
||||||
|
onCancel();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTestCaseFunctions(design.find(item => item.ident === operationIdent));
|
||||||
|
}, [visible, operationIdent, design]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
title="配置测试用例"
|
||||||
|
visible={visible}
|
||||||
|
onCancel={handleCancel}
|
||||||
|
autoFocus={false}
|
||||||
|
focusLock={true}
|
||||||
|
style={{ width: 1000 }}
|
||||||
|
footer={
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
|
||||||
|
<Button onClick={handleCancel}>取消</Button>
|
||||||
|
<Button type="primary" onClick={handleOk}>
|
||||||
|
确定
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className={styles['modal-content']}>
|
||||||
|
<div className={styles['modal-header']}>
|
||||||
|
<span className={styles['header-label']}>接口:</span>
|
||||||
|
<span className={styles['header-value']}>{operationIdent}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form form={form} layout="vertical" autoComplete="off">
|
||||||
|
<FormItem
|
||||||
|
label="用例名称"
|
||||||
|
field="testCaseName"
|
||||||
|
rules={[{ required: true, message: '请输入用例名称' }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="请输入或选择测试用例" allowCreate allowClear>
|
||||||
|
{dict.map((option, index) => (
|
||||||
|
<Option key={index} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<div className={styles['section-title']}>输入参数:</div>
|
||||||
|
<div className={styles['params-table']}>
|
||||||
|
<div className={styles['table-header']}>
|
||||||
|
<div className={styles['col-index']}></div>
|
||||||
|
<div className={styles['col-name']}>名称</div>
|
||||||
|
<div className={styles['col-param-type']}>参数类型</div>
|
||||||
|
<div className={styles['col-data-type']}>数据类型</div>
|
||||||
|
<div className={styles['col-value']}>参数值</div>
|
||||||
|
</div>
|
||||||
|
{testCaseFunctions && testCaseFunctions.parameters.map((item, index) => (
|
||||||
|
<div className={styles['table-row']} key={index}>
|
||||||
|
<div className={styles['col-index']}>{index + 1}</div>
|
||||||
|
<div className={styles['col-name']}>{item.ident}</div>
|
||||||
|
<div className={styles['col-param-type']}>{item.type}</div>
|
||||||
|
<div className={styles['col-data-type']}>{item.generic || '-'}</div>
|
||||||
|
<div className={styles['col-value']}>
|
||||||
|
<FormItem field={`parameters_${index}`} noStyle>
|
||||||
|
<Input placeholder="请输入参数值" />
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles['section-title']}>输出参数:</div>
|
||||||
|
<div className={styles['params-table']}>
|
||||||
|
<div className={styles['table-header']}>
|
||||||
|
<div className={styles['col-index']}></div>
|
||||||
|
<div className={styles['col-name']}>名称</div>
|
||||||
|
<div className={styles['col-param-type']}>参数类型</div>
|
||||||
|
<div className={styles['col-data-type']}>数据类型</div>
|
||||||
|
<div className={styles['col-value']}>参数值</div>
|
||||||
|
</div>
|
||||||
|
{testCaseFunctions && testCaseFunctions.responses.map((item, index) => (
|
||||||
|
<div className={styles['table-row']} key={index}>
|
||||||
|
<div className={styles['col-index']}>{index + 1}</div>
|
||||||
|
<div className={styles['col-name']}>{item.ident}</div>
|
||||||
|
<div className={styles['col-param-type']}>{item.type}</div>
|
||||||
|
<div className={styles['col-data-type']}>{item.generic || '-'}</div>
|
||||||
|
<div className={styles['col-value']}>
|
||||||
|
<FormItem field={`responses_${index}`} noStyle>
|
||||||
|
<Input placeholder="请输入参数值" />
|
||||||
|
</FormItem>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TestCaseModal;
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
.modal-content {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background-color: #f7f8fa;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.header-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1d2129;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-value {
|
||||||
|
color: #4080ff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1d2129;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params-table {
|
||||||
|
border: 1px solid #e5e6eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
background-color: #f7f8fa;
|
||||||
|
border-bottom: 1px solid #e5e6eb;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4e5969;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid #e5e6eb;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f7f8fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-index {
|
||||||
|
width: 40px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #86909c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-name {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-param-type {
|
||||||
|
width: 120px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 12px;
|
||||||
|
color: #4e5969;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-data-type {
|
||||||
|
width: 100px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 12px;
|
||||||
|
color: #4e5969;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-value {
|
||||||
|
flex: 2;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue