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

fix(接口测试): 修复断言&补充报告hover卡片交互

This commit is contained in:
xinxin.wu 2024-04-03 13:12:01 +08:00 committed by Craftsman
parent 2beebe8fbc
commit 033157169d
7 changed files with 126 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
View File

@ -45,7 +45,7 @@
@change="() => handleExpressionChange(rowIndex)"
>
<template #suffix>
<a-tooltip :disabled="!disabledExpressionSuffix">
<a-tooltip :disabled="props.disabled || !!props.response">
<template #content>
<div>{{ t('apiTestDebug.expressionTip1') }}</div>
<div>{{ t('apiTestDebug.expressionTip2') }}</div>
@ -57,7 +57,7 @@
type="icon-icon_flashlamp"
:size="15"
:class="
disabledExpressionSuffix || props.disabled
props.disabled || !props.response
? 'ms-params-input-suffix-icon--disabled'
: 'ms-params-input-suffix-icon'
"
@ -141,7 +141,7 @@
@change="() => handleExpressionChange(rowIndex)"
>
<template #suffix>
<a-tooltip :disabled="!disabledExpressionSuffix">
<a-tooltip :disabled="props.disabled || !!props.response">
<template #content>
<div>{{ t('apiTestDebug.expressionTip1') }}</div>
<div>{{ t('apiTestDebug.expressionTip2') }}</div>
@ -150,10 +150,9 @@
<MsIcon
v-if="props.showExtraction"
type="icon-icon_flashlamp"
:disabled="props.disabled"
:size="15"
:class="
disabledExpressionSuffix || props.disabled
props.disabled || !props.response
? 'ms-params-input-suffix-icon--disabled'
: 'ms-params-input-suffix-icon'
"
@ -290,7 +289,7 @@
@change="() => handleExpressionChange(rowIndex)"
>
<template #suffix>
<a-tooltip :disabled="disabledExpressionSuffix || props.disabled">
<a-tooltip :disabled="props.disabled || !!props.response">
<template #content>
<div>{{ t('apiTestDebug.expressionTip1') }}</div>
<div>{{ t('apiTestDebug.expressionTip2') }}</div>
@ -301,9 +300,9 @@
type="icon-icon_flashlamp"
:size="15"
:class="
disabledExpressionSuffix || props.disabled
? 'ms-params-input-suffix-icon'
: 'ms-params-input-suffix-icon--disabled'
props.disabled || !props.response
? 'ms-params-input-suffix-icon--disabled'
: 'ms-params-input-suffix-icon'
"
@click.stop="() => showFastExtraction(record, RequestExtractExpressionEnum.REGEX)"
/>
@ -430,7 +429,7 @@
const extractParamsTableRef = ref<InstanceType<typeof paramsTable>>();
const fastExtractionVisible = ref(false);
const disabledExpressionSuffix = ref(false);
// const disabledExpressionSuffix = ref(false);
export type ExpressionConfig = (RegexExtract | JSONPathExtract | XPathExtract) & Record<string, any>;
const defaultExtractParamItem: ExpressionConfig = {
@ -780,7 +779,7 @@
function deleteListItem(id: string | number) {}
function showFastExtraction(record: ExpressionConfig, type: ExpressionType) {
if (!props.disabled) return;
if (props.disabled || !props.response) return;
activeRecord.value = { ...record, extractType: type };
fastExtractionVisible.value = true;
}

3
frontend/src/components/business/ms-assertion/index.vue
View File

@ -126,6 +126,7 @@
<ScriptTab
v-if="getCurrentItemState.assertionType === ResponseAssertionType.SCRIPT"
v-model:data="getCurrentItemState"
:disabled="props.disabled"
@change="handleChange"
/>
</a-scrollbar>
@ -176,7 +177,7 @@
isDefinition?: boolean; // 是否是定义页面
assertionConfig?: ExecuteAssertionConfig; // 是否开启全局
response?: string; // 响应内容
disabled?: boolean;
disabled?: boolean; // 是否禁用
showExtraction?: boolean; // 是否显示提取
}>();

