support to show image

Author: LinuxSuRen

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

@@ -112,6 +112,9 @@ const parseResponseBody = (body: any) => {
   }
 }
 
+const currentContentType = ref('')
+const currentImageContent = ref('')
+
 /**
  * Handles test result data from API response
  *
@@ -124,6 +127,17 @@ const parseResponseBody = (body: any) => {
  */
 const handleTestResult = (e: any): void => {
   testResult.value = e;
+  currentContentType.value = e.header.find((h: Pair) => h.key.toLowerCase() === 'content-type')?.value || '';
+  if (currentContentType.value.startsWith('image/')) {
+    API.DownloadResponseFile({
+      body: e.body}, (e) => {
+        if (e && e.data) {
+          currentImageContent.value = `data:${currentContentType.value};base64,${e.data}`;
+        } else {
+          console.error('No data to display as image.');
+        }
+    });
+  }
 
   if (!isHistoryTestCase.value) {
     handleTestResultError(e)
@@ -1372,7 +1386,8 @@ const renameTestCase = (name: string) => {
           </div>
           <div v-else>
             <Codemirror v-if="!isResponseFile" v-model="testResult.bodyText"/>
-            <div v-if="isResponseFile" style="padding-top: 10px;">
+            <img v-if="currentContentType === 'image/png'" :src="currentImageContent" style="max-width: 100%; max-height: 500px;"/>
+            <div v-else-if="isResponseFile" style="padding-top: 10px;">
             <el-row>
               <el-col :span="10">
                 <div>Response body is too large, please download to view.</div>

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

@@ -828,16 +828,10 @@ interface ResponseFile {
 function DownloadResponseFile(testcase: ResponseFile,
     callback: (d: any) => void, errHandle?: (e: any) => void | null) {
     const requestOptions = {
-        method: 'POST',
         headers: {
             'X-Store-Name': Cache.GetCurrentStore().name,
             'X-Auth': getToken()
-        },
-        body: JSON.stringify({
-            response: {
-                body: testcase.body,
-            }
-        })
+        }
     }
     fetch(`/api/v1/downloadFile/${testcase.body}`, requestOptions)
         .then(DefaultResponseProcess)

pkg/runner/http.go

@@ -257,7 +257,7 @@ func (r *simpleTestCaseRunner) RunTestCase(testcase *testing.TestCase, dataConte
 		err = errors.Join(err, jsonSchemaValidation(testcase.Expect.Schema, responseBodyData))
 	} else {
 		switch respType {
-		case util.OctetStream, util.Image:
+		case util.OctetStream, util.Image, util.ImagePNG:
 			var data []byte
 			if data, err = io.ReadAll(resp.Body); err == nil {
 				r.simpleResponse.RawBody = data