fix(测试跟踪): 测试计划执行接口用例改造

--bug=1017614 --user=陈建星 测试计划执行接口用例报错 https://www.tapd.cn/55049933/s/1270201

api-test/backend/src/main/java/io/metersphere/api/exec/api/ApiExecuteService.java

@@ -32,6 +32,7 @@ import io.metersphere.plugin.core.MsTestElement;
 import io.metersphere.service.definition.TcpApiParamService;
 import io.metersphere.utils.LoggerUtil;
 import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.collections.MapUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.jorphan.collections.HashTree;
 import org.apache.jorphan.collections.ListedHashTree;
@@ -105,6 +106,10 @@ public class ApiExecuteService {
     }
 
     public MsExecResponseDTO exec(RunCaseRequest request) {
+        return exec(request, null);
+    }
+
+    public MsExecResponseDTO exec(RunCaseRequest request, Map<String, Object> extendedParameters) {
         ApiTestCaseWithBLOBs testCaseWithBLOBs = request.getBloBs();
         if (StringUtils.equals(request.getRunMode(), ApiRunMode.JENKINS_API_PLAN.name())) {
             testCaseWithBLOBs = apiTestCaseMapper.selectByPrimaryKey(request.getReportId());
@@ -123,6 +128,9 @@ public class ApiExecuteService {
                 }
                 // 调用执行方法
                 JmeterRunRequestDTO runRequest = new JmeterRunRequestDTO(testCaseWithBLOBs.getId(), StringUtils.isEmpty(request.getReportId()) ? request.getId() : request.getReportId(), request.getRunMode(), jmeterHashTree);
+                if (MapUtils.isNotEmpty(extendedParameters)) {
+                    runRequest.setExtendedParameters(extendedParameters);
+                }
                 jMeterService.run(runRequest);
             } catch (Exception ex) {
                 ApiDefinitionExecResult result = apiDefinitionExecResultMapper.selectByPrimaryKey(request.getReportId());

api-test/backend/src/main/java/io/metersphere/service/plan/TestPlanApiCaseService.java

@@ -783,6 +783,8 @@ public class TestPlanApiCaseService {
         request.setEnvironmentId(testPlanApiCase.getEnvironmentId());
         request.setBloBs(apiCase);
         request.setReportId(reportId);
-        apiExecuteService.exec(request);
+        Map<String, Object> extendedParameters = new HashMap<>();
+        extendedParameters.put("SYN_RES", true);
+        apiExecuteService.exec(request, extendedParameters);
     }
 }

api-test/frontend/src/business/definition/components/response/RequestResultTail.vue

@@ -10,6 +10,7 @@
 import MsResponseResult from "../response/ResponseResult";
 import MsRequestMetric from "../response/RequestMetric";
 import {getApiReportDetail} from "../../../../api/definition-report";
+import {baseSocket} from "@/api/base-network";
 
 export default {
   name: "MsRequestResultTail",
@@ -51,12 +52,42 @@ export default {
         this.loading = true;
         getApiReportDetail(this.reportId).then(response => {
           this.loading = false;
-          if (response.data) {
+          let data = response.data;
-            this.report = JSON.parse(response.data.content);
+          if (data) {
+            this.report = JSON.parse(data.content);
+            if (data.status === 'RUNNING') {
+              this.loading = true;
+              this.socketSync();
+            }
           }
         });
       }
     },
+    socketSync() {
+      this.websocket = baseSocket(this.reportId);
+      this.websocket.onmessage = this.onMessages;
+      this.websocket.onerror = this.onError;
+    },
+    onError() {
+      this.$EventBus.$emit("API_TEST_ERROR", this.reportId);
+    },
+    onMessages(e) {
+      if (e.data && e.data.startsWith("result_")) {
+        try {
+          let data = e.data.substring(7);
+          this.report = JSON.parse(data);
+          this.websocket.close();
+          this.loading = false;
+          this.$EventBus.$emit("API_TEST_END", this.reportId);
+        } catch (e) {
+          console.log(e) // for debug
+          this.websocket.close();
+          this.$EventBus.$emit("API_TEST_ERROR", this.reportId);
+        }
+      } else if (e.data === "MS_TEST_END") {
+        this.$EventBus.$emit("API_TEST_ERROR", this.reportId);
+      }
+    },
   },
 }
 </script>

framework/sdk-parent/frontend/src/components/MicroApp.vue

