SEEC-II-FrontEnd/src/views/student/Code/ProjectDetail/TestDetail.vue

<template>
  <div class="columns is-desktop">
    <div class="column">
      <div v-if="detailLoading"><page-section-loading show /></div>
      <div v-else class="page-section">
        <h5 class="title is-5">单元测试:</h5>
        <div v-if="!(unitTestList && unitTestList.length > 0)">
          <strong>当前暂无单元测试数据</strong>
        </div>
        <router-link
          class="test-item"
          :key="item.id"
          :to="`${$route.path}/unit/${item.id}`"
          v-for="item in unitTestList"
          tag="div"
        >
          <div><strong>UNIT TEST : #</strong> {{ item.id }}</div>
          <pass-tag v-if="item.status == 1" :pass="item.passAll" />
          <b-tag v-else type="is-warning">RUNNING</b-tag>
          <span style="padding-left: 10px">{{
            displayUnixTime(item.time)
          }}</span>
        </router-link>
      </div>
    </div>
    <div class="column">
      <div v-if="detailLoading"><page-section-loading show /></div>
      <div v-else class="page-section">
        <h5 class="test-title title is-5">
          页面测试:
          <div
            :class="{ 'is-loading': testing }"
            @click="makeTest"
            :disabled="
              !(
                projectDetail.latestDeploy &&
                projectDetail.latestDeploy.status == 'SUCCESS'
              )
            "
            class="button is-primary test-title__action"
          >
            触发测试
          </div>
        </h5>
        <div v-if="!(functionTestList && functionTestList.length > 0)">
          <strong>当前暂无页面测试数据</strong>
        </div>
        <router-link
          class="test-item"
          :key="item.id"
          :to="`${$route.path}/functional/${item.id}`"
          v-for="item in functionTestList"
          tag="div"
        >
          <div><strong>FUNCTIONAL TEST : #</strong> {{ item.id }}</div>
          <pass-tag v-if="item.status == 1" :pass="item.passAll" />
          <b-tag v-else type="is-warning">RUNNING</b-tag>
          <span style="padding-left: 10px">{{
            displayUnixTime(item.time)
          }}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
import timeMixins from "@/mixins/time";
import { makeFunctionalTest } from "@/api/codehw";
import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
import BTag from "buefy/src/components/tag/Tag";

export default {
  components: {
    BTag,
    PageSectionLoading,
    PassTag
  },
  props: {
    projectDetail: {
      type: Object,
      default: () => ({
        unitTestList: [],
        functionTestList: []
      })
    },
    detailLoading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    unitTestList() {
      return this.sortTestList(this.projectDetail.unitTestList);
    },
    functionTestList() {
      return this.sortTestList(this.projectDetail.functionTestList);
    }
  },
  data() {
    return {
      testing: false
    };
  },
  mixins: [timeMixins],
  methods: {
    async makeTest() {
      if (
        !(
          this.projectDetail.latestDeploy &&
          this.projectDetail.latestDeploy.status == "SUCCESS"
        )
      ) {
        return;
      }
      this.testing = true;
      const deployId = this.projectDetail.latestDeploy.id;
      const { homeworkId, projectId } = this.$route.params;
      const { data } = await makeFunctionalTest({
        homeworkId,
        projectId,
        deployId
      });
      this.testing = false;
      if (data.success) {
        this.$toast.open({
          message: `测试触发成功`,
          type: "is-success"
        });
      } else {
        this.$toast.open({
          message: `测试触发失败`,
          type: "is-danger"
        });
      }
    },
    sortTestList(list) {
      console.log(list);
      if (!list) return [];
      const copyList = list.slice(0);
      copyList.sort((a, b) => b.time - a.time);
      return copyList;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/scss/app";
.test-item {
  padding: $default-margin $default-margin-between;
  margin: 0 -#{$default-margin-between};
  cursor: pointer;
}

.test-title {
  position: relative;
  &__action {
    position: absolute;
    right: 0;
    transform: translateY(-20%);
  }
}

.test-item:hover,
.test-item:nth-child(even):hover {
  background-color: #dde3ef;
}

.test-item:nth-child(even) {
  background-color: rgba(244, 247, 252, 0.6);
}
</style>