refactor: tcp添加断言等操作

2021-01-22 10:31:21 +08:00 · 2021-01-22 10:31:21 +08:00 · b7900468e1
parent 526e3baa13
commit b7900468e1
6 changed files with 143 additions and 131 deletions
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
@ -22,7 +22,7 @@

    <!-- 请求参数 -->
    <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-    <ms-basis-parameters :request="request"/>
+    <ms-basis-parameters :show-script="false" :request="request"/>

  </div>

--- a/frontend/src/business/components/api/definition/components/request/components/ApiDefinitionStepButton.vue
+++ b/frontend/src/business/components/api/definition/components/request/components/ApiDefinitionStepButton.vue
@ -0,0 +1,83 @@
+<template>
+  <el-col :span="3" class="ms-left-cell">
+    <el-button class="ms-left-buttion" size="small" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
+    <br/>
+    <el-button class="ms-left-buttion" size="small" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
+    <br/>
+    <el-button class="ms-left-buttion" size="small" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
+    <br/>
+    <el-button class="ms-left-buttion" size="small" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
+  </el-col>
+</template>
+
+<script>
+    import {createComponent} from "../../jmeter/components";
+    import {Assertions, Extract} from "../../../model/ApiTestModel";
+
+    export default {
+      name: "ApiDefinitionStepButton",
+      props: {
+        request: {
+          type: Object,
+          default() {
+            return {}
+          }
+        }
+      },
+      methods: {
+        addPre() {
+          let jsr223PreProcessor = createComponent("JSR223PreProcessor");
+          this.request.hashTree.push(jsr223PreProcessor);
+        },
+        addPost() {
+          let jsr223PostProcessor = createComponent("JSR223PostProcessor");
+          this.request.hashTree.push(jsr223PostProcessor);
+        },
+        addAssertions() {
+          let assertions = new Assertions();
+          this.request.hashTree.push(assertions);
+        },
+        addExtract() {
+          let jsonPostProcessor = new Extract();
+          this.request.hashTree.push(jsonPostProcessor);
+        },
+      }
+    }
+</script>
+
+<style scoped>
+
+
+  .ms-left-cell .el-button:nth-of-type(1) {
+    color: #B8741A;
+    background-color: #F9F1EA;
+    border: #F9F1EA;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(2) {
+    color: #783887;
+    background-color: #F2ECF3;
+    border: #F2ECF3;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(3) {
+    color: #A30014;
+    background-color: #F7E6E9;
+    border: #F7E6E9;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(4) {
+    color: #015478;
+    background-color: #E6EEF2;
+    border: #E6EEF2;
+  }
+
+  .ms-left-cell {
+    margin-top: 30px;
+  }
+
+  .ms-left-buttion {
+    margin: 6px 0px 8px 30px;
+  }
+
+</style>
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@ -71,35 +71,9 @@

          </el-tabs>
        </div>
-        <!--<div v-if="!referenced">-->
-          <!--<div v-for="row in request.hashTree" :key="row.id">-->
-            <!--&lt;!&ndash;前置脚本&ndash;&gt;-->
-            <!--<ms-jsr233-processor v-if="row.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')"-->
-                                 <!--:jsr223-processor="row"/>-->
-            <!--&lt;!&ndash;后置脚本&ndash;&gt;-->
-            <!--<ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.post_script')"-->
-                                 <!--:jsr223-processor="row"/>-->
-            <!--&lt;!&ndash;断言规则&ndash;&gt;-->
-            <!--<div style="margin-top: 10px">-->
-              <!--<ms-api-assertions :response="response" v-if="row.type==='Assertions'" @copyRow="copyRow" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>-->
-            <!--</div>-->
-            <!--&lt;!&ndash;提取规则&ndash;&gt;-->
-            <!--<div style="margin-top: 10px">-->
-              <!--<ms-api-extract :response="response" :is-read-only="isReadOnly" @copyRow="copyRow" @remove="remove" v-if="row.type==='Extract'" :extract="row"/>-->
-            <!--</div>-->
-          <!--</div>-->
-        <!--</div>-->
      </el-col>
      <!--操作按钮-->
