feat(接口测试): BeanShell 代码提示

2020-08-18 18:42:55 +08:00 · 2020-08-18 18:42:55 +08:00 · f60e06d4c0
parent ab0790a8a2
commit f60e06d4c0
8 changed files with 167 additions and 13 deletions
--- a/frontend/src/business/components/api/test/components/processor/BeanShellProcessor.vue
+++ b/frontend/src/business/components/api/test/components/processor/BeanShellProcessor.vue
@ -1,16 +1,54 @@
 <template>
-  <div class="script-content">
-    <ms-code-edit mode="java" :read-only="isReadOnly" :data.sync="beanShellProcessor.script" theme="eclipse" :modes="['java']" ref="codeEdit"/>
+  <div >
+    <el-row>
+      <el-col :span="22" class="script-content">
+        <ms-code-edit v-if="isCodeEditAlive" mode="java" :read-only="isReadOnly" :data.sync="beanShellProcessor.script" theme="eclipse" :modes="['java']" ref="codeEdit"/>
+      </el-col>
+      <el-col :span="2" class="script-index">
+        <div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
+        <div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
+          <el-link @click="addTemplate(template)">{{template.title}}</el-link>
+        </div>
+        <div class="document-url">
+          <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor" type="primary">{{$t('commons.reference_documentation')}}</el-link>
+          <ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
+        </div>
+      </el-col>
+    </el-row>
  </div>
 </template>

 <script>
    import MsCodeEdit from "../../../../common/components/MsCodeEdit";
+    import MsInstructionsIcon from "../../../../common/components/MsInstructionsIcon";
    export default {
      name: "MsBeanShellProcessor",
-      components: {MsCodeEdit},
+      components: {MsInstructionsIcon, MsCodeEdit},
      data() {
        return {
+          codeTemplates: [
+            {
+              title: this.$t('api_test.request.processor.code_template_get_variable'),
+              value: 'vars.get("variable_name");'
+            },
+            {
+              title: this.$t('api_test.request.processor.code_template_set_variable'),
+              value: 'vars.put("variable_name", "variable_value");'
+            },
+            {
+              title: this.$t('api_test.request.processor.code_template_get_response_header'),
+              value: 'prev.getResponseHeaders();'
+            },
+            {
+              title: this.$t('api_test.request.processor.code_template_get_response_code'),
+              value: 'prev.getResponseCode();'
+            },
+            {
+              title: this.$t('api_test.request.processor.code_template_get_response_result'),
+              value: 'prev.getResponseDataAsString();'
+            }
+          ],
+          isCodeEditAlive: true
        }
      },
      props: {
@ -25,6 +63,16 @@
          type: Object,
        }
      },
+      methods: {
+        addTemplate(template) {
+          this.beanShellProcessor.script += template.value;
+          this.reload();
+        },
+        reload() {
+          this.isCodeEditAlive = false;
+          this.$nextTick(() => (this.isCodeEditAlive = true));
+        }
+      }
    }
 </script>

@ -35,8 +83,28 @@
  }

  .script-content {
-    padding: 15px 0;
-    height: 300px;
+    height: calc(100vh - 570px);
+  }
+
+  .script-index {
+   padding: 0 20px;
+  }
+
+  .script-index div:first-child {
+    font-weight: bold;
+    font-size: 15px;
+  }
+
+  .template-title {
+    margin-bottom: 5px;
+  }
+
+  .document-url {
+    margin-top: 10px;
+  }
+
+  .instructions-icon {
+    margin-left: 5px;
  }

 </style>
--- a/frontend/src/business/components/api/test/components/request/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/test/components/request/ApiHttpRequestForm.vue
@ -68,10 +68,10 @@
      <el-tab-pane :label="$t('api_test.request.extract.label')" name="extract">
        <ms-api-extract :is-read-only="isReadOnly" :extract="request.extract"/>
      </el-tab-pane>
-      <el-tab-pane :label="'预执行脚本'" name="beanShellPreProcessor">
+      <el-tab-pane :label="$t('api_test.request.processor.pre_exec_script')" name="beanShellPreProcessor">
        <ms-bean-shell-processor :is-read-only="isReadOnly" :bean-shell-processor="request.beanShellPreProcessor"/>
      </el-tab-pane>
-      <el-tab-pane :label="'后执行脚本'" name="beanShellPostProcessor">
+      <el-tab-pane :label="$t('api_test.request.processor.post_exec_script')" name="beanShellPostProcessor">
        <ms-bean-shell-processor :is-read-only="isReadOnly" :bean-shell-processor="request.beanShellPostProcessor"/>
      </el-tab-pane>
    </el-tabs>
