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

refactor: 测试计划报告页面优化

This commit is contained in:
chenjianxing 2021-08-25 11:24:43 +08:00 committed by jianxing
parent a4089c2270
commit b148152d02
12 changed files with 202 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport.vue
View File

@ -4,11 +4,17 @@
<el-tab-pane v-if="resultEnable" label="测试结果" name="first">
<api-result :api-result="report.apiResult"/>
</el-tab-pane>
<el-tab-pane v-if="failureEnable" label="失败用例" name="second">
<api-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
<el-tab-pane v-if="failureEnable" name="second">
<template v-slot:label>
<tab-pane-count title="失败用例" :count="failureSize"/>
</template>
<api-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setFailureSize"/>
</el-tab-pane>
<el-tab-pane label="所有用例" name="third" v-if="allEnable">
<api-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
<el-tab-pane name="third" v-if="allEnable">
<template v-slot:label>
<tab-pane-count title="所有用例" :count="allSize"/>
</template>
<api-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setAllSize"/>
</el-tab-pane>
</el-tabs>
</test-plan-report-container>
@ -20,12 +26,15 @@ import ApiResult from "@/business/components/track/plan/view/comonents/report/de
import TestPlanReportContainer
from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
import ApiCases from "@/business/components/track/plan/view/comonents/report/detail/component/ApiCases";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
export default {
name: "TestPlanApiReport",
components: {ApiCases, TestPlanReportContainer, ApiResult, MsFormDivider},
components: {TabPaneCount, ApiCases, TestPlanReportContainer, ApiResult, MsFormDivider},
data() {
return {
activeName: 'first'
activeName: 'first',
failureSize: 0,
allSize: 0,
};
},
props: [
@ -69,6 +78,12 @@ export default {
this.activeName = 'third';
}
},
setFailureSize(size) {
this.failureSize = size;
},
setAllSize(size) {
this.allSize = size;
},
handleClick(tab, event) {
}
}

40
frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanFunctionalReport.vue
View File

@ -4,14 +4,23 @@
<el-tab-pane v-if="resultEnable" label="测试结果" name="first">
<functional-result :function-result="report.functionResult"/>
</el-tab-pane>
<el-tab-pane v-if="failureEnable" label="失败用例" name="second">
<functional-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
<el-tab-pane v-if="failureEnable" name="second">
<template v-slot:label>
<tab-pane-count title="失败用例" :count="failureSize"/>
</template>
<functional-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId" @setSize="setFailureSize"/>
</el-tab-pane>
<el-tab-pane v-if="issueEnable" label="缺陷列表" name="third">
<functional-issue-list :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
<el-tab-pane v-if="issueEnable" name="third">
<template v-slot:label>
<tab-pane-count title="缺陷列表" :count="issueSize"/>
</template>
<functional-issue-list :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId" @setSize="setIssueSize"/>
</el-tab-pane>
<el-tab-pane label="所有用例" name="fourth" v-if="allEnable">
<functional-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
<el-tab-pane name="fourth" v-if="allEnable">
<template v-slot:label>
<tab-pane-count title="所有用例" :count="allSize"/>
</template>
<functional-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId" @setSize="setAllSize"/>
</el-tab-pane>
</el-tabs>
</test-plan-report-container>
@ -26,12 +35,18 @@ import FunctionalIssueList
from "@/business/components/track/plan/view/comonents/report/detail/component/FunctionalIssueList";
import TestPlanReportContainer
from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
export default {
name: "TestPlanFunctionalReport",
components: {TestPlanReportContainer, FunctionalIssueList, FunctionalCases, FunctionalResult, MsFormDivider},
components: {
TabPaneCount,
TestPlanReportContainer, FunctionalIssueList, FunctionalCases, FunctionalResult, MsFormDivider},
data() {
return {
activeName: 'first'
activeName: 'first',
failureSize: 0,
issueSize: 0,
allSize: 0,
};
},
props: [
@ -84,6 +99,15 @@ export default {
this.activeName = 'fourth';
}
},
setFailureSize(size) {
this.failureSize = size;
},
setIssueSize(size) {
this.issueSize = size;
},
setAllSize(size) {
this.allSize = size;
},
handleClick(tab, event) {
}
}

