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

<template>
  <div>
    <page-header
      :loading="testDetailLoading"
      :routes="[
        { name: '代码作业', path: 'code' },
        { name: '项目列表', path: `code/${$route.params.homeworkId}` },
        {
          name: '项目详情',
          path: `code/${$route.params.homeworkId}/${
            $route.params.projectId
          }/test`
        },
        { name: '单元测试' }
      ]"
    >
      <template slot="title">
        单元测试 #{{ testDetail.id }}
      </template>
      <template slot="content">
        <pass-tag v-if="testDetail.status == 1" :pass="testDetail.passAll" />
        <b-tag v-else type="is-warning">RUNNING</b-tag>
      </template>
      <template slot="extraContent">
        <div class="tag">{{ displayUnixTime(testDetail.time) }}</div>
      </template>
    </page-header>
    <!--<div class="console-section">{{ testDetail.consoleOutput }}</div>-->
    <page-body>
      <div v-if="testDetailLoading"><page-section-loading show /></div>
      <div v-else>
        <div class="gap-section">
          <div class="page-section">
            <a class="button is-small is-info" @click="showLog = !showLog">{{
              showLog ? "收起控制台信息" : "查看控制台输出"
            }}</a>
            <div class="console-section" v-if="showLog">
              {{ testDetail.consoleOutput }}
            </div>
          </div>
        </div>
        <div
          v-for="item in testDetail.detail"
          :key="item.id"
          class="gap-section"
        >
          <div class="page-section">
            <div>
              <pass-tag :pass="item.pass" />
              <strong style="padding-left: 10px">
                单元测试用例 : #{{ item.id }}
              </strong>
            </div>
            <div v-if="!item.pass" class="code-section">
              {{ item.message }} <br />
              <br />
              {{ item.trace }}
            </div>
          </div>
        </div>
      </div>
    </page-body>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
import { getUnitTestDetail } from "@/api/codehw";
import timeMixins from "@/mixins/time";
import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
import BTag from "buefy/src/components/tag/Tag";
export default {
  components: {
    BTag,
    PageSectionLoading,
    PassTag,
    PageBody,
    PageHeader
  },
  data() {
    return {
      testDetail: { detail: [] },
      testDetailLoading: false,
      showLog: false
    };
  },
  mixins: [timeMixins],
  mounted() {
    const { unitTestId } = this.$route.params;
    this.testDetailLoading = true;
    getUnitTestDetail(unitTestId).then(value => {
      this.testDetail = value.data;
      this.testDetailLoading = false;
    });
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../assets/scss/app";
.gap-section {
  padding-bottom: $default-margin-between;
}

.gap-section:last-child {
  padding-bottom: 0;
}

.code-section {
  margin: $default-margin-between -#{$default-margin-between} -#{$default-margin-between};
  padding: $default-margin-between;
  background-color: #2d3044;
  color: #cacff1;
  white-space: pre-line;
}

.console-section {
  padding: $default-margin-between $default-margin-between * 1.5;
  background-color: #2d3044;
  color: #cacff1;
  white-space: pre-line;
}
</style>