feat: add testCase page json lint (#506)

* feat: add testCase page json lint

* fix the test case save and run method

* add shortcut for sending request

---------

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/package-lock.json

@@ -16,8 +16,10 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@vueuse/core": "^10.11.0",
     "element-plus": "^2.3.7",
     "intro.js": "^7.0.1",
+    "jsonlint-mod": "^1.7.6",
     "jsonpath-plus": "^7.2.0",
     "skywalking-client-js": "^0.10.0",
     "vue": "^3.3.4",

console/atest-ui/package.json

@@ -77,6 +77,7 @@
         "403": "403 Forbidden",
         "405": "405 Method Not Allowed",
         "409": "409 Conflict",
+        "415": "415 Unsupported Media Type",
         "422": "422 Unprocessable Content",
         "500": "500 Internal Server Error",
         "502": "502 Bad Gateway",

console/atest-ui/src/locales/en.json

@@ -12,7 +12,11 @@ import type { TestCaseResponse } from './cache'
 import { useI18n } from 'vue-i18n'
 import { JSONPath } from 'jsonpath-plus'
 import { Codemirror } from 'vue-codemirror'
+import jsonlint from 'jsonlint-mod'
+import { useMagicKeys } from '@vueuse/core'
 
+const keys = useMagicKeys()
+const keyAltS = keys['Alt+S']
 const { t } = useI18n()
 
 const props = defineProps({
@@ -26,14 +30,25 @@ let querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, pr
 const testResultActiveTab = ref(Cache.GetPreference().responseActiveTab)
 watch(testResultActiveTab, Cache.WatchResponseActiveTab)
 
+watch(keyAltS, (v) => {
+  if (v) {
+    sendRequest()
+  }
+})
+
 const parameters = ref([] as Pair[])
 const requestLoading = ref(false)
 const testResult = ref({ header: [] as Pair[] } as TestResult)
 const sendRequest = async () => {
   if (needUpdate.value) {
-    await saveTestCase(false)
+    await saveTestCase(false, runTestCase)
+    needUpdate.value = false
+  } else {
+    runTestCase()
   }
+}
 
+const runTestCase = () => {
   requestLoading.value = true
   const name = props.name
   const suite = props.suite
@@ -280,14 +295,18 @@ watch(testCaseWithSuite, (after, before) => {
 }, { deep: true })
 
 const saveLoading = ref(false)
-function saveTestCase(tip: boolean = true) {
+function saveTestCase(tip: boolean = true, callback: (c: any) => void) {
   UIAPI.UpdateTestCase(testCaseWithSuite.value, (e) => {
     if (tip) {
       ElMessage({
         message: 'Saved.',
         type: 'success'
       })
     }
+
+    if (callback) {
+      callback()
+    }
   }, UIAPI.ErrorTip, saveLoading)
 }
 
@@ -433,15 +452,21 @@ function bodyTypeChange(e: number) {
   }
 }
 
-function jsonFormat() {
-  if (bodyType.value !== 5) {
+const lintingError = ref('')
+function jsonFormat(space) {
+  const jsonText = testCaseWithSuite.value.data.request.body
+  if (bodyType.value !== 5 || jsonText === '') {
     return
   }
 
   try {
-    testCaseWithSuite.value.data.request.body = JSON.stringify(JSON.parse(testCaseWithSuite.value.data.request.body), null, 4)
+    const jsonObj = jsonlint.parse(jsonText)
+    if (space >= 0) {
+      testCaseWithSuite.value.data.request.body = JSON.stringify(jsonObj, null, space)
+    }
+    lintingError.value = ''
   } catch (e) {
-    console.log(e)
+    lintingError.value = e.message
   }
 }
 
@@ -539,7 +564,7 @@ const duplicateTestCase = () => {
           v-model="testCaseWithSuite.data.request.method"
           class="m-2"
           placeholder="Method"
-          size="middle"
+          size="default"
           test-id="case-editor-method"
         >
           <el-option
@@ -654,6 +679,11 @@ const duplicateTestCase = () => {
         </el-tab-pane>
 
         <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>
+            <el-text class="mx-1">Choose the body format</el-text>
+          </span>
           <template #label>
             <el-badge :is-dot="testCaseWithSuite.data.request.body !== ''" class="item">Body</el-badge>
           </template>
@@ -667,7 +697,7 @@ const duplicateTestCase = () => {
 
           <div style="flex-grow: 1;">
             <Codemirror v-if="bodyType === 3 || bodyType === 5"
-              @change="jsonFormat"
+              @blur="jsonFormat(-1)"
               v-model="testCaseWithSuite.data.request.body"/>
             <el-table :data="testCaseWithSuite.data.request.form" style="width: 100%" v-if="bodyType === 4">
               <el-table-column label="Key" width="180">
@@ -684,6 +714,9 @@ const duplicateTestCase = () => {
               </el-table-column>
             </el-table>
           </div>
+          <div v-if="lintingError" style="color: red; margin-top: 10px;">
+            {{ lintingError }}
+          </div>
         </el-tab-pane>
 
         <el-tab-pane label="Expected" name="expected" v-if="props.kindName !== 'tRPC' && props.kindName !== 'gRPC'">
@@ -777,7 +810,7 @@ const duplicateTestCase = () => {
               v-model="currentCodeGenerator"
               class="m-2"
               style="padding-right: 10px;"
-              size="middle"
+              size="default"
             >
               <el-option
                 v-for="item in codeGenerators"

console/atest-ui/src/views/TestCase.vue

@@ -1,11 +1,11 @@
 #!/bin/bash
 set -e
 
-docker-compose version
+docker compose version
 
 targets=(golang java python javascript curl)
 for target in "${targets[@]}"
 do
-    docker-compose down
-    docker-compose up --build $target --exit-code-from $target
+    docker compose down
+    docker compose up --build $target --exit-code-from $target
 done

e2e/code-generator/start.sh

@@ -6,6 +6,6 @@ then
     file=compose.yaml
 fi
 
-docker-compose version
-docker-compose -f "$file" down
-docker-compose -f "$file" up --build testing --exit-code-from testing --remove-orphans
+docker compose version
+docker compose -f "$file" down
+docker compose -f "$file" up --build testing --exit-code-from testing --remove-orphans

e2e/start.sh

@@ -10,7 +10,8 @@ ATEST_UI = console/atest-ui
 
 .PHONY: run-server
 run-server: ## Run the API Testing server
-run-server: build-ui
+run-server: build-ui run-backend
+run-backend:
 	go run . server --local-storage 'bin/*.yaml' --console-path ${ATEST_UI}/dist --extension-registry ghcr.io
 
 .PHONY: run-console

tools/make/run.mk

@@ -13,6 +13,8 @@ BUILD_FLAGS += \
 .PHONY: build.ui
 build.ui:
 	cd ${ATEST_UI} && ${FRONT_RUNTIMES} i && ${FRONT_RUNTIMES} run build-only
+run-ui:
+	cd ${ATEST_UI} && ${FRONT_RUNTIMES} i && ${FRONT_RUNTIMES} run dev
 
 .PHONY: build.embed.ui
 build.embed.ui: embed.ui