28
frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport.vue
View File

@ -4,11 +4,19 @@
<el-tab-pane v-if="resultEnable" label="测试结果" name="first">
<load-result :load-result="report.loadResult"/>
</el-tab-pane>
<el-tab-pane v-if="failureEnable" label="失败用例" name="second">
<load-failure-result :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
<el-tab-pane v-if="failureEnable" name="second">
<template v-slot:label>
<tab-pane-count :title="'失败用例'" :count="failureSize"/>
</template>
<load-failure-result :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
:report="report" :plan-id="planId" @setSize="setFailureSize"/>
</el-tab-pane>
<el-tab-pane label="所有用例" name="third" v-if="allEnable">
<load-all-result :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
<el-tab-pane name="third" v-if="allEnable">
<template v-slot:label>
<tab-pane-count title="所有用例" :count="allSize"/>
</template>
<load-all-result :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
:report="report" :plan-id="planId" @setSize="setAllSize"/>
</el-tab-pane>
</el-tabs>
</test-plan-report-container>
@ -22,17 +30,21 @@ import TestPlanReportContainer
import LoadFailureResult
from "@/business/components/track/plan/view/comonents/report/detail/component/LoadFailureResult";
import LoadAllResult from "@/business/components/track/plan/view/comonents/report/detail/component/LoadAllResult";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
export default {
name: "TestPlanLoadReport",
components: {
TabPaneCount,
LoadAllResult,
LoadFailureResult,
TestPlanReportContainer,
LoadResult, MsFormDivider},
data() {
return {
activeName: 'first'
activeName: 'first',
failureSize: 0,
allSize: 0,
};
},
props: [
@ -78,6 +90,12 @@ export default {
this.activeName = 'third';
}
},
setFailureSize(size) {
this.failureSize = size;
},
setAllSize(size) {
this.allSize = size;
},
handleClick(tab, event) {
}
}

5
frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
View File

@ -197,4 +197,9 @@ export default {
padding-top: 15px;
}
/deep/ .empty {
text-align: center;
width: 100%;
padding: 40px;
}
</style>

42
frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue
View File

