Merge remote-tracking branch 'origin/dev_test' into dev

src/api/devcloud/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/devcloud/functest.ts

@@ -0,0 +1,33 @@
+import axios from '@/utils/axios';
+
+import { FUNCTEST_PREFIX } from './prefix';
+
+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}`);
+
+export const deleteTestCase = (testCaseId: number) => axios.delete(`${FUNCTEST_PREFIX}?testCaseId=${testCaseId}`);
+
+export const updateTestCase = (testCaseId: number, title: string) => axios.put(
+  `${FUNCTEST_PREFIX}?testCaseId=${testCaseId}&title=${title}`,
+);
+
+export const finishTestCase = (testCaseId: number) => axios.put(`${FUNCTEST_PREFIX}/finish?testCaseId=${testCaseId}`);
+
+export const reopenTestCase = (testCaseId: number) => axios.put(`${FUNCTEST_PREFIX}/reopen?testCaseId=${testCaseId}`);
+
+export const getTestCaseSteps = (testCaseId: number) => axios.get(`${FUNCTEST_PREFIX}/steps?testCaseId=${testCaseId}`);
+
+export const createTestCaseStep = (testCaseId: number) => axios.post(`${FUNCTEST_PREFIX}/steps?testCaseId=${testCaseId}`);
+
+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?projectId=${projectId}`);

src/api/devcloud/prefix.ts

@@ -8,3 +8,5 @@ export const BUGLIST_PREFIX = '/bug_list';
 export const APITEST_PREFIX = '/test';
 export const STAGE_PREFIX = '/stages';
 export const COMMIT_PREFIX = '/commits';
+export const FUNCTEST_PREFIX = '/func_test';
+export const AUTOTEST_PREFIX = '/auto_test';

src/api/index.ts

@@ -4,6 +4,8 @@ import * as RequirementAPI from './devcloud/tree';
 import * as BugListAPI from './devcloud/buglist';
 import * as PipelineAPI from './devcloud/pipeline';
 import * as APITestAPI from './devcloud/apitest';