@@ -37,7 +37,8 @@ export default {
         props: {
           defaultPath: this.to,
           routeParams: this.routeParams,
-          routeName: this.routeName
+          routeName: this.routeName,
+          eventBus: this.$EventBus
         }
       };
       if (process.env.NODE_ENV !== 'development') {

test-track/frontend/src/business/plan/view/comonents/api/TestPlanApiCaseList.vue

@@ -157,7 +157,7 @@
       <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
 
-      <test-plan-api-case-result :response="response" ref="apiCaseResult"/>
+      <test-plan-api-case-result ref="apiCaseResult"/>
 
       <!-- 批量编辑 -->
       <batch-edit :dialog-title="$t('test_track.case.batch_edit_case')" :type-arr="typeArr" :value-arr="valueArr"
@@ -319,8 +319,8 @@ export default {
       runData: [],
       testPlanCaseIds: [],
       reportId: "",
-      response: {},
       rowLoading: "",
+      runningReport: new Set(),
       userFilters: [],
       projectIds: [],
       projectList: [],
@@ -366,7 +366,10 @@ export default {
   created: function () {
     this.getMaintainerOptions();
     this.initTable();
-
+    this.$EventBus.$on("API_TEST_END", this.handleTestEnd);
+  },
+  destroyed() {
+    this.$EventBus.$off("API_TEST_END", this.handleTestEnd);
   },
   activated() {
     this.status = 'default';
@@ -500,27 +503,19 @@ export default {
     },
     singleRun(row) {
       let reportId = getUUID().substring(0, 8);
-      this.socketSync(reportId);
       this.rowLoading = row.id;
-      run(row.id, reportId);
+      run(row.id, reportId)
+        .then(() => {
+          this.runningReport.add(reportId);
+          this.$refs.apiCaseResult.open(reportId);
+        });
     },
-    socketSync(reportId) {
+    handleTestEnd(reportId) {
-      this.websocket = reportSocket(reportId);
+      if (this.runningReport.has(reportId)) {
-      this.websocket.onmessage = this.onMessages;
-      this.websocket.onerror = this.onError;
-    },
-    onError(e) {
-      this.$error(e);
-    },
-    onMessages(e) {
-      // 这里写自身逻辑
-      if (e && e.data === "SUCCESS") {
         this.runRefresh();
+        this.runningReport.delete(reportId);
       }
     },
-    errorRefresh() {
-      this.rowLoading = "";
-    },
     handleBatchEdit() {
       this.$refs.batchEdit.open(this.condition.selectAll ? this.total : this.$refs.table.selectRows.size);
       this.$refs.batchEdit.setSelectRows(this.$refs.table.selectRows);
@@ -576,9 +571,6 @@ export default {
           });
         }
       });
-    },
-    getTestCase() {
-
     },
     batchEdit(form) {
       let param = {};
@@ -658,13 +650,7 @@ export default {
       }
     },
     getReportResult(apiCase) {
-      apiDefinitionPlanReportGetByCaseId(apiCase.id)
+      this.$refs.apiCaseResult.openByCaseId(apiCase.id);
-        .then(response => {
-          if (response.data) {
-            this.response = JSON.parse(response.data.content);
-            this.$refs.apiCaseResult.open();
-          }
-        });
     },
     getVersionOptions() {
       if (hasLicense()) {

test-track/frontend/src/business/plan/view/comonents/api/TestPlanApiCaseResult.vue

@@ -1,30 +1,58 @@
 <template>
   <el-dialog :close-on-click-modal="false" :title="'测试结果'" width="60%"
              :visible.sync="visible" class="api-import" @close="close">
-    <micro-app route-name="ApiReportView"
+    <div v-loading="loading">
+      <micro-app v-if="showReport" route-name="ApiReportView"
                  service="api"
-               :route-params="{response}"/>
+                 :route-params="{response, reportId}"/>
+    </div>
   </el-dialog>
 </template>
 
 <script>
 import MicroApp from "metersphere-frontend/src/components/MicroApp";
+import {apiDefinitionPlanReportGetByCaseId} from "@/api/remote/api/api-definition-report";
 
 export default {
   name: "TestPlanApiCaseResult",
   components: {MicroApp},
-  props: ['response'],
   data() {
     return {
-      visible: false
+      visible: false,
+      loading: false,
+      response: null,
+      reportId: null,
+      showReport: true // 需要加载后再打开报告
     }
   },
   methods: {
     close() {
       this.visible = false;
+      this.reportId = null;
+      this.response = null;
     },
-    open() {
+    openByCaseId(caseId) {
       this.visible = true;
+      this.loading = true;
+      this.showReport = false;
+      this.$nextTick(() => {
+        apiDefinitionPlanReportGetByCaseId(caseId)
+            .then(r => {
+              this.loading = false;
+              this.showReport = true;
+              if (r.data) {
+                this.response = JSON.parse(r.data.content);
+              }
+            });
+      });
+    },
+    open(reportId) {
+      this.visible = true;
+      this.showReport = false;
+      this.$nextTick(() => {
+        this.showReport = true;
+        this.reportId = reportId;
+      });
     }
   }
 }