测试用例关联接口测试

backend/src/main/java/io/metersphere/track/dto/TestPlanCaseDTO.java

@@ -15,4 +15,5 @@ public class TestPlanCaseDTO extends TestCaseWithBLOBs {
     private String planName;
     private String caseId;
     private String issues;
+    private String reportId;
 }

frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue

@@ -89,11 +89,11 @@
                 <el-col class="test-detail" :span="20" :offset="1">
                     <el-tabs type="border-card">
                       <el-tab-pane :label="$t('test_track.plan_view.test_detail')">
-                        <ms-api-test-config v-if="testCase.type == 'api'"/>
+                        <api-test-detail v-if="testCase.type == 'api'" @runTest="apiTestRun" :id="testCase.testId" v-show="testCase.type == 'api'" ref="apiTestDetail"/>
                         <edit-performance-test-plan v-if="testCase.type == 'performance'"/>
                       </el-tab-pane>
                       <el-tab-pane :label="$t('test_track.plan_view.test_result')">
-                        <ms-api-report-view v-if="testCase.type == 'api'"/>
+                        <api-test-result :report-id="testCase.reportId" v-if=" testCase.type == 'api'" ref="apiTestResult"/>
                         <performance-report-view v-if="testCase.type == 'performance'"/>
                       </el-tab-pane>
                     </el-tabs>
@@ -203,10 +203,14 @@
   import MsApiReportView from "../../../../api/report/ApiReportView";
   import EditPerformanceTestPlan from "../../../../performance/test/EditPerformanceTestPlan";
   import PerformanceReportView from "../../../../performance/report/PerformanceReportView";
