test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(修改系统参数): mock期望设置响应代码中json-schema增加请求参数的选项 

mock期望设置响应代码中json-schema增加请求参数的选项
This commit is contained in:
song-tianyang 2022-02-17 16:56:55 +08:00 committed by LuoTing
parent b955c1bd5d
commit ef029dd23a
6 changed files with 131 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
View File

@ -39,7 +39,8 @@
</el-tab-pane> </el-tab-pane>
<!--场景自定义变量--> <!--场景自定义变量-->
<el-tab-pane :label="$t('api_test.automation.scenario_total')" name="variable" v-if="scenarioDefinition != undefined"> <el-tab-pane :label="$t('api_test.automation.scenario_total')" name="variable"
v-if="scenarioDefinition != undefined">
<div> <div>
<el-row style="margin-bottom: 10px"> <el-row style="margin-bottom: 10px">
<div style="float: left"> <div style="float: left">
@ -98,7 +99,7 @@
:expand-on-click-node="false" :expand-on-click-node="false"
@node-click="nodeClick" @node-click="nodeClick"
@node-expand="nodeExpand" @node-expand="nodeExpand"
@node-collapse="nodeCollapse" > @node-collapse="nodeCollapse">
<span class="custom-tree-node father" slot-scope="{node, data}"> <span class="custom-tree-node father" slot-scope="{node, data}">
<!-- 步骤组件--> <!-- 步骤组件-->
<ms-component-config <ms-component-config
@ -149,10 +150,12 @@
<div v-for="(item, index) in scenarioPreRequestParams" :key="index" class="kv-row item"> <div v-for="(item, index) in scenarioPreRequestParams" :key="index" class="kv-row item">
<el-row type="flex" :gutter="20" justify="space-between" align="middle"> <el-row type="flex" :gutter="20" justify="space-between" align="middle">
<el-col class="item"> <el-col class="item">
<el-input v-model="item.name" size="small" :readonly="true" @click.native="savePreParams(item.name)"/> <el-input v-model="item.name" size="small" :readonly="true"
@click.native="savePreParams(item.name)"/>
</el-col> </el-col>
<el-col class="item"> <el-col class="item">
<el-input v-model="item.exp" size="small" :readonly="true" @click.native="savePreParams(item.name)"/> <el-input v-model="item.exp" size="small" :readonly="true"
@click.native="savePreParams(item.name)"/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -178,6 +181,22 @@
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.document.request_info')" v-if="showMockVars">
<el-row>
<el-col :span="18" class="col-height">
<div>
<h1>{{ $t('api_test.definition.document.request_info') }}</h1>
<el-table border :data="requestValues"
class="adjust-table table-content"
@row-click="handleRowClick">
<el-table-column prop="type" :label="$t('commons.name')" width="150"/>
<el-table-column prop="name" :label="$t('api_test.value')" width="250"/>
</el-table>
</div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs> </el-tabs>
<div style="padding-top: 10px;"> <div style="padding-top: 10px;">
<el-row type="flex" align="bottom"> <el-row type="flex" align="bottom">
@ -229,6 +248,12 @@
return false; return false;
} }
}, },
showMockVars: {
type: Boolean,
default() {
return false;
}
},
variables: Array, variables: Array,
scenarioDefinition: Array, scenarioDefinition: Array,
}, },
@ -275,12 +300,41 @@
{name: "number"} {name: "number"}
], ],
mockFuncs: MOCKJS_FUNC.map(f => { mockFuncs: MOCKJS_FUNC.map(f => {
return {name: f.name + " " + f.des + " " + this.$t('api_test.request.parameters_filter_example') + "：" + f.ex, value: f.name} return {
name: f.name + " " + f.des + " " + this.$t('api_test.request.parameters_filter_example') + "：" + f.ex,
value: f.name
}
}), }),
jmeterFuncs: JMETER_FUNC, jmeterFuncs: JMETER_FUNC,
mockVariableFuncs: [], mockVariableFuncs: [],
jmeterVariableFuncs: [], jmeterVariableFuncs: [],
dialogVisible: true, dialogVisible: true,
requestValues: [
{
type: this.$t('api_test.request.address'),
name: "${address}"
},
{
type: "Header " + this.$t('api_test.definition.document.request_param'),
name: "${header.param}"
},
{
type: this.$t('api_test.request.body') + this.$t('api_test.variable'),
name: "${body.param}"
},
{
type: this.$t('api_test.request.body') + this.$t('api_test.variable') + " (Raw)",
name: "${bodyRaw}"
},
{
type: "Query " + this.$t('api_test.definition.document.request_param'),
name: "${query.param}"
},
{
type: "Rest " + this.$t('api_test.definition.document.request_param'),
name: "${rest.param}"
},
],
// 自定义变量相关 // 自定义变量相关
defineVariable: "", defineVariable: "",
@ -333,18 +387,18 @@
this.operatingElements = this.stepFilter.get("ALL"); this.operatingElements = this.stepFilter.get("ALL");
}, },
open() { open() {
if(this.scenarioDefinition != undefined){ if (this.scenarioDefinition != undefined) {
// 标识为场景编辑入口进入 // 标识为场景编辑入口进入
this.ifFromVariableAdvance = true; this.ifFromVariableAdvance = true;
} }
this.itemValueVisible = true; this.itemValueVisible = true;
// 关闭页面重新进入需要再做过滤 // 关闭页面重新进入需要再做过滤
if(this.ifFromVariableAdvance && this.$refs.preTree != undefined && this.currentTab == 3){ if (this.ifFromVariableAdvance && this.$refs.preTree != undefined && this.currentTab == 3) {
this.componentActive(this.$refs.preTree.root); this.componentActive(this.$refs.preTree.root);
} }
}, },
prepareData(data) { prepareData(data) {
if(data != undefined || data != null){ if (data != undefined || data != null) {
this.scenario = data; this.scenario = data;
} }
if (this.scenario) { if (this.scenario) {
@ -390,11 +444,11 @@
// 获取该节点及所有子节点下的前置提取参数 key/value // 获取该节点及所有子节点下的前置提取参数 key/value
getExtractDataByNode(data, node) { getExtractDataByNode(data, node) {
if(!node.isLeaf){ if (!node.isLeaf) {
if(node.childNodes.length > 0){ if (node.childNodes.length > 0) {
for(let i=0; i<node.childNodes.length; i++){ for (let i = 0; i < node.childNodes.length; i++) {
if(node.childNodes[i].isLeaf){ //是叶子节点 if (node.childNodes[i].isLeaf) { //是叶子节点
if(node.childNodes[i].data.type === 'Extract'){ //叶子节点的数据的类型是 提取 if (node.childNodes[i].data.type === 'Extract') { //叶子节点的数据的类型是 提取
let extractJsonParams = (node.childNodes[i].data.json).map(v => { let extractJsonParams = (node.childNodes[i].data.json).map(v => {
return {name: v.variable, value: v.value, exp: v.expression} return {name: v.variable, value: v.value, exp: v.expression}
}); });
@ -411,7 +465,7 @@
} }
} }
continue; continue;
}else{ } else {
this.getExtractDataByNode(node.childNodes[i].data, node.childNodes[i]); this.getExtractDataByNode(node.childNodes[i].data, node.childNodes[i]);
} }
} }
@ -419,24 +473,24 @@
} }
}, },
componentActive(node) { componentActive(node) {
if(this.ifFromVariableAdvance){ if (this.ifFromVariableAdvance) {
this.setLeafNodeUnVisible(node); this.setLeafNodeUnVisible(node);
} }
}, },
// 递归设置不需要显示的叶子节点 // 递归设置不需要显示的叶子节点
setLeafNodeUnVisible(node) { setLeafNodeUnVisible(node) {
if(!node.isLeaf){ if (!node.isLeaf) {
if(node.childNodes.length > 0){ if (node.childNodes.length > 0) {
for(let i=0; i<node.childNodes.length; i++){ for (let i = 0; i < node.childNodes.length; i++) {
// 提取参数不需要隐藏 // 提取参数不需要隐藏
if(node.childNodes[i].isLeaf && node.childNodes[i].level > 1){ if (node.childNodes[i].isLeaf && node.childNodes[i].level > 1) {
node.childNodes[i].visible = false; node.childNodes[i].visible = false;
if(node.childNodes[i].data.type === 'Extract' && node.data.type !== 'HTTPSamplerProxy'){ if (node.childNodes[i].data.type === 'Extract' && node.data.type !== 'HTTPSamplerProxy') {
node.childNodes[i].visible = true; node.childNodes[i].visible = true;
} }
}else{ } else {
// 等待控制器不显示 // 等待控制器不显示
if(node.childNodes[i].level == 1 && node.childNodes[i].data.type === 'ConstantTimer'){ if (node.childNodes[i].level == 1 && node.childNodes[i].data.type === 'ConstantTimer') {
node.childNodes[i].visible = false; node.childNodes[i].visible = false;
} }
this.setLeafNodeUnVisible(node.childNodes[i]); this.setLeafNodeUnVisible(node.childNodes[i]);
@ -446,12 +500,12 @@
} }
}, },
getAllExtractDataByNode(){ getAllExtractDataByNode() {
if(this.ifFromVariableAdvance){ if (this.ifFromVariableAdvance) {
this.selectedNode = undefined; this.selectedNode = undefined;
this.selectedTreeNode = undefined; this.selectedTreeNode = undefined;
this.scenarioPreRequestParams = []; this.scenarioPreRequestParams = [];
if(this.$refs.preTree != undefined){ if (this.$refs.preTree != undefined) {
this.getExtractDataByNode(null, this.$refs.preTree.root); this.getExtractDataByNode(null, this.$refs.preTree.root);
} }
} }
@ -468,7 +522,7 @@
this.itemValue = null; this.itemValue = null;
this.itemValuePreview = null; this.itemValuePreview = null;
if(this.ifFromVariableAdvance && this.currentTab === 3){ if (this.ifFromVariableAdvance && this.currentTab === 3) {
// 前置提取屏蔽部分叶子节点 // 前置提取屏蔽部分叶子节点
this.componentActive(this.$refs.preTree.root); this.componentActive(this.$refs.preTree.root);
} }
@ -505,18 +559,18 @@
let index = this.mockVariableFuncs.indexOf(itemFunc); let index = this.mockVariableFuncs.indexOf(itemFunc);
this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index); this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
this.mockVariableFuncs.push({name: '', params: []}); this.mockVariableFuncs.push({name: '', params: []});
let valindex = this.itemValue.indexOf('|'+func.name); let valindex = this.itemValue.indexOf('|' + func.name);
this.itemValue = this.itemValue.slice(0,valindex); this.itemValue = this.itemValue.slice(0, valindex);
}else { } else {
this.methodChange(itemFunc, func); this.methodChange(itemFunc, func);
} }
}, },
addFunc() { addFunc() {
if(this.itemValue == undefined || this.itemValue == null){ if (this.itemValue == undefined || this.itemValue == null) {
this.$warning(this.$t('api_test.request.parameters_advance_add_mock_error')); this.$warning(this.$t('api_test.request.parameters_advance_add_mock_error'));
return; return;
} }
if(this.itemValue.indexOf('@') == -1){ if (this.itemValue.indexOf('@') == -1) {
this.itemValue = '@' + this.itemValue; this.itemValue = '@' + this.itemValue;
} else { } else {
this.itemValue = this.itemValue; this.itemValue = this.itemValue;
@ -543,13 +597,13 @@
this.mockVariableFuncs.push({name: '', params: []}); this.mockVariableFuncs.push({name: '', params: []});
}, },
saveAdvanced() { saveAdvanced() {
if(this.itemValue != null && this.itemValue != undefined if (this.itemValue != null && this.itemValue != undefined
&& this.itemValue.indexOf('@') == -1 && this.itemValue.indexOf('@') == -1
&& this.itemValue.indexOf('$') == -1){ && this.itemValue.indexOf('$') == -1) {
this.$set(this.currentItem, 'value', '@' + this.itemValue); this.$set(this.currentItem, 'value', '@' + this.itemValue);
} else { } else {
this.$set(this.currentItem, 'value', this.itemValue); this.$set(this.currentItem, 'value', this.itemValue);
if(this.currentItem.mock != undefined){ if (this.currentItem.mock != undefined) {
this.$set(this.currentItem, 'mock', this.itemValue); this.$set(this.currentItem, 'mock', this.itemValue);
} }
} }
@ -603,7 +657,7 @@
this.itemValue = '${' + data + '}'; this.itemValue = '${' + data + '}';
}, },
handleRowClick(row) { handleRowClick(row) {
if(row && row.name){ if (row && row.name) {
this.itemValue = row.name; this.itemValue = row.name;
} }
}, },
@ -648,10 +702,10 @@
}, },
showNode(node) { showNode(node) {
for(let i=0; i<node.hashTree.length; i++){ for (let i = 0; i < node.hashTree.length; i++) {
// 右边展示如果包含了前置提取表单,且是 HTTPSamplerProxy 类型，则不需要显示提取参数列表 // 右边展示如果包含了前置提取表单,且是 HTTPSamplerProxy 类型，则不需要显示提取参数列表
if(node.hashTree[i].type == 'Extract' && node.type == 'HTTPSamplerProxy' if (node.hashTree[i].type == 'Extract' && node.type == 'HTTPSamplerProxy'
&& this.scenarioPreRequestParams.length > 0){ && this.scenarioPreRequestParams.length > 0) {
this.scenarioPreRequestParams = []; this.scenarioPreRequestParams = [];
break; break;
} }
@ -663,8 +717,8 @@
return false; return false;
}, },
filterSonNode(item) { filterSonNode(item) {
if(item.type == 'Assertions' || item.type == 'ConstantTimer' if (item.type == 'Assertions' || item.type == 'ConstantTimer'
|| item.type == 'JDBCPreProcessor' || item.type == 'JDBCPostProcessor'){ || item.type == 'JDBCPreProcessor' || item.type == 'JDBCPostProcessor') {
return false; return false;
} }
return true; return true;

1
frontend/src/business/components/api/definition/components/mock/Components/MockApiResponseBody.vue
View File

@ -21,6 +21,7 @@
<ms-json-code-edit <ms-json-code-edit
v-if="body.format==='JSON-SCHEMA'" v-if="body.format==='JSON-SCHEMA'"
:body="body" :body="body"
:show-mock-vars="true"
ref="jsonCodeEdit"/> ref="jsonCodeEdit"/>
<ms-code-edit <ms-code-edit
v-else-if="codeEditActive && loadIsOver" v-else-if="codeEditActive && loadIsOver"

2
frontend/src/business/components/api/definition/components/mock/Components/MockApiVariable.vue
View File

@ -22,7 +22,7 @@
</template> </template>
</el-input> </el-input>
<el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small" <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
:fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit> :fetch-suggestions="querySearch" @input="change" @change="change" :placeholder="keyText" show-word-limit>
<template v-slot:prepend> <template v-slot:prepend>
<el-select v-if="type === 'body'" :disabled="isReadOnly" class="kv-type" v-model="item.type" <el-select v-if="type === 'body'" :disabled="isReadOnly" class="kv-type" v-model="item.type"
@change="typeChange(item)"> @change="typeChange(item)">

7
frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
View File

@ -8,6 +8,7 @@
<div style="min-height: 200px"> <div style="min-height: 200px">
<json-schema-editor class="schema" <json-schema-editor class="schema"
:value="schema" :value="schema"
:show-mock-vars="showMockVars"
:scenario-definition="scenarioDefinition" :scenario-definition="scenarioDefinition"
@editScenarioAdvance="editScenarioAdvance" @editScenarioAdvance="editScenarioAdvance"
lang="zh_CN" custom/> lang="zh_CN" custom/>
@ -39,6 +40,12 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
showMockVars: {
type: Boolean,
default() {
return false;
}
},
scenarioDefinition: Array, scenarioDefinition: Array,
}, },
created() { created() {

9
frontend/src/business/components/common/json-schema/schema/editor/main.vue
View File

@ -24,6 +24,7 @@
<ms-mock :disabled="pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'" <ms-mock :disabled="pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'"
:schema="pickValue" :schema="pickValue"
:scenario-definition="scenarioDefinition" :scenario-definition="scenarioDefinition"
:show-mock-vars="showMockVars"
@editScenarioAdvance="editScenarioAdvance"/> @editScenarioAdvance="editScenarioAdvance"/>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
@ -46,6 +47,7 @@
<json-schema-editor v-for="(item,key,index) in pickValue.properties" :value="{[key]:item}" <json-schema-editor v-for="(item,key,index) in pickValue.properties" :value="{[key]:item}"
:parent="pickValue" :key="index" :deep="deep+1" :root="false" class="children" :parent="pickValue" :key="index" :deep="deep+1" :root="false" class="children"
:scenario-definition="scenarioDefinition" :scenario-definition="scenarioDefinition"
:show-mock-vars="showMockVars"
@editScenarioAdvance="editScenarioAdvance" @editScenarioAdvance="editScenarioAdvance"
:lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType" @reloadItems="reloadItems"/> :lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType" @reloadItems="reloadItems"/>
</template> </template>
@ -53,6 +55,7 @@
<json-schema-editor v-for="(item,key,index) in pickValue.items" :value="{[key]:item}" :parent="pickValue" :key="index" <json-schema-editor v-for="(item,key,index) in pickValue.items" :value="{[key]:item}" :parent="pickValue" :key="index"
:deep="deep+1" :root="false" class="children" :deep="deep+1" :root="false" class="children"
:scenario-definition="scenarioDefinition" :scenario-definition="scenarioDefinition"
:show-mock-vars="showMockVars"
@editScenarioAdvance="editScenarioAdvance" @editScenarioAdvance="editScenarioAdvance"
:lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType"/> :lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType"/>
</template> </template>
@ -108,6 +111,12 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
showMockVars: {
type: Boolean,
default() {
return false;
}
},
disabled: { //name不可编辑，根节点name不可编辑,数组元素name不可编辑 disabled: { //name不可编辑，根节点name不可编辑,数组元素name不可编辑
type: Boolean, type: Boolean,
default: false default: false

8
frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
View File

@ -12,7 +12,7 @@
@select="change"> @select="change">
<i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i> <i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i>
</el-autocomplete> </el-autocomplete>
<ms-api-variable-advance :scenario-definition="scenarioDefinition" :current-item="mock" ref="variableAdvance"/> <ms-api-variable-advance :show-mock-vars="showMockVars" :scenario-definition="scenarioDefinition" :current-item="mock" ref="variableAdvance"/>
</div> </div>
</template> </template>
@ -32,6 +32,12 @@
}, },
disabled: Boolean, disabled: Boolean,
scenarioDefinition: Array, scenarioDefinition: Array,
showMockVars: {
type: Boolean,
default() {
return false;
}
},
}, },
data() { data() {
return { return {