use jest create ut for this component: <template>
  <div class="gd-num-view">

    <el-popover
      v-if="canHover"
      trigger="hover"
      :placement="hoverPlacement"
      popper-class="num-view-popper-asdhjfhg"
    >
      <span slot="reference">
        <span v-if="formatType==='rate'" :class="['value','tip-out']" :style="numStyle">
          <span>{{ formatHandleRes }}</span><span v-if="formatHandleRes!=='--' && !hideRateUnit" class="symbol" :style="unitStyle">%</span>
        </span>
        <span v-else :style="numStyle" class="tip-out">{{ formatVal }}<span :style="unitStyle">{{ unit }}</span></span>
      </span>

      <span>
        <span v-if="quotaName" class="qouta-name-asdaffgg">{{ quotaName }}：</span>
        <span v-if="formatType==='rate'" slot="reference" :class="['value']">
          <span>{{ formatHandleRes }}</span><span v-if="formatHandleRes!=='--' && !hideRateUnit" class="symbol">%</span>
        </span>
        <span v-else>{{ formatOriginVal }}</span>
      </span>
    </el-popover>

    <span v-else>
      <span v-if="formatType==='rate'" slot="reference" :class="['value']" :style="numStyle">
        <span>{{ formatHandleRes }}</span><span v-if="formatHandleRes!=='--' && !hideRateUnit" class="symbol" :style="unitStyle">%</span>
      </span>
      <span v-else :style="numStyle">{{ formatVal }}<span :style="unitStyle">{{ unit }}</span></span>
    </span>
  </div>
</template>
<script>
import { formatNumber, formatPercent, formatNumUnitObj } from 'gd-utils/lib//fn/numFormat.js'
export default {
  name: 'GdNumView',

  componens: {},
  inheritAttrs: false,
  computed: {
    formatHandleRes() {
      let _res = formatPercent(this.value, { precision: this.precision })
      if (_res === '--') {
        return _res
      }
      let _flag = this.value > 0
      _flag && (_res = '+' + _res)
      return _res.replace('%', '')
    },
    formatVal() {
      if (this.formatType === 'unit') {
        return formatNumUnitObj(this.value, { precision: this.precision }).value
      }
      if (this.formatType === 'percent') {
        return formatPercent(this.value, { precision: this.precision }).replace('%', '')
      }
      return formatNumber(this.value, { precision: this.precision })
    },
    unit() {
      if (this.formatType === 'unit') {
        return formatNumUnitObj(this.value, { precision: this.precision }).unit
      }
      if (this.formatType === 'percent' && this.formatVal !== '--') {
        return '%'
      }
      return ''
    },
    formatOriginVal() {
      if (this.formatType === 'percent') {
        return formatPercent(this.value, { precision: this.precision })
      }
      return formatNumber(this.value, { precision: this.precision })
    },
    numStyle() {
      if (this.formatType === 'rate') {
        return {
          ...this.allStyle,
          color: this.getYieldRateColor(this.value),
          borderColor: this.getYieldRateColor(this.value)
        }
      }
      return this.allStyle
    }
  },

  watch: {},
  methods: {
    getYieldRateColor(value) {
      if (value > 0) {
        return value === Infinity ? '' : this.colorList && this.colorList[0] || '#f75454'
      } else if (value < 0) {
        return this.colorList && this.colorList[1] || '#76c84d'
      } else {
        return ''
      }
    }
  }
}
</script>