feat(场景自动化): 场景变量增加请求头，并历史请求头数据可以支持迁移

2021-02-08 14:12:07 +08:00 · 2021-02-08 14:12:07 +08:00 · 5eb34cbae4
parent 415900370e
commit 5eb34cbae4
6 changed files with 177 additions and 62 deletions
--- a/backend/src/main/java/io/metersphere/api/dto/definition/request/MsScenario.java
+++ b/backend/src/main/java/io/metersphere/api/dto/definition/request/MsScenario.java
@ -49,6 +49,9 @@ public class MsScenario extends MsTestElement {
    @JSONField(ordinal = 24)
    private boolean enableCookieShare;

+    @JSONField(ordinal = 26)
+    private List<KeyValue> headers;
+
    private static final String BODY_FILE_DIR = "/opt/metersphere/data/body";

    @Override
@ -87,7 +90,7 @@ public class MsScenario extends MsTestElement {
        }
        // 场景变量和环境变量
        tree.add(arguments(config));
-        //this.addCsvDataSet(tree, variables);
+        this.addCsvDataSet(tree, variables);
        this.addCounter(tree, variables);
        this.addRandom(tree, variables);
        if (CollectionUtils.isNotEmpty(hashTree)) {
@ -131,6 +134,12 @@ public class MsScenario extends MsTestElement {
                    arguments.addArgument(keyValue.getName(), keyValue.getValue(), "=")
            );
        }
+        if (CollectionUtils.isNotEmpty(this.headers)) {
+            this.headers.stream().filter(KeyValue::isValid).filter(KeyValue::isEnable).forEach(keyValue ->
+                    arguments.addArgument(keyValue.getName(), keyValue.getValue(), "=")
+            );
+        }
+
        return arguments;
    }

