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

feat(接口测试): 联调接口用例请求体变更XML

This commit is contained in:
xinxin.wu 2024-08-07 18:17:19 +08:00 committed by 刘瑞斌
parent e66789c0b5
commit fc46239b5b
2 changed files with 93 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/views/api-test/management/components/management/case/diffItem.vue
View File

@ -82,9 +82,6 @@
{{ t('case.notSetData') }}
</div>
</div>
<div class="title">
{{ `${t('apiTestManagement.requestBody')}-JSON` }}
</div>
</template>
<script setup lang="ts">

145
frontend/src/views/api-test/management/components/management/case/diffRequestBody.vue
View File

@ -1,44 +1,65 @@
<template>
<div v-if="showDiffEditor" :class="`${bodyCaseCode && bodyDefinedCode ? '' : 'grid grid-cols-2 gap-[24px]'}`">
<div v-if="!bodyDefinedCode && bodyCaseCode" class="no-case-data h-full">
{{ t('case.notSetData') }}
<div v-for="item of requestBodyList" :key="item.value">
<div class="grid grid-cols-2 gap-[24px]">
<div class="title">
{{ item.title }}
</div>
<div class="title">
{{ item.title }}
</div>
</div>
<template v-if="showDiffEditor">
<MsCodeEditor
:model-value="showDiffEditor"
theme="vs"
height="200px"
:class="`${bodyCaseCode ? '' : 'no-case-data-bg'} w-full`"
:language="bodyCodeLanguage"
:show-full-screen="false"
:show-theme-change="false"
read-only
is-adaptive
:diff-mode="diffMode"
:original-value="bodyDefinedCode"
<div
v-if="getShowDiffer(item.value)"
:class="`${getBodyCaseCode(item.value) && getBodyDefinedCode(item.value) ? '' : 'grid grid-cols-2 gap-[24px]'}`"
>
<div v-if="!getBodyDefinedCode(item.value) && getBodyCaseCode(item.value)" class="no-case-data h-full">
{{ t('case.notSetData') }}
</div>
<template v-if="getShowDiffer(item.value)">
<MsCodeEditor
:model-value="getShowDiffer(item.value)"
theme="vs"
height="200px"
:class="`${getBodyCaseCode(item.value) ? '' : 'no-case-data-bg'} w-full`"
:language="getBodyCodeLanguage(item.value)"
:show-full-screen="false"
:show-theme-change="false"
read-only
is-adaptive
:diff-mode="getDiffMode(item.value)"
:original-value="getBodyDefinedCode(item.value)"
>
<template #rightTitle>
<a-button
type="outline"
class="arco-btn-outline--secondary p-[0_8px]"
size="mini"
@click="copyScript(getBodyDefinedCode(item.value))"
>
<template #icon>
<MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
</template>
</a-button>
</template>
</MsCodeEditor>
</template>
<div v-if="!getBodyCaseCode(item.value) && getBodyDefinedCode(item.value)" class="no-case-data h-full">
{{ t('case.notSetData') }}
</div>
</div>
<div v-else class="grid grid-cols-2 gap-[24px]">
<div
v-if="!getBodyCaseCode(item.value) && !getBodyDefinedCode(item.value)"
class="no-json-case-data no-case-data"
>
<template #rightTitle>
<a-button
type="outline"
class="arco-btn-outline--secondary p-[0_8px]"
size="mini"
@click="copyScript(bodyDefinedCode)"
>
<template #icon>
<MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
</template>
</a-button>
</template>
</MsCodeEditor>
</template>
<div v-if="!bodyCaseCode && bodyDefinedCode" class="no-case-data h-full"> {{ t('case.notSetData') }} </div>
</div>
<div v-else class="grid grid-cols-2 gap-[24px]">
<div v-if="!bodyCaseCode && !bodyDefinedCode" class="no-json-case-data no-case-data">
{{ t('case.notSetData') }}
</div>
<div v-if="!bodyCaseCode && !bodyDefinedCode" class="no-json-case-data no-case-data">
{{ t('case.notSetData') }}
{{ t('case.notSetData') }}
</div>
<div
v-if="!getBodyCaseCode(item.value) && !getBodyDefinedCode(item.value)"
class="no-json-case-data no-case-data"
>
{{ t('case.notSetData') }}
</div>
</div>
</div>
</template>
@ -68,18 +89,28 @@
caseDetail: RequestParam;
}>();
const requestBodyList = ref([
{
value: RequestBodyFormat.XML,
title: `${t('apiTestManagement.requestBody')}-XML`,
},
{
value: RequestBodyFormat.JSON,
title: `${t('apiTestManagement.requestBody')}-JSON`,
},
]);
const previewDefinedDetail = ref<RequestParam>(props.definedDetail);
const previewCaseDetail = ref<RequestParam>(props.caseDetail);
const bodyCodeLanguage = computed(() => {
if (previewDefinedDetail.value?.body?.bodyType === RequestBodyFormat.JSON) {
function getBodyCodeLanguage(bodyType: RequestBodyFormat) {
if (bodyType === RequestBodyFormat.JSON) {
return LanguageEnum.JSON;
}
if (previewDefinedDetail.value?.body?.bodyType === RequestBodyFormat.XML) {
if (bodyType === RequestBodyFormat.XML) {
return LanguageEnum.XML;
}
return LanguageEnum.PLAINTEXT;
});
}
function copyScript(val: string) {
if (isSupported) {
@ -101,23 +132,29 @@
case RequestBodyFormat.JSON:
return body?.jsonBody?.jsonValue;
case RequestBodyFormat.XML:
return body.xmlBody?.value;
return body?.xmlBody?.value;
default:
return '';
}
};
// 接口定义Code
const bodyDefinedCode = computed(() => getBodyCode(previewDefinedDetail.value?.body, RequestBodyFormat.JSON));
function getBodyDefinedCode(bodyType: RequestBodyFormat) {
return getBodyCode(previewDefinedDetail.value?.body, bodyType);
}
function getBodyCaseCode(bodyType: RequestBodyFormat) {
return getBodyCode(previewCaseDetail.value?.body, bodyType);
}
// 用例Code
const bodyCaseCode = computed(() => getBodyCode(previewCaseDetail.value?.body, RequestBodyFormat.JSON));
function getDiffMode(bodyType: RequestBodyFormat) {
return (
!!(getBodyDefinedCode(bodyType) && getBodyCaseCode(bodyType)) ||
(!getBodyDefinedCode(bodyType) && !getBodyCaseCode(bodyType))
);
}
const diffMode = computed(() => {
return !!(bodyDefinedCode.value && bodyCaseCode.value) || (!bodyDefinedCode.value && !bodyCaseCode.value);
});
const showDiffEditor = computed(() => bodyCaseCode.value || bodyDefinedCode.value);
function getShowDiffer(bodyType: RequestBodyFormat) {
return getBodyCaseCode(bodyType) || getBodyDefinedCode(bodyType);
}
watchEffect(() => {
if (props.definedDetail) {
@ -145,4 +182,8 @@
background: rgb(var(--success-1)) !important;
}
}
.title {
color: var(--color-text-1);
@apply my-4;
}
</style>