+import * as FuncTestAPI from './devcloud/functest';
+import * as AutoTestAPI from './devcloud/autotest';
 import * as PortalAPI from './portal';
 
 export {
@@ -14,4 +16,6 @@ export {
   PipelineAPI,
   PortalAPI,
   APITestAPI,
+  FuncTestAPI,
+  AutoTestAPI,
 };

src/views/Project/APITest.vue

@@ -306,12 +306,406 @@
         </template>
       </ElDrawer>
     </ElTabPane>
+    <ElTabPane label="黑盒测试" name="testCases">
+      <ElTable :data="testcases" width="100%">
+        <ElTableColumn
+          prop="id"
+          label="ID"
+          align="center"
+          width="60">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="title"
+          label="title"
+          align="center">
+        </ElTableColumn>
+        <ElTableColumn
+          prop="pass"
+          label="执行状态"
+          align="center"
+          width="100"
+          :filters="[{ text: '进行中', value: false }, { text: '已完成', value: true }]"
+          :filter-method="(value, row) => {
+            return row.pass === value;
+          }"
+          filter-placement="bottom-end">
+          <template #default="scope">
+            <template v-if="scope.row.pass === false">
+              <ElTag>进行中<i class="el-icon-loading"></i></ElTag>
+            </template>
+            <template v-else-if="scope.row.pass === true">
+              <ElTag type="success">已完成</ElTag>
+            </template>
+            <template v-else>
+              <ElTag type="warning">未知状态</ElTag>
+            </template>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          label="详情"
+          align="center">
+          <template #default="scope">
+            <ElButton
+              @click="handleTestCasesClick('steps', scope.row.id)"
+              type="text"
+              size="small">测试用例步骤列表</ElButton>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          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">
+            <ElButton v-if="scope.row.pass === false" @click="handleTestCasesClick('finish', scope.row.id)" type="text" size="small">
+              完成测试
+            </ElButton>
+            <ElButton v-else @click="handleTestCasesClick('finish', scope.row.id)" type="text" size="small" disabled>完成测试</ElButton>
+            <ElButton v-if="scope.row.pass === true" @click="handleTestCasesClick('reopen', scope.row.id)" type="text" size="small">
+              重新开放测试
+            </ElButton>
+            <ElButton v-else @click="handleTestCasesClick('reopen', scope.row.id)" type="text" size="small" disabled>重新开放测试</ElButton>
+            <ElButton @click="handleTestCasesClick('edit', scope.row.id)" type="text" size="small">编辑</ElButton>
+            <ElButton @click="handleTestCasesClick('delete', scope.row.id)" type="text" size="small">删除</ElButton>
+          </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"
+        width="600px"
+        :before-close="(done) => {$refs['createTestCaseForm'].resetFields();done();}"
+        destroy-on-close>
+        <template #title>创建测试用例</template>
+        <el-form
+          :model="createTestCaseForm"
+          ref="createTestCaseForm"
+          label-position="right"
+          label-width="60px"
+          label-suffix="："
+          class="create-APITest-form">
+          <el-form-item label="title" prop="title">
+            <el-input
+              v-model="createTestCaseForm.title"
+              type="textarea"
+              :rows="5"
+              placeholder="请输入测试用例的标题"></el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="handleTestCaseCreateConfirm">确 定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+      <!-- 测试用例步骤详情 -->
+      <ElDrawer
+        v-model="stepsDrawer"
+        :size="800">
+        <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>#{{detailTestCaseInfo.id}}</span>
+              </template>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <ElButton @click="handleSteps('create', detailTestCaseInfo.id, 0)" type="text" class="add-button">新建测试用例步骤</ElButton>
+              </div>
+            </el-col>
+          </el-row>
+        </template>
+        <template #default>
+          <el-row type="flex" justify="center">
+            <el-col :span="20">
+              <el-row class="entry-row" style="margin-top: 15px; margin-bottom: 30px">
+                <el-col :span="2">
+                  <h4>title: </h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>{{detailTestCaseInfo.title}}</div>
+                </el-col>
+              </el-row>
+              <el-tabs v-model="stepsTab">
+                <el-tab-pane label="测试用例步骤" name="steps">
+                  <el-table :data="detailStepsInfo" width="100%">
+                    <el-table-column
+                      prop="id"
+                      label="ID"
+                      align="center"
+                      width="60">
+                    </el-table-column>
+                    <el-table-column
+                      prop="description"
+                      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>
+                        <span>操作</span>
+                      </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>
+                  </el-table>
+                </el-tab-pane>
+              </el-tabs>
+            </el-col>
+          </el-row>
+        </template>
+      </ElDrawer>
+      <!-- 修改测试用例步骤 -->
+      <el-dialog
+        v-model="showUpdateStepModel"
+        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="description" prop="description">
+            <el-input
+              v-model="updateStepForm.description"
+              type="textarea"
+              :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">
+            <el-button type="primary" @click="handleStepUpdateConfirm">确 定</el-button>
+          </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"
+        width="600px"
+        :before-close="(done) => {$refs['detailTestCaseInfo'].resetFields();done();}"
+        destroy-on-close>
+        <template #title>编辑测试用例标题</template>
+        <el-form
+          :model="detailTestCaseInfo"
+          ref="detailTestCaseInfo"
+          label-position="right"
+          label-width="100px"
+          label-suffix="：">
+          <el-form-item label="id" prop="id">
+            <el-input
+              v-model="detailTestCaseInfo.id"
+              disabled>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="title" prop="title">
+            <el-input
+              v-model="detailTestCaseInfo.title"
+              type="textarea"
+              :rows="4">
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="handleTestCaseEditConfirm">确 定</el-button>
+          </span>
+        </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 } from '@/api';
+import { APITestAPI, FuncTestAPI, AutoTestAPI } from '@/api';
 import { ElMessage } from 'element-plus';
 import * as echarts from 'echarts';
 