+  import ApiTestDetail from "./test/ApiTestDetail";
+  import ApiTestResult from "./test/ApiTestResult";
 
   export default {
     name: "TestPlanTestCaseEdit",
     components: {
+      ApiTestResult,
+      ApiTestDetail,
       PerformanceReportView,
       EditPerformanceTestPlan, MsApiReportView, MsApiTestConfig, TestPlanTestCaseStatusButton},
     data() {
@@ -298,6 +302,27 @@
         this.showDialog = true;
         this.initData(testCase);
       },
+      initTest() {
+        this.$nextTick(() => {
+
+          if (this.testCase.method == 'auto') {
+            if (this.$refs.apiTestDetail && this.testCase.type == 'api') {
+              this.$refs.apiTestDetail.init();
+            }
+            // else if(testCase.type == 'api') {
+            //   this.$refs.apiTestDetail.init();
+            // }
+          }
+        });
+
+      },
+      apiTestRun(reportId) {
+        this.testCase.reportId = reportId;
+        this.saveReport(reportId);
+      },
+      saveReport(reportId) {
+        this.$post('/test/plan/case/edit', {id: this.testCase.id, reportId: reportId});
+      },
       updateTestCases(testCase) {
         this.testCases.forEach(item => {
            if (testCase.id === item.id) {
@@ -313,6 +338,7 @@
               this.index = i;
               this.getTestCase(i);
               this.getRelatedTest();
+              this.initTest();
             }
           }
         });

frontend/src/business/components/track/plan/view/comonents/test/ApiTestDetail.vue

+<template>
+  <el-card>
+    <el-container class="test-container">
+
+      <el-header>
+        <el-row type="flex" align="middle">
+          <el-input :disabled="true" class="test-name" v-model="test.name" maxlength="60" :placeholder="$t('api_test.input_name')"
+                    show-word-limit>
+            <el-select :disabled="true" class="test-project" v-model="project.name" slot="prepend"
+                       :placeholder="$t('api_test.select_project')">
+            </el-select>
+          </el-input>
+          <el-button type="primary" plain @click="runTest">
+            {{$t('api_test.run')}}
+          </el-button>
+        </el-row>
+      </el-header>
+
+      <ms-api-scenario-config :scenarios="test.scenarioDefinition" ref="config"/>
+
+  </el-container>
+  </el-card>
+</template>
+
+<script>
+  import {Test} from "../../../../../api/test/model/ScenarioModel"
+  import MsApiScenarioConfig from "../../../../../api/test/components/ApiScenarioConfig";
+  import MsContainer from "../../../../../common/components/MsContainer";
+  import MsMainContainer from "../../../../../common/components/MsMainContainer";
+
+  export default {
+    name: "ApiTestDetail",
+    components: {MsMainContainer, MsContainer, MsApiScenarioConfig},
+    props: ["id"],
+    data() {
+      return {
+        result: {},
+        test: new Test(),
+        project: {}
+      }
+    },
+    methods: {
+      init() {
+        this.project = {};
+        if (this.id) {
+          this.getTest(this.id);
+        } else {
+          this.test = new Test();
+          if (this.$refs.config) {
+            this.$refs.config.reset();
+          }
+        }
+      },
+      getTest(id) {
+        this.result = this.$get("/api/get/" + id, response => {
+          if (response.data) {
+            let item = response.data;
+            this.test = new Test({
+              id: item.id,
+              projectId: item.projectId,
+              name: item.name,
+              status: item.status,
+              scenarioDefinition: JSON.parse(item.scenarioDefinition),
+            });
+            this.getProject(item.projectId);
+            this.$refs.config.reset();
+          }
+        });
+      },
+      getProject(projectId) {
+        this.$get("/project/get/" + projectId, response => {
+            this.project = response.data;
+        });
+      },
+      runTest() {
+        this.result = this.$post("/api/run", {id: this.test.id}, (response) => {
+          this.$success(this.$t('api_test.running'));
+          this.$emit('runTest', response.data)
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .test-container {
+    height: calc(100vh - 150px);
+    min-height: 600px;
+    padding: 15px;
+  }
+
+  .test-name {
+    width: 600px;
+    margin-left: -20px;
+    margin-right: 20px;
+  }
+
+  .test-project {
+    min-width: 150px;
+  }
+</style>

frontend/src/business/components/track/plan/view/comonents/test/ApiTestResult.vue

+<template>
+  <ms-container>
+    <ms-main-container>
+      <span v-if="!reportId">尚未执行</span>
+      <el-card v-if="reportId">
+        <section class="report-container" v-loading="loading">
+          <header class="report-header">
+            <span>{{report.projectName}} / </span>
+            <span class="time">{{report.createTime | timestampFormatDate}}</span>
+          </header>
+          <main>
+            <ms-metric-chart v-if="content" :content="content"/>
+            <el-tabs v-model="activeName">
+              <el-tab-pane :label="$t('api_report.total')" name="total">
+                <ms-scenario-results :scenarios="content.scenarios"/>
+              </el-tab-pane>
+              <el-tab-pane name="fail">
+                <template slot="label">
+                  <span class="fail">{{$t('api_report.fail')}}</span>
+                </template>
+                <ms-scenario-results :scenarios="fails"/>
+              </el-tab-pane>
+            </el-tabs>
+          </main>
+        </section>
+      </el-card>
+    </ms-main-container>
+  </ms-container>
+</template>
+
+<script>
+
+  import MsScenarioResult from "../../../../../api/report/components/ScenarioResult";
+  import MsMetricChart from "../../../../../api/report/components/MetricChart";
+  import MsScenarioResults from "../../../../../api/report/components/ScenarioResults";
+  import MsRequestResult from "../../../../../api/report/components/RequestResult";
+  import MsContainer from "../../../../../common/components/MsContainer";
+  import MsMainContainer from "../../../../../common/components/MsMainContainer";
+
+  export default {
+    name: "ApiTestResult",
+    components: {MsMainContainer, MsContainer, MsRequestResult, MsScenarioResults, MsMetricChart, MsScenarioResult},
+    data() {
+      return {
+        activeName: "total",
+        content: {},
+        report: {},
+        loading: true,
+        fails: [],
+      }
+    },
+    props:['reportId'],
+    watch: {
+      reportId() {
+        this.init();
+      }
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init() {
+        this.loading = true;
+        this.report = {};
+        this.content = {};
+        this.fails = [];
+        this.getReport();
+      },
+      getReport() {
+        if (this.reportId) {
+          let url = "/api/report/get/" + this.reportId;
+          this.$get(url, response => {
+            this.report = response.data || {};
+            if (this.report.status == 'Completed') {
+              this.content = JSON.parse(this.report.content);
+              this.getFails();
+              this.loading = false;
+            } else {
+              setTimeout(this.getReport, 2000)
+            }
+          });
+        }
+      },
+      getFails() {
+        this.fails = [];
+        this.content.scenarios.forEach((scenario) => {
+          let failScenario = Object.assign({}, scenario);
+          if (scenario.error > 0) {
+            this.fails.push(failScenario);
+            failScenario.requestResults = [];
+            scenario.requestResults.forEach((request) => {
+              if (!request.success) {
+                let failRequest = Object.assign({}, request);
+                failScenario.requestResults.push(failRequest);
+              }
+            });
+          }
+        });
+      }
+    }
+  }
+</script>
+<style>
+  .report-container .el-tabs__header {
+    margin-bottom: 1px;
+  }
+</style>
+
+<style scoped>
+  .report-container {
+    height: calc(100vh - 150px);
+    min-height: 600px;
+    overflow-y: auto;
+  }
+
+  .report-header {
+    font-size: 15px;
+  }
+
+  .report-header a {
+    text-decoration: none;
+  }
+
+  .report-header .time {
+    color: #909399;
+    margin-left: 10px;
+  }
+
+  .report-container .fail {
+    color: #F56C6C;
+  }
+
+  .report-container .is-active .fail {
+    color: inherit;
+  }
+</style>