26
frontend/src/views/api-test/components/quoteSqlSourceDrawer.vue
View File

@ -107,11 +107,19 @@
showPagination: false,
});
async function initEnvironment(envId: string) {
try {
const res = await getEnvironment(envId);
propsRes.value.data = cloneDeep(res.dataSources) as any[];
} catch (error) {
console.log(error);
}
}
watch(
() => currentEnvConfig?.value,
(config) => {
if (config && config.id) {
// eslint-disable-next-line no-use-before-define
initEnvironment(config.id);
}
},
@ -119,15 +127,15 @@
immediate: true,
}
);
async function initEnvironment(envId: string) {
try {
const res = await getEnvironment(envId);
propsRes.value.data = cloneDeep(res.dataSources) as any[];
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
watch(
() => innerVisible.value,
(val) => {
if (val && currentEnvConfig?.value.id) {
initEnvironment(currentEnvConfig.value.id);
}
}
}
);
function searchDataSource() {
propsRes.value.data = cloneDeep(currentEnvConfig?.value.dataSources) as any[];

1
frontend/src/views/api-test/management/components/management/api/apiTable.vue
View File

@ -452,6 +452,7 @@
dataIndex: 'createUserName',
width: 180,
showDrag: true,
showTooltip: true,
},
{
title: hasOperationPermission.value ? 'common.operation' : '',

107
frontend/src/views/api-test/report/component/caseReportCom.vue
View File

@ -16,18 +16,47 @@
<div class="time-card-item flex h-full">
<MsIcon type="icon-icon_time_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
<span class="time-card-item-title">{{ t('report.detail.api.totalTime') }}</span>
<span class="count">{{ getTotalTime.split('-')[0] || 0 }}</span
><span class="time-card-item-title">{{ getTotalTime.split('-')[1] || 'ms' }}</span>
<a-popover position="bottom" content-class="response-popover-content">
<span class="count">{{ getTotalTime.split('-')[0] || 0 }}</span
><span class="time-card-item-title">{{ getTotalTime.split('-')[1] || 'ms' }}</span>
<template #content>
<div class="min-w-[140px] max-w-[400px] p-4 text-[14px]">
<div class="text-[var(--color-text-4)]">{{ t('report.detail.api.totalTime') }}</div>
<div class="mt-2 text-[var(--color-text-1)]">
<span class="text-[18px] font-medium">{{ getTotalTime.split('-')[0] || '-' }}</span
>{{ getTotalTime.split('-')[1] || 'ms' }}</div
>
</div>
</template>
</a-popover>
</div>
<div class="time-card-item h-full">
<MsIcon type="icon-icon_time_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
<span class="time-card-item-title"> {{ t('report.detail.api.requestTotalTime') }}</span>
<span class="count">{{
detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
}}</span
><span class="time-card-item-title">{{
detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
}}</span>
<a-popover position="bottom" content-class="response-popover-content">
<div class="flex items-center">
<div class="count">{{
detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
}}</div
><div class="time-card-item-title">{{
detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
}}</div>
</div>
<template #content>
<div class="min-w-[140px] max-w-[400px] p-4 text-[14px]">
<div class="text-[var(--color-text-4)]">{{ t('report.detail.api.requestTotalTime') }}</div>
<div class="mt-2 text-[var(--color-text-1)]">
<span class="text-[18px] font-medium">{{
detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[0] : '-'
}}</span
>{{
detail.requestDuration !== null ? formatDuration(detail.requestDuration).split('-')[1] : 'ms'
}}</div
>
</div>
</template>
</a-popover>
</div>
</div>
@ -50,22 +79,54 @@
<MsIcon type="icon-icon_yes_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
{{ t('report.detail.api.assertPass') }}
</div>
<div class="flex items-center">
<span class="count"
>{{ detail.assertionPassRate === 'Calculating' ? '-' : detail.assertionPassRate || '0.00' }}%</span
>
<a-divider direction="vertical" class="!h-[16px]" :margin="8"></a-divider>
<span>{{
getIndicators(detail.assertionSuccessCount) === '-'
? '-'
: addCommasToNumber(detail.assertionSuccessCount || 0)
}}</span>
<span class="mx-1 text-[var(--color-text-4)]"
>/
{{
getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
}}</span
>
<a-popover position="bottom" content-class="response-popover-content">
<div class="flex items-center">
<div class="count one-line-text max-w-[80px]">{{
detail.assertionPassRate === 'Calculating' ? '-' : detail.assertionPassRate || '0.00'
}}</div
>%
<a-divider direction="vertical" class="!h-[16px]" :margin="8"></a-divider>
<div class="one-line-text max-w-[80px]">{{
getIndicators(detail.assertionSuccessCount) === '-'
? '-'
: addCommasToNumber(detail.assertionSuccessCount || 0)
}}</div>
<span class="mx-1 text-[var(--color-text-4)]">/</span>
<div class="one-line-text max-w-[80px]">
{{
getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
}}</div
>
</div>
<template #content>
<div class="min-w-[190px] max-w-[400px] p-4 text-[14px]">
<div class="text-[var(--color-text-4)]">{{ t('report.detail.api.assertPass') }}</div>
<div class="mt-2 flex items-center justify-between">
<div class="text-[18px] font-medium text-[var(--color-text-1)]"
>{{ getIndicators(detail.assertionPassRate) }} <span>%</span></div
>
<div>
<span class="text-[var(--color-text-1)]">{{
getIndicators(detail.assertionSuccessCount) === '-'
? '-'
: addCommasToNumber(detail.assertionSuccessCount || 0)
}}</span>
<span class="text-[var(--color-text-4)]"
><span class="mx-1">/</span>
{{
getIndicators(detail.assertionCount) === '-'
? '-'
: addCommasToNumber(detail.assertionCount) || 0
}}</span
>
</div>
</div>
</div>
</template>
</a-popover>
</div>
</div>
</div>

21
frontend/src/views/api-test/report/component/scenarioCom.vue
View File

@ -91,27 +91,28 @@
</a-popover>
</div>
</div>
<div class="timer-card min-w-[200px]">
<div class="timer-card min-w-[40%]">
<div class="text-[var(--color-text-4)]">
<MsIcon type="icon-icon_yes_outlined" class="mr-[4px] text-[var(--color-text-4)]" size="16" />
{{ t('report.detail.api.assertPass') }}
</div>
<a-popover position="bottom" content-class="response-popover-content">
<div class="flex items-center">
<span class="text-[18px] font-medium text-[var(--color-text-1)]"
>{{ getIndicators(detail.assertionPassRate) }} <span>%</span></span
>
<div class="flex flex-nowrap items-center">
<div class="one-line-text max-w-[80px] text-[18px] font-medium text-[var(--color-text-1)]"
>{{ getIndicators(detail.assertionPassRate) }}
</div>
<span>%</span>
<a-divider direction="vertical" :margin="0" class="!mx-2 h-[16px]"></a-divider>
<span class="text-[var(--color-text-1)]">{{
<div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{
getIndicators(detail.assertionSuccessCount) === '-'
? '-'
: addCommasToNumber(detail.assertionSuccessCount || 0)
}}</span>
<span class="text-[var(--color-text-4)]"
><span class="mx-1">/</span>
}}</div>
<span class="mx-1">/</span>
<div class="one-line-text max-w-[80px] text-[var(--color-text-4)]">
{{
getIndicators(detail.assertionCount) === '-' ? '-' : addCommasToNumber(detail.assertionCount) || 0
}}</span
}}</div
>
</div>
<template #content>

2
frontend/src/views/project-management/environmental/components/envParams/AssertTab.vue
View File

@ -1,5 +1,5 @@
<template>
<MsAssertion v-model:params="params" :show-extraction="false" />
<MsAssertion v-model:params="params" :show-extraction="false" :disabled="false" />
</template>
<script lang="ts" setup>