@@ -321,6 +715,7 @@ export default {
   },
   data() {
     return {
+      currentProjectId: -1,
       activeTab: 'apitest',
       apitests: [],
       detailDrawer: false,
@@ -343,10 +738,31 @@ export default {
       latestResultInfo: {},
       qps: 0,
       timer: null,
+      testcases: [],
+      showTestCaseCreateModel: false,
+      createTestCaseForm: {
+        projectId: -1,
+        title: '',
+      },
+      stepsDrawer: false,
+      detailTestCaseInfo: [],
+      stepsTab: 'steps',
+      detailStepsInfo: {},
+      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) {
@@ -357,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': {
@@ -388,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;
         }
@@ -428,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('创建成功！');
         }
       });
     },
@@ -531,6 +945,148 @@ export default {
       };
       chart2.setOption(option2);
     },
+    async handleTestCasesClick(action, id) {
+      switch (action) {
+        case 'create': {
+          this.showTestCaseCreateModel = true;
+          break;
+        }
+        case 'latest': {
+          this.deployHistoryInfo = await FuncTestAPI.getLatestRecord(this.$store.state.workspace.currentProjectId);
+          console.log(this.deployHistoryInfo);
+          this.deployHistoryDrawer = true;
+          break;
+        }
+        case 'finish': {
+          await FuncTestAPI.finishTestCase(id);
+          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
+          break;
+        }
+        case 'reopen': {
+          await FuncTestAPI.reopenTestCase(id);
+          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
+          break;
+        }
+        case 'edit': {
+          this.testcases.forEach((item) => {
+            if (item.id === id) {
+              this.detailTestCaseInfo = item;
+            }
+          });
+          this.showEditTestCaseModel = true;
+          break;
+        }
+        case 'delete': {
+          await FuncTestAPI.deleteTestCase(id);
+          ElMessage.success('删除成功！');
+          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
+          break;
+        }
+        case 'steps': {
+          this.testcases.forEach((item) => {
+            if (item.id === id) {
+              this.detailTestCaseInfo = item;
+            }
+          });
+          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(id);
+          this.stepsDrawer = true;
+          break;
+        }
+        default: {
+          console.warn('Unknown type of action.');
+        }
+      }
+    },
+    async handleTestCaseCreateConfirm() {
+      this.$refs.createTestCaseForm.validate(async (valid) => {
+        if (valid) {
+          this.createTestCaseForm.projectId = this.$store.state.workspace.currentProjectId;
+          await FuncTestAPI.createTestCase(this.createTestCaseForm.projectId, this.createTestCaseForm.title);
+          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
+          this.$refs.createTestCaseForm.resetFields();
+          this.showTestCaseCreateModel = false;
+          ElMessage.success('创建成功！');
+        }
+      });
+    },
+    async handleSteps(action, caseId, stepId) {
+      switch (action) {
+        case 'create': {
+          await FuncTestAPI.createTestCaseStep(caseId);
+          ElMessage.success('创建成功！');
+          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
+          break;
+        }
+        case 'delete': {
+          await FuncTestAPI.deleteTestCaseStep(stepId);
+          ElMessage.success('删除成功！');
+          this.detailStepsInfo = await FuncTestAPI.getTestCaseSteps(caseId);
+          break;
+        }
+        case 'update': {
+          this.showUpdateStepModel = true;
+          this.detailStepsInfo.forEach((item) => {
+            if (item.id === stepId) {
+              this.updateStepForm = item;
+            }
+          });
+          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.');
+        }
+      }
+    },
+    async handleStepUpdateConfirm() {
+      this.$refs.updateStepForm.validate(async (valid) => {
+        if (valid) {
+          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('修改成功！');
+        }
+      });
+    },
+    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('修改成功！');
+        }
+      });
+    },
+    async handleTestCaseEditConfirm() {
+      this.$refs.detailTestCaseInfo.validate(async (valid) => {
+        if (valid) {
+          await FuncTestAPI.updateTestCase(this.detailTestCaseInfo.id, this.detailTestCaseInfo.title);
+          this.testcases = await FuncTestAPI.getTestCases(this.$store.state.workspace.currentProjectId);
+          this.$refs.detailTestCaseInfo.resetFields();
+          this.showEditTestCaseModel = false;
+          ElMessage.success('修改成功！');
+        }
+      });
+    },
   },
 };
 </script>