--- a/backend/src/main/java/io/metersphere/api/service/HistoricalDataUpgradeService.java
+++ b/backend/src/main/java/io/metersphere/api/service/HistoricalDataUpgradeService.java
@ -84,6 +84,7 @@ public class HistoricalDataUpgradeService {
        scenario.setReferenced("Upgrade");
        scenario.setId(oldScenario.getId());
        scenario.setResourceId(UUID.randomUUID().toString());
+        scenario.setHeaders(oldScenario.getHeaders());
        LinkedList<MsTestElement> testElements = new LinkedList<>();
        int index = 1;
        for (Request request : oldScenario.getRequests()) {
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@ -106,7 +106,7 @@
                </el-col>
                <el-col :span="3" class="ms-col-one ms-font">
                  <el-link class="head" @click="showScenarioParameters">{{$t('api_test.automation.scenario_total')}}</el-link>
-                  ：{{this.currentScenario.variables!=undefined?this.currentScenario.variables.length: 0}}
+                  ：{{getVariableSize()}}
                </el-col>
                <el-col :span="3" class="ms-col-one ms-font">
                  <el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox>
@ -427,8 +427,9 @@
      getIdx(index) {
        return index - 0.33
      },
-      setVariables(v) {
+      setVariables(v, headers) {
        this.currentScenario.variables = v;
+        this.currentScenario.headers = headers;
        if (this.path.endsWith("/update")) {
          // 直接更新场景防止编辑内容丢失
          this.editScenario();
@ -679,7 +680,7 @@
            this.editScenario();
            this.debugData = {
              id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
-              variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare,
+              variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare, headers: this.currentScenario.headers,
              environmentId: this.currentEnvironmentId, hashTree: this.scenarioDefinition
            };
            this.reportId = getUUID().substring(0, 8);
@ -863,6 +864,9 @@
        if (!this.currentScenario.variables) {
          this.currentScenario.variables = [];
        }
+        if (!this.currentScenario.headers) {
+          this.currentScenario.headers = [];
+        }
        if (this.currentScenario.id) {
          this.result = this.$get("/api/automation/getApiScenario/" + this.currentScenario.id, response => {
            if (response.data) {
@ -887,6 +891,9 @@
                      }
                    })
                  }
+                  if (obj.headers) {
+                    this.currentScenario.headers = obj.headers;
+                  }
                  this.enableCookieShare = obj.enableCookieShare;
                  this.scenarioDefinition = obj.hashTree;
                }
@ -905,8 +912,9 @@
        this.currentScenario.modulePath = this.getPath(this.currentScenario.apiScenarioModuleId);
        // 构建一个场景对象 方便引用处理
        let scenario = {
-          id: this.currentScenario.id, enableCookieShare: this.enableCookieShare, name: this.currentScenario.name, variables: this.currentScenario.variables,
-          type: "scenario", referenced: 'Created', environmentId: this.currentEnvironmentId, hashTree: this.scenarioDefinition
+          id: this.currentScenario.id, enableCookieShare: this.enableCookieShare, name: this.currentScenario.name, type: "scenario",
+          variables: this.currentScenario.variables, headers: this.currentScenario.headers,
+          referenced: 'Created', environmentId: this.currentEnvironmentId, hashTree: this.scenarioDefinition
        };
        this.currentScenario.scenarioDefinition = scenario;
        if (this.currentScenario.tags instanceof Array) {
@ -924,7 +932,7 @@
        this.loading = false;
      },
      showScenarioParameters() {
-        this.$refs.scenarioParameters.open(this.currentScenario.variables);
+        this.$refs.scenarioParameters.open(this.currentScenario.variables, this.currentScenario.headers);
      },
      apiImport(importData) {
        if (importData && importData.data) {
@ -934,6 +942,16 @@
          this.sort();
          this.reload();
        }
+      },
+      getVariableSize() {
+        let size = 0;
+        if (this.currentScenario.variables) {
+          size += this.currentScenario.variables.length;
+        }
+        if (this.currentScenario.headers && this.currentScenario.headers.length > 1) {
+          size += this.currentScenario.headers.length - 1;
+        }
+        return size;
      }
    }
  }
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@ -248,8 +248,8 @@
        this.request.customizeReq = this.isCustomizeReq;
        let debugData = {
          id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
-          variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare,
-          environmentId: this.currentEnvironmentId, hashTree: [this.request]
+          variables: this.currentScenario.variables, referenced: 'Created', headers: this.currentScenario.headers,
+          enableCookieShare: this.enableCookieShare, environmentId: this.currentEnvironmentId, hashTree: [this.request]
        };
        this.runData.push(debugData);
        /*触发执行操作*/
--- a/frontend/src/business/components/api/automation/scenario/component/LoopController.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/LoopController.vue
@ -205,8 +205,8 @@
        this.loading = true;
        this.debugData = {
          id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
-          variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare,
-          environmentId: this.currentEnvironmentId, hashTree: [this.controller]
+          variables: this.currentScenario.variables, headers: this.currentScenario.headers,
+          referenced: 'Created', enableCookieShare: this.enableCookieShare, environmentId: this.currentEnvironmentId, hashTree: [this.controller]
        };
        this.reportId = getUUID().substring(0, 8);
      },
--- a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
+++ b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
@ -1,57 +1,89 @@
 <template>
-  <el-dialog :title="$t('api_test.scenario.variables')" :close-on-click-modal="false"
+  <el-dialog title="场景变量" :close-on-click-modal="false"
             :visible.sync="visible" class="visible-dialog" width="60%"
             @close="close" v-loading="loading">
-    <div>
-      <el-input placeholder="变量名称搜索" style="width: 50%;margin: 0px 0px 10px" v-model="selectVariable" size="small" @change="filter" @keyup.enter="filter">
-        <el-select v-model="searchType" slot="prepend" placeholder="类型" style="width: 90px" @change="filter">
-          <el-option value="CONSTANT" label="常量"></el-option>
-          <el-option value="LIST" label="列表"></el-option>
-          <el-option value="CSV" label="CSV"></el-option>
-          <el-option value="COUNTER" label="计数器"></el-option>
-          <el-option value="RANDOM" label="随机数"></el-option>
-        </el-select>
-      </el-input>
-      <el-row>
-        <el-col :span="12">
-          <div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
-            <el-table ref="table" border :data="variables" class="adjust-table" @select-all="select" @select="select"
-                      v-loading="loading" @row-click="edit" height="400px" :row-class-name="tableRowClassName">
-              <el-table-column type="selection" width="38"/>
-              <el-table-column prop="num" label="ID" sortable/>
-              <el-table-column prop="name" :label="$t('api_test.variable_name')" sortable show-overflow-tooltip/>
-              <el-table-column prop="type" :label="$t('test_track.case.type')">
-                <template v-slot:default="scope">
-                  <span>{{types.get(scope.row.type)}}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="value" :label="$t('api_test.value')" show-overflow-tooltip/>
-            </el-table>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <ms-edit-constant v-if="editData.type=='CONSTANT'" ref="parameters" :editData.sync="editData"/>
-          <ms-edit-counter v-if="editData.type=='COUNTER'" ref="counter" :editData.sync="editData"/>
-          <ms-edit-random v-if="editData.type=='RANDOM'" ref="random" :editData.sync="editData"/>
-          <ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/>
-          <ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/>
-        </el-col>
-      </el-row>
-    </div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="$t('api_test.scenario.variables')" name="variable">
+        <div style="margin-top: 10px">
+          <el-row style="margin-bottom: 10px">
+            <el-col :span="8">
+              <el-input placeholder="变量名称搜索" v-model="selectVariable" size="small" @change="filter" @keyup.enter="filter">
+                <el-select v-model="searchType" slot="prepend" placeholder="类型" style="width: 90px" @change="filter">
+                  <el-option value="CONSTANT" label="常量"></el-option>
+                  <el-option value="LIST" label="列表"></el-option>
+                  <el-option value="CSV" label="CSV"></el-option>
+                  <el-option value="COUNTER" label="计数器"></el-option>
+                  <el-option value="RANDOM" label="随机数"></el-option>
+                </el-select>
+              </el-input>
+            </el-col>

+            <el-col :span="6">
+              <el-dropdown split-button type="primary" @command="handleClick" @click="handleClick('CONSTANT')" size="small" style="margin-left: 10px">
+                {{$t('commons.add')}}
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="CONSTANT">常量</el-dropdown-item>
+                  <el-dropdown-item command="LIST">列表</el-dropdown-item>
+                  <el-dropdown-item command="CSV">CSV</el-dropdown-item>
+                  <el-dropdown-item command="COUNTER">计数器</el-dropdown-item>
+                  <el-dropdown-item command="RANDOM">随机数</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-button size="small" style="margin-left: 10px" @click="deleteVariable">{{$t('commons.delete')}}</el-button>
+
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
+                <el-table ref="table" border :data="variables" class="adjust-table" @select-all="select" @select="select"
+                          v-loading="loading" @row-click="edit" height="400px" :row-class-name="tableRowClassName">
+                  <el-table-column type="selection" width="38"/>
+                  <el-table-column prop="num" label="ID" sortable/>
+                  <el-table-column prop="name" :label="$t('api_test.variable_name')" sortable show-overflow-tooltip/>
+                  <el-table-column prop="type" :label="$t('test_track.case.type')">
+                    <template v-slot:default="scope">
+                      <span>{{types.get(scope.row.type)}}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value" :label="$t('api_test.value')" show-overflow-tooltip/>
+                </el-table>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <ms-edit-constant v-if="editData.type=='CONSTANT'" ref="parameters" :editData.sync="editData"/>
+              <ms-edit-counter v-if="editData.type=='COUNTER'" ref="counter" :editData.sync="editData"/>
+              <ms-edit-random v-if="editData.type=='RANDOM'" ref="random" :editData.sync="editData"/>
+              <ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/>
+              <ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/>
+            </el-col>
+          </el-row>
+        </div>
+
+
+      </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.scenario.headers')" name="headers">
+        <!-- 请求头-->
+        <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')" placement="top-start" slot="label">
+          <span>{{$t('api_test.request.headers')}}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="headers.length>1">
+              <div class="el-step__icon-inner">{{headers.length-1}}</div>
+            </div>
+          </span>
+        </el-tooltip>
+        <el-row>
+          <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{$t("commons.batch_add")}}</el-link>
+        </el-row>
+        <div style="min-height: 400px">
+          <ms-api-key-value :items="headers"/>
+          <batch-add-parameter @batchSave="batchSave" ref="batchAddParameter"/>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
    <template v-slot:footer>
      <div>
