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

fix(接口测试) 修复用例headers内容不显示问题

This commit is contained in:
fit2-zhao 2022-01-22 14:48:12 +08:00 committed by fit2-zhao
parent e7c7ca9d10
commit 159c9a673d
2 changed files with 266 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/business/components/api/definition/components/ApiKeyValue.vue
View File

@ -28,7 +28,8 @@
</el-col> </el-col>
<el-col class="item" v-if="unShowSelect===true"> <el-col class="item" v-if="unShowSelect===true">
<el-input v-if="suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200" :placeholder="keyText" show-word-limit/> <el-input v-if="suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="200"
:placeholder="keyText" show-word-limit/>
</el-col> </el-col>
<el-col class="item"> <el-col class="item">
@ -63,7 +64,8 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<ms-api-variable-advance :scenario-definition="scenarioDefinition" :append-to-body="appendToBody" :current-item="currentItem" :parameters="keyValues" ref="variableAdvance"/> <ms-api-variable-advance :scenario-definition="scenarioDefinition" :append-to-body="appendToBody"
:current-item="currentItem" :parameters="keyValues" ref="variableAdvance"/>
</div> </div>
</template> </template>
@ -84,7 +86,7 @@
isShowEnable: { isShowEnable: {
type: Boolean, type: Boolean,
}, },
unShowSelect:{ unShowSelect: {
type: Boolean, type: Boolean,
default: false default: false
}, },
@ -137,9 +139,9 @@
advanced(item) { advanced(item) {
this.currentItem = item; this.currentItem = item;
// 冒泡到父组件，调用父组件的参数设置打开方法 // 冒泡到父组件，调用父组件的参数设置打开方法
if(this.scenarioDefinition != undefined){ if (this.scenarioDefinition != undefined) {
this.$emit('editScenarioAdvance', this.currentItem); this.$emit('editScenarioAdvance', this.currentItem);
}else{ } else {
this.$refs.variableAdvance.open(); this.$refs.variableAdvance.open();
} }
}, },
@ -158,6 +160,7 @@
if (this.items.length < 2 || index === this.items.length - 2) { if (this.items.length < 2 || index === this.items.length - 2) {
return; return;
} }
this.change();
let thisRow = this.items[index]; let thisRow = this.items[index];
let nextRow = this.items[index + 1]; let nextRow = this.items[index + 1];
Vue.set(this.items, index + 1, thisRow); Vue.set(this.items, index + 1, thisRow);
@ -167,11 +170,11 @@
if (index === 0) { if (index === 0) {
return; return;
} }
this.change();
let thisRow = this.items[index]; let thisRow = this.items[index];
let lastRow = this.items[index - 1]; let lastRow = this.items[index - 1];
Vue.set(this.items, index - 1, thisRow); Vue.set(this.items, index - 1, thisRow);
Vue.set(this.items, index, lastRow) Vue.set(this.items, index, lastRow)
}, },
reload() { reload() {
this.loading = true this.loading = true
@ -228,6 +231,13 @@
}, },
}, },
created() { created() {
if (this.items) {
for (let i = 0; i < this.items.length; i++) {
if (!this.items[i]) {
this.items.splice(i, 1);
}
}
}
if (this.items.length === 0 || this.items[this.items.length - 1].name) { if (this.items.length === 0 || this.items[this.items.length - 1].name) {
this.items.push(new KeyValue({enable: true, name: '', value: ''})); this.items.push(new KeyValue({enable: true, name: '', value: ''}));
} }

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

@ -1,21 +1,19 @@
<template> <template>
<el-card class="card-content" v-if="isShow && !loading"> <el-card class="card-content" v-if="isShow && !loading">
<el-button-group v-if="currentApi.id" style="z-index: 10; position: fixed;"> <el-button-group v-if="currentApi.id" style="z-index: 10; position: fixed;">
<el-tooltip class="item" effect="dark" :content="$t('api_test.definition.api_title')" placement="left"> <el-button class="item" plain :class="{active: showApiList}" @click="changeTab('api')" size="small">
<el-button plain :class="{active: showApiList}" @click="changeTab('api')" size="small">API</el-button> API
</el-tooltip> </el-button>
<el-tooltip class="item" effect="dark" :content="$t('commons.test')" placement="top"> <el-button class="item" plain :class="{active: showTest}" @click="changeTab('test')" size="small">
<el-button plain :class="{active: showTest}" @click="changeTab('test')" size="small">TEST</el-button> TEST
</el-tooltip> </el-button>
<el-tooltip class="item" effect="dark" :content="$t('api_test.definition.case_title')" placement="top"> <el-button class="item" plain :class="{active: showTestCaseList}" @click="changeTab('testCase')" size="small">
<el-button plain :class="{active: showTestCaseList}" @click="changeTab('testCase')" size="small">CASE CASE
</el-button> </el-button>
</el-tooltip> <el-button class="item" plain :class="{active: showMock}" @click="changeTab('mock')" size="small"
v-if="currentProtocol === 'HTTP' || currentProtocol === 'TCP'">
<el-tooltip class="item" effect="dark" content="Mock设置" placement="right" MOCK
v-if="currentProtocol === 'HTTP' || currentProtocol === 'TCP'"> </el-button>
<el-button plain :class="{active: showMock}" @click="changeTab('mock')" size="small"> MOCK</el-button>
</el-tooltip>
</el-button-group> </el-button-group>
<div style="height: 40px"></div> <div style="height: 40px"></div>
@ -110,265 +108,265 @@
</template> </template>
<script> <script>
import MsApiConfig from "./ApiConfig"; import MsApiConfig from "./ApiConfig";
import MsRunTestHttpPage from "./runtest/RunTestHTTPPage"; import MsRunTestHttpPage from "./runtest/RunTestHTTPPage";
import MsRunTestTcpPage from "./runtest/RunTestTCPPage"; import MsRunTestTcpPage from "./runtest/RunTestTCPPage";
import MsRunTestSqlPage from "./runtest/RunTestSQLPage"; import MsRunTestSqlPage from "./runtest/RunTestSQLPage";
import MsRunTestDubboPage from "./runtest/RunTestDubboPage"; import MsRunTestDubboPage from "./runtest/RunTestDubboPage";
import MockTab from "@/business/components/api/definition/components/mock/MockTab"; import MockTab from "@/business/components/api/definition/components/mock/MockTab";
import TcpMockConfig from "@/business/components/api/definition/components/mock/TcpMockConfig"; import TcpMockConfig from "@/business/components/api/definition/components/mock/TcpMockConfig";
import ApiCaseSimpleList from "./list/ApiCaseSimpleList"; import ApiCaseSimpleList from "./list/ApiCaseSimpleList";
import MsApiCaseList from "./case/ApiCaseList"; import MsApiCaseList from "./case/ApiCaseList";
import {getUUID} from "@/common/js/utils"; import {getUUID} from "@/common/js/utils";
import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting"; import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
export default { export default {
name: "EditCompleteContainer", name: "EditCompleteContainer",
components: { components: {
MsApiConfig, MsApiConfig,
MsRunTestHttpPage, MsRunTestHttpPage,
MsRunTestTcpPage, MsRunTestTcpPage,
MsRunTestSqlPage, MsRunTestSqlPage,
MsRunTestDubboPage, MsRunTestDubboPage,
MockTab, MockTab,
TcpMockConfig, TcpMockConfig,
ApiCaseSimpleList, ApiCaseSimpleList,
MsApiCaseList MsApiCaseList
},
data() {
return {
isShow: true,
showApiList: true,
showTest: false,
showMock: false,
showTestCaseList: false,
baseMockConfigData: {},
loading: false,
createCase: "",
api: {},
};
},
props: {
activeDom: String,
isShowChangeButton: {
type: Boolean,
default: true
}, },
currentApi: {}, data() {
moduleOptions: {}, return {
currentProtocol: String, isShow: true,
syncTabs: Array, showApiList: true,
projectId: String, showTest: false,
selectNodeIds: Array, showMock: false,
visible: { showTestCaseList: false,
type: Boolean, baseMockConfigData: {},
default: false, loading: false,
createCase: "",
api: {},
};
}, },
}, props: {
created() { activeDom: String,
this.refreshButtonActiveClass(this.activeDom); isShowChangeButton: {
if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) { type: Boolean,
this.mockSetting(); default: true
} },
this.formatApi(); currentApi: {},
}, moduleOptions: {},
watch: { currentProtocol: String,
showMock() { syncTabs: Array,
this.mockSetting(); projectId: String,
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
},
}, },
'$store.state.currentApiCase.case'() { created() {
if (this.$store.state.currentApiCase && this.$store.state.currentApiCase.api) { this.refreshButtonActiveClass(this.activeDom);
this.refreshButtonActiveClass("testCase"); if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) {
this.mockSetting();
}
this.formatApi();
},
watch: {
showMock() {
this.mockSetting();
},
'$store.state.currentApiCase.case'() {
if (this.$store.state.currentApiCase && this.$store.state.currentApiCase.api) {
this.refreshButtonActiveClass("testCase");
}
},
'$store.state.currentApiCase.mock'() {
this.mockSetting();
this.refreshButtonActiveClass("mock");
} }
}, },
'$store.state.currentApiCase.mock'() { methods: {
this.mockSetting(); reLoadCase() {
this.refreshButtonActiveClass("mock"); this.$refs.trashCaseList.initTable();
} },
}, sort(stepArray) {
methods: { if (stepArray) {
reLoadCase() { for (let i in stepArray) {
this.$refs.trashCaseList.initTable(); if (!stepArray[i].clazzName) {
}, stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
sort(stepArray) { }
if (stepArray) { if (stepArray[i] && stepArray[i].authManager && !stepArray[i].authManager.clazzName) {
for (let i in stepArray) { stepArray[i].authManager.clazzName = TYPE_TO_C.get(stepArray[i].authManager.type);
if (!stepArray[i].clazzName) { }
stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type); if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
} stepArray[i].document = {
if (stepArray[i] && stepArray[i].authManager && !stepArray[i].authManager.clazzName) { type: "JSON",
stepArray[i].authManager.clazzName = TYPE_TO_C.get(stepArray[i].authManager.type); data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}
} };
if (stepArray[i].type === "Assertions" && !stepArray[i].document) { }
stepArray[i].document = { if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
type: "JSON", this.sort(stepArray[i].hashTree);
data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []} }
};
}
if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
this.sort(stepArray[i].hashTree);
} }
} }
} },
}, formatApi() {
formatApi() { if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) {
if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) { if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') { this.currentApi.response = JSON.parse(this.currentApi.response);
this.currentApi.response = JSON.parse(this.currentApi.response); }
} }
} if (this.currentApi.request != null && this.currentApi.request != 'null' && this.currentApi.request != undefined) {
if (this.currentApi.request != null && this.currentApi.request != 'null' && this.currentApi.request != undefined) { if (Object.prototype.toString.call(this.currentApi.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
if (Object.prototype.toString.call(this.currentApi.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') { this.currentApi.request = JSON.parse(this.currentApi.request);
this.currentApi.request = JSON.parse(this.currentApi.request); }
} }
} if (this.currentApi && this.currentApi.request && !this.currentApi.request.hashTree) {
if (this.currentApi && this.currentApi.request && !this.currentApi.request.hashTree) { this.currentApi.request.hashTree = [];
this.currentApi.request.hashTree = []; }
} if (this.currentApi && this.currentApi.request && this.currentApi.request.body && !this.currentApi.request.body.binary) {
if (this.currentApi && this.currentApi.request && this.currentApi.request.body && !this.currentApi.request.body.binary) { this.currentApi.request.body.binary = [];
this.currentApi.request.body.binary = []; }
} if (this.currentApi.request) {
if (this.currentApi.request) { this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type);
this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type); this.sort(this.currentApi.request.hashTree);
this.sort(this.currentApi.request.hashTree); }
} },
}, mockSetting() {
mockSetting() { let mockParam = {};
let mockParam = {}; mockParam.projectId = this.projectId;
mockParam.projectId = this.projectId; if (this.currentApi.id) {
if (this.currentApi.id) { mockParam.apiId = this.currentApi.id;
mockParam.apiId = this.currentApi.id; this.$post('/mockConfig/genMockConfig', mockParam, response => {
this.$post('/mockConfig/genMockConfig', mockParam, response => { let mockConfig = response.data;
let mockConfig = response.data; mockConfig.apiName = this.currentApi.name;
mockConfig.apiName = this.currentApi.name; mockConfig.versionName = this.currentApi.versionName;
mockConfig.versionName = this.currentApi.versionName; this.baseMockConfigData = mockConfig;
this.baseMockConfigData = mockConfig; });
}
},
runTest(data) {
this.$emit("runTest", data);
},
saveApi(data) {
this.$emit("saveApi", data);
if (data != null && data.tags !== 'null' && data.tags !== undefined) {
if (Object.prototype.toString.call(data.tags) === "[object String]") {
data.tags = JSON.parse(data.tags);
}
}
Object.assign(this.currentApi, data);
this.currentApi.isCopy = false;
this.mockSetting();
this.reload();
},
createRootModel() {
this.$emit("createRootModel");
},
editApi(data) {
this.$emit("editApi", data);
},
refresh() {
this.$emit("refresh");
},
checkout(data) {
Object.assign(this.currentApi, data);
this.reload();
},
changeTab(tabType) {
this.refreshButtonActiveClass(tabType);
},
removeListener() {
if (this.$refs && this.$refs.apiConfig) {
this.$refs.apiConfig.removeListener();
}
},
changeSelectDataRangeAll() {
this.$emit("changeSelectDataRangeAll");
},
handleCase(api) {
this.$emit("handleCase", api);
},
showExecResult(data) {
this.$emit("showExecResult", data);
},
addListener() {
if (this.$refs && this.$refs.apiConfig) {
this.$refs.apiConfig.addListener();
}
},
reload() {
this.loading = true;
this.$nextTick(() => {
this.loading = false;
}); });
} },
}, saveAsCase(api) {
runTest(data) {
this.$emit("runTest", data);
},
saveApi(data) {
this.$emit("saveApi", data);
if (data != null && data.tags !== 'null' && data.tags !== undefined) {
if (Object.prototype.toString.call(data.tags)==="[object String]") {
data.tags = JSON.parse(data.tags);
}
}
Object.assign(this.currentApi, data);
this.currentApi.isCopy = false;
this.mockSetting();
this.reload();
},
createRootModel() {
this.$emit("createRootModel");
},
editApi(data) {
this.$emit("editApi", data);
},
refresh() {
this.$emit("refresh");
},
checkout(data) {
Object.assign(this.currentApi, data);
this.reload();
},
changeTab(tabType) {
this.refreshButtonActiveClass(tabType);
},
removeListener() {
if (this.$refs && this.$refs.apiConfig) {
this.$refs.apiConfig.removeListener();
}
},
changeSelectDataRangeAll() {
this.$emit("changeSelectDataRangeAll");
},
handleCase(api) {
this.$emit("handleCase", api);
},
showExecResult(data) {
this.$emit("showExecResult", data);
},
addListener() {
if (this.$refs && this.$refs.apiConfig) {
this.$refs.apiConfig.addListener();
}
},
reload() {
this.loading = true;
this.$nextTick(() => {
this.loading = false;
});
},
saveAsCase(api) {
this.showApiList = false;
this.showTestCaseList = true;
this.showTest = false;
this.showMock = false;
this.createCase = getUUID();
this.api = api;
this.$refs.caseList.open();
},
refreshButtonActiveClass(tabType) {
if (tabType === "testCase") {
this.showApiList = false; this.showApiList = false;
this.showTestCaseList = true; this.showTestCaseList = true;
this.showTest = false; this.showTest = false;
this.showMock = false; this.showMock = false;
this.$store.state.currentApiCase = {case: true}; this.createCase = getUUID();
} else if (tabType === "test") { this.api = api;
this.showApiList = false; this.$refs.caseList.open();
this.showTestCaseList = false; },
this.showTest = true; refreshButtonActiveClass(tabType) {
this.showMock = false; if (tabType === "testCase") {
this.$store.state.currentApiCase = undefined; this.showApiList = false;
} else if (tabType === "mock") { this.showTestCaseList = true;
this.showApiList = false; this.showTest = false;
this.showTestCaseList = false; this.showMock = false;
this.showTest = false; this.$store.state.currentApiCase = {case: true};
this.showMock = true; } else if (tabType === "test") {
this.$store.state.currentApiCase = undefined; this.showApiList = false;
} else { this.showTestCaseList = false;
this.showApiList = true; this.showTest = true;
this.showTestCaseList = false; this.showMock = false;
this.showTest = false; this.$store.state.currentApiCase = undefined;
this.showMock = false; } else if (tabType === "mock") {
this.$store.state.currentApiCase = undefined; this.showApiList = false;
this.showTestCaseList = false;
this.showTest = false;
this.showMock = true;
this.$store.state.currentApiCase = undefined;
} else {
this.showApiList = true;
this.showTestCaseList = false;
this.showTest = false;
this.showMock = false;
this.$store.state.currentApiCase = undefined;
}
} }
} },
}, };
};
</script> </script>
<style scoped> <style scoped>
.active { .active {
border: solid 1px #6d317c !important; border: solid 1px #6d317c !important;
background-color: var(--primary_color) !important; background-color: var(--primary_color) !important;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
.case-button { .case-button {
border-left: solid 1px var(--primary_color); border-left: solid 1px var(--primary_color);
} }
.item { .item {
border: solid 1px var(--primary_color); border: solid 1px var(--primary_color);
} }
.api-case-simple-list >>> .el-table { .api-case-simple-list >>> .el-table {
height: calc(100vh - 262px) !important; height: calc(100vh - 262px) !important;
} }
/deep/ .ms-opt-btn { /deep/ .ms-opt-btn {
position: fixed; position: fixed;
right: 50px; right: 50px;
z-index: 1; z-index: 1;
top: 128px; top: 128px;
float: right; float: right;
margin-right: 20px; margin-right: 20px;
margin-top: 5px; margin-top: 5px;
} }
</style> </style>