-      <el-col :span="3" class="ms-left-cell" v-if="!referenced && showScript">
-        <el-button class="ms-left-buttion" size="small" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
-      </el-col>
+      <api-definition-step-button :request="request" v-if="!referenced && showScript"/>
    </el-row>
    <batch-add-parameter @batchSave="batchSave" ref="batchAddParameter"/>
  </div>
@ -120,10 +94,12 @@
  import BatchAddParameter from "../../basis/BatchAddParameter";
  import MsApiAdvancedConfig from "./ApiAdvancedConfig";
  import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
+  import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";

  export default {
    name: "MsApiHttpRequestForm",
    components: {
+      ApiDefinitionStepButton,
      MsJsr233Processor,
      MsApiAdvancedConfig,
      BatchAddParameter,
@ -194,26 +170,6 @@
    },

    methods: {
-      addPre() {
-        let jsr223PreProcessor = createComponent("JSR223PreProcessor");
-        this.request.hashTree.push(jsr223PreProcessor);
-        this.reload();
-      },
-      addPost() {
-        let jsr223PostProcessor = createComponent("JSR223PostProcessor");
-        this.request.hashTree.push(jsr223PostProcessor);
-        this.reload();
-      },
-      addAssertions() {
-        let assertions = new Assertions();
-        this.request.hashTree.push(assertions);
-        this.reload();
-      },
-      addExtract() {
-        let jsonPostProcessor = new Extract();
-        this.request.hashTree.push(jsonPostProcessor);
-        this.reload();
-      },
      remove(row) {
        let index = this.request.hashTree.indexOf(row);
        this.request.hashTree.splice(index, 1);
@ -289,13 +245,6 @@
 </script>

 <style scoped>
-  .ms-left-cell {
-    margin-top: 30px;
-  }
-
-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }

  .ms-query {
    background: #783887;
@ -316,30 +265,6 @@
    min-height: 200px;
  }

-  .ms-left-cell .el-button:nth-of-type(1) {
-    color: #B8741A;
-    background-color: #F9F1EA;
-    border: #F9F1EA;
-  }
-
-  .ms-left-cell .el-button:nth-of-type(2) {
-    color: #783887;
-    background-color: #F2ECF3;
-    border: #F2ECF3;
-  }
-
-  .ms-left-cell .el-button:nth-of-type(3) {
-    color: #A30014;
-    background-color: #F7E6E9;
-    border: #F7E6E9;
-  }
-
-  .ms-left-cell .el-button:nth-of-type(4) {
-    color: #015478;
-    background-color: #E6EEF2;
-    border: #E6EEF2;
-  }
-
  .ms-el-link {
    float: right;
    margin-right: 45px;
--- a/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
@ -101,30 +101,11 @@

          </el-form>
        </div>
-        <!--<div v-for="row in request.hashTree" :key="row.id" v-loading="isReloadData" style="margin-left: 20px;width: 100%">-->
-          <!--&lt;!&ndash; 前置脚本 &ndash;&gt;-->
-          <!--<ms-jsr233-processor v-if="row.label ==='JSR223 PreProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.pre_script')" style-type="color: #B8741A;background-color: #F9F1EA"-->
-                               <!--:jsr223-processor="row"/>-->
-          <!--&lt;!&ndash;后置脚本&ndash;&gt;-->
-          <!--<ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.post_script')" style-type="color: #783887;background-color: #F2ECF3"-->
-                               <!--:jsr223-processor="row"/>-->
-          <!--&lt;!&ndash;断言规则&ndash;&gt;-->
-          <!--<ms-api-assertions v-if="row.type==='Assertions'" @copyRow="copyRow" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>-->
-          <!--&lt;!&ndash;提取规则&ndash;&gt;-->
-          <!--<ms-api-extract :is-read-only="isReadOnly" @copyRow="copyRow" @remove="remove" v-if="row.type==='Extract'" :extract="row"/>-->

-        <!--</div>-->
      </el-col>

-      <!--<el-col :span="3" class="ms-left-cell">-->
-        <!--<el-button class="ms-left-buttion" size="small" style="color: #B8741A;background-color: #F9F1EA" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>-->
-        <!--<br/>-->
-        <!--<el-button class="ms-left-buttion" size="small" style="color: #783887;background-color: #F2ECF3" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>-->
-        <!--<br/>-->
-        <!--<el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>-->
-        <!--<br/>-->
-        <!--<el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>-->
-      <!--</el-col>-->
+      <!--操作按钮-->
+      <api-definition-step-button :request="request" v-if="!referenced && showScript"/>
    </el-row>
  </div>
 </template>
@ -147,11 +128,13 @@
  import MsInstructionsIcon from "../../../../../common/components/MsInstructionsIcon";
  import Jsr233ProcessorContent from "../../../../automation/scenario/common/Jsr233ProcessorContent";
  import JSR223PreProcessor from "../../jmeter/components/pre-processors/jsr223-pre-processor";
+  import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";


  export default {
    name: "TcpBasisParameters",
    components: {
+      ApiDefinitionStepButton,
      Jsr233ProcessorContent,
      MsInstructionsIcon,
      MsApiVariable,
@ -167,6 +150,14 @@
        type: Boolean,
        default: false
      },
+      showScript: {
+        type: Boolean,
+        default: true,
+      },
+      referenced: {
+        type: Boolean,
+        default: false,
+      },
    },
    data() {
      return {
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
@ -2,6 +2,9 @@

  <div class="card-container">
    <el-card class="card-content" v-loading="loading">
+
+      <el-form :model="api" :rules="rules" ref="apiData" :inline="true" label-position="right">
+
        <!-- 操作按钮 -->
        <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
                     @command="handleCommand" size="small" style="float: right;margin-right: 20px">
@ -18,18 +21,24 @@

        <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
        <!-- 执行环境 -->
+        <el-form-item prop="environmentId">
          {{$t('api_test.definition.request.run_env')}}：
          <environment-select :type="'TCP'" :current-data="api" :project-id="projectId"/>
+        </el-form-item>

        <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
        <!-- TCP 请求参数 -->
        <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>

+      </el-form>
+
      <!--返回结果-->
      <!-- HTTP 请求返回数据 -->
      <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
      <ms-request-result-tail :response="responseData" ref="runResult"/>

+      <ms-jmx-step :request="api.request" :response="responseData"/>
+
    </el-card>

    <!-- 加载用例 -->
@ -55,10 +64,12 @@
  import MsBasisParameters from "../request/tcp/TcpBasisParameters";
  import {REQ_METHOD} from "../../model/JsonData";
  import EnvironmentSelect from "../environment/EnvironmentSelect";
+  import MsJmxStep from "../step/JmxStep";

  export default {
    name: "RunTestTCPPage",
    components: {
+      MsJmxStep,
      EnvironmentSelect,
      MsApiRequestForm,
      MsApiCaseList,
@ -81,8 +92,6 @@
        refreshSign: "",
        createCase: "",
        rules: {
-          method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-          url: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}],
          environmentId: [{required: true, message: this.$t('api_test.definition.request.run_env'), trigger: 'change'}],
        },
        runData: [],
@ -110,6 +119,8 @@
        this.$emit('refresh');
      },
      runTest() {
+        this.$refs['apiData'].validate((valid) => {
+          if (valid) {
            this.loading = true;
            this.api.request.name = this.api.id;
            this.api.protocol = this.currentProtocol;
@ -117,6 +128,8 @@
            this.runData.push(this.api.request);
            /*触发执行操作*/
            this.reportId = getUUID().substring(0, 8);
+          }
+        })
      },
      runRefresh(data) {
        this.responseData = data;
--- a/frontend/src/business/components/api/definition/components/step/JmxStep.vue
+++ b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div v-if="request.hashTree && request.hashTree.length > 0">
    <p class="tip">
      {{$t('test_track.plan_view.step')}}
    </p>
    <!-- HTTP 请求参数 -->
-    <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100%" v-loading="isReloadData" v-if="request.hashTree && request.hashTree.length>0">
+    <div style="height: 100%;border-radius: 4px ;width: 100%" v-loading="isReloadData" v-if="request.hashTree && request.hashTree.length>0">

      <div v-for="row in request.hashTree" :key="row.id">
        <!--前置脚本-->