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

feat(版本对比): 接口定义与性能测试版本对比自动化执行 

--user=郭雨琦 版本对比自动化执行
This commit is contained in:
guoyuqi 2022-01-11 13:48:23 +08:00 committed by 刘瑞斌
parent 3a50bc27b0
commit 455c1ff9dc
5 changed files with 151 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
View File

@ -154,10 +154,6 @@
:response="response"
:old-response="oldResponse"
></http-api-version-diff>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible=false">取 消</el-button>
<el-button type="primary" >确 定</el-button>
</span>
</el-dialog>
</el-card>
@ -182,6 +178,7 @@ import {createComponent } from ".././jmeter/components";
import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
const Sampler = require("@/business/components/api/definition/components/jmeter/components/sampler/sampler");
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const versionHistory = requireComponent.keys().length > 0 ? requireComponent("./version/VersionHistory.vue") : {};
@ -235,7 +232,7 @@ export default {
newMockBaseUrl: "",
count: 0,
versionData: [],
oldRequest:{},
oldRequest:Sampler,
oldResponse:{}
};
},
@ -441,7 +438,6 @@ export default {
this.httpForm.versionId = this.$refs.versionHistory.currentVersion.id;
}
}
this.$emit('saveApi', this.httpForm);
this.count = 0;
this.$store.state.apiMap.delete(this.httpForm.id);
@ -555,14 +551,12 @@ export default {
this.setRequest(res.data)
if (!this.setRequest(res.data)) {
this.oldRequest = createComponent("HTTPSamplerProxy");
this.dialogVisible = true;
}
this.formatApi(res.data)
}
});
});
if(this.newData){
this.dialogVisible = true;
}
},
setRequest(api) {
if (api.request !== undefined) {
@ -574,6 +568,7 @@ export default {
if (!this.oldRequest.headers) {
this.oldRequest.headers = [];
}
this.dialogVisible = true;
return true;
}
return false;

110
frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
View File

@ -111,7 +111,24 @@
<ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
<ms-response-text :response="response"/>
<api-other-info :api="oldData"/>
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="oldData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
</template>
<dependencies-list @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</el-card>
<el-card style="width: 50%;" ref="new">
@ -225,9 +242,26 @@
<ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
<ms-response-text :response="oldResponse"/>
<api-other-info :api="newData"/>
<!-- 其他信息-->
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="newData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
</template>
<dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</el-card>
<button @click="getDiff"></button>
</div>
</template>
<script>
@ -238,6 +272,12 @@ import MsResponseText from "../../response/ResponseText";
import MsApiRequestForm from "../../request/http/ApiHttpRequestForm";
import MsSelectTree from "../../../../../common/select-tree/SelectTree";
import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
import {hasPermissions} from "@/common/js/utils";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
import {getRelationshipCountApi} from "@/network/api";
const {diff} = require("@/business/components/performance/v_node_diff");
@ -250,6 +290,10 @@ export default{
MsApiRequestForm,
MsInputTag,
MsSelectTree,
TabPaneCount,
FormRichTextItem,
DependenciesList,
ApiInfoContainer
},
props:{
oldData:{
@ -280,7 +324,29 @@ export default{
response: {},
oldResponse:{}
},
computed: {
hasPermissions() {
return hasPermissions('PROJECT_API_DEFINITION:READ+EDIT_API');
}
},
watch: {
activeName() {
if (this.activeName === 'dependencies') {
this.$refs.oldDependencies.open();
this.$refs.newDependencies.open();
}
},
relationshipCount(){
if(this.relationshipCount>0||this.oldRelationshipCount>0){
this.getChildDiff()
}
},
oldRelationshipCount(){
if(this.relationshipCount>0||this.oldRelationshipCount>0){
this.getChildDiff()
}
}
},
data(){
return{
reqOptions: REQ_METHOD,
@ -290,19 +356,49 @@ export default{
label: 'name',
},
isShowEnable: true,
activeName: 'remark',
relationshipCount: 0,
oldRelationshipCount: 0,
}
},
methods:{
getDiff(){
let oldVnode = this.$refs.old
let vnode = this.$refs.new
//oldVnode.style.backgroundColor = "rgb(241,200,196)";
console.log(this.$refs.old)
console.log(this.$refs.new)
diff(oldVnode,vnode);
},
setCount(count) {
this.relationshipCount = count;
this.$nextTick(function () {
setTimeout(this.getChildDiff,1000)
})
},
setOldCount(count) {
this.oldRelationshipCount = count;
},
getChildDiff(){
let oldVnode = this.$refs.oldDependencies
let vnode = this.$refs.newDependencies
if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
diff(oldVnode,vnode);
}
}
},
mounted() {
getRelationshipCountApi(this.newData.id, (data) => {
this.relationshipCount = data;
});
getRelationshipCountApi(this.oldData.id, (data) => {
this.oldRelationshipCount = data;
});
this.$nextTick(function () {
setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
})
},
created() {
}
}
</script>

76
frontend/src/business/components/performance/test/DiffVersion.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="compare-class">
<el-card style="width: 50%;" ref="old">
<div class="compare-class" id="vdiff" ref="all" >
<el-card style="width: 50%;" ref="old" id="old">
<ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
<el-row>
<el-col :span="12">
<el-form :inline="true">
@ -23,19 +24,22 @@
</el-col>
</el-row>
<el-tabs v-model="active" @tab-click="clickTab">
<el-tab-pane :label="$t('load_test.basic_config')" class="advanced-config">
<performance-basic-config :is-read-only="true" :test="oldData" @fileChange="fileChange" ref="basicConfig" />
</el-tab-pane>
<el-tab-pane :label="$t('load_test.pressure_config')" class="advanced-config">
<performance-pressure-config :is-read-only="true" :test="oldData" :test-id="oldData.id" @fileChange="fileChange" ref="pressureConfig"/>
</el-tab-pane>
<el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
<performance-advanced-config :read-only="true" :test-id="oldData.id" ref="advancedConfig"/>
</el-tab-pane>
</el-tabs>
<ms-form-divider :title="$t('load_test.basic_config')"/>
<el-row>
<performance-basic-config :is-read-only="true" :test="oldData" @fileChange="fileChange" ref="basicConfig" />
</el-row>
<ms-form-divider :title="$t('load_test.pressure_config')"/>
<el-row>
<performance-pressure-config :is-read-only="true" :test="oldData" :test-id="oldData.id" @fileChange="fileChange" ref="pressureConfig"/>
</el-row>
<ms-form-divider :title="$t('load_test.advanced_config')"/>
<el-row>
<performance-advanced-config :read-only="true" :test-id="oldData.id" ref="advancedConfig"/>
</el-row>
</el-card>
<el-card style="width: 50%;" ref="new">
<el-card style="width: 50%;" ref="new" id="new">
<ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
<el-row>
<el-col :span="12">
<el-form :inline="true">
@ -58,30 +62,30 @@
</el-col>
</el-row>
<el-tabs v-model="active" @tab-click="clickTab">
<el-tab-pane :label="$t('load_test.basic_config')" class="advanced-config">
<performance-basic-config :is-read-only="true" :test="newData" @fileChange="fileNewChange" ref="newBasicConfig" />
</el-tab-pane>
<el-tab-pane :label="$t('load_test.pressure_config')" class="advanced-config">
<performance-pressure-config :is-read-only="true" :test="newData" :test-id="newData.id" @fileChange="fileNewChange" ref="newPressureConfig" />
</el-tab-pane>
<el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
<performance-advanced-config :read-only="true" :test-id="newData.id" ref="newAdvancedConfig" />
</el-tab-pane>
</el-tabs>
<ms-form-divider :title="$t('load_test.basic_config')"/>
<el-row>
<performance-basic-config :is-read-only="true" :test="newData" @fileChange="fileNewChange" ref="newBasicConfig" />
</el-row>
<ms-form-divider :title="$t('load_test.pressure_config')"/>
<el-row>
<performance-pressure-config :is-read-only="true" :test="newData" :test-id="newData.id" @fileChange="fileNewChange" ref="newPressureConfig" />
</el-row>
<ms-form-divider :title="$t('load_test.advanced_config')"/>
<el-row>
<performance-advanced-config :read-only="true" :test-id="newData.id" ref="newAdvancedConfig" />
</el-row>
</el-card>
<button @click="getDiff"></button>
</div>
</template>
<script>
import EditPerformanceTest from "@/business/components/performance/test/EditPerformanceTest";
import PerformancePressureConfig from "@/business/components/performance/test/components/PerformancePressureConfig";
import PerformanceBasicConfig from "@/business/components/performance/test/components/PerformanceBasicConfig";
import PerformanceAdvancedConfig from "@/business/components/performance/test/components/PerformanceAdvancedConfig";
import MsFormDivider from "@/business/components/common/components/MsFormDivider";
const {diff} = require("@/business/components/performance/v_node_diff");
@ -92,6 +96,7 @@ export default{
PerformancePressureConfig,
PerformanceBasicConfig,
PerformanceAdvancedConfig,
MsFormDivider,
},
props:{
oldData:{
@ -107,6 +112,8 @@ export default{
type:Boolean
}
},
watch:{
},
data(){
return{
@ -117,16 +124,12 @@ export default{
newDataJson:{
},
}
},
methods:{
getDiff(){
let oldVnode = this.$refs.old
let vnode = this.$refs.new
//oldVnode.style.backgroundColor = "rgb(241,200,196)";
console.log(this.$refs.old)
console.log(this.$refs.new)
diff(oldVnode,vnode);
},
@ -204,10 +207,17 @@ export default{
handler.calculateTotalChart();
},
},
created() {
updated() {
},
mounted() {
this.$nextTick(function () {
setTimeout(this.getDiff,(this.$refs.old.$children.length+1)*1000)
})
}
}
</script>
<style scoped>
.compare-class{

4
frontend/src/business/components/performance/test/EditPerformanceTest.vue
View File

@ -82,10 +82,6 @@
width="100%"
>
<diff-version :old-data="oldData" :show-follow="showFollow" :new-data="newData" :new-show-follow="newShowFollow" ></diff-version>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible=false">取 消</el-button>
<el-button type="primary" >确 定</el-button>
</span>
</el-dialog>
</ms-main-container>

1
frontend/src/business/components/performance/v_node_diff.js
View File

@ -103,6 +103,7 @@ function changeStyle(diffNode){
}
function changeStyleBySubset(vnodeElm,color){
//如果当前节点加了颜色，他的子节点也按照diff处理
if(isDef(vnodeElm.children)&&vnodeElm.children.length>0){
if(isDef(vnodeElm.style)){
vnodeElm.style.setProperty("background-color",color,'important')