-        <el-button style="margin-right:10px" @click="deleteVariable">{{$t('commons.delete')}}</el-button>
-        <el-dropdown split-button type="primary" @command="handleClick" @click="handleClick('CONSTANT')" placement="top-end">
-          {{$t('commons.add')}}
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="CONSTANT">常量</el-dropdown-item>
-            <el-dropdown-item command="LIST">列表</el-dropdown-item>
-            <el-dropdown-item command="CSV">CSV</el-dropdown-item>
-            <el-dropdown-item command="COUNTER">计数器</el-dropdown-item>
-            <el-dropdown-item command="RANDOM">随机数</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+        <el-button type="primary" @click="save">{{$t('commons.confirm')}}</el-button>
+        <el-button style="margin-right:10px" @click="save">{{$t('commons.cancel')}}</el-button>
      </div>
    </template>
  </el-dialog>
@ -67,6 +99,9 @@
  import MsEditListValue from "./EditListValue";
  import MsEditCsv from "./EditCsv";
  import {getUUID} from "@/common/js/utils";
+  import MsApiKeyValue from "../../../definition/components/ApiKeyValue";
+  import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter";
+  import {KeyValue} from "../../../definition/model/ApiTestModel";

  export default {
    name: "MsVariableList",
@ -78,11 +113,15 @@
      MsEditCounter,
      MsEditRandom,
      MsEditListValue,
-      MsEditCsv
+      MsEditCsv,
+      MsApiKeyValue,
+      BatchAddParameter
    },
    data() {
      return {
        variables: [],
+        headers: [],
+        activeName: "variable",
        searchType: "",
        selectVariable: "",
        condition: {},
@ -103,6 +142,26 @@
      }
    },
    methods: {
+      batchAdd() {
+        this.$refs.batchAddParameter.open();
+      },
+      batchSave(data) {
+        if (data) {
+          let params = data.split("\n");
+          let keyValues = [];
+          params.forEach(item => {
+            let line = item.split(/，|,/);
+            let required = false;
+            if (line[1] === '必填' || line[1] === 'true') {
+              required = true;
+            }
+            keyValues.push(new KeyValue({name: line[0], required: required, value: line[2], description: line[3], type: "text", valid: false, file: false, encode: true, enable: true, contentType: "text/plain"}));
+          })
+          keyValues.forEach(item => {
+            this.headers.unshift(item);
+          })
+        }
+      },
      handleClick(command) {
        this.editData = {};
        this.editData.type = command;
@ -135,12 +194,16 @@
      isSelect(row) {
        return this.selection.includes(row.id)
      },
-      open: function (variables) {
+      open: function (variables, headers) {
        this.variables = variables;
+        this.headers = headers;
        this.visible = true;
        this.editData = {type: "CONSTANT"};
        this.addParameters(this.editData);
      },
+      save() {
+        this.visible = false;
+      },
      close() {
        this.visible = false;
        let saveVariables = [];
@ -152,7 +215,7 @@
        })
        this.selectVariable = "";
        this.searchType = "";
-        this.$emit('setVariables', saveVariables);
+        this.$emit('setVariables', saveVariables, this.headers);
      },
      deleteVariable() {
        let ids = Array.from(this.selection);
@ -208,4 +271,28 @@
  .ms-variable-hidden-row {
    display: none;
  }
+
+  .ms-query {
+    background: #783887;
+    color: white;
+    height: 18px;
+    border-radius: 42%;
+  }
+
+  .ms-header {
+    background: #783887;
+    color: white;
+    height: 18px;
+    border-radius: 42%;
+  }
+
+  .request-tabs {
+    margin: 20px;
+    min-height: 200px;
+  }
+
+  .ms-el-link {
+    float: right;
+    margin-right: 45px;
+  }
 </style>