fix: 修改黑盒测试，添加自动化测试tab

src/api/autotest.ts

@@ -0,0 +1,5 @@
+import axios from '@/utils/axios';
+
+import { AUTOTEST_PREFIX } from './prefix';
+
+export const getAutoTestResultByProjectId = (projectId: number) => axios.get(`${AUTOTEST_PREFIX}/list/${projectId}`);

src/api/functest.ts

@@ -2,11 +2,7 @@ import axios from '@/utils/axios';
 
 import { FUNCTEST_PREFIX } from './prefix';
 
-export const getTestCases = (projectId: number) => axios.get(`${FUNCTEST_PREFIX}`, {
-  params: {
-    projectId,
-  },
-});
+export const getTestCases = (projectId: number) => axios.get(`${FUNCTEST_PREFIX}?projectId=${projectId}`);
 
 export const createTestCase = (projectId: number, title: string) => axios.post(`${FUNCTEST_PREFIX}?projectId=${projectId}&title=${title}`);
 
@@ -24,14 +20,14 @@ export const getTestCaseSteps = (testCaseId: number) => axios.get(`${FUNCTEST_PR
 
 export const createTestCaseStep = (testCaseId: number) => axios.post(`${FUNCTEST_PREFIX}/steps?testCaseId=${testCaseId}`);
 
-export const updateTestCaseStep = (testStepId: number, description: string) => axios.put(
-  `${FUNCTEST_PREFIX}/steps?testStepId=${testStepId}&description=${description}`,
+export const updateTestCaseStep = (testStepId: number, description: string, expectation: string) => axios.put(
+  `${FUNCTEST_PREFIX}/steps?testStepId=${testStepId}&description=${description}&expectation=${expectation}`,
+);
+
+export const updateTestCaseStepState = (testStepId: number, state: string) => axios.put(
+  `${FUNCTEST_PREFIX}/steps/state?testStepId=${testStepId}&state=${state}`,
 );
 
 export const deleteTestCaseStep = (testStepId: number) => axios.delete(`${FUNCTEST_PREFIX}/steps?testStepId=${testStepId}`);
 
-export const getLatestRecord = (projectId: number) => axios.get(`${FUNCTEST_PREFIX}/record/latest`, {
-  params: {
-    projectId,
-  },
-});
+export const getLatestRecord = (projectId: number) => axios.get(`${FUNCTEST_PREFIX}/record/latest?projectId=${projectId}`);

src/api/index.ts

@@ -4,6 +4,7 @@ import * as RequirementAPI from './tree';
 import * as PipelineAPI from './pipeline';
 import * as APITestAPI from './apitest';
 import * as FuncTestAPI from './functest';
+import * as AutoTestAPI from './autotest';
 
 export {
   UserAPI,
@@ -12,4 +13,5 @@ export {
   PipelineAPI,
   APITestAPI,
   FuncTestAPI,
+  AutoTestAPI,
 };

src/api/prefix.ts

@@ -4,4 +4,5 @@ export const USER_PREFIX = '/users';
 export const TREE_PREFIX = '/tree';
 export const PROJECT_PREFIX = '/project';
 export const APITEST_PREFIX = '/test';
-export const FUNCTEST_PREFIX = '/test_cases';
+export const FUNCTEST_PREFIX = '/func_test';
+export const AUTOTEST_PREFIX = '/auto_test';

src/views/Project/APITest.vue

@@ -345,10 +345,6 @@
           label="详情"
           align="center">
           <template #default="scope">
-            <ElButton
-              @click="handleTestCasesClick('latest', scope.row.id)"
-              type="text"
-              size="small">部署的历史记录</ElButton>
             <ElButton
               @click="handleTestCasesClick('steps', scope.row.id)"
               type="text"
@@ -359,6 +355,10 @@
           align="center">
           <template #header>
             <span>操作</span>
+            <ElButton
+              @click="handleTestCasesClick('latest', 0)"
+              type="text"
+              class="add-button">部署的历史记录</ElButton>
             <ElButton @click="handleTestCasesClick('create')" type="text" class="add-button">新建</ElButton>
           </template>
           <template #default="scope">
@@ -375,6 +375,54 @@
           </template>
         </ElTableColumn>
       </ElTable>
+      <!-- 部署的历史记录 -->
+      <ElDrawer
+        v-model="deployHistoryDrawer"
+        :size="650">
+        <template #title>
+          <el-row class="entry-row">
+            <el-col :span="3">
+              <div class="node-type">项目</div>
+            </el-col>
+            <el-col :span="2">
+              <template class="entry-row">
+                <span>#{{currentProjectId}}</span>
+              </template>
+            </el-col>
+          </el-row>
+        </template>
+        <template #default>
+          <el-row type="flex" justify="center">
+            <el-col :span="20">
+              <el-table :data="deployHistoryInfo" width="100%">
+                <el-table-column
+                  prop="id"
+                  label="ID"
+                  align="center"
+                  width="60">
+                </el-table-column>
+                <el-table-column
+                  prop="timestamp"
+                  label="部署时间"
+                  align="center"
+                  width="150">
+                </el-table-column>
+                <el-table-column
+                  prop="operationType"
+                  label="操作类型"
+                  align="center">
+                </el-table-column>
+                <el-table-column
+                  prop="pipelineRecordId"
+                  label="流水线ID"
+                  align="center"
+                  width="80">
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </template>
+      </ElDrawer>
       <!-- 新建测试用例 -->
       <el-dialog
         v-model="showTestCaseCreateModel"
@@ -406,7 +454,7 @@
       <!-- 测试用例步骤详情 -->
       <ElDrawer
         v-model="stepsDrawer"
-        :size="650">
+        :size="800">
         <template #title>
           <el-row class="entry-row">
             <el-col :span="3">
@@ -449,6 +497,16 @@
                       label="描述"
                       align="center">
                     </el-table-column>
+                    <el-table-column
+                      prop="expectation"
+                      label="预期输出"
+                      align="center">
+                    </el-table-column>
+                    <el-table-column
+                      prop="state"
+                      label="状态"
+                      align="center">
+                    </el-table-column>
                     <el-table-column
                       align="center">
                       <template #header>
@@ -456,6 +514,8 @@
                       </template>
                       <template #default="scope">
                         <ElButton @click="handleSteps('update', scope.row.testCaseId, scope.row.id)" type="text" size="small">更新</ElButton>
+                        <ElButton
+                          @click="handleSteps('updateState', scope.row.testCaseId, scope.row.id)" type="text" size="small">修改状态</ElButton>
                         <ElButton @click="handleSteps('delete', scope.row.testCaseId, scope.row.id)" type="text" size="small">删除</ElButton>
                       </template>
                     </el-table-column>
@@ -492,6 +552,13 @@
               :rows="4">
             </el-input>
           </el-form-item>
+          <el-form-item label="expectation" prop="expectation">
+            <el-input
+              v-model="updateStepForm.expectation"
+              type="textarea"
+              :rows="4">
+            </el-input>
+          </el-form-item>
         </el-form>
         <template #footer>
           <span class="dialog-footer">
@@ -499,6 +566,43 @@
           </span>
         </template>
       </el-dialog>
+      <!-- 修改测试用例步骤state -->
+      <el-dialog
+        v-model="showUpdateStepStateModel"
+        width="600px"
+        :before-close="(done) => {$refs['updateStepForm'].resetFields();done();}"
+        destroy-on-close>
+        <template #title>修改测试用例步骤状态</template>
+        <el-form
+          :model="updateStepForm"
+          ref="updateStepForm"
+          label-position="right"
+          label-width="100px"
+          label-suffix="：">
+          <el-form-item label="id" prop="id">
+            <el-input
+              v-model="updateStepForm.id"
+              disabled>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="state" prop="state">
+            <ElSelect
+              v-model="updateStepForm.state">
+              <ElOption
+                v-for="(state, index) in stateList"
+                :key="index"
+                :label="state"
+                :value="state">
+              </ElOption>
+            </ElSelect>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="handleStepUpdateStateConfirm">确 定</el-button>
+          </span>
+        </template>
+      </el-dialog>
       <!-- 修改测试用例title -->
       <el-dialog
         v-model="showEditTestCaseModel"
@@ -533,12 +637,75 @@
         </template>
       </el-dialog>
     </ElTabPane>
+    <ElTabPane label="自动化测试" name="autotest">
+      <ElTable :data="autoTestResult" width="100%">
+        <ElTableColumn
+          prop="id"
+          label="ID"
+          align="center"
+          width="60">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="test_id"
+          label="所属测试ID"
+          align="center"
+          width="120">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="executeTime"
+          label="执行时间"
+          align="center"
+          width="250">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="timeList"
+          label="执行时间列表"
+          align="center">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="success"
+          label="success"
+          align="center"
+          width="100">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="failure"
+          label="failure"
+          align="center"
+          width="100">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="maxTime"
+          label="Max"
+          align="center"
+          width="100">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="minTime"
+          label="Min"
+          align="center"
+          width="100">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="averageTime"
+          label="Average"
+          align="center"
+          width="100">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="pipelineRecordId"
+          label="流水线ID"
+          align="center"
+          width="100">
+        </ElTableColumn>
+      </ElTable>
+    </ElTabPane>
   </ElTabs>
 </template>
 
 <script>
 import vueJsonEditor from 'vue-json-editor';
-import { APITestAPI, FuncTestAPI } from '@/api';
+import { APITestAPI, FuncTestAPI, AutoTestAPI } from '@/api';
 import { ElMessage } from 'element-plus';
 import * as echarts from 'echarts';
 
@@ -548,6 +715,7 @@ export default {
   },
   data() {
     return {
+      currentProjectId: -1,
       activeTab: 'apitest',
       apitests: [],
       detailDrawer: false,
@@ -583,11 +751,18 @@ export default {
       showUpdateStepModel: false,
       updateStepForm: {},
       showEditTestCaseModel: false,
+      stateList: ['待测试', '已测试', '出现bug'],
+      showUpdateStepStateModel: false,
+      deployHistoryInfo: {},
+      deployHistoryDrawer: false,
+      autoTestResult: [],
     };
   },
   async mounted() {
+    this.currentProjectId = this.$store.state.workspace.currentProjectId;
     this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
     this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
+    this.autoTestResult = await AutoTestAPI.getAutoTestResultByProjectId(this.$store.state.workspace.currentProjectId);
   },
   methods: {
     async handleClick(action, id) {
@@ -598,19 +773,23 @@ export default {
         }
         case 'latest': {
           this.latestResultInfo = await APITestAPI.getLatestResultByTestId(id);
-          this.apitests.forEach((item) => {
-            if (item.testId === id) {
-              this.qps = item.qps;
-            }
-          });
-          this.latestDrawer = true;
-          const that = this;
-          this.timer = setTimeout(() => {
-            this.$nextTick(() => {
-              that.initChart1();
-              that.initChart2();
+          if (this.latestResultInfo === null) {
+            ElMessage.error('还未执行！');
+          } else {
+            this.apitests.forEach((item) => {
+              if (item.testId === id) {
+                this.qps = item.qps;
+              }
             });
-          }, 1500);
+            this.latestDrawer = true;
+            const that = this;
+            this.timer = setTimeout(() => {
+              this.$nextTick(() => {
+                that.initChart1();
+                that.initChart2();
+              });
+            }, 1500);
+          }
           break;
         }
         case 'detail': {
@@ -629,10 +808,7 @@ export default {
         }
         case 'delete': {
           await APITestAPI.deleteAPITestByTestId(id);
-          ElMessage.success({
-            message: '删除成功！',
-            type: 'success',
-          });
+          ElMessage.success('删除成功！');
           this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
           break;
         }
@@ -669,10 +845,7 @@ export default {
           this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
           this.$refs.createAPITestForm.resetFields();
           this.showAPITestCreateModel = false;
-          ElMessage.success({
-            message: '创建成功！',
-            type: 'success',
-          });
+          ElMessage.success('创建成功！');
         }
       });
     },
@@ -778,7 +951,10 @@ export default {
           this.showTestCaseCreateModel = true;
           break;
         }
-        case 'update': {
+        case 'latest': {
+          this.deployHistoryInfo = await FuncTestAPI.getLatestRecord(this.$store.state.workspace.currentProjectId);
+          console.log(this.deployHistoryInfo);
+          this.deployHistoryDrawer = true;
           break;
         }
         case 'finish': {
@@ -802,10 +978,7 @@ export default {
         }
         case 'delete': {
           await FuncTestAPI.deleteTestCase(id);
-          ElMessage.success({
-            message: '删除成功！',
-            type: 'success',
-          });
+          ElMessage.success('删除成功！');
           this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
           break;
         }
@@ -832,10 +1005,7 @@ export default {
           this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
           this.$refs.createTestCaseForm.resetFields();
           this.showTestCaseCreateModel = false;
-          ElMessage.success({
-            message: '创建成功！',
-            type: 'success',
-          });
+          ElMessage.success('创建成功！');
         }
       });
     },
@@ -843,19 +1013,13 @@ export default {
       switch (action) {
         case 'create': {
           await FuncTestAPI.createTestCaseStep(caseId);
-          ElMessage.success({
-            message: '创建成功！',
-            type: 'success',
-          });
+          ElMessage.success('创建成功！');
           this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
           break;
         }
         case 'delete': {
           await FuncTestAPI.deleteTestCaseStep(stepId);
-          ElMessage.success({
-            message: '删除成功！',
-            type: 'success',
-          });
+          ElMessage.success('删除成功！');
           this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
           break;
         }
@@ -868,6 +1032,15 @@ export default {
           });
           break;
         }
+        case 'updateState': {
+          this.showUpdateStepStateModel = true;
+          this.detailStepsInfo.forEach((item) => {
+            if (item.id === stepId) {
+              this.updateStepForm = item;
+            }
+          });
+          break;
+        }
         default: {
           console.warn('Unknown type of action.');
         }
@@ -876,14 +1049,30 @@ export default {
     async handleStepUpdateConfirm() {
       this.$refs.updateStepForm.validate(async (valid) => {
         if (valid) {
-          await FuncTestAPI.updateTestCaseStep(this.updateStepForm.id, this.updateStepForm.description);
+          await FuncTestAPI.updateTestCaseStep(this.updateStepForm.id, this.updateStepForm.description, this.updateStepForm.expectation);
           this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(this.updateStepForm.testCaseId);
           this.$refs.updateStepForm.resetFields();
           this.showUpdateStepModel = false;
-          ElMessage.success({
-            message: '修改成功！',
-            type: 'success',
-          });
+          ElMessage.success('修改成功！');
+        }
+      });
+    },
+    async handleStepUpdateStateConfirm() {
+      this.$refs.updateStepForm.validate(async (valid) => {
+        if (valid) {
+          let state;
+          if (this.updateStepForm.state === '待测试') {
+            state = 'WAITING';
+          } else if (this.updateStepForm.state === '已测试') {
+            state = 'PASS';
+          } else if (this.updateStepForm.state === '出现bug') {
+            state = 'BUG';
+          }
+          await FuncTestAPI.updateTestCaseStepState(this.updateStepForm.id, state);
+          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(this.updateStepForm.testCaseId);
+          this.$refs.updateStepForm.resetFields();
+          this.showUpdateStepStateModel = false;
+          ElMessage.success('修改成功！');
         }
       });
     },
@@ -894,10 +1083,7 @@ export default {
           this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
           this.$refs.detailTestCaseInfo.resetFields();
           this.showEditTestCaseModel = false;
-          ElMessage.success({
-            message: '修改成功！',
-            type: 'success',
-          });
+          ElMessage.success('修改成功！');
         }
       });
     },