Тестирование Vue Popover Component - PullRequest
Новая
       26

Тестирование Vue Popover Component

0 голосов
/ 27 сентября 2019

Я тестирую модуль NotificationTray.vue, который использует плагин Bootstrap + Vue B-Popover и отображает компонент NotificationItem.vue внутри Popover.Я пытаюсь сделать простые утверждения, такие как утверждение, что HTML содержит статический текст, однако все мои тесты не пройдены, поскольку B-Popover выполняет условную визуализацию при #notification-toggle щелчке.

Я пытался создать событие открытия или щелчок#notification-toggle и ожидание следующего тика в моем наборе тестов, но я не могу правильно переключить видимость компонента BPopover. 

it('marks all Notifications as read', (done) => {

// Emit the Open event
wrapper.vm.$refs.popover.$emit('open')

// Trigger the Click event on the toggle element
wrapper.find('#notification-toggle').trigger('click')

wrapper.vm.$nextTick(() => {
  expect(wrapper.html()).toContain('Mark All as Read')
  done()
});

Сбой теста в консоли из-за того, что Popover не рендерит: 

Expected substring: "Mark All as Read"
Received string:    "<li class=\"nav-item notification-toggle\"><a id=\"notification-toggle\" href=\"#\" class=\"nav-link\"><i class=\"fa fa-bell\"></i></a> <span>1</span> <!----></li>""

Мой NotificationTray.vue шаблон ниже. 

<template>
  <li class="nav-item notification-toggle">
    <a id="notification-toggle" class="nav-link" href="#" @click.prevent><i class="fa fa-bell"></i></a>
    <span v-if="unreadCount > 0" v-text="unreadCount"></span>

    <b-popover ref="popover" target="notification-toggle" triggers="focus" placement="bottom">
      <template v-slot:title>
        Notifications <a href="#" class="small" @click.prevent="markAllAsRead">Mark All as Read</a>
      </template>
      <ul class="notification-tray">
        <notification-item
            v-for="(notification, index) in notifications"
            :notification="notification"
            :key="notification.id"
            @toggleRead="toggleRead(index)"
            @dismiss="dismiss(index)"
            @followLink="followLink(index)"
        />
        <li class="notification-item empty" v-if="notifications.length === 0">
          <p>There are no notifications to show.</p>
        </li>
      </ul>
    </b-popover>
  </li>
</template>
...