fix (接口自动化): 单条场景执行支持导出及生成测试报告

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -459,6 +459,8 @@ export default {
       isTop: false,
       stepSize: 0,
       message: "",
+      websocket: {},
+      messageWebSocket: {},
     }
   },
   created() {
@@ -503,10 +505,27 @@ export default {
         })
       }
     },
+    clearNodeStatus(arr) {
+      if (arr) {
+        arr.forEach(item => {
+          item.code = undefined;
+          item.data.code = undefined;
+          item.testing = undefined;
+          item.data.testing = undefined;
+          if (item.childNodes && item.childNodes.length > 0) {
+            this.clearNodeStatus(item.childNodes);
+          }
+        })
+      }
+    },
     evaluationParent(node, status) {
+      if (!node.data.code) {
+        node.data.code = "success";
+      }
       if (!status) {
         node.data.code = "error";
       }
+      node.data.testing = false;
       node.data.debug = true;
       if (node.parent && node.parent.data && node.parent.data.id) {
         this.evaluationParent(node.parent, status);
@@ -515,6 +534,7 @@ export default {
     resultEvaluationChild(arr, resourceId, status) {
       arr.forEach(item => {
         if (item.data.resourceId === resourceId) {
+          item.data.testing = false;
           this.evaluationParent(item.parent, status);
         }
         if (item.childNodes && item.childNodes.length > 0) {
@@ -525,6 +545,9 @@ export default {
     resultEvaluation(resourceId, status) {
       if (this.$refs.stepTree && this.$refs.stepTree.root) {
         this.$refs.stepTree.root.childNodes.forEach(item => {
+          if (item.data.resourceId === resourceId) {
+            item.data.testing = false;
+          }
           if (item.childNodes && item.childNodes.length > 0) {
             this.resultEvaluationChild(item.childNodes, resourceId, status);
           }
@@ -539,14 +562,6 @@ export default {
       const uri = protocol + window.location.host + "/api/scenario/report/get/real/" + this.reportId;
       this.websocket = new WebSocket(uri);
       this.websocket.onmessage = this.onMessage;
-      this.websocket.onopen = this.onOpen;
-      this.websocket.onerror = this.onError;
-      this.websocket.onclose = this.onClose;
-    },
-    onOpen() {
-    },
-    onError(e) {
-      window.console.error(e)
     },
     onMessage(e) {
       if (e.data) {
@@ -560,12 +575,6 @@ export default {
         }
       }
     },
-    onClose(e) {
-      if (e.code === 1005) {
-        // 强制删除之后关闭socket，不用刷新report
-        return;
-      }
-    },
     getTransaction(transRequests, startTime, endTime, resMap) {
       transRequests.forEach(subItem => {
         if (subItem.method === 'Request') {
@@ -593,6 +602,52 @@ export default {
         }
       })
     },
+
+    initMessageSocket() {
+      let protocol = "ws://";
+      if (window.location.protocol === 'https:') {
+        protocol = "wss://";
+      }
+      const uri = protocol + window.location.host + "/ws/" + this.reportId;
+      this.messageWebSocket = new WebSocket(uri);
+      this.messageWebSocket.onmessage = this.onMessage2;
+    },
+    runningEditParent(node) {
+      if (node) {
+        node.data.testing = true;
+        if (node.parent && node.parent.data && node.parent.data.id) {
+          this.runningEditParent(node.parent);
+        }
+      }
+    },
+    runningNodeChild(arr, resourceId) {
+      arr.forEach(item => {
+        if (item.data && item.data.resourceId === resourceId) {
+          item.data.testing = true;
+          this.runningEditParent(item.parent);
+        }
+        if (item.childNodes && item.childNodes.length > 0) {
+          this.runningNodeChild(item.childNodes, resourceId);
+        }
+      })
+    },
+    runningEvaluation(resourceId) {
+      if (this.$refs.stepTree && this.$refs.stepTree.root) {
+        this.$refs.stepTree.root.childNodes.forEach(item => {
+          if (item.data && item.data.resourceId === resourceId) {
+            item.data.testing = true;
+          }
+          if (item.childNodes && item.childNodes.length > 0) {
+            this.runningNodeChild(item.childNodes, resourceId);
+          }
+        })
+      }
+    },
+    onMessage2(e) {
+      this.runningEvaluation(e.data);
+      this.message = getUUID();
+    },
+
     formatResult(res) {
       let resMap = new Map;
       let startTime = 99991611737506593;
@@ -642,6 +697,8 @@ export default {
     removeReport() {
       let url = "/api/scenario/report/remove/real/" + this.reportId;
       this.$get(url, response => {
+        this.messageWebSocket.close();
+        this.websocket.close();
       });
     },
     handleCommand() {
@@ -971,6 +1028,7 @@ export default {
       this.stopDebug = "";
       this.clearDebug();
       this.clearResult(this.scenarioDefinition);
+      this.clearNodeStatus(this.$refs.stepTree.root.childNodes);
       /*触发执行操作*/
       this.$refs.currentScenario.validate((valid) => {
         if (valid) {
@@ -1215,6 +1273,7 @@ export default {
         this.loading = false;
       } else {
         this.initWebSocket();
+        this.initMessageSocket();
       }
     },
     showScenarioParameters() {

frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue

@@ -23,6 +23,10 @@
         <el-tag size="mini" class="ms-tag" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
       </template>
       <template v-slot:debugStepCode>
+         <span v-if="request.testing" class="ms-test-running">
+           <i class="el-icon-loading" style="font-size: 16px"/>
+           {{$t('commons.testing')}}
+         </span>
          <span class="ms-step-debug-code" :class="request.requestResult[0].success?'ms-req-success':'ms-req-error'" v-if="!loading && request.debug && request.requestResult[0] && request.requestResult[0].responseResult">
           {{ request.requestResult[0].success ? 'success' : 'error' }}
         </span>
@@ -496,6 +500,9 @@ export default {
 .ms-req-error {
   color: #F56C6C;
 }
+.ms-test-running {
+  color: #6D317C;
+}
 
 .ms-req-success {
   color: #67C23A;

frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue

@@ -23,7 +23,11 @@
       <span class="ms-tag">{{ getProjectName(scenario.projectId) }}</span>
     </template>
     <template v-slot:debugStepCode>
-      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && node.data.debug">
+       <span v-if="node.data.testing" class="ms-test-running">
+         <i class="el-icon-loading" style="font-size: 16px"/>
+         {{ $t('commons.testing') }}
+       </span>
+      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && node.data.debug && !node.data.testing">
         {{ getCode() }}
       </span>
     </template>
@@ -118,7 +122,7 @@ export default {
   },
   methods: {
     getCode() {
-      if (this.node && this.node.data.debug) {
+      if (this.node && this.node.data.code && this.node.data.debug) {
         if (this.node.data.code && this.node.data.code === 'error') {
           return 'error';
         } else {
@@ -220,4 +224,7 @@ export default {
   white-space: nowrap;
   width: 60px;
 }
+.ms-test-running {
+  color: #6D317C;
+}
 </style>

frontend/src/business/components/api/automation/scenario/component/IfController.vue

@@ -27,7 +27,11 @@
     </template>
 
     <template v-slot:debugStepCode>
-      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && node.data.debug && node.data.code">
+      <span v-if="node.data.testing" class="ms-test-running">
+         <i class="el-icon-loading" style="font-size: 16px"/>
+         {{ $t('commons.testing') }}
+       </span>
+      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && !node.data.testing && node.data.debug && node.data.code">
         {{ getCode() }}
       </span>
     </template>
@@ -110,7 +114,7 @@
         })
       },
       getCode() {
-        if (this.node && this.node.data.debug) {
+        if (this.node && this.node.data.code && this.node.data.debug) {
           if (this.node.data.code && this.node.data.code === 'error') {
             return 'error';
           } else {
@@ -167,4 +171,7 @@
     white-space: nowrap;
     width: 80px;
   }
+  .ms-test-running {
+    color: #6D317C;
+  }
 </style>

frontend/src/business/components/api/automation/scenario/component/JmeterElementComponent.vue

@@ -15,7 +15,11 @@
     </div>
 
     <template v-slot:debugStepCode>
-      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && node.data.debug">
+      <span v-if="node.data.testing" class="ms-test-running">
+         <i class="el-icon-loading" style="font-size: 16px"/>
+         {{ $t('commons.testing') }}
+       </span>
+      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && !node.data.testing && node.data.debug">
         {{ getCode() }}
       </span>
     </template>
@@ -78,7 +82,7 @@
         })
       },
       getCode() {
-        if (this.node && this.node.data.debug) {
+        if (this.node && this.node.data.code && this.node.data.debug) {
           if (this.node.data.code && this.node.data.code === 'error') {
             return 'error';
           } else {
@@ -124,4 +128,7 @@
     white-space: nowrap;
     width: 100px;
   }
+  .ms-test-running {
+    color: #6D317C;
+  }
 </style>

frontend/src/business/components/api/automation/scenario/component/LoopController.vue

@@ -71,7 +71,11 @@
       </div>
 
       <template v-slot:debugStepCode>
-        <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && node.data.debug">
+        <span v-if="node.data.testing" class="ms-test-running">
+           <i class="el-icon-loading" style="font-size: 16px"/>
+           {{ $t('commons.testing') }}
+         </span>
+        <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && !node.data.testing && node.data.debug">
           {{ getCode() }}
         </span>
       </template>
@@ -164,7 +168,7 @@ export default {
   },
   methods: {
     getCode() {
-      if (this.node && this.node.data.debug) {
+      if (this.node && this.node.data.code && this.node.data.debug) {
         if (this.node.data.code && this.node.data.code === 'error') {
           return 'error';
         } else {
@@ -398,6 +402,10 @@ export default {
   margin-right: 5px;
 }
 
+.ms-test-running {
+  color: #6D317C;
+}
+
 .ms-step-debug-code {
   display: inline-block;
   margin: 0 5px;

frontend/src/business/components/api/automation/scenario/component/TransactionController.vue

@@ -11,7 +11,11 @@
     background-color="#FCF6EE"
     :title="$t('api_test.automation.transcation_controller')">
     <template v-slot:debugStepCode>
-      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading && node.data.debug">
+      <span v-if="node.data.testing" class="ms-test-running">
+         <i class="el-icon-loading" style="font-size: 16px"/>
+         {{ $t('commons.testing') }}
+       </span>
+      <span class="ms-step-debug-code" :class="node.data.code ==='error'?'ms-req-error':'ms-req-success'" v-if="!loading &&!node.data.testing && node.data.debug">
         {{ getCode() }}
       </span>
     </template>
@@ -109,7 +113,7 @@ export default {
       });
     },
     getCode() {
-      if (this.node && this.node.data.debug) {
+      if (this.node && this.node.data.code && this.node.data.debug) {
         if (this.node.data.code && this.node.data.code === 'error') {
           return 'error';
         } else {
@@ -156,6 +160,7 @@ export default {
   width: 15%;
   margin-left: 5px;
 }
+
 .ms-req-error {
   color: #F56C6C;
 }
@@ -163,6 +168,7 @@ export default {
 .ms-req-success {
   color: #67C23A;
 }
+
 .ms-step-debug-code {
   display: inline-block;
   margin: 0 5px;
@@ -173,4 +179,7 @@ export default {
   white-space: nowrap;
   width: 100px;
 }
+.ms-test-running {
+  color: #6D317C;
+}
 </style>

frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue

@@ -322,7 +322,7 @@ export default {
         {text: this.$t('api_test.automation.success'), value: 'success'},
         {text: this.$t('api_test.automation.fail'), value: 'error'},
         {text: this.$t('api_test.home_page.detail_card.unexecute'), value: ''},
-        {text: '测试中', value: 'Running'}
+        {text: this.$t('commons.testing'), value: 'Running'}
       ],
       valueArr: {
         priority: CASE_PRIORITY,
@@ -465,7 +465,7 @@ export default {
         case "error":
           return this.$t('api_test.automation.fail');
         case "Running":
-          return "测试中";
+          return this.$t('commons.testing');
         default:
           return this.$t('api_test.home_page.detail_card.unexecute');
       }

frontend/src/i18n/en-US.js

@@ -170,6 +170,7 @@ export default {
     executor: "Executor",
     execute_history: "Execute history",
     debug_history: "Debug history",
+    testing: "Testing",
     table: {
       select_tip: "Item {0} data is selected"
     },

frontend/src/i18n/zh-CN.js

@@ -171,6 +171,7 @@ export default {
     executor: "执行人",
     execute_history: "执行历史",
     debug_history: "调试历史",
+    testing: "测试中",
     table: {
       select_tip: "已选中 {0} 条数据"
     },

frontend/src/i18n/zh-TW.js

@@ -171,6 +171,7 @@ export default {
     executor: "執行人",
     execute_history: "執行歷史",
     debug_history: "調試歷史",
+    testing: "測試中",
     selector: {
       required: "必填",
       not_required: "非必填",