Условная отрисовка

Vue Test Utils имеет ряд возможностей для отрисовки и проверки состояния компонента с целью подтверждения корректного поведения. В этой статье рассматривается, как отрисовать компоненты, а также проверка верной отрисовки содержимого.

Эта статья также доступна как короткое видео.

Поиск элементов

Одна из самых базовых возможностей Vue - это возможность динамически вставлять и удалять элементы с помощью v-if. Давайте посмотрим, как тестировать компонент, который использует v-if.

const Nav = {
  template: `
    <nav>
      <a id="profile" href="/profile">My Profile</a>
      <a v-if="admin" id="admin" href="/admin">Admin</a>
    </nav>
  `,
  data() {
    return {
      admin: false
    }
  }
}

В <Nav> компоненте отображена ссылка на профиль пользователя. В дополнении, если значение admin будет true, мы указываем ссылку на раздел администратора. Существует три сценария, которые мы должны проверить:

1. /profile ссылка должна отобразиться.
2. Когда пользователь является администратором, /admin ссылка должна отобразиться.
3. Когда пользователь не является администратором, /admin ссылка не должна отобразиться.

Использование get()

wrapperсодержит get() метод, который ищет существующие элементы. Он использует querySelector синтаксис.

Мы можем проверить содержимое ссылки профиля, используя get():

test('renders a profile link', () => {
  const wrapper = mount(Nav)

  // Здесь мы неявно предполагаем, что 
  // элемент #profile существует.
  const profileLink = wrapper.get('#profile')

  expect(profileLink.text()).toEqual('My Profile')
})

Если get() не вернет элемент, который совпадает по селектору, он вызовет ошибку, и твои тесты не пройдут. get() вернет DOMWrapper, если элемент найден. DOMWrapper - это небольшая обертка вокруг DOM элемента, который реализует Wrapper API - вот почему мы можем сделать profileLink.text() и получить текст. Ты можешь получить исходный элемент, используя element свойство.

Есть другой тип обертки - VueWrapper - который возвращает getComponent, работающий таким же образом.

Использование find() и exists()

get() работает на предположении, что элементы существуют и выбросит ошибку, если их нет. Этот метод не рекомендуется использовать для проверки существования элемента.

Чтобы так сделать, мы используем find() и exists(). Следующий тест проверяет, что если admin равен false (по умолчанию), ссылка администратора не отображается:

test('does not render an admin link', () => {
  const wrapper = mount(Nav)

  // Использование `wrapper.get` может выбросить ошибку и тест не будет пройден.
  expect(wrapper.find('#admin').exists()).toBe(false)
})

Обратите внимание, мы вызываем exists() на значении, вернувшегося от .find(). find() похож на mount(), также возвращает wrapper. mount() имеет несколько дополнительных методов, потому что он оборачивает Vue компонент, и find() только возвращает обычный DOM элемент, но многие методы общие для них. Некоторые другие методы включая classes(), который получает список классов DOM элемента, и trigger() для имитации действий пользователя. Ты можешь найти список доступных методов здесь.

Использование data

Последний тест - это проверить, что ссылка на администратора отображается, когда admin равен true. Значение false по умолчанию, но мы можем переопределить, используя второй аргумент в mount(), параметры монтирования.

Для data, мы можем использовать опцию с подходящим названием data:

test('renders an admin link', () => {
  const wrapper = mount(Nav, {
    data() {
      return {
        admin: true
      }
    }
  })

  // И снова, при использовании `get()` мы неявно предполагаем, что
  // элемент существует.
  expect(wrapper.get('#admin').text()).toEqual('Admin')
})

Если у тебя есть другие поля в data, не беспокойся - Vue Test Utils объединит их в один. data опция монтирования будет всегда выше по приоритету, чем другие стандартные значения.

Чтобы изучить какие другие опции монтирования существуют, посмотри статью, либо api.

Проверка видимости элемента

Иногда вы хотите только скрыть/показать элемент, но сохраняя его в DOM. Vue предлагает v-show для сценариев как этот. (Ты можешь проверить отличия между v-if и v-show здесь).

Это как компонент с v-show может выглядеть:

const Nav = {
  template: `
    <nav>
      <a id="user" href="/profile">My Profile</a>
      <ul v-show="shouldShowDropdown" id="user-dropdown">
        <!-- dropdown content -->
      </ul>
    </nav>
  `,
  data() {
    return {
      shouldShowDropdown: false
    }
  }
}

В этом сценарии элемент невидим, но всегда отрисован. get() или find() всегда вернут Wrapper – find() с .exists() всегда вернет true, потому что элемент все еще находится в DOM.

Использование isVisible()

isVisible() дает возможность проверить скрытые элементы. В частности, isVisible() проверит, если:

• элемент или его предки имеют display: none, visibility: hidden, opacity :0 стили
• элемент или его предки расположены внутри свернутого <details> тега
• элемент или его предки имеют hidden атрибут

Для этих случаев, isVisible() вернет false.

Сценарий тестирования, используя v-show, может выглядеть так:

test('does not show the user dropdown', () => {
  const wrapper = mount(Nav)

  expect(wrapper.get('#user-dropdown').isVisible()).toBe(false)
})

Заключение

• Используйте find() вместе с exists(), чтобы убедиться в наличии элемента в DOM.
• Используйте get() если ты ожидаешь, что элемент точно будет в DOM.
• data опция монтирования может быть использована для установки значений по умолчанию для компонента.
• Используйте get() с isVisible(), чтобы убедиться в видимости элемента, находящегося в DOM