小编Vik*_*röm的帖子

我们将Vue 2与Typescript和webpack 3结合使用.Vuex用于状态管理.我们的测试与Karma以及Mocha,Sinon,Expect和Avoriaz一起进行.一切都很好,但我尝试使用伊斯坦布尔进行代码覆盖,以便更好地直观地表示缺少哪些测试.

文件夹结构的小表示

• SRC

  • 组件
    • 共享
    • 按键
      • button.vue
      • button.ts
  • index.ts
  • ...

• 测试

  • 单元
    • 组件
      • 共享
      • 按键
        • button.spec.test.ts
  • karma.conf.js
  • karma.coverage.js
  • index.ts
  • ...

button.vue

<template>
    <button onClick="handleClick" visible="visible"></button>
</template>

<script lang="ts" src="./button.ts"></script>

button.ts

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class Button extends Vue {

    @Prop({ default: false })
    public visible: boolean;

    private onClick() {
       // do stuff
    }
}

我目前还没有创建一个button.spec.ts,这是我试图让团队使用这个信息解决的问题,这是代码覆盖的结果:

项目总体覆盖范围:

? 332 tests completed
=============================== Coverage summary ===============================
Statements   : 43.88% ( 1847/4209 )
Branches …

我正在尝试创建一个效果,我在CSS3中的任何图像上方都有一个透明箭头.请参见下图.

有什么想法怎么做这个效果？如果有任何帮助,请使用LESS.