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

feat(接口测试): Mock设置的表格中增加执行按钮 

Mock设置的表格中增加执行按钮，点击直接跳转执行页面，并将mock设置的参数赋值过去
This commit is contained in:
song-tianyang 2022-02-07 18:50:47 +08:00 committed by 刘瑞斌
parent 688857e62b
commit 6d2e0d3c75
6 changed files with 526 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
View File

@ -44,6 +44,7 @@
@saveAsApi="editApi"
@saveAsCase="saveAsCase"
@refresh="refresh"
ref="httpTestPage"
v-if="currentProtocol==='HTTP'"
/>
<ms-run-test-tcp-page
@ -54,6 +55,7 @@
@saveAsApi="editApi"
@saveAsCase="saveAsCase"
@refresh="refresh"
ref="tcpTestPage"
v-if="currentProtocol==='TCP'"
/>
<ms-run-test-sql-page
@ -78,11 +80,9 @@
/>
</div>
<div v-if="showMock && (currentProtocol === 'HTTP')">
<mock-tab :base-mock-config-data="baseMockConfigData" :is-tcp="false"/>
</div>
<div v-if="showMock && (currentProtocol === 'TCP')">
<mock-tab :base-mock-config-data="baseMockConfigData" :is-tcp="true"/>
<div v-if="showMock && (currentProtocol === 'HTTP' || currentProtocol === 'TCP')">
<mock-tab :base-mock-config-data="baseMockConfigData" @redirectToTest="redirectToTest"
:is-tcp="currentProtocol === 'TCP'"/>
</div>
<div v-if="showTestCaseList">
<!--测试用例列表-->
@ -275,6 +275,20 @@ export default {
changeTab(tabType) {
this.refreshButtonActiveClass(tabType);
},
redirectToTest(param) {
this.refreshButtonActiveClass("test");
this.$nextTick(() => {
if (this.currentProtocol === "HTTP" && this.$refs.httpTestPage) {
let requestParam = null;
if (param.params) {
requestParam = param.params;
}
this.$refs.httpTestPage.setRequestParam(requestParam);
} else if (this.currentProtocol === "TCP" && this.$refs.tcpTestPage) {
this.$refs.tcpTestPage.setRequestParam(param);
}
});
},
removeListener() {
if (this.$refs && this.$refs.apiConfig) {
this.$refs.apiConfig.removeListener();

15
frontend/src/business/components/api/definition/components/mock/Components/MockApiBody.vue
View File

@ -216,20 +216,19 @@ export default {
modeChange(mode) {
switch (this.body.type) {
case "JSON":
// this.setContentType("application/json");
this.setContentType("application/json");
break;
case "XML":
// this.setContentType("text/xml");
this.setContentType("text/xml");
break;
case "WWW_FORM":
// this.setContentType("application/x-www-form-urlencoded");
this.setContentType("application/x-www-form-urlencoded");
break;
case "BINARY":
this.setContentType("application/octet-stream");
break;
// todo from data
// case "BINARY":
// this.setContentType("application/octet-stream");
// break;
default:
// this.removeContentType();
this.removeContentType();
break;
}
},

15
frontend/src/business/components/api/definition/components/mock/MockTab.vue
View File

@ -110,6 +110,13 @@ export default {
pageSize: 10,
screenHeight: document.documentElement.clientHeight - 250,
operators: [
{
tip: this.$t('api_test.automation.execute'),
icon: "el-icon-video-play",
exec: this.redirectToTest,
class: "run-button",
permissions: ['PROJECT_API_DEFINITION:READ+RUN']
},
{
tip: this.$t('commons.edit'), icon: "el-icon-edit",
exec: this.clickRow,
@ -143,6 +150,13 @@ export default {
},
},
methods: {
redirectToTest(row) {
let requestParam = null;
if (row && row.request) {
requestParam = row.request;
}
this.$emit("redirectToTest", requestParam);
},
searchApiParams(apiId) {
let selectUrl = "/mockConfig/getApiParams/" + apiId;
this.$get(selectUrl, response => {
@ -274,6 +288,7 @@ export default {
.ms-drawer >>> .ms-drawer-body {
margin-top: 40px;
}
.search-input {
float: right;
width: 300px;

19
frontend/src/business/components/api/definition/components/request/tcp/TcpFormatParameters.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<div v-if="!isReloadData">
<el-row>
<el-col :span="spanNum" style="padding-bottom: 20px">
<div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;">
<el-form class="tcp" :model="request" :rules="rules" ref="request" :disabled="isReadOnly" style="margin: 20px">
<el-form class="tcp" :model="request" :rules="rules" ref="request" :disabled="isReadOnly"
style="margin: 20px">
<el-tabs v-model="activeName" class="request-tabs">
<!--test-->
<el-tab-pane name="parameters">
@ -36,12 +37,14 @@
</div>
<div v-if="request.reportType === 'json'">
<div class="send-request">
<ms-code-edit mode="json" :read-only="isReadOnly" :data.sync="request.jsonDataStruct" :modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
<ms-code-edit mode="json" :read-only="isReadOnly" :data.sync="request.jsonDataStruct"
:modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
</div>
</div>
<div v-if="request.reportType === 'raw'">
<div class="send-request">
<ms-code-edit mode="text" :read-only="isReadOnly" :data.sync="request.rawDataStruct" :modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
<ms-code-edit mode="text" :read-only="isReadOnly" :data.sync="request.rawDataStruct"
:modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
</div>
</div>
</el-tab-pane>
@ -117,7 +120,8 @@
<el-col :span="6">
<el-form-item label="Connect encoding">
<el-select v-model="request.connectEncoding" style="width: 100px" size="small">
<el-option v-for="item in connectEncodingArr" :key="item.key" :label="item.value" :value="item.key"/>
<el-option v-for="item in connectEncodingArr" :key="item.key" :label="item.value"
:value="item.key"/>
</el-select>
</el-form-item>
</el-col>
@ -293,6 +297,11 @@
this.request.hashTree.push(obj);
this.reload();
},
setReportType(param) {
if (param && param !== "") {
this.reportType = param;
}
},
reload() {
this.isReloadData = true
this.$nextTick(() => {

36
frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
View File

@ -23,7 +23,8 @@
<!-- 请求地址 -->
<el-form-item prop="path">
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="api.request.path" class="ms-htt-width"
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="api.request.path"
class="ms-htt-width"
size="small" :disabled="false"/>
</el-form-item>
@ -37,7 +38,10 @@
</el-dropdown-item>
<el-dropdown-item command="save_as_case">{{ $t('api_test.definition.request.save_as_case') }}
</el-dropdown-item>
<el-dropdown-item command="update_api">{{ $t('api_test.definition.request.update_api') }}</el-dropdown-item>
<el-dropdown-item command="update_api">{{
$t('api_test.definition.request.update_api')
}}
</el-dropdown-item>
<el-dropdown-item command="save_as_api">{{ $t('api_test.definition.request.save_as') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -51,7 +55,8 @@
<div v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- HTTP 请求参数 -->
<ms-api-request-form :isShowEnable="true" :definition-test="true" :headers="api.request.headers" :request="api.request"/>
<ms-api-request-form :isShowEnable="true" :definition-test="true" :headers="api.request.headers"
:request="api.request"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
@ -135,6 +140,23 @@ export default {
}
},
methods: {
setRequestParam(param) {
this.init();
if (param) {
if(param.headers){
this.api.request.headers = param.headers;
}
if(param.argument){
this.api.request.argument = param.argument;
}
if(param.body){
this.api.request.body = param.body;
}
if(param.rest){
this.api.request.rest = param.rest;
}
}
},
handleCommand(e) {
switch (e) {
case "load_case":
@ -301,9 +323,8 @@ export default {
this.versionEnable = response.data;
});
}
}
},
created() {
init() {
// 深度复制
this.api = JSON.parse(JSON.stringify(this.apiData));
this.api.protocol = this.currentProtocol;
@ -312,9 +333,12 @@ export default {
this.api.environmentId = this.$store.state.useEnvironment;
}
this.runLoading = false;
//this.getResult();
this.checkVersionEnable();
}
},
created() {
this.init();
}
}
</script>

45
frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
View File

@ -21,7 +21,9 @@
<el-dropdown-item command="save_as_api">{{ $t('api_test.definition.request.save_as') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button size="small" type="primary" v-else @click.once="stop" style="float: right;margin-right: 20px">{{ $t('report.stop_btn') }}</el-button>
<el-button size="small" type="primary" v-else @click.once="stop" style="float: right;margin-right: 20px">
{{ $t('report.stop_btn') }}
</el-button>
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<!-- 执行环境 -->
@ -32,12 +34,8 @@
<!-- TCP 请求参数 -->
<!-- <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>-->
<!-- <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>-->
<div v-if="api.method=='TCP'" v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>-->
<ms-tcp-format-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
@ -46,7 +44,8 @@
</div>
<div v-else-if="api.method=='ESB'" v-loading="loading">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<esb-definition v-xpack v-if="showXpackCompnent" :show-script="true" :request="api.request" @callback="runTest" ref="requestForm"/>
<esb-definition v-xpack v-if="showXpackCompnent" :show-script="true" :request="api.request"
@callback="runTest" ref="requestForm"/>
</div>
</el-form>
@ -54,13 +53,15 @@
<div v-if="api.method=='ESB'">
<p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
<esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="false" :show-options-button="false" :request="api.request" :response-data="responseData" />
<esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="false" :show-options-button="false"
:request="api.request" :response-data="responseData"/>
</div>
</el-card>
<!-- 加载用例 -->
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="refresh" @selectTestCase="selectTestCase" :currentApi="api" :refreshSign="refreshSign"
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="refresh" @selectTestCase="selectTestCase" :currentApi="api"
:refreshSign="refreshSign"
:loaded="loaded" :createCase="createCase"
ref="caseList"/>
@ -127,6 +128,27 @@ export default {
},
props: {apiData: {}, currentProtocol: String, syncTabs: Array, projectId: String},
methods: {
setRequestParam(param) {
this.init();
if (this.api.method === "TCP" && param && this.api.request) {
if (param.reportType) {
this.api.request.reportType = param.reportType;
}
if (param.jsonDataStruct) {
this.api.request.jsonDataStruct = param.jsonDataStruct;
}
if (param.rawDataStruct) {
this.api.request.rawDataStruct = param.rawDataStruct;
}
if (param.xmlDataStruct) {
this.api.request.xmlDataStruct = param.xmlDataStruct;
}
this.$nextTick(() => {
this.$refs.requestForm.reload();
this.$refs.requestForm.setReportType(param.reportType);
});
}
},
handleCommand(e) {
switch (e) {
case "load_case":
@ -285,9 +307,8 @@ export default {
this.versionEnable = response.data;
});
}
}
},
created() {
init() {
// 深度复制
this.api = JSON.parse(JSON.stringify(this.apiData));
this.api.protocol = this.currentProtocol;
@ -299,6 +320,10 @@ export default {
}
this.checkVersionEnable();
}
},
created() {
this.init();
}
}
</script>