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

fix(接口测试): 修复api测试后更新接口刷新问题 

--bug=1009997 --user=赵勇 【接口测试】接口定义-test，更新接口没有及时刷新 https://www.tapd.cn/55049933/s/1099254
This commit is contained in:
fit2-zhao 2022-01-26 15:52:46 +08:00 committed by song-tianyang
parent e1c614b6d7
commit 4374f42aa3
1 changed files with 260 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,265 +108,289 @@
</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
}, },
data() { currentApi: {},
return { moduleOptions: {},
isShow: true, currentProtocol: String,
showApiList: true, syncTabs: Array,
showTest: false, projectId: String,
showMock: false, selectNodeIds: Array,
showTestCaseList: false, visible: {
baseMockConfigData: {}, type: Boolean,
loading: false, default: false,
createCase: "",
api: {},
};
}, },
props: { },
activeDom: String, created() {
isShowChangeButton: { this.refreshButtonActiveClass(this.activeDom);
type: Boolean, if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) {
default: true this.mockSetting();
}, }
currentApi: {}, this.formatApi();
moduleOptions: {}, },
currentProtocol: String, watch: {
syncTabs: Array, showMock() {
projectId: String, this.mockSetting();
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
},
}, },
created() { '$store.state.currentApiCase.case'() {
this.refreshButtonActiveClass(this.activeDom); if (this.$store.state.currentApiCase && this.$store.state.currentApiCase.api) {
if (this.currentApi.id && (this.currentProtocol === "HTTP" || this.currentProtocol === "TCP")) { this.refreshButtonActiveClass("testCase");
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");
} }
}, },
methods: { '$store.state.currentApiCase.mock'() {
reLoadCase() { this.mockSetting();
this.$refs.trashCaseList.initTable(); this.refreshButtonActiveClass("mock");
}, }
sort(stepArray) { },
if (stepArray) { methods: {
for (let i in stepArray) { reLoadCase() {
if (!stepArray[i].clazzName) { this.$refs.trashCaseList.initTable();
stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type); },
} sort(stepArray) {
if (stepArray[i] && stepArray[i].authManager && !stepArray[i].authManager.clazzName) { if (stepArray) {
stepArray[i].authManager.clazzName = TYPE_TO_C.get(stepArray[i].authManager.type); for (let i in stepArray) {
} if (!stepArray[i].clazzName) {
if (stepArray[i].type === "Assertions" && !stepArray[i].document) { stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
stepArray[i].document = { }
type: "JSON", if (stepArray[i] && stepArray[i].authManager && !stepArray[i].authManager.clazzName) {
data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []} stepArray[i].authManager.clazzName = TYPE_TO_C.get(stepArray[i].authManager.type);
}; }
} if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) { stepArray[i].document = {
this.sort(stepArray[i].hashTree); type: "JSON",
} data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}
};
}
if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
this.sort(stepArray[i].hashTree);
} }
} }
}, }
formatApi() { },
if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) { formatApi() {
if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') { if (this.currentApi.response != null && this.currentApi.response != 'null' && this.currentApi.response != undefined) {
this.currentApi.response = JSON.parse(this.currentApi.response); if (Object.prototype.toString.call(this.currentApi.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
} this.currentApi.response = JSON.parse(this.currentApi.response);
} }
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 (this.currentApi.request != null && this.currentApi.request != 'null' && this.currentApi.request != undefined) {
this.currentApi.request = JSON.parse(this.currentApi.request); if (Object.prototype.toString.call(this.currentApi.request).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
} this.currentApi.request = JSON.parse(this.currentApi.request);
} }
if (this.currentApi && this.currentApi.request && !this.currentApi.request.hashTree) { }
this.currentApi.request.hashTree = []; if (this.currentApi && this.currentApi.request && !this.currentApi.request.hashTree) {
} this.currentApi.request.hashTree = [];
if (this.currentApi && this.currentApi.request && this.currentApi.request.body && !this.currentApi.request.body.binary) { }
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 = [];
if (this.currentApi.request) { }
this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type); if (this.currentApi.request) {
this.sort(this.currentApi.request.hashTree); this.currentApi.request.clazzName = TYPE_TO_C.get(this.currentApi.request.type);
} this.sort(this.currentApi.request.hashTree);
}, }
mockSetting() { },
let mockParam = {}; mockSetting() {
mockParam.projectId = this.projectId; let mockParam = {};
if (this.currentApi.id) { mockParam.projectId = this.projectId;
mockParam.apiId = this.currentApi.id; if (this.currentApi.id) {
this.$post('/mockConfig/genMockConfig', mockParam, response => { mockParam.apiId = this.currentApi.id;
let mockConfig = response.data; this.$post('/mockConfig/genMockConfig', mockParam, response => {
mockConfig.apiName = this.currentApi.name; let mockConfig = response.data;
mockConfig.versionName = this.currentApi.versionName; mockConfig.apiName = this.currentApi.name;
this.baseMockConfigData = mockConfig; mockConfig.versionName = this.currentApi.versionName;
}); 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.createCase = getUUID(); this.$store.state.currentApiCase = {case: true};
this.api = api; } else if (tabType === "test") {
this.$refs.caseList.open(); this.showApiList = false;
}, this.showTestCaseList = false;
refreshButtonActiveClass(tabType) { this.showTest = true;
if (tabType === "testCase") { this.showMock = false;
this.showApiList = false; this.$store.state.currentApiCase = undefined;
this.showTestCaseList = true; } else if (tabType === "mock") {
this.showTest = false; this.showApiList = false;
this.showMock = false; this.showTestCaseList = false;
this.$store.state.currentApiCase = {case: true}; this.showTest = false;
} else if (tabType === "test") { this.showMock = true;
this.showApiList = false; this.$store.state.currentApiCase = undefined;
this.showTestCaseList = false; } else {
this.showTest = true; this.syncApi();
this.showMock = false;
this.$store.state.currentApiCase = undefined;
} else if (tabType === "mock") {
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;
}
} }
}, },
}; changeApi() {
this.showApiList = true;
this.showTestCaseList = false;
this.showTest = false;
this.showMock = false;
this.$store.state.currentApiCase = undefined;
},
syncApi() {
if (this.syncTabs && this.syncTabs.length > 0 && this.syncTabs.includes(this.currentApi.id)) {
// 标示接口在其他地方更新过，当前页面需要同步
let url = "/api/definition/get/";
this.$get(url + this.currentApi.id, response => {
if (response.data) {
let request = JSON.parse(response.data.request);
let index = this.syncTabs.findIndex(item => {
if (item === this.currentApi.id) {
return true;
}
});
this.syncTabs.splice(index, 1);
this.currentApi.request = request;
this.changeApi();
}
});
} else {
this.changeApi();
}
}
}
};
</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>