@ -48,9 +48,10 @@
</ms-table>
</el-col>
<el-col :span="17" v-if="apiCases.length > 0">
<el-card>
<ms-request-result-tail v-if="showResponse" :response="response" ref="debugResult"/>
<el-card v-if="showResponse">
<ms-request-result-tail :response="response" ref="debugResult"/>
</el-card>
<div class="empty" v-else>内容为空</div>
</el-col>
</el-row>
</div>
@ -90,7 +91,14 @@ export default {
apiCases: [],
result: {},
response: {},
showResponse: true
showResponse: false
}
},
watch: {
apiCases() {
if (this.apiCases) {
this.$emit('setSize', this.apiCases.length);
}
}
},
mounted() {
@ -104,61 +112,47 @@ export default {
} else {
this.apiCases = this.report.apiFailureCases;
}
this.handleDefaultClick();
} else if (this.isShare) {
if (this.isAll) {
this.result = getSharePlanApiAllCase(this.shareId, this.planId, (data) => {
this.apiCases = data;
this.handleDefaultClick();
});
} else {
this.result = getSharePlanApiFailureCase(this.shareId, this.planId, (data) => {
this.apiCases = data;
this.handleDefaultClick();
});
}
} else {
if (this.isAll) {
this.result = getPlanApiAllCase(this.planId, (data) => {
this.apiCases = data;
this.handleDefaultClick();
});
} else {
this.result = getPlanApiFailureCase(this.planId, (data) => {
this.apiCases = data;
this.handleDefaultClick();
});
}
}
},
handleDefaultClick() {
let data = this.apiCases;
if (data && data.length > 0) {
this.rowClick(data[0]);
}
},
rowClick(row) {
this.showResponse = true;
this.showResponse = false;
if (this.isTemplate) {
if (!row.response) {
this.showResponse = false;
} else {
if (row.response) {
this.showResponse = true;
this.response = JSON.parse(row.response);
}
} else if (this.isShare) {
getShareApiReport(this.shareId, row.id, (data) => {
if (!data || !data.content) {
this.showResponse = false;
} else {
if (data && data.content) {
this.showResponse = true;
this.response = JSON.parse(data.content);
}
});
} else {
// todo
getApiReport(row.id, (data) => {
if (!data || !data.content) {
this.showResponse = false;
} else {
if (data && data.content) {
this.showResponse = true;
this.response = JSON.parse(data.content);
}
});

34
frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiCases.vue
View File

@ -1,11 +1,19 @@
<template>
<div>
<el-tabs type="card">
<el-tab-pane label="接口用例">
<api-case-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
<el-tab-pane>
<template v-slot:label>
<tab-pane-count title="接口用例" :count="apiSize"/>
</template>
<api-case-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare"
:report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setApiSize"/>
</el-tab-pane>
<el-tab-pane label="场景用例">
<api-scenario-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
<el-tab-pane>
<template v-slot:label>
<tab-pane-count title="场景用例" :count="scenarioSize"/>
</template>
<api-scenario-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare"
:report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setScenarioSize"/>
</el-tab-pane>
</el-tabs>
</div>
@ -20,9 +28,11 @@ import ApiScenarioFailureResult
from "@/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioFailureResult";
import ApiCaseFailureResult
from "@/business/components/track/plan/view/comonents/report/detail/component/ApiCaseFailureResult";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
export default {
name: "ApiCases",
components: {
TabPaneCount,
ApiCaseFailureResult,
ApiScenarioFailureResult, StatusTableItem, MethodTableItem, TypeTableItem, PriorityTableItem},
props: {
@ -36,11 +46,27 @@ export default {
},
data() {
return {
apiSize: 0,
scenarioSize: 0,
}
},
mounted() {
},
watch: {
apiSize() {
this.$emit('setSize', this.apiSize + this.scenarioSize);
},
scenarioSize() {
this.$emit('setSize', this.apiSize + this.scenarioSize);
},
},
methods: {
setApiSize(size) {
this.apiSize = size;
},
setScenarioSize(size) {
this.scenarioSize = size;
},
}
}
</script>

33
frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue
View File

@ -49,6 +49,7 @@
</el-col>
<el-col :span="16" v-if="scenarioCases && scenarioCases.length > 0">
<ms-api-report v-if="showResponse" :share-id="shareId" :is-share="isShare" :template-report="response" :is-template="isTemplate" :infoDb="true" :report-id="reportId"/>
<div class="empty" v-else>内容为空</div>
</el-col>
</el-row>
</div>
@ -88,12 +89,19 @@ export default {
result: {},
reportId: null,
response: {},
showResponse: true
showResponse: false
}
},
mounted() {
this.getScenarioApiCase();
},
watch: {
scenarioCases() {
if (this.scenarioCases) {
this.$emit('setSize', this.scenarioCases.length);
}
}
},
methods: {
getScenarioApiCase() {
if (this.isTemplate || this.isDb) {
@ -102,51 +110,38 @@ export default {
} else {
this.scenarioCases = this.report.scenarioFailureCases;
}
this.handleDefaultClick();
} else if (this.isShare) {
if (this.isAll) {
this.result = getSharePlanScenarioAllCase(this.shareId, this.planId, (data) => {
this.scenarioCases = data;
this.handleDefaultClick();
});
} else {
this.result = getSharePlanScenarioFailureCase(this.shareId, this.planId, (data) => {
this.scenarioCases = data;
this.handleDefaultClick();
});
}
} else {
if (this.isAll) {
this.result = getPlanScenarioAllCase(this.planId, (data) => {
this.scenarioCases = data;
this.handleDefaultClick();
});
} else {
this.result = getPlanScenarioFailureCase(this.planId, (data) => {
this.scenarioCases = data;
this.handleDefaultClick();
});
}
}
},
handleDefaultClick() {
let data = this.scenarioCases;
if (data && data.length > 0) {
this.rowClick(data[0]);
}
},
rowClick(row) {
this.showResponse = true;
this.showResponse = false;
if (this.isTemplate) {
if (!row.response) {
this.showResponse = false;
} else {
if (row.response) {
this.showResponse = true;
this.response = row.response;
}
} else {
if (!row.reportId) {
this.showResponse = false;
} else {
if (row.reportId) {
this.showResponse = true;
this.reportId = row.reportId;
}
}

7
frontend/src/business/components/track/plan/view/comonents/report/detail/component/FunctionalCases.vue
View File

@ -95,6 +95,13 @@ export default {
mounted() {
this.getFunctionalTestCase();
},
watch: {
testCases() {
if (this.testCases) {
this.$emit('setSize', this.testCases.length);
}
}
},
methods: {
getFunctionalTestCase() {
if (this.isTemplate || this.isDb) {

7
frontend/src/business/components/track/plan/view/comonents/report/detail/component/FunctionalIssueList.vue
View File

@ -77,6 +77,13 @@ export default {
this.isThirdPart = this.report.isThirdPartIssue;
this.getIssues();
},
watch: {
data() {
if (this.data) {
this.$emit('setSize', this.data.length);
}
}
},
methods: {
getIssues() {
if (this.isTemplate || this.isDb) {

22
frontend/src/business/components/track/plan/view/comonents/report/detail/component/LoadAllResult.vue
View File

@ -2,13 +2,15 @@
<div class="container">
<el-row class="scenario-info">
<el-col :span="7">
<load-failure-result :is-db="isDb" @rowClick="getReport" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
<load-failure-result :is-db="isDb" @rowClick="getReport" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
:report="report" :plan-id="planId" @setSize="setAllSize"/>
</el-col>
<el-col :span="17" >
<el-card>
<el-card v-if="showResponse">
<load-case-report-view :is-plan-report="true" :share-id="shareId" :is-share="isShare"
:plan-report-template="response" v-if="showResponse" :report-id="reportId" ref="loadCaseReportView"/>
:plan-report-template="response" :report-id="reportId" ref="loadCaseReportView"/>
</el-card>
<div class="empty" v-else>内容为空</div>
</el-col>
</el-row>
</div>
@ -37,7 +39,7 @@ export default {
data() {
return {
failureTestCases: [],
showResponse: true,
showResponse: false,
reportId: "",
response: null
}
@ -46,11 +48,10 @@ export default {
},
methods: {
getReport(row) {
this.showResponse = true;
this.showResponse = false;
if (this.isTemplate) {
if (!row.response) {
this.showResponse = false;
} else {
if (row.response) {
this.showResponse = true;
this.response = row.response;
}
} else {
@ -59,9 +60,9 @@ export default {
reportId: row.loadReportId
}
if (!row.loadReportId) {
this.showResponse = false;
return;
}
this.showResponse = true;
if (this.isShare) {
shareCheckoutLoadReport(this.shareId, param, data => {
this.openReport(data, row.loadReportId);
@ -80,6 +81,9 @@ export default {
this.showResponse = false;
this.$warning(this.$t('test_track.plan.load_case.report_not_found'));
}
},
setAllSize(size) {
this.$emit('setSize', size);
}
}
}

7
frontend/src/business/components/track/plan/view/comonents/report/detail/component/LoadFailureResult.vue
View File

@ -77,6 +77,13 @@ export default {
mounted() {
this.getFailureTestCase();
},
watch: {
loadTestCases() {
if (this.loadTestCases) {
this.$emit('setSize', this.loadTestCases.length);
}
}
},
methods: {
getFailureTestCase() {
if (this.isTemplate || this.isDb) {

25
frontend/src/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<span>
<span>{{title}}</span>
<span class="el-step__icon is-text ms-api-col ms-header" v-if="count > 0">
<span class="el-step__icon-inner">{{count}}</span>
</span>
</span>
</template>
<script>
export default {
name: "TabPaneCount",
props: ['title', 'count']
}
</script>
<style scoped>
.ms-header {
background: #783887;
color: white;
height: 20px;
border-radius: 42%;
margin-left: 4px;
}
</style>