测试用例关联性能测试页面
This commit is contained in:
chenjianxing
parent
093ac790f0
commit
dc0ab3b22a
|
|
@ -89,12 +89,12 @@
|
|||
<el-col class="test-detail" :span="20" :offset="1">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane :label="$t('test_track.plan_view.test_detail')">
|
||||
<api-test-detail v-if="testCase.type == 'api'" @runTest="apiTestRun" :id="testCase.testId" v-show="testCase.type == 'api'" ref="apiTestDetail"/>
|
||||
<edit-performance-test-plan v-if="testCase.type == 'performance'"/>
|
||||
<api-test-detail v-if="testCase.type == 'api'" @runTest="apiTestRun" :id="testCase.testId" ref="apiTestDetail"/>
|
||||
<performance-test-detail v-if="testCase.type == 'performance'" :id="testCase.testId" ref="performanceTestDetail"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('test_track.plan_view.test_result')">
|
||||
<api-test-result :report-id="testCase.reportId" v-if=" testCase.type == 'api'" ref="apiTestResult"/>
|
||||
<performance-report-view v-if="testCase.type == 'performance'"/>
|
||||
<performance-test-result :report-id="testCase.reportId" v-if="testCase.type == 'performance'"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
|
|
@ -199,20 +199,19 @@
|
|||
<script>
|
||||
import TestPlanTestCaseStatusButton from '../../common/TestPlanTestCaseStatusButton';
|
||||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
||||
import MsApiTestConfig from "../../../../api/test/ApiTestConfig";
|
||||
import MsApiReportView from "../../../../api/report/ApiReportView";
|
||||
import EditPerformanceTestPlan from "../../../../performance/test/EditPerformanceTestPlan";
|
||||
import PerformanceReportView from "../../../../performance/report/PerformanceReportView";
|
||||
import ApiTestDetail from "./test/ApiTestDetail";
|
||||
import ApiTestResult from "./test/ApiTestResult";
|
||||
import PerformanceTestDetail from "./test/PerformanceTestDetail";
|
||||
import PerformanceTestResult from "./test/PerformanceTestResult";
|
||||
|
||||
export default {
|
||||
name: "TestPlanTestCaseEdit",
|
||||
components: {
|
||||
PerformanceTestResult,
|
||||
PerformanceTestDetail,
|
||||
ApiTestResult,
|
||||
ApiTestDetail,
|
||||
PerformanceReportView,
|
||||
EditPerformanceTestPlan, MsApiReportView, MsApiTestConfig, TestPlanTestCaseStatusButton},
|
||||
TestPlanTestCaseStatusButton},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
|
|
@ -304,17 +303,14 @@
|
|||
},
|
||||
initTest() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
if (this.testCase.method == 'auto') {
|
||||
if (this.$refs.apiTestDetail && this.testCase.type == 'api') {
|
||||
this.$refs.apiTestDetail.init();
|
||||
} else if(this.testCase.type == 'performance') {
|
||||
this.$refs.performanceTestDetail.init();
|
||||
}
|
||||
// else if(testCase.type == 'api') {
|
||||
// this.$refs.apiTestDetail.init();
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
apiTestRun(reportId) {
|
||||
this.testCase.reportId = reportId;
|
||||
|
|
@ -323,13 +319,6 @@
|
|||
saveReport(reportId) {
|
||||
this.$post('/test/plan/case/edit', {id: this.testCase.id, reportId: reportId});
|
||||
},
|
||||
updateTestCases(testCase) {
|
||||
this.testCases.forEach(item => {
|
||||
if (testCase.id === item.id) {
|
||||
Object.assign(item, testCase);
|
||||
}
|
||||
});
|
||||
},
|
||||
initData(testCase) {
|
||||
this.result = this.$post('/test/plan/case/list/all', this.searchParam, response => {
|
||||
this.testCases = response.data;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<ms-container>
|
||||
<ms-main-container>
|
||||
<el-card>
|
||||
<!--<el-card v-loading="result.loading">-->
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input :disabled="true" :placeholder="$t('load_test.input_name')" v-model="test.name" class="input-with-select">
|
||||
<template v-slot:prepend>
|
||||
<el-select :disabled="true" v-model="project.name" :placeholder="$t('load_test.select_project')" slot="prepend">
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="2">
|
||||
<el-button type="primary" plain @click="runTest">执行</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-tabs class="test-config" v-model="active" type="border-card" :stretch="true">
|
||||
<el-tab-pane :label="$t('load_test.basic_config')">
|
||||
<performance-basic-config :test-plan="test" ref="basicConfig"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('load_test.pressure_config')">
|
||||
<performance-pressure-config :test-plan="test" ref="pressureConfig"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
|
||||
<performance-advanced-config ref="advancedConfig"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import MsContainer from "../../../../../common/components/MsContainer";
|
||||
import MsMainContainer from "../../../../../common/components/MsMainContainer";
|
||||
import PerformanceBasicConfig from "../../../../../performance/test/components/PerformanceBasicConfig";
|
||||
import PerformancePressureConfig from "../../../../../performance/test/components/PerformancePressureConfig";
|
||||
import PerformanceAdvancedConfig from "../../../../../performance/test/components/PerformanceAdvancedConfig";
|
||||
export default {
|
||||
name: "PerformanceTestDetail",
|
||||
components: {
|
||||
PerformanceAdvancedConfig,
|
||||
PerformancePressureConfig,
|
||||
PerformanceBasicConfig,
|
||||
MsMainContainer,
|
||||
MsContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
test: {},
|
||||
savePath: "/performance/save",
|
||||
editPath: "/performance/edit",
|
||||
runPath: "/performance/run",
|
||||
project: {},
|
||||
projectId: '',
|
||||
active: '0',
|
||||
tabs: [{
|
||||
title: this.$t('load_test.basic_config'),
|
||||
id: '0',
|
||||
component: 'PerformanceBasicConfig'
|
||||
}, {
|
||||
title: this.$t('load_test.pressure_config'),
|
||||
id: '1',
|
||||
component: 'PerformancePressureConfig'
|
||||
}, {
|
||||
title: this.$t('load_test.advanced_config'),
|
||||
id: '2',
|
||||
component: 'PerformanceAdvancedConfig'
|
||||
}]
|
||||
}
|
||||
},
|
||||
props: ['id'],
|
||||
methods: {
|
||||
init() {
|
||||
this.getTest();
|
||||
},
|
||||
getProject(projectId) {
|
||||
this.$get("/project/get/" + projectId, response => {
|
||||
this.project = response.data;
|
||||
});
|
||||
},
|
||||
getTest() {
|
||||
if (this.id) {
|
||||
this.result = this.$get('/performance/get/' + this.id, response => {
|
||||
this.test = response.data;
|
||||
this.getProject(this.test.projectId);
|
||||
});
|
||||
}
|
||||
},
|
||||
runTest() {
|
||||
this.result = this.$post(this.runPath, {id: this.test.id}, () => {
|
||||
this.$success(this.$t('load_test.is_running'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.test-config {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.edit-test-container .input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.advanced-config {
|
||||
height: calc(100vh - 280px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<template>
|
||||
<ms-container>
|
||||
<ms-main-container>
|
||||
<el-card v-loading="result.loading">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/performance/test/' + this.projectId }">{{projectName}}
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/performance/test/edit/' + this.testId }">{{testName}}
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{reportName}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-row>
|
||||
<el-row class="ms-report-view-btns">
|
||||
<el-button type="primary" plain size="mini">{{$t('report.test_stop_now')}}</el-button>
|
||||
<el-button type="success" plain size="mini">{{$t('report.test_execute_again')}}</el-button>
|
||||
<el-button type="info" plain size="mini">{{$t('report.export')}}</el-button>
|
||||
<el-button type="warning" plain size="mini">{{$t('report.compare')}}</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span class="ms-report-time-desc">
|
||||
{{$t('report.test_duration', [this.minutes, this.seconds])}}
|
||||
</span>
|
||||
<span class="ms-report-time-desc">
|
||||
{{$t('report.test_start_time')}}：{{startTime}}
|
||||
</span>
|
||||
<span class="ms-report-time-desc">
|
||||
{{$t('report.test_end_time')}}：{{endTime}}
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-tabs v-model="active" type="border-card" :stretch="true">
|
||||
<el-tab-pane :label="$t('report.test_overview')">
|
||||
<test-overview :report="report"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('report.test_request_statistics')">
|
||||
<request-statistics :report="report"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('report.test_error_log')">
|
||||
<error-log :report="report"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('report.test_log_details')">
|
||||
<log-details :report="report"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-card>
|
||||
</ms-main-container>
|
||||
</ms-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsMainContainer from "../../../../../common/components/MsMainContainer";
|
||||
import MsContainer from "../../../../../common/components/MsContainer";
|
||||
import LogDetails from "../../../../../performance/report/components/LogDetails";
|
||||
import ErrorLog from "../../../../../performance/report/components/ErrorLog";
|
||||
import RequestStatistics from "../../../../../performance/report/components/RequestStatistics";
|
||||
import TestOverview from "../../../../../performance/report/components/TestOverview";
|
||||
|
||||
export default {
|
||||
name: "PerformanceTestResult",
|
||||
components: {
|
||||
TestOverview,
|
||||
RequestStatistics,
|
||||
ErrorLog,
|
||||
LogDetails,
|
||||
MsContainer,
|
||||
MsMainContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
active: '0',
|
||||
reportId: '',
|
||||
status: '',
|
||||
reportName: '',
|
||||
testId: '',
|
||||
testName: '',
|
||||
projectId: '',
|
||||
projectName: '',
|
||||
startTime: '0',
|
||||
endTime: '0',
|
||||
minutes: '0',
|
||||
seconds: '0',
|
||||
title: 'Logging',
|
||||
report: {}
|
||||
}
|
||||
},
|
||||
props: ['reportId'],
|
||||
methods: {
|
||||
initBreadcrumb() {
|
||||
if (this.reportId) {
|
||||
this.result = this.$get("/performance/report/test/pro/info/" + this.reportId, res => {
|
||||
let data = res.data;
|
||||
if (data) {
|
||||
this.reportName = data.name;
|
||||
this.testId = data.testId;
|
||||
this.testName = data.testName;
|
||||
this.projectId = data.projectId;
|
||||
this.projectName = data.projectName;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
initReportTimeInfo() {
|
||||
if (this.reportId) {
|
||||
this.result = this.$get("/performance/report/content/report_time/" + this.reportId)
|
||||
.then(res => {
|
||||
let data = res.data.data;
|
||||
if (data) {
|
||||
this.startTime = data.startTime;
|
||||
this.endTime = data.endTime;
|
||||
let duration = data.duration;
|
||||
this.minutes = Math.floor(duration / 60);
|
||||
this.seconds = duration % 60;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.clearData();
|
||||
})
|
||||
}
|
||||
},
|
||||
checkReportStatus(status) {
|
||||
switch (status) {
|
||||
case 'Error':
|
||||
this.$warning(this.$t('report.generation_error'));
|
||||
break;
|
||||
case 'Starting':
|
||||
this.$warning("测试处于开始状态,请稍后查看报告！");
|
||||
break;
|
||||
case 'Reporting':
|
||||
this.$info(this.$t('report.being_generated'));
|
||||
break;
|
||||
case 'Running':
|
||||
this.$warning("测试处于运行状态,请稍后查看报告！");
|
||||
break;
|
||||
case 'Completed':
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
clearData() {
|
||||
this.startTime = '0';
|
||||
this.endTime = '0';
|
||||
this.minutes = '0';
|
||||
this.seconds = '0';
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.result = this.$get("/performance/report/" + this.reportId, res => {
|
||||
let data = res.data;
|
||||
this.status = data.status;
|
||||
this.$set(this.report, "id", this.reportId);
|
||||
this.$set(this.report, "status", data.status);
|
||||
this.checkReportStatus(data.status);
|
||||
if (this.status === "Completed") {
|
||||
this.initReportTimeInfo();
|
||||
}
|
||||
});
|
||||
this.initBreadcrumb();
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$route'(to) {
|
||||
if (to.name === "perReportView") {
|
||||
let reportId = to.path.split('/')[4];
|
||||
this.reportId = reportId;
|
||||
if (reportId) {
|
||||
this.$get("/performance/report/test/pro/info/" + reportId, response => {
|
||||
let data = response.data;
|
||||
if (data) {
|
||||
this.status = data.status;
|
||||
this.reportName = data.name;
|
||||
this.testName = data.testName;
|
||||
this.projectName = data.projectName;
|
||||
|
||||
this.$set(this.report, "id", reportId);
|
||||
this.$set(this.report, "status", data.status);
|
||||
|
||||
this.checkReportStatus(data.status);
|
||||
if (this.status === "Completed") {
|
||||
this.result = this.$get("/performance/report/content/report_time/" + this.reportId).then(res => {
|
||||
let data = res.data.data;
|
||||
if (data) {
|
||||
this.startTime = data.startTime;
|
||||
this.endTime = data.endTime;
|
||||
let duration = data.duration;
|
||||
this.minutes = Math.floor(duration / 60);
|
||||
this.seconds = duration % 60;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.clearData();
|
||||
})
|
||||
} else {
|
||||
this.clearData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ms-report-view-btns {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ms-report-time-desc {
|
||||
text-align: left;
|
||||
display: block;
|
||||
color: #5C7878;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue