为自动化测试创建钩子

Question

质量保证人员最近抱怨他们不能自动进行前端测试。因为我们的html从外面看起来都是一样的。 所以作为一个懒惰的黑客我做了这个

<template>
    <div :role="$options.name">
        ...
    </div>
</template>

<script>
export default {
  name: 'VmComponentName'
}
</script>

只需从脚本中获取name并将其应用于html。所以在浏览器中你会得到：

<div role="VmComponentName">
     ...
</div>

行:role="$options.name"包含在每个组件中。

是否有 DRY er解决方案？请分享。

其他细节

我会详细解释我在寻找什么。

想象一下，我有VmUserCreate这是创建用户的形式。测试用例为Can create user。

要自动测试没有角色，我必须使用以下选择器：

.wrapper > .wrapper > .wrapper > .submit-button

测试会非常脆弱（会破坏很多）。

如果我使用角色，我可以使用[role="VmUserCreateForm"] .submit-button选择器。哪个折叠不那么脆弱。

所以基本上，我正在寻找的是某种模板继承。每个组件都会自动附加角色。因为我有数百个组件，并将$options.name粘贴到每个组件中就是meh。

new Vue({
  el: '#app',
  components: {
    c1: {
      name: 'VmUserExplorer', 
      template: '<div class="wrapper" :role="$options.name"><slot></slot></div>'
    },
    c2: {
      name: 'VmUserList', 
      template: '<div class="wrapper" :role="$options.name"><slot></slot></div>'
    },
    c3: {
      name: 'VmUserCreateForm', 
      template: '<div class="wrapper" :role="$options.name"><slot></slot></div>'
    },
  }
});

[role="someRole"] {
  background-color: lightblue;
}
.wrapper {
  padding: 10px;
  border: 2px solid lightblue;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <c-1>
    <c-2>
      <c-3>
        <button class="button submit-button">Submit</button>
      </c-3>
    </c-2>
  </c-1>
</div>

Answer 1

如果我正确理解你，你想全局地将`role =“$ options.name”添加到每个组件的根元素中吗？

如果是这样，我认为你可以在mounted生命周期钩子上使用全局mixin。

例如，像这样：

Vue.mixin({
  mounted () {
    if (this.$el.setAttribute && this.$options.name) {
      this.$el.setAttribute('role', this.$options.name)
    }
  },
})