kyfx
/
api-testing
mirror of https://github.com/LinuxSuRen/api-testing.git
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: provide a way to toggle button as icon mode or not

This commit is contained in:
rick 2025-04-03 08:28:17 +00:00
parent 9d3e7ad6d4
commit b0612bcbdd
11 changed files with 95 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
console/atest-ui/src/App.vue
View File

@ -51,6 +51,9 @@ API.GetVersion((d) => {
})
const isCollapse = ref(true)
watch(isCollapse, (v: boolean) => {
window.localStorage.setItem('button.style', v ? 'simple' : '')
})
const lastActiveMenu = window.localStorage.getItem('activeMenu')
const activeMenu = ref(lastActiveMenu === '' ? 'welcome' : lastActiveMenu)
const panelName = ref(activeMenu)
@ -64,7 +67,7 @@ i18nLocale.value = locale.value
watch(locale, (e: string) =>{
Cache.WithLocale(e)
i18nLocale.value = locale
i18nLocale.value = e
})
const handleChangeLan = (command: string) => {

11
console/atest-ui/src/components/Button.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
const simpleButton = ref(localStorage.getItem('button.style') === 'simple')
</script>
<template>
<el-button v-bind="$attrs">
<slot v-if="!simpleButton || !($attrs.icon)"></slot>
</el-button>
</template>

3
console/atest-ui/src/locales/en.json
View File

@ -16,7 +16,7 @@
"toolbox": "Tool Box",
"refresh": "Refresh",
"newtestcase": "New TestCase",
"viewYaml":"View YAML",
"viewYaml": "View YAML",
"verify": "Verify",
"duplicate": "Duplicate",
"generateCode": "Generate Code",
@ -32,6 +32,7 @@
"createTestSuite": "Create Test Suite",
"createTestCase": "Create Test Case",
"createStore": "Create Store",
"updateStore": "Update Store",
"createSecret": "Create Secret",
"secretManager": "Secret Manager",
"protoContent": "Proto Content",

2
console/atest-ui/src/locales/zh.json
View File

@ -32,6 +32,7 @@
"createTestSuite": "创建测试用例集",
"createTestCase": "创建测试用例",
"createStore": "创建存储",
"updateStore": "更新存储",
"createSecret": "创建凭据",
"secretManager": "凭据管理",
"apiRequestParameter": "API 请求参数",
@ -63,6 +64,7 @@
"plugin": "插件",
"pluginName": "插件名称",
"pluginURL": "插件地址",
"disabled": "禁用",
"status": "状态",
"operations": "操作",
"storageLocation": "保存位置",

4
console/atest-ui/src/views/DataManager.vue
View File

@ -157,6 +157,8 @@ const executeWithQuery = async (sql: string) => {
case 'atest-store-etcd':
sqlQuery.value = '*'
break;
case '':
return;
}
let success = false
@ -238,7 +240,7 @@ const executeWithQuery = async (sql: string) => {
</el-col>
<el-col :span="2">
<el-form-item>
<el-button type="primary" @click="executeQuery">Execute</el-button>
<el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
</el-form-item>
</el-col>
<el-col :span="2">

23
console/atest-ui/src/views/StoreManager.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from 'vue'
import { Edit, Delete, QuestionFilled, Help } from '@element-plus/icons-vue'
import { Edit, Delete, QuestionFilled, Help, Refresh } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { Pair } from './types'
import { API } from './net'
@ -9,6 +9,7 @@ import { UIAPI } from './net-vue'
import { SupportedExtensions, SupportedExtension } from './store'
import { useI18n } from 'vue-i18n'
import { Magic } from './magicKeys'
import Button from '../components/Button.vue'
const { t } = useI18n()
@ -69,7 +70,7 @@ loadStores()
Magic.Keys(loadStores, ['Alt+KeyR'])
function deleteStore(name: string) {
API.DeleteStore(name, (e) => {
API.DeleteStore(name, () => {
ElMessage({
message: 'Deleted.',
type: 'success'
@ -207,8 +208,8 @@ const storeExtLink = ref('')
<template>
<div>Store Manager</div>
<div>
<el-button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</el-button>
<el-button type="primary" @click="loadStores">{{t('button.refresh')}}</el-button>
<Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
<Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
</div>
<el-table :data="stores" style="width: 100%" v-loading=storesLoading>
<el-table-column :label="t('field.name')" width="180">
@ -254,8 +255,8 @@ const storeExtLink = ref('')
<el-table-column :label="t('field.operations')" width="220">
<template #default="scope">
<div style="display: flex; align-items: center" v-if="scope.row.name !== 'local'">
<el-button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</el-button>
<el-button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</el-button>
<Button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</Button>
<Button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</Button>
</div>
</template>
</el-table-column>
@ -265,7 +266,7 @@ const storeExtLink = ref('')
Follow <el-link href="https://linuxsuren.github.io/api-testing/#storage" target="_blank">the instructions</el-link> to configure the storage plugins.
</div>
<el-dialog v-model="dialogVisible" :title="t('title.createStore')" width="30%" draggable>
<el-dialog v-model="dialogVisible" :title="t(createAction? 'title.createStore': 'title.updateStore')" width="30%" draggable>
<template #footer>
<span class="dialog-footer">
<el-form
@ -341,18 +342,18 @@ const storeExtLink = ref('')
</el-table>
</el-form-item>
<el-form-item>
<el-button
<Button
type="primary"
@click="storeVerify(storeFormRef)"
test-id="store-form-verify"
>{{t('button.verify')}}</el-button
>{{t('button.verify')}}</Button
>
<el-button
<Button
type="primary"
@click="submitForm(storeFormRef)"
v-loading="creatingLoading"
test-id="store-form-submit"
>{{t('button.submit')}}</el-button
>{{t('button.submit')}}</Button
>
</el-form-item>
</el-form>

53
console/atest-ui/src/views/TestCase.vue
View File

@ -1,10 +1,11 @@
<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit, Delete, Search, CopyDocument } from '@element-plus/icons-vue'
import { Edit, Delete, Search, CopyDocument, Help } from '@element-plus/icons-vue'
import JsonViewer from 'vue-json-viewer'
import type { Pair, TestResult, TestCaseWithSuite, TestCase } from './types'
import { NewSuggestedAPIsQuery, CreateFilter, GetHTTPMethods, FlattenObject } from './types'
import Button from '../components/Button.vue'
import { Cache } from './cache'
import { API } from './net'
import EditButton from '../components/EditButton.vue'
@ -125,6 +126,7 @@ const handleTestResult = (e: any) => {
testResult.value.bodyLength = e.body.length
testResult.value.bodyObject = JSON.parse(e.body);
testResult.value.originBodyObject = JSON.parse(e.body);
responseBodyFilter()
}
Cache.SetTestCaseResponseCache(suite + '-' + name, {
@ -162,7 +164,7 @@ function responseBodyFilter() {
json: testResult.value.originBodyObject,
resultType: 'value'
})
testResult.value.bodyObject = query[0]
testResult.value.bodyObject = query
}
}
@ -905,16 +907,16 @@ const renameTestCase = (name: string) => {
<el-container style="height: 100%;">
<el-header style="padding-left: 5px;">
<div style="margin-bottom: 5px">
<el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
<Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
disabled v-if="Cache.GetCurrentStore().readOnly || isHistoryTestCase"
>{{ t('button.save') }}</el-button>
<el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
>{{ t('button.save') }}</Button>
<Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
v-if="!Cache.GetCurrentStore().readOnly && !isHistoryTestCase"
>{{ t('button.save') }}</el-button>
<el-button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</el-button>
<el-button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</el-button>
<el-button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</el-button>
<el-button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</el-button>
>{{ t('button.save') }}</Button>
<Button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</Button>
<Button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</Button>
<Button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</Button>
<Button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</Button>
<span v-if="isHistoryTestCase" style="margin-left: 15px;">{{ t('tip.runningAt') }}{{ HistoryTestCaseCreateTime }}</span>
<EditButton :value="props.name" @changed="renameTestCase"/>
</div>
@ -1060,8 +1062,8 @@ const renameTestCase = (name: string) => {
<el-tab-pane name="body">
<span style="margin-right: 10px; padding-right: 5px;">
<el-button type="primary" @click="jsonFormat(4)">Beautify</el-button>
<el-button type="primary" @click="jsonFormat(0)">Minify</el-button>
<Button type="primary" @click="jsonFormat(4)">Beautify</Button>
<Button type="primary" @click="jsonFormat(0)">Minify</Button>
<el-text class="mx-1">Choose the body format</el-text>
</span>
<template #label>
@ -1221,8 +1223,8 @@ const renameTestCase = (name: string) => {
:value="item.key"
/>
</el-select>
<el-button type="primary" @click="generateCode">{{ t('button.refresh') }}</el-button>
<el-button type="primary" @click="copyCode">{{ t('button.copy') }}</el-button>
<Button type="primary" @click="generateCode">{{ t('button.refresh') }}</Button>
<Button type="primary" @click="copyCode">{{ t('button.copy') }}</Button>
</div>
<Codemirror v-model="currentCodeContent"/>
</template>
@ -1257,24 +1259,24 @@ const renameTestCase = (name: string) => {
</el-col>
<el-col :span="4">
<div style="display: flex;flex-wrap: nowrap;justify-content: flex-end;">
<el-button
<Button
type="primary"
@click="submitForm(viewHistoryRef)"
:loading="caseRevertLoading"
>{{ t('button.revert') }}
</el-button>
<el-button
</Button>
<Button
type="primary"
@click="goToHistory(viewHistoryRef)"
:loading="caseRevertLoading"
>{{ t('button.goToHistory') }}
</el-button>
<el-button
</Button>
<Button
type="primary"
@click="deleteAllHistory(viewHistoryRef)"
:loading="caseRevertLoading"
>{{ t('button.deleteAllHistory') }}
</el-button>
</Button>
</div>
</el-col>
</el-row>
@ -1322,7 +1324,7 @@ const renameTestCase = (name: string) => {
</el-table-column>
</el-table>
<el-button type="primary" @click="sendRequestWithParameter">{{ t('button.send') }}</el-button>
<Button type="primary" @click="sendRequestWithParameter">{{ t('button.send') }}</Button>
</template>
</el-drawer>
</el-main>
@ -1341,8 +1343,11 @@ const renameTestCase = (name: string) => {
<el-tab-pane label="Body" name="body">
<div v-if="testResult.bodyObject">
<el-input :prefix-icon="Search" @change="responseBodyFilter" v-model="responseBodyFilterText"
clearable placeholder="$.key">
clearable placeholder="$.data[?(@.status==='SUCCEED')]">
<template #prepend v-if="testResult.bodyLength > 0">Body Size: {{testResult.bodyLength}}</template>
<template #suffix>
<a href="https://www.npmjs.com/package/jsonpath-plus" target="_blank"><el-icon><Help /></el-icon></a>
</template>
</el-input>
<JsonViewer :value="testResult.bodyObject" :expand-depth="5" copyable boxed sort />
</div>
@ -1354,7 +1359,7 @@ const renameTestCase = (name: string) => {
<div>Response body is too large, please download to view.</div>
</el-col>
<el-col :span="2">
<el-button type="primary" @click="downloadResponseFile">Download</el-button>
<Button type="primary" @click="downloadResponseFile">Download</Button>
</el-col>
</el-row>
</div>
@ -1389,7 +1394,7 @@ const renameTestCase = (name: string) => {
New Test Case Name:<el-input v-model="targetTestCaseName" />
</template>
<template #footer>
<el-button type="primary" @click="duplicateTestCase">{{ t('button.ok') }}</el-button>
<Button type="primary" @click="duplicateTestCase">{{ t('button.ok') }}</Button>
</template>
</el-drawer>
</template>

43
console/atest-ui/src/views/TestSuite.vue
View File

@ -1,12 +1,13 @@
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from 'vue'
import { Edit, CopyDocument, Delete } from '@element-plus/icons-vue'
import { Edit, CopyDocument, Delete, View } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { Suite, TestCase, Pair } from './types'
import { NewSuggestedAPIsQuery, GetHTTPMethods, SwaggerSuggestion } from './types'
import EditButton from '../components/EditButton.vue'
import HistoryInput from '../components/HistoryInput.vue'
import Button from '../components/Button.vue'
import { Cache } from './cache'
import { useI18n } from 'vue-i18n'
import { API } from './net'
@ -395,36 +396,36 @@ const renameTestSuite = (name: string) => {
Share link: <el-input readonly v-model="shareLink" style="width: 80%" />
</div>
<div class="button-container">
<el-button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" v-if="!Cache.GetCurrentStore().readOnly">{{
<Button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" v-if="!Cache.GetCurrentStore().readOnly">{{
t('button.save')
}}</el-button>
<el-button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" disabled v-if="Cache.GetCurrentStore().readOnly">{{
}}</Button>
<Button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" disabled v-if="Cache.GetCurrentStore().readOnly">{{
t('button.save')
}}</el-button>
<el-button type="danger" @click="del" :icon="Delete" test-id="suite-del-but">{{
}}</Button>
<Button type="danger" @click="del" :icon="Delete" test-id="suite-del-but">{{
t('button.delete')
}}</el-button>
<el-button type="primary" @click="convert" test-id="convert">{{
}}</Button>
<Button type="primary" @click="convert" test-id="convert">{{
t('button.export')
}}</el-button>
<el-button
}}</Button>
<Button
type="primary"
@click="openDuplicateDialog"
:icon="CopyDocument"
test-id="duplicate"
>{{ t('button.duplicate') }}</el-button
>{{ t('button.duplicate') }}</Button
>
<el-button type="primary" @click="viewYaml" test-id="view-yaml">{{
<Button type="primary" @click="viewYaml" :icon="View" test-id="view-yaml">{{
t('button.viewYaml')
}}</el-button>
}}</Button>
</div>
<div class="button-container">
<el-button
<Button
type="primary"
@click="openNewTestCaseDialog"
:icon="Edit"
test-id="open-new-case-dialog"
>{{ t('button.newtestcase') }}</el-button
>{{ t('button.newtestcase') }}</Button
>
</div>
</el-form>
@ -479,12 +480,12 @@ const renameTestSuite = (name: string) => {
</el-autocomplete>
</el-form-item>
<el-form-item>
<el-button
<Button
type="primary"
@click="submitTestCaseForm(testcaseFormRef)"
v-loading="suiteCreatingLoading"
test-id="case-form-submit"
>{{ t('button.submit') }}</el-button
>{{ t('button.submit') }}</Button
>
</el-form-item>
</el-form>
@ -499,9 +500,9 @@ const renameTestSuite = (name: string) => {
width="40%"
draggable
>
<el-button type="primary" @click="isFullScreen = !isFullScreen" style="margin-bottom: 10px">
<Button type="primary" @click="isFullScreen = !isFullScreen" style="margin-bottom: 10px">
<p>{{ isFullScreen ? t('button.cancelFullScreen') : t('button.fullScreen') }}</p>
</el-button>
</Button>
<el-scrollbar>
<Codemirror v-model="yamlFormat" />
</el-scrollbar>
@ -512,7 +513,7 @@ const renameTestSuite = (name: string) => {
New Test Suite Name:<el-input v-model="targetSuiteDuplicateName" />
</template>
<template #footer>
<el-button type="primary" @click="duplicateTestSuite">{{ t('button.ok') }}</el-button>
<Button type="primary" @click="duplicateTestSuite">{{ t('button.ok') }}</Button>
</template>
</el-drawer>
</template>
@ -525,7 +526,7 @@ const renameTestSuite = (name: string) => {
margin-bottom: 8px;
}
.button-container > .el-button + .el-button {
.button-container > .Button + .Button {
margin-left: 0px;
}
</style>

8
console/atest-ui/src/views/TestingHistoryPanel.vue
View File

@ -1,13 +1,9 @@
<script setup lang="ts">
import TestCase from './TestCase.vue'
import TestSuite from './TestSuite.vue'
import TemplateFunctions from './TemplateFunctions.vue'
import { reactive, ref, watch } from 'vue'
import { ref, watch } from 'vue'
import { ElTree, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { Edit, Refresh } from '@element-plus/icons-vue'
import type { Suite } from './types'
import { API } from './net'
import { Refresh } from '@element-plus/icons-vue'
import { Cache } from './cache'
import { useI18n } from 'vue-i18n'

11
console/atest-ui/src/views/TestingPanel.vue
View File

@ -13,6 +13,7 @@ import { Magic } from './magicKeys'
import TestSuiteCreationDialog from '../components/TestSuiteCreationDialog.vue'
import TestSuiteImportDialog from '../components/TestSuiteImportDialog.vue'
import LoginDialog from '../components/LoginDialog.vue'
import Button from '../components/Button.vue'
const { t } = useI18n()
@ -260,13 +261,13 @@ const viewName = ref('')
<el-main style="padding-top: 5px; padding-bottom: 5px;">
<el-container style="height: 100%">
<el-aside>
<el-button type="primary" @click="openTestSuiteCreateDialog"
<Button type="primary" @click="openTestSuiteCreateDialog"
data-intro="Click here to create a new test suite"
test-id="open-new-suite-dialog" :icon="Edit">{{ t('button.new') }}</el-button>
<el-button type="primary" @click="openTestSuiteImportDialog"
test-id="open-new-suite-dialog" :icon="Edit">{{ t('button.new') }}</Button>
<Button type="primary" @click="openTestSuiteImportDialog"
data-intro="Click here to import from Postman"
test-id="open-import-suite-dialog">{{ t('button.import') }}</el-button>
<el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
test-id="open-import-suite-dialog">{{ t('button.import') }}</Button>
<Button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</Button>
<el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" style="padding: 5px;" />
<el-tree

4
console/atest-ui/src/views/net.ts
View File

@ -295,13 +295,13 @@ function DeleteTestCase(testcase: TestCase,
.then(callback).catch(emptyOrDefault(errHandle))
}
interface RunTestCaseRequest {
export interface RunTestCaseRequest {
suiteName: string
name: string
parameters: any
}
interface BatchRunTestCaseRequest {
export interface BatchRunTestCaseRequest {
count: number
interval: string
request: RunTestCaseRequest