Утвердить класс был добавлен к элементу - PullRequest
Новая
       7

Утвердить класс был добавлен к элементу

0 голосов
/ 25 мая 2018

Я застрял при написании модульного теста для компонента Vue.js, утверждая, что в шаблон добавлен определенный класс CSS.

Вот мой шаблон: 

<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>

Ивот класс 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(),
        };
    }
}

Все довольно просто, и я вижу, что код верен: соответствующие элементы выделяются в компоненте во время выполнения.Однако модульный тест завершается неудачно с сообщением

Ошибка: [vue-test-utils]: команда find не возвращает tr # list-lg-item-id.1, не может вызывать классы () вempty Wrapper

Вот мой тест (снова 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'));
  });
});

Я пытался find() использовать только идентификатор, а не tr с этим идентификатором,и увидел тот же эффект.Кроме того, если я изменю тест для вывода HTML из оболочки, я вижу, что в выводе присутствует элемент 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>

Чего мне не хватает?Связано ли это с тем, что атрибут id устанавливается динамически?

1 Ответ

0 голосов
/ 25 мая 2018

Это оказалось потому, что сгенерированные значения для тегов id содержали точки, которые необходимо экранировать в строках селектора, например, list-item-id\.1.

...