[英]Assert a class was added to an element
I'm stuck on writing a unit test for a Vue.js component asserting that a particular CSS class is added to the template. 我坚持为Vue.js组件编写单元测试,声称将特定的CSS类添加到了模板中。
Here's my template: 这是我的模板:
<template>
<div id="item-list" class="item-list">
<table id="item-list-lg" class="table table-hover nomargin hidden-xs hidden-sm hidden-md">
<thead>
<tr>
<th>Name</th>
<th>Included modules</th>
</tr>
</thead>
<tbody>
<tr v-bind:id="'list-lg-item-' + item.id"
v-for="item in items"
v-bind:key="item.id"
v-bind:class="itemClass(item)">
<td class="list-item-name">{{item.name}}</td>
<td class="list-included-parts">
<span v-for="part in item.parts" :key="part.id">{{part.name}}, </span>
</td>
</tr>
</tbody>
</table>
</div>
</template>
And here's the Component class (Typescript): 这是Component类(Typescript):
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Item, Items } from '@/models/Item';
@Component
export default class ItemList extends Vue {
@Prop({required: false}) private items: Item[] = Items;
public itemClass(item: Item): any {
return {
'list-item-details': true,
'list-global-item': item.isGlobalItem(),
};
}
}
All fairly simple, and I can see the code is correct: the appropriate items are highlighted in the component at runtime. 一切都很简单,我可以看到代码是正确的:在运行时组件中突出显示了相应的项目。 The unit test, however fails with the message 单元测试,但是失败并显示以下消息
Error: [vue-test-utils]: find did not return tr#list-lg-item-id.1, cannot call classes() on empty Wrapper 错误:[vue-test-utils]:查找未返回tr#list-lg-item-id.1,无法在空包装器上调用classes()
Here's my test (Typescript again): 这是我的测试(再次是Typescript):
describe('ItemList.vue', () => {
const wrapper = shallowMount(ItemList, {
propsData: { items: Items },
});
it('highlights global items in the list', () => {
Items
.filter((i) => i.isGlobalItem())
.map((i) =>
// E.g. list-item-id.1
expect(wrapper.find(`tr#list-lg-item-${i.id}`).classes())
.to.contain('list-global-item'));
});
});
I have tried find()
ing on just the id, rather than a tr
with that id, and saw the same effect. 我试过只在id上find()
,而不是在具有该id的tr
上find()
,并且看到了相同的效果。 Furthermore, if I modify the test to output the HTML from the wrapper, I see the tr
element with the id set correctly is present in the output. 此外,如果修改测试以从包装器输出HTML,我会看到在输出中存在正确设置了id的tr
元素。
<div data-v-63e8ee02="" id="item-list" class="item-list">
<table data-v-63e8ee02="" id="item-list-lg" class="table table-hover nomargin hidden-xs hidden-sm hidden-md">
<thead data-v-63e8ee02="">
<tr data-v-63e8ee02="">
<th data-v-63e8ee02="">Name</th>
<th data-v-63e8ee02="">Included parts</th>
</tr>
</thead>
<tbody data-v-63e8ee02="">
<tr data-v-63e8ee02="" id="list-item-id.1" class="list-item-details list-global-item">
<td data-v-63e8ee02="" class="list-item-name">Foo</td>
<td data-v-63e8ee02="" class="list-included-parts">
<span data-v-63e8ee02="">Bar, </span>
<span data-v-63e8ee02="">Baz, </span>
<span data-v-63e8ee02="">Qux, </span>
<span data-v-63e8ee02="">Quux, </span>
</td>
</tr>
</tbody>
</table>
</div>
What am I missing? 我想念什么? Is this related to the fact the id
attribute is set dynamically? 这与id
属性是动态设置的事实有关吗?
原来是因为id标记的生成值包含句点,需要在选择器字符串中转义它们,例如list-item-id\\.1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.