fix(测试跟踪): 测试计划接口Case请求响应体内容展示问题

--bug=1028193 --user=宋昌昌 【测试跟踪】github#25930,测试计划报告详情,打开某一个接口用例,查看接口请求内容,请求内容很长的时候,展示不全。 https://www.tapd.cn/55049933/s/1404778
This commit is contained in:
song-cc-rock 2023-08-17 10:57:57 +08:00 committed by 刘瑞斌
parent d9530350f6
commit d0e50060d1
2 changed files with 137 additions and 141 deletions

View File

@ -2,122 +2,122 @@
<div class="text-container" v-if="responseResult"> <div class="text-container" v-if="responseResult">
<el-tabs v-model="activeName" v-show="isActive"> <el-tabs v-model="activeName" v-show="isActive">
<el-tab-pane <el-tab-pane
:label="$t('api_test.definition.request.response_body')" :label="$t('api_test.definition.request.response_body')"
name="body" name="body"
class="pane" class="pane"
> >
<ms-sql-result-table <ms-sql-result-table
v-if="isSqlType && activeName === 'body'" v-if="isSqlType && activeName === 'body'"
:body="responseResult.body" :body="responseResult.body"
/> />
<ms-code-edit <ms-code-edit
v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'" v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
:mode="mode" :mode="mode"
:read-only="true" :read-only="true"
:modes="modes" :modes="modes"
:data.sync="responseResult.body" :data.sync="responseResult.body"
ref="codeEdit" ref="codeEdit"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
:label="$t('api_test.definition.request.response_header')" :label="$t('api_test.definition.request.response_header')"
name="headers" name="headers"
class="pane" class="pane"
> >
<ms-code-edit <ms-code-edit
:mode="'text'" :mode="'text'"
:read-only="true" :read-only="true"
:data.sync="responseResult.headers" :data.sync="responseResult.headers"
v-if="activeName === 'headers'" v-if="activeName === 'headers'"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
v-if="isTestPlan" v-if="isTestPlan"
:label="$t('api_test.definition.request.console')" :label="$t('api_test.definition.request.console')"
name="console" name="console"
class="pane" class="pane"
> >
<ms-code-edit <ms-code-edit
:mode="'text'" :mode="'text'"
:read-only="true" :read-only="true"
:data.sync="responseResult.console" :data.sync="responseResult.console"
v-if="activeName === 'console'" v-if="activeName === 'console'"
height="420px" height="420px"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
v-if="!isTestPlan" v-if="!isTestPlan"
:label="$t('api_test.definition.request.console')" :label="$t('api_test.definition.request.console')"
name="console" name="console"
class="pane" class="pane"
> >
<ms-code-edit <ms-code-edit
:mode="'text'" :mode="'text'"
:read-only="true" :read-only="true"
:data.sync="responseResult.console" :data.sync="responseResult.console"
v-if="activeName === 'console'" v-if="activeName === 'console'"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
:label="$t('api_report.assertions')" :label="$t('api_report.assertions')"
name="assertions" name="assertions"
class="pane assertions" class="pane assertions"
> >
<ms-assertion-results <ms-assertion-results
:assertions="responseResult.assertions" :assertions="responseResult.assertions"
v-if="activeName === 'assertions'" v-if="activeName === 'assertions'"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
:label="$t('api_test.request.extract.label')" :label="$t('api_test.request.extract.label')"
name="label" name="label"
class="pane" class="pane"
> >
<ms-code-edit <ms-code-edit
:mode="'text'" :mode="'text'"
:read-only="true" :read-only="true"
:data.sync="responseResult.vars" :data.sync="responseResult.vars"
v-if="activeName === 'label'" v-if="activeName === 'label'"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
:label="$t('api_report.request_body')" :label="$t('api_report.request_body')"
name="request_body" name="request_body"
class="pane" class="pane"
> >
<ms-code-edit <ms-code-edit
:mode="'text'" :mode="'text'"
:read-only="true" :read-only="true"
:data.sync="reqMessages" :data.sync="reqMessages"
v-if="activeName === 'request_body'" v-if="activeName === 'request_body'"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
v-if="activeName == 'body'" v-if="activeName === 'body'"
:disabled="true" :disabled="true"
name="mode" name="mode"
class="pane cookie" class="pane cookie"
> >
<template v-slot:label> <template v-slot:label>
<ms-dropdown <ms-dropdown
v-if="currentProtocol === 'SQL'" v-if="currentProtocol === 'SQL'"
:commands="sqlModes" :commands="sqlModes"
:default-command="mode" :default-command="mode"
@command="sqlModeChange" @command="sqlModeChange"
/> />
<ms-dropdown <ms-dropdown
v-else v-else
:commands="modes" :commands="modes"
:default-command="mode" :default-command="mode"
@command="modeChange" @command="modeChange"
ref="modeDropdown" ref="modeDropdown"
/> />
</template> </template>
</el-tab-pane> </el-tab-pane>
@ -179,12 +179,12 @@ export default {
}, },
setBodyType() { setBodyType() {
if ( if (
this.response && this.response &&
this.response.responseResult && this.response.responseResult &&
this.response.responseResult.headers && this.response.responseResult.headers &&
this.response.responseResult.headers.indexOf( this.response.responseResult.headers.indexOf(
"Content-Type: application/json" "Content-Type: application/json"
) > 0 ) > 0
) { ) {
this.mode = BODY_FORMAT.JSON; this.mode = BODY_FORMAT.JSON;
this.$nextTick(() => { this.$nextTick(() => {
@ -222,20 +222,20 @@ export default {
this.response.responseResult.vars = ""; this.response.responseResult.vars = "";
} }
this.reqMessages = this.reqMessages =
this.$t("api_test.request.address") + this.$t("api_test.request.address") +
":\n" + ":\n" +
this.response.url + this.response.url +
"\n" + "\n" +
this.$t("api_test.scenario.headers") + this.$t("api_test.scenario.headers") +
":\n" + ":\n" +
this.response.headers + this.response.headers +
"\n" + "\n" +
"Cookie:\n" + "Cookie:\n" +
this.response.cookies + this.response.cookies +
"\n" + "\n" +
"Body:" + "Body:" +
"\n" + "\n" +
this.response.body; this.response.body;
} }
}, },
}, },
@ -246,15 +246,15 @@ export default {
computed: { computed: {
isSqlType() { isSqlType() {
return ( return (
this.currentProtocol === "SQL" && this.currentProtocol === "SQL" &&
this.response.responseResult.responseCode === "200" && this.response.responseResult['responseCode'] === "200" &&
this.mode === "table" this.mode === "table"
); );
}, },
responseResult() { responseResult() {
return this.response && this.response.responseResult return this.response && this.response.responseResult
? this.response.responseResult ? this.response.responseResult
: {}; : {};
}, },
}, },
}; };
@ -280,7 +280,7 @@ export default {
.text-container .pane { .text-container .pane {
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 1px 0; padding: 1px 0;
height: 250px; height: 400px;
overflow-y: auto; overflow-y: auto;
} }
@ -289,7 +289,7 @@ export default {
} }
:deep(.el-tabs__nav-wrap::after) { :deep(.el-tabs__nav-wrap::after) {
height: 0px; height: 0;
} }
.ms-div { .ms-div {

View File

@ -1,21 +1,21 @@
<template> <template>
<el-container> <el-container>
<ms-aside-container <ms-aside-container
width="500px" width="500px"
:default-hidden-bottom-top="200" :default-hidden-bottom-top="200"
:enable-auto-height="true" :enable-auto-height="true"
> >
<el-card> <el-card>
<el-scrollbar> <el-scrollbar>
<ms-table <ms-table
v-loading="loading" v-loading="loading"
:show-select-all="false" :show-select-all="false"
:screen-height="null" :screen-height="null"
:enable-selection="false" :enable-selection="false"
:highlight-current-row="true" :highlight-current-row="true"
@refresh="getScenarioApiCase" @refresh="getScenarioApiCase"
@handleRowClick="rowClick" @handleRowClick="rowClick"
:data="apiCases" :data="apiCases"
> >
<ms-table-column :width="100" :label="$t('commons.id')" prop="num"> <ms-table-column :width="100" :label="$t('commons.id')" prop="num">
</ms-table-column> </ms-table-column>
@ -24,30 +24,30 @@
</ms-table-column> </ms-table-column>
<el-table-column <el-table-column
prop="principalName" prop="principalName"
:label="$t('test_track.plan.plan_principal')" :label="$t('test_track.plan.plan_principal')"
/> />
<ms-table-column <ms-table-column
:label="$t('test_track.case.priority')" :label="$t('test_track.case.priority')"
:width="80" :width="80"
prop="priority" prop="priority"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<priority-table-item <priority-table-item
:value="scope.row.priority" :value="scope.row.priority"
ref="priority" ref="priority"
/> />
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
:width="80" :width="80"
:label="$t('test_track.plan_view.execute_result')" :label="$t('test_track.plan_view.execute_result')"
prop="lastResult" prop="lastResult"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<ms-test-plan-api-status :status="scope.row.execResult" /> <ms-test-plan-api-status :status="scope.row['execResult']"/>
</template> </template>
</ms-table-column> </ms-table-column>
</ms-table> </ms-table>
@ -61,9 +61,9 @@
</el-card> </el-card>
<el-card v-else> <el-card v-else>
<ms-request-result-tail <ms-request-result-tail
:response="response" :response="response"
:is-test-plan="showResponse" :is-test-plan="showResponse"
ref="debugResult" ref="debugResult"
/> />
</el-card> </el-card>
</div> </div>
@ -150,30 +150,30 @@ export default {
getScenarioApiCase() { getScenarioApiCase() {
if (this.isTemplate || this.isDb) { if (this.isTemplate || this.isDb) {
if (this.isErrorReport) { if (this.isErrorReport) {
this.apiCases = this.report.errorReportCases this.apiCases = this.report['errorReportCases']
? this.report.errorReportCases ? this.report['errorReportCases']
: []; : [];
} else if (this.isUnExecute) { } else if (this.isUnExecute) {
this.apiCases = this.report.unExecuteCases this.apiCases = this.report['unExecuteCases']
? this.report.unExecuteCases ? this.report['unExecuteCases']
: []; : [];
} else if (this.isAll) { } else if (this.isAll) {
this.apiCases = this.report.apiAllCases this.apiCases = this.report['apiAllCases']
? this.report.apiAllCases ? this.report['apiAllCases']
: []; : [];
} else { } else {
this.apiCases = this.report.apiFailureCases this.apiCases = this.report['apiFailureCases']
? this.report.apiFailureCases ? this.report['apiFailureCases']
: []; : [];
} }
} else if (this.isShare) { } else if (this.isShare) {
if (this.isErrorReport) { if (this.isErrorReport) {
this.loading = true; this.loading = true;
getSharePlanApiErrorReportCase(this.shareId, this.planId).then( getSharePlanApiErrorReportCase(this.shareId, this.planId).then(
(r) => { (r) => {
this.loading = false; this.loading = false;
this.apiCases = r.data; this.apiCases = r.data;
} }
); );
} else if (this.isUnExecute) { } else if (this.isUnExecute) {
this.loading = true; this.loading = true;
@ -308,14 +308,10 @@ export default {
height: 550px; height: 550px;
} }
:deep(.text-container .pane) {
height: 550px !important;
}
.ms-aside-container { .ms-aside-container {
border: 0px; border: 0;
height: 550px; height: 550px;
padding: 10px 0px 0px 10px; padding: 10px 0 0 10px;
} }
.ms-main-container { .ms-main-container {