feat: support embed file upload (#538)

Author: LinuxSuRen

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { reactive, ref, watch } from 'vue'
-import { Edit, Delete } from '@element-plus/icons-vue'
+import { Edit, Delete, QuestionFilled } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Pair } from './types'
 import { API } from './net'
@@ -24,7 +24,8 @@ const emptyStore = function() {
     },
     properties: [{
         key: '',
-        value: ''
+        value: '',
+        description: '',
     }],
     disabled: false,
     readonly: false
@@ -147,8 +148,11 @@ watch(() => storeForm.kind.name, (name) => {
         pro.push({
           key: p.key,
           value: '',
-          defaultValue: p.defaultValue
+          defaultValue: p.defaultValue,
+          description: p.description,
         } as Pair)
+      } else {
+        pro[index].description = p.description
       }
     })
 
@@ -205,20 +209,27 @@ function updateKeys() {
     <el-table :data="stores" style="width: 100%" v-loading=storesLoading>
       <el-table-column :label="t('field.name')" width="180">
         <template #default="scope">
-          <el-input v-model="scope.row.name" placeholder="Name"/>
+          {{ scope.row.name }}
         </template>
       </el-table-column>
       <el-table-column label="URL">
         <template #default="scope">
           <div style="display: flex; align-items: center">
-            <el-input v-model="scope.row.url" placeholder="URL" />
+            {{ scope.row.url }}
           </div>
         </template>
       </el-table-column>
       <el-table-column :label="t('field.plugin')">
         <template #default="scope">
           <div style="display: flex; align-items: center">
-            <el-input v-model="scope.row.kind.url" placeholder="Plugin" />
+            {{ scope.row.kind.name }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="Socket">
+        <template #default="scope">
+          <div style="display: flex; align-items: center">
+            {{ scope.row.kind.url }}
           </div>
         </template>
       </el-table-column>
@@ -299,9 +310,17 @@ function updateKeys() {
                 </el-table-column>
                 <el-table-column label="Value">
                     <template #default="scope">
-                    <div style="display: flex; align-items: center">
-                        <el-input v-model="scope.row.value" :placeholder="scope.row.defaultValue" />
-                    </div>
+                      <div style="display: flex; align-items: center">
+                        <el-input v-model="scope.row.value" :placeholder="scope.row.defaultValue">
+                          <template #append v-if="scope.row.description">
+                            <el-tooltip :content="scope.row.description">
+                              <el-icon>
+                                <QuestionFilled/>
+                              </el-icon>
+                            </el-tooltip>
+                          </template>
+                        </el-input>
+                      </div>
                     </template>
                 </el-table-column>
             </el-table>

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

@@ -3,7 +3,7 @@ import { ref, watch, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Edit, Delete, Search, CopyDocument } from '@element-plus/icons-vue'
 import JsonViewer from 'vue-json-viewer'
-import type { Pair, TestResult, TestCaseWithSuite } from './types'
+import type { Pair, TestResult, TestCaseWithSuite, TestCase } from './types'
 import { NewSuggestedAPIsQuery, CreateFilter, GetHTTPMethods, FlattenObject } from './types'
 import { Cache } from './cache'
 import { API } from './net'
@@ -241,7 +241,8 @@ const emptyTestCaseWithSuite: TestCaseWithSuite = {
       query: [],
       cookie: [],
       form: [],
-      body: ''
+      body: '',
+      filepath: ''
     },
     response: {
       statusCode: 0,
@@ -324,7 +325,7 @@ function formatDate(createTimeStr : string){
     return formattedDate
 }
 
-function determineBodyType(e) {
+function determineBodyType(e: TestCase) {
   e.request.header.forEach(item => {
     if (item.key === "Content-Type") {
       switch (item.value) {
@@ -334,6 +335,15 @@ function determineBodyType(e) {
         case 'application/json':
           bodyType.value = 5
           break
+        case 'multipart/form-data':
+          bodyType.value = 6
+
+          e.request.form.forEach(fItem => {
+            if (fItem.key !== '' && fItem.key !== '') {
+              e.request.filepath = fItem.key + "=" + fItem.value
+            }
+          })
+          break
       }
     }
   });
@@ -721,6 +731,17 @@ function bodyTypeChange(e: number) {
     case 5:
       contentType = 'application/json'
       break;
+    case 6:
+      contentType = 'multipart/form-data'
+
+      const items = testCaseWithSuite.value.data.request.filepath.split("=")
+      if (items && items.length > 1) {
+        testCaseWithSuite.value.data.request.form = [{
+          key: items[0],
+          value: items[1]
+        } as Pair]
+      }
+      break;
   }
 
   if (contentType !== "") {
@@ -732,7 +753,7 @@ function bodyTypeChange(e: number) {
 }
 
 const lintingError = ref('')
-function jsonFormat(space) {
+function jsonFormat(space: number) {
   const jsonText = testCaseWithSuite.value.data.request.body
   if (bodyType.value !== 5 || jsonText === '') {
     return
@@ -987,10 +1008,14 @@ Magic.Keys(() => {
             <el-radio :label="3">raw</el-radio>
             <el-radio :label="4">x-www-form-urlencoded</el-radio>
             <el-radio :label="5">JSON</el-radio>
+            <el-radio :label="6">EmbedFile</el-radio>
           </el-radio-group>
 
           <div style="flex-grow: 1;">
-            <Codemirror v-if="bodyType === 3 || bodyType === 5"
+            <div v-if="bodyType === 6">
+              Filename: <el-input v-model="testCaseWithSuite.data.request.filepath" placeholder="file=sample.txt" />
+            </div>
+            <Codemirror v-if="bodyType === 3 || bodyType === 5 || bodyType === 6"
               @blur="jsonFormat(-1)"
               v-model="testCaseWithSuite.data.request.body"
               :disabled="isHistoryTestCase"/>

console/atest-ui/src/views/store.ts

@@ -32,9 +32,11 @@ const storeExtensions = [
     }, {
       key: 'branch'
     }, {
-      key: 'email'
+      key: 'email',
+      description: 'See also: git config --local user.email [email protected]'
     }, {
-      key: 'name'
+      key: 'name',
+      description: 'See also: git config --local user.name xxx'
     }]
   },
   {
@@ -59,10 +61,15 @@ const storeExtensions = [
     name: 'atest-store-orm',
     params: [{
       key: 'driver',
-      defaultValue: 'mysql'
+      defaultValue: 'mysql',
+      description: 'Supported: mysql, postgres'
     }, {
       key: 'database',
       defaultValue: 'atest'
+    }, {
+      key: 'historyLimit',
+      defaultValue: '',
+      description: 'Set the limit of the history record count'
     }]
   },
   {

console/atest-ui/src/views/types.ts

@@ -45,6 +45,7 @@ export interface Pair {
   key: string
   value: string
   defaultValue: string
+  description: string
 }
 
 export interface TestCaseWithSuite {
@@ -62,9 +63,11 @@ export interface TestCaseRequest {
   api: string
   method: string
   header: Pair[]
+  cookie: Pair[]
   query: Pair[]
   form: Pair[]
   body: string
+  filepath: string
 }
 
 export interface TestCaseResponse {

pkg/runner/http.go

@@ -176,7 +176,9 @@ func (r *simpleTestCaseRunner) RunTestCase(testcase *testing.TestCase, dataConte
 			Value: v,
 		})
 	}
-	r.log.Info("start to send request to %s\n", testcase.Request.API)
+	r.log.Info("request method: %s\n", request.Method)
+	r.log.Info("request header %v\n", request.Header)
+	r.log.Info("start to send request to %v\n", request.URL)
 
 	// TODO only do this for unit testing, should remove it once we have a better way
 	if strings.HasPrefix(testcase.Request.API, "http://") {
@@ -189,7 +191,7 @@ func (r *simpleTestCaseRunner) RunTestCase(testcase *testing.TestCase, dataConte
 		return
 	}
 
-	r.log.Debug("test case %q, test case info: %v, status code: %d\n", testcase.Name, testcase, resp.StatusCode)
+	r.log.Debug("test case %q, status code: %d\n", testcase.Name, resp.StatusCode)
 
 	if err = testcase.Expect.Render(dataContext); err != nil {
 		return
@@ -223,7 +225,7 @@ func (r *simpleTestCaseRunner) RunTestCase(testcase *testing.TestCase, dataConte
 
 		err = errors.Join(err, jsonSchemaValidation(testcase.Expect.Schema, responseBodyData))
 	} else {
-		r.log.Trace(fmt.Sprintf("skip to read the body due to it is not struct content: %q\n", respType))
+		r.log.Debug("skip to read the body due to it is not struct content: %q\n", respType)
 	}
 
 	r.cookies = append(r.cookies, resp.Cookies()...)

pkg/server/remote_server_test.go

@@ -148,7 +148,10 @@ func TestRunTestCase(t *testing.T) {
 		})
 		assert.NoError(t, err)
 		assert.Equal(t, sampleBody, result.Body)
-		assert.Contains(t, result.Output, "start to run: 'get'\nstart to send request to http://foo\ntest case \"get\", test case info: &{ get  <nil> <nil> {http://foo GET map[] map[key:value] map[] map[]  } {0  map[] map[] [] [] }}, status code: 200\n")
+		assert.Contains(t, result.Output, "request method: GET")
+		assert.Contains(t, result.Output, "request header")
+		assert.Contains(t, result.Output, "start to send request to http://foo")
+		assert.Contains(t, result.Output, "test case \"get\", status code: 200")
 	})
 
 	t.Run("text response", func(t *testing.T) {

pkg/testing/parser.go

@@ -187,7 +187,14 @@ func (r *Request) GetBody() (reader io.Reader, err error) {
 				writer.WriteField(key, val)
 			}
 
-			_ = writer.Close()
+			if f, ok := r.Form["file"]; ok && f != "" && r.Body.Value != "" {
+				var part io.Writer
+				if part, err = writer.CreateFormFile("file", r.Form["file"]); err == nil {
+					part.Write([]byte(r.Body.Value))
+				}
+			}
+
+			err = writer.Close()
 			reader = multiBody
 			r.Header[util.ContentType] = writer.FormDataContentType()
 		} else if r.Header[util.ContentType] == util.Form {