--- a/frontend/src/business/components/api/test/model/JMX.js
+++ b/frontend/src/business/components/api/test/model/JMX.js
@ -423,10 +423,7 @@ export class BeanShellPreProcessor extends BeanShellProcessor {
 }

 export class BeanShellPostProcessor extends BeanShellProcessor {
-  constructor(testName, script) {
-    let processor = {
-      script: script,
-    };
+  constructor(testName, processor) {
    super('BeanShellPostProcessor', 'TestBeanGUI', 'BeanShellPostProcessor', testName, processor)
  }
 }
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/frontend/src/business/components/api/test/model/ScenarioModel.js
@ -1,5 +1,5 @@
 import {
-  Arguments, BeanShellPreProcessor,
+  Arguments, BeanShellPostProcessor, BeanShellPreProcessor,
  CookieManager,
  DubboSample,
  DurationAssertion,
@ -906,7 +906,7 @@ class JMXGenerator {
      httpSamplerProxy.put(new BeanShellPreProcessor(name, request.beanShellPreProcessor));
    }
    if (request.beanShellPostProcessor && request.beanShellPostProcessor.script) {
-      httpSamplerProxy.put(new BeanShellPreProcessor(name, request.beanShellPostProcessor));
+      httpSamplerProxy.put(new BeanShellPostProcessor(name, request.beanShellPostProcessor));
    }
  }

--- a/frontend/src/business/components/common/components/MsInstructionsIcon.vue
+++ b/frontend/src/business/components/common/components/MsInstructionsIcon.vue
@ -0,0 +1,53 @@
+<template>
+  <el-tooltip class="instructions-icon" :effect="effect" :placement="placement">
+    <template v-slot:content>
+      {{content}}
+    </template>
+    <i :style="{'font-size': size + 'px'}" class="el-icon-info"></i>
+  </el-tooltip>
+</template>
+
+<script>
+    export default {
+      name: "MsInstructionsIcon",
+      props: {
+        content: String,
+        icon: {
+          type: String,
+          default: 'el-icon-question'
+        },
+        placement: {
+          type: String,
+          default: 'top-start'
+        },
+        type: {
+          type: String,
+          default: null
+        },
+        effect: {
+          type: String,
+          default: 'dark'
+        },
+        size: {
+          type: String,
+          default: '16'
+        },
+        isTesterPermission: {
+          type: Boolean,
+          default: false
+        }
+      },
+    }
+</script>
+
+<style scoped>
+
+  .el-icon-info {
+    color: #606266;
+  }
+
+  .el-icon-info:hover {
+    color: #409EFF;
+  }
+
+</style>
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@ -108,6 +108,7 @@ export default {
    formatErr: 'Format Error',
    id: 'ID',
    please_upload: 'Please upload file',
+    reference_documentation: "Reference documentation",
    date: {
      select_date: 'Select date',
      start_date: 'Start date',
@ -446,6 +447,17 @@ export default {
        json_path_expression: "JSONPath expression",
        xpath_expression: "XPath expression",
      },
+      processor: {
+        pre_exec_script : "PreProcessor",
+        post_exec_script: "PostProcessor",
+        code_template: "Code template",
+        bean_shell_processor_tip: "Currently only BeanShell scripts are supported",
+        code_template_get_variable: "Get variable",
+        code_template_set_variable: "Set variable",
+        code_template_get_response_header: "Get response header",
+        code_template_get_response_code: "Get response code",
+        code_template_get_response_result: "Get response result"
+      },
      dubbo: {
        protocol: "protocol",
        input_interface: "Please enter the interface",
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@ -107,6 +107,7 @@ export default {
    please_upload: '请上传文件',
    formatErr: '格式错误',
    please_save: '请先保存',
+    reference_documentation: "参考文档",
    id: 'ID',
    date: {
      select_date: '选择日期',
@ -447,6 +448,17 @@ export default {
        json_path_expression: "JSONPath表达式",
        xpath_expression: "XPath表达式",
      },
+      processor: {
+        pre_exec_script : "预执行脚本",
+        post_exec_script: "后执行脚本",
+        code_template: "代码模版",
+        bean_shell_processor_tip: "仅支持 BeanShell 脚本",
+        code_template_get_variable: "获取变量",
+        code_template_set_variable: "设置变量",
+        code_template_get_response_header: "获取响应头",
+        code_template_get_response_code: "获取响应码",
+        code_template_get_response_result: "获取响应结果"
+      },
      dubbo: {
        protocol: "协议",
        input_interface: "请输入Interface",
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@ -105,6 +105,7 @@ export default {
    formatErr: '格式錯誤',
    please_save: '請先保存',
    id: 'ID',
+    reference_documentation: "參考文檔",
    please_upload: '請上傳文件',
    date: {
      select_date: '選擇日期',
@ -446,6 +447,17 @@ export default {
        json_path_expression: "JSONPath運算式",
        xpath_expression: "XPath運算式",
      },
+      processor: {
+        pre_exec_script : "預執行腳本",
+        post_exec_script: "後執行腳本",
+        code_template: "代碼模版",
+        bean_shell_processor_tip: "僅支持 BeanShell 腳本",
+        code_template_get_variable: "獲取變量",
+        code_template_set_variable: "設置變量",
+        code_template_get_response_header: "獲取響應頭",
+        code_template_get_response_code: "獲取響應碼",
+        code_template_get_response_result: "獲取響應結果"
+      },
      dubbo: {
        protocol: "協定",
        input_interface: "請輸入Interface",