From 7bd43cc4a510a2a85df7fcb011fd358a2ee0eb58 Mon Sep 17 00:00:00 2001 From: Rick <1450685+LinuxSuRen@users.noreply.github.com> Date: Thu, 13 Jul 2023 15:58:26 +0800 Subject: [PATCH] fix: validation is missing on the testsuite creation UI (#126) --- console/atest-ui/src/views/TestSuite.vue | 60 ++++++++++++++---------- pkg/testing/loader_file.go | 16 ++++--- 2 files changed, 45 insertions(+), 31 deletions(-) diff --git a/console/atest-ui/src/views/TestSuite.vue b/console/atest-ui/src/views/TestSuite.vue index 486f54f..d27eb6f 100644 --- a/console/atest-ui/src/views/TestSuite.vue +++ b/console/atest-ui/src/views/TestSuite.vue @@ -2,7 +2,7 @@ import { ElMessage } from 'element-plus' import { reactive, ref, watch } from 'vue' import { Edit } from '@element-plus/icons-vue' -import type { FormInstance } from 'element-plus' +import type { FormInstance, FormRules } from 'element-plus' const props = defineProps({ name: String, @@ -62,6 +62,12 @@ const testCaseForm = reactive({ name: "", api: "", }) +const rules = reactive>({ + name: [ + { required: true, message: 'Please input TestCase name', trigger: 'blur' }, + ] +}) + function openNewTestCaseDialog() { loadTestSuites() dialogVisible.value = true @@ -80,32 +86,36 @@ function loadTestSuites() { }); } -const submitForm = (formEl: FormInstance | undefined) => { +const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) return - suiteCreatingLoading.value = true + await formEl.validate((valid: boolean, fields) => { + if (valid) { + suiteCreatingLoading.value = true - const requestOptions = { - method: 'POST', - body: JSON.stringify({ - suiteName: testCaseForm.suiteName, - data: { - name: testCaseForm.name, - request: { - api: testCaseForm.api, - method: "GET", - } - }, - }) - }; + const requestOptions = { + method: 'POST', + body: JSON.stringify({ + suiteName: testCaseForm.suiteName, + data: { + name: testCaseForm.name, + request: { + api: testCaseForm.api, + method: "GET", + } + }, + }) + }; - fetch('/server.Runner/CreateTestCase', requestOptions) - .then(response => response.json()) - .then(() => { - suiteCreatingLoading.value = false - emit('updated', 'hello from child') - }); - - dialogVisible.value = false + fetch('/server.Runner/CreateTestCase', requestOptions) + .then(response => response.json()) + .then(() => { + suiteCreatingLoading.value = false + emit('updated', 'hello from child') + }); + + dialogVisible.value = false + } + }) } function del() { @@ -147,6 +157,8 @@ const testSuiteList = ref([])