fix (接口定义): 修复前后置步骤无法添加问题
--bug=1007226 --user=赵勇 快捷调试及单接口用例添加后置脚本、前后置SQL等步骤不显示 https://www.tapd.cn/55049933/s/1056664
This commit is contained in:
fit2-zhao
fit2-zhao
parent
67aa4e44a0
commit
527595e85a
|
|
@ -1,33 +1,73 @@
|
|||
<template>
|
||||
<div v-if="request.hashTree && request.hashTree.length > 0">
|
||||
<p class="tip">
|
||||
{{$t('test_track.plan_view.step')}}
|
||||
{{ $t('test_track.plan_view.step') }}
|
||||
</p>
|
||||
<!-- HTTP 请求参数 -->
|
||||
<div style="height: 100%;border-radius: 4px ;width: 100%" v-loading="isReloadData" v-if="request.hashTree && request.hashTree.length>0">
|
||||
|
||||
<div v-for="row in request.hashTree" :key="row.id">
|
||||
<!--前置脚本-->
|
||||
<ms-jsr233-processor v-if="row.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')"
|
||||
:jsr223-processor="row" color="#B8741A" background-color="#F9F1EA"/>
|
||||
<ms-jsr233-processor
|
||||
v-if="row.type==='JSR223PreProcessor'"
|
||||
@remove="remove"
|
||||
@copyRow="copyRow"
|
||||
:title="$t('api_test.definition.request.pre_script')"
|
||||
:jsr223-processor="row"
|
||||
color="#B8741A"
|
||||
background-color="#F9F1EA"/>
|
||||
<!--后置脚本-->
|
||||
<ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.post_script')"
|
||||
:jsr223-processor="row" color="#783887" background-color="#F2ECF3"/>
|
||||
<ms-jsr233-processor
|
||||
v-if="row.type ==='JSR223PostProcessor'"
|
||||
@copyRow="copyRow"
|
||||
@remove="remove"
|
||||
:is-read-only="false"
|
||||
:title="$t('api_test.definition.request.post_script')"
|
||||
:jsr223-processor="row"
|
||||
color="#783887"
|
||||
background-color="#F2ECF3"/>
|
||||
<!--前置SQL-->
|
||||
<ms-jdbc-processor v-if="row.label ==='JDBC PreProcessor'" :title="$t('api_test.definition.request.pre_sql')"
|
||||
@copyRow="copyRow" @remove="remove" :is-read-only="false"
|
||||
:request="row" :jdbc-processor="row" color="#783887" background-color="#F2ECF3"/>
|
||||
<ms-jdbc-processor
|
||||
v-if="row.type ==='JDBCPreProcessor'"
|
||||
@copyRow="copyRow"
|
||||
@remove="remove"
|
||||
:title="$t('api_test.definition.request.pre_sql')"
|
||||
:is-read-only="false"
|
||||
:request="row"
|
||||
:jdbc-processor="row"
|
||||
color="#B8741A"
|
||||
background-color="#F9F1EA"/>
|
||||
<!--后置SQL-->
|
||||
<ms-jdbc-processor v-if="row.label ==='JDBC PostProcessor'" :title="$t('api_test.definition.request.post_sql')"
|
||||
@copyRow="copyRow" @remove="remove" :is-read-only="false"
|
||||
:request="row" :jdbc-processor="row" color="#783887" background-color="#F2ECF3"/>
|
||||
<ms-jdbc-processor
|
||||
v-if="row.type ==='JDBCPostProcessor'"
|
||||
@copyRow="copyRow"
|
||||
@remove="remove"
|
||||
:title="$t('api_test.definition.request.post_sql')"
|
||||
:is-read-only="false"
|
||||
:request="row"
|
||||
:jdbc-processor="row"
|
||||
color="#783887"
|
||||
background-color="#F2ECF3"/>
|
||||
<!--断言规则-->
|
||||
<div style="margin-top: 10px">
|
||||
<ms-api-assertions :response="response" v-if="row.type==='Assertions'" @copyRow="copyRow" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>
|
||||
<ms-api-assertions
|
||||
v-if="row.type==='Assertions'"
|
||||
@copyRow="copyRow"
|
||||
@remove="remove"
|
||||
:response="response"
|
||||
:is-read-only="isReadOnly"
|
||||
:assertions="row"/>
|
||||
</div>
|
||||
<!--提取规则-->
|
||||
<div style="margin-top: 10px">
|
||||
<ms-api-extract :response="response" :is-read-only="isReadOnly" @copyRow="copyRow" @remove="remove" v-if="row.type==='Extract'" :extract="row"/>
|
||||
<ms-api-extract
|
||||
:response="response"
|
||||
:is-read-only="isReadOnly"
|
||||
:extract="row"
|
||||
@copyRow="copyRow"
|
||||
@remove="remove"
|
||||
v-if="row.type==='Extract'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,218 +75,217 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {REQUEST_HEADERS} from "@/common/js/constants";
|
||||
import {createComponent} from "../jmeter/components";
|
||||
import MsApiAssertions from "../assertion/ApiAssertions";
|
||||
import MsApiExtract from "../extract/ApiExtract";
|
||||
import {Assertions, Body, Extract, KeyValue} from "../../model/ApiTestModel";
|
||||
import {getUUID} from "@/common/js/utils";
|
||||
import BatchAddParameter from "../basis/BatchAddParameter";
|
||||
import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
|
||||
import MsJdbcProcessor from "@/business/components/api/automation/scenario/component/JDBCProcessor";
|
||||
import {REQUEST_HEADERS} from "@/common/js/constants";
|
||||
import {createComponent} from "../jmeter/components";
|
||||
import MsApiAssertions from "../assertion/ApiAssertions";
|
||||
import MsApiExtract from "../extract/ApiExtract";
|
||||
import {Assertions, Body, Extract, KeyValue} from "../../model/ApiTestModel";
|
||||
import {getUUID} from "@/common/js/utils";
|
||||
import BatchAddParameter from "../basis/BatchAddParameter";
|
||||
import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
|
||||
import MsJdbcProcessor from "@/business/components/api/automation/scenario/component/JDBCProcessor";
|
||||
|
||||
export default {
|
||||
name: "MsJmxStep",
|
||||
components: {
|
||||
MsJdbcProcessor,
|
||||
MsJsr233Processor,
|
||||
BatchAddParameter,
|
||||
MsApiExtract,
|
||||
MsApiAssertions
|
||||
export default {
|
||||
name: "MsJmxStep",
|
||||
components: {
|
||||
MsJdbcProcessor,
|
||||
MsJsr233Processor,
|
||||
BatchAddParameter,
|
||||
MsApiExtract,
|
||||
MsApiAssertions
|
||||
},
|
||||
props: {
|
||||
request: {},
|
||||
response: {},
|
||||
showScript: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
props: {
|
||||
request: {},
|
||||
response: {},
|
||||
showScript: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
headers: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
referenced: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isShowEnable: Boolean,
|
||||
jsonPathList: Array,
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
headers: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
referenced: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isShowEnable: Boolean,
|
||||
jsonPathList: Array,
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let validateURL = (rule, value, callback) => {
|
||||
try {
|
||||
new URL(this.addProtocol(this.request.url));
|
||||
} catch (e) {
|
||||
callback(this.$t('api_test.request.url_invalid'));
|
||||
}
|
||||
};
|
||||
return {
|
||||
activeName: "headers",
|
||||
rules: {
|
||||
name: [
|
||||
{max: 300, message: this.$t('commons.input_limit', [1, 300]), trigger: 'blur'}
|
||||
],
|
||||
url: [
|
||||
{max: 500, required: true, message: this.$t('commons.input_limit', [1, 500]), trigger: 'blur'},
|
||||
{validator: validateURL, trigger: 'blur'}
|
||||
],
|
||||
path: [
|
||||
{max: 500, message: this.$t('commons.input_limit', [0, 500]), trigger: 'blur'},
|
||||
]
|
||||
},
|
||||
headerSuggestions: REQUEST_HEADERS,
|
||||
isReloadData: false,
|
||||
isBodyShow: true,
|
||||
dialogVisible: false,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
let validateURL = (rule, value, callback) => {
|
||||
try {
|
||||
new URL(this.addProtocol(this.request.url));
|
||||
} catch (e) {
|
||||
callback(this.$t('api_test.request.url_invalid'));
|
||||
}
|
||||
};
|
||||
return {
|
||||
activeName: "headers",
|
||||
rules: {
|
||||
name: [
|
||||
{max: 300, message: this.$t('commons.input_limit', [1, 300]), trigger: 'blur'}
|
||||
],
|
||||
url: [
|
||||
{max: 500, required: true, message: this.$t('commons.input_limit', [1, 500]), trigger: 'blur'},
|
||||
{validator: validateURL, trigger: 'blur'}
|
||||
],
|
||||
path: [
|
||||
{max: 500, message: this.$t('commons.input_limit', [0, 500]), trigger: 'blur'},
|
||||
]
|
||||
},
|
||||
headerSuggestions: REQUEST_HEADERS,
|
||||
isReloadData: false,
|
||||
isBodyShow: true,
|
||||
dialogVisible: false,
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPre() {
|
||||
let jsr223PreProcessor = createComponent("JSR223PreProcessor");
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(jsr223PreProcessor);
|
||||
this.reload();
|
||||
},
|
||||
addPost() {
|
||||
let jsr223PostProcessor = createComponent("JSR223PostProcessor");
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(jsr223PostProcessor);
|
||||
this.reload();
|
||||
},
|
||||
addAssertions() {
|
||||
let assertions = new Assertions();
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(assertions);
|
||||
this.reload();
|
||||
},
|
||||
addExtract() {
|
||||
let jsonPostProcessor = new Extract();
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(jsonPostProcessor);
|
||||
this.reload();
|
||||
},
|
||||
remove(row) {
|
||||
let index = this.request.hashTree.indexOf(row);
|
||||
this.request.hashTree.splice(index, 1);
|
||||
this.reload();
|
||||
},
|
||||
copyRow(row) {
|
||||
let obj = JSON.parse(JSON.stringify(row));
|
||||
obj.id = getUUID();
|
||||
const index = this.request.hashTree.findIndex(d => d.id === row.id);
|
||||
if (index != -1) {
|
||||
this.request.hashTree.splice(index, 0, obj);
|
||||
} else {
|
||||
this.request.hashTree.push(obj);
|
||||
}
|
||||
this.reload();
|
||||
},
|
||||
reload() {
|
||||
this.isReloadData = true
|
||||
this.$nextTick(() => {
|
||||
this.isReloadData = false
|
||||
})
|
||||
},
|
||||
init() {
|
||||
if (!this.request.body) {
|
||||
this.request.body = new Body();
|
||||
}
|
||||
if (!this.request.body.kvs) {
|
||||
this.request.body.kvs = [];
|
||||
}
|
||||
if (!this.request.rest) {
|
||||
this.request.rest = [];
|
||||
}
|
||||
if (!this.request.arguments) {
|
||||
this.request.arguments = [];
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
// 解决修改请求头后 body 显示错位
|
||||
reloadBody() {
|
||||
this.isBodyShow = false;
|
||||
this.$nextTick(() => {
|
||||
this.isBodyShow = true;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPre() {
|
||||
let jsr223PreProcessor = createComponent("JSR223PreProcessor");
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(jsr223PreProcessor);
|
||||
this.reload();
|
||||
},
|
||||
addPost() {
|
||||
let jsr223PostProcessor = createComponent("JSR223PostProcessor");
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(jsr223PostProcessor);
|
||||
this.reload();
|
||||
},
|
||||
addAssertions() {
|
||||
let assertions = new Assertions();
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(assertions);
|
||||
this.reload();
|
||||
},
|
||||
addExtract() {
|
||||
let jsonPostProcessor = new Extract();
|
||||
if (!this.request.hashTree) {
|
||||
this.request.hashTree = [];
|
||||
}
|
||||
this.request.hashTree.push(jsonPostProcessor);
|
||||
this.reload();
|
||||
},
|
||||
remove(row) {
|
||||
let index = this.request.hashTree.indexOf(row);
|
||||
this.request.hashTree.splice(index, 1);
|
||||
this.reload();
|
||||
},
|
||||
copyRow(row) {
|
||||
let obj = JSON.parse(JSON.stringify(row));
|
||||
obj.id = getUUID();
|
||||
const index = this.request.hashTree.findIndex(d => d.id === row.id);
|
||||
if (index != -1) {
|
||||
this.request.hashTree.splice(index, 0, obj);
|
||||
} else {
|
||||
this.request.hashTree.push(obj);
|
||||
}
|
||||
this.reload();
|
||||
},
|
||||
reload() {
|
||||
this.isReloadData = true
|
||||
this.$nextTick(() => {
|
||||
this.isReloadData = false
|
||||
batchAdd() {
|
||||
this.$refs.batchAddParameter.open();
|
||||
},
|
||||
batchSave(data) {
|
||||
if (data) {
|
||||
let params = data.split("\n");
|
||||
let keyValues = [];
|
||||
params.forEach(item => {
|
||||
let line = item.split(/，|,/);
|
||||
let required = false;
|
||||
if (line[1] === '必填' || line[1] === 'Required' || line[1] === 'true') {
|
||||
required = true;
|
||||
}
|
||||
keyValues.push(new KeyValue({name: line[0], required: required, value: line[2], description: line[3], type: "text", valid: false, file: false, encode: true, enable: true, contentType: "text/plain"}));
|
||||
})
|
||||
keyValues.forEach(item => {
|
||||
switch (this.activeName) {
|
||||
case "parameters":
|
||||
this.request.arguments.unshift(item);
|
||||
break;
|
||||
case "rest":
|
||||
this.request.rest.unshift(item);
|
||||
break;
|
||||
case "headers":
|
||||
this.request.headers.unshift(item);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
if (!this.request.body) {
|
||||
this.request.body = new Body();
|
||||
}
|
||||
if (!this.request.body.kvs) {
|
||||
this.request.body.kvs = [];
|
||||
}
|
||||
if (!this.request.rest) {
|
||||
this.request.rest = [];
|
||||
}
|
||||
if (!this.request.arguments) {
|
||||
this.request.arguments = [];
|
||||
}
|
||||
},
|
||||
// 解决修改请求头后 body 显示错位
|
||||
reloadBody() {
|
||||
this.isBodyShow = false;
|
||||
this.$nextTick(() => {
|
||||
this.isBodyShow = true;
|
||||
});
|
||||
},
|
||||
batchAdd() {
|
||||
this.$refs.batchAddParameter.open();
|
||||
},
|
||||
batchSave(data) {
|
||||
if (data) {
|
||||
let params = data.split("\n");
|
||||
let keyValues = [];
|
||||
params.forEach(item => {
|
||||
let line = item.split(/，|,/);
|
||||
let required = false;
|
||||
if (line[1] === '必填' || line[1] === 'Required' || line[1] === 'true') {
|
||||
required = true;
|
||||
}
|
||||
keyValues.push(new KeyValue({name: line[0], required: required, value: line[2], description: line[3], type: "text", valid: false, file: false, encode: true, enable: true, contentType: "text/plain"}));
|
||||
})
|
||||
keyValues.forEach(item => {
|
||||
switch (this.activeName) {
|
||||
case "parameters":
|
||||
this.request.arguments.unshift(item);
|
||||
break;
|
||||
case "rest":
|
||||
this.request.rest.unshift(item);
|
||||
break;
|
||||
case "headers":
|
||||
this.request.headers.unshift(item);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-left-cell .el-button:nth-of-type(1) {
|
||||
color: #B8741A;
|
||||
background-color: #F9F1EA;
|
||||
border: #F9F1EA;
|
||||
}
|
||||
.ms-left-cell .el-button:nth-of-type(1) {
|
||||
color: #B8741A;
|
||||
background-color: #F9F1EA;
|
||||
border: #F9F1EA;
|
||||
}
|
||||
|
||||
.ms-left-cell .el-button:nth-of-type(2) {
|
||||
color: #783887;
|
||||
background-color: #F2ECF3;
|
||||
border: #F2ECF3;
|
||||
}
|
||||
.ms-left-cell .el-button:nth-of-type(2) {
|
||||
color: #783887;
|
||||
background-color: #F2ECF3;
|
||||
border: #F2ECF3;
|
||||
}
|
||||
|
||||
.ms-left-cell .el-button:nth-of-type(3) {
|
||||
color: #A30014;
|
||||
background-color: #F7E6E9;
|
||||
border: #F7E6E9;
|
||||
}
|
||||
.ms-left-cell .el-button:nth-of-type(3) {
|
||||
color: #A30014;
|
||||
background-color: #F7E6E9;
|
||||
border: #F7E6E9;
|
||||
}
|
||||
|
||||
.ms-left-cell .el-button:nth-of-type(4) {
|
||||
color: #015478;
|
||||
background-color: #E6EEF2;
|
||||
border: #E6EEF2;
|
||||
}
|
||||
.ms-left-cell .el-button:nth-of-type(4) {
|
||||
color: #015478;
|
||||
background-color: #E6EEF2;
|
||||
border: #E6EEF2;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue