使用多个指令为组件添加数据属性 [英] Use more than one directive to add data attributes to components
问题描述
我有两个指令，它们应该向组件添加数据属性以进行测试，但是，实际上只添加了其中一个指令.这两个组件是 Bootstrap-Vue 的 BFormInput 和 BButton.
我尝试删除除一个按钮之外的所有内容，但仍未添加指令，即
<b 按钮变体=主要"@click="searchJobs"类=四舍五入-0"v-jobs-search-button-directive="{ id: 'search-button' }">搜索</b-按钮></b-input-group> wrapper.html() 输出为:
<b-input-group-stub tag="div" class="sm-2 mb-2 mt-2"><b-button-stub target="_self" event="点击"routertag="a"variant="secondary" type="button" tag="button" class="rounded-0">搜索</b-button-stub></b-input-group-stub>但是，当我将输入表单留在原地而不是按钮时添加它，即
<b-表单输入v-jobs-search-input-directive="{ id: 'input-keyword' }"class="mr-2 rounded-0"placeholder="输入搜索词...":value="this.searchConfig.Keyword"@input="this.updateJobsSearchConfig"/></b-input-group> wrapper.html() 输出为:
<b-input-group-stub tag="div" class="sm-2 mb-2 mt-2"><b-form-input-stub value="" placeholder=输入搜索词..." type="text" class="mr-2 rounded-0" data-jobs-search-input-id="input-keyword"></b-form-input>这就是我添加指令的方式
<b-input-group class="sm-2 mb-2 mt-2"><b-表单输入v-jobs-search-input-directive="{ id: 'input-keyword' }"class="mr-2 rounded-0"placeholder="输入搜索词...":value="this.searchConfig.Keyword"@input="this.updateJobsSearchConfig"/><b 按钮变体=主要"@click="searchJobs"类=四舍五入-0"v-jobs-search-button-directive="{ id: 'search-button' }">搜索</b-按钮></b-input-group></模板><脚本>从 'vuex' 导入 { mapActions, mapState }从'@/api-services/job.service' 导入 JobService从@/directives/components/jobs/JobsSearchInputDirective"导入 JobsSearchInputDirective从@/directives/components/jobs/JobsSearchButtonDirective"导入 JobsSearchButtonDirective导出默认{name: '求职',指令:{ JobsSearchInputDirective, JobsSearchButtonDirective },数据 () {返回 {工作: []，页数:0}},计算:{...地图状态({pagedConfig:状态=>state.jobs.paged,搜索配置:状态 =>state.jobs.search})},方法: {//方法在这里}}jobs-search-input-directive 是
export default (el, binding) =>{如果(process.env.NODE_ENV === '测试'){Object.keys(binding.value).forEach(value => {el.setAttribute(`data-jobs-search-input-${value}`, binding.value[value])})}}jobs-search-button-directive 是
export default (el, binding) =>{如果(process.env.NODE_ENV === '测试'){Object.keys(binding.value).forEach(value => {el.setAttribute(`data-jobs-search-button-${value}`, binding.value[value])})}}这是我运行的测试，使用shallowMount
it('应该在搜索按钮点击事件上调用jobsSearch方法', () => {wrapper.find('[data-jobs-search-button-id="search-button"]').trigger('click')期望(searchJobs).toHaveBeenCalled()})与
一起回来错误:[vue-test-utils]:find 没有返回 [data-jobs-search-button-id="search-button"]，不能在空的 Wrapper 上调用 trigger()但是 wrapper.find('[data-jobs-search-input-id="input-keyword"]') 确实找到了输入表单
这两个指令在 JobsSearch.vue 组件中注册，如果我删除 process.env 部分，它们肯定会被渲染
我希望该属性被添加到两个组件中，但它只会在测试时添加到 BFormInput 中.任何帮助将不胜感激.
我相信问题发生在...
- ...尝试使用指令...
- ... 在功能子组件上...
- ... 使用
shallowMount.
b-button 是一个功能组件.
我整理了下面的演示来说明问题.它以 3 种不同的方式安装相同的组件，并且仅在上述特定情况下失败.
MyComponent = {模板:`<div><my-normal v-my-directive></my-normal><my-functional v-my-directive></my-functional>`，成分: {我的正常:{渲染:h =>h('跨度','正常')},我的函数:{功能:真实，渲染:(h，上下文)=>h('span', context.data, '功能')}},指令:{我的指令 (el) {el.setAttribute('姓名', '丽莎')}}}const v = 新的 Vue({el: '#app',成分: {我的组件}})document.getElementById('markup1').innerText = v.$el.innerHTMLconst cmp1 = VueTestUtils.mount(MyComponent)document.getElementById('markup2').innerText = cmp1.html()const cmp2 = VueTestUtils.shallowMount(MyComponent)document.getElementById('markup3').innerText = cmp2.html()
#markup1, #markup2, #markup3 {边框:1px 实心 #777；边距:10px；填充:10px；}<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"><<;/脚本><script src="https://unpkg.com/vue-template-compiler@2.6.10/browser.js"></script><script src="https://unpkg.com/@vue/test-utils@1.0.0-beta.29/dist/vue-test-utils.iife.js"></script><div id="应用程序"><我的组件></我的组件><div id="markup1"></div><div id="markup2"></div><div id="markup3"></div>
我之前并没有真正看过 vue-test-utils 的代码，但是在调试器中单步执行让我对这一行产生了怀疑:
