Разное

Html wrapper: Класс wrapper в html зачем он нужен? — Хабр Q&A

17.03.1989

Содержание

Wrapper | Vue Test Utils

Vue Test Utils — это API основанное на использовании обёрток (wrapper).

Wrapper — это объект, который содержит примонтированный компонент или VNode и методы для тестирования компонента или VNnode.

Свойства

vm

Component (только для чтения): Это экземпляр Vue. Вы можете получить доступ ко всем методам и свойствам экземпляра через wrapper.vm. Это существует только в обёртке компонента Vue или обёртке компонента Vue, связанной с HTMLElement.

element

HTMLElement (только для чтения): Корневой DOM-узел обёртки

options
options.attachedToDocument

Boolean (только для чтения): true, если компонент прикреплен к DOM при монтировании.

Методы

attributes()

Возвращает объект атрибутов DOM-узла Wrapper. Если аргумент key присутствует, метод вернёт значение атрибута, заданного через key.

classes()

Возвращает классы DOM-узла Wrapper.

Возвращает массив имён классов. Либо true/false если передано имя класса.

contains(selector)

Проверка, что Wrapper содержит элемент или компонент, соответствующий селектору.

  • См. также: Селекторы

destroy()

Уничтожает экземпляр компонента Vue.

  • Пример:

Если опция attachToDocument была true при монтировании, DOM элементы компонента будут также удалены из документа.

Для функциональных компонентов, destroy только удаляет отрисованные элементы DOM из документа.

emitted()

Возвращает объект, содержащий вызванные пользовательские события в Wrapper vm.

Вы также можете написать это так:

Когда метод .emitted() вызывается, каждый раз возвращается тот же объект, а не новый, поэтому объект будет обновляться при генерации новых событий:

emittedByOrder()

Возвращает массив, содержащий вызванные пользовательские события в Wrapper vm.

exists()

Проверка, что Wrapper или WrapperArray существует.

Возвращает false, если вызывается на пустом Wrapper или WrapperArray.

find(selector)

Возвращает Wrapper первого DOM-узла или компонента Vue, соответствующего селектору.

Используйте любой корректный селектор.

findAll(selector)

Возвращает WrapperArray.

Используйте любой корректный селектор.

html()

Возвращает HTML-код DOM-узла Wrapperа в виде строки.

is(selector)

Проверяет, что DOM-элемент Wrapper или vm соответствуют селектору.

isEmpty()

Проверяет, что Wrapper не содержит дочерних узлов.

isVisible()

Проверяет, что Wrapper виден.

Возвращает false, если какой-либо предок имеет стили display: none, visibility: hidden, opacity: 0, аттрибут hidden или находится в свёрнутом элементе <details>.

Это можно использовать для проверки, что компонент скрыт с помощью v-show.

isVueInstance()

Проверка, что Wrapper является экземпляром Vue.

name()

Возвращает имя компонента, если Wrapper содержит экземпляр Vue, или имя тега DOM-узла Wrapper, если Wrapper не содержит экземпляр Vue.

props()

Возвращает объект с входными параметрами vm для Wrapper. Если key передан, метод вернёт значения свойства с именем key.

Обратите внимание что Wrapper должен содержать экземпляр Vue.

setChecked(checked)

Устанавливает значение отмеченным элемент ввода типа чекбокса или радиокнопки и обновляет связанные данные с v-model.

  • Аргументы:

    • {Boolean} checked (по умолчанию: true)

  • Примеры:

  • Примечание:

Когда вы пытаетесь установить значение в состояние через v-model с помощью radioInput. element.checked = true; radioInput.trigger('input'), v-model не вызывается. v-model генерируется событием change.

checkboxInput.setChecked(checked) — псевдоним для следующего кода.

setData(data)

Устанавливает данные Wrapper vm.

setData работает путём рекурсивного вызова Vue.set.

Обратите внимание, что Wrapper должен содержать экземпляр Vue.

setData работает путём слияния существующих свойств, за исключением массивов, которые перезаписываются.

  • Принимает:

    • {Object} data

  • Пример:

setMethods(methods)

Устанавливает методы Wrapper vm и выполняет принудительное обновление.

Обратите внимание, что Wrapper должен содержать экземпляр Vue.

  • Принимает:

    • {Object} methods

  • Пример:

setProps(props)

  • Принимает:

    • {Object} props

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

Устанавливает входные параметры Wrapper vm и выполняет принудительное обновление.

Обратите внимание!

setProps может быть вызван только на wrapper верхнего уровня, который был создан с помощью mount или shallowMount

Вы также можете передать объект propsData, который инициализирует экземпляр Vue с переданными значениями.

setSelected()

Выбирает элемент пункта списка и обновляет связанные данные v-model.

  • Пример:
  • Примечание:

Когда вы пытаетесь установить значение в состояние через v-model с помощью option.element.selected = true; parentSelect.trigger('input'), v-model не вызывается. v-model генерируется событием change.

option.setSelected() — псевдоним для следующего кода.

setValue(value)

Устанавливает значение элемента поле ввода текста или выпадающего списка и обновляет связанные данные v-model.

  • Аргументы:

    • {any} value

  • Пример:

  • Примечание:

    • textInput.setValue(value) — псевдоним следующего кода.
    • select.setValue(value) — псевдоним следующего кода.

text()

Возвращает текстовое содержимое Wrapper.

trigger(eventType [, options ])

Вызывает событие на Wrapper DOM-узле.

В trigger также можно передать опциональный объект options. Свойства объекта options будут добавлены к Event.

  • Принимает:

    • {string} eventName обязательный
    • {Object} options опциональный

  • Пример:

  • Установка target для event:

Под капотом trigger создаёт объект Event и вызывает событие на элементе Wrapper.

Невозможно изменить значение target объекта Event, поэтому вы не можете установить target в объекте опций.

Чтобы добавить атрибут к target, вам нужно установить значение элемента Wrapper перед вызовом trigger. Вы можете сделать это с помощью свойства element.

Документация к системе

Документация к системе
  • Рекламодатели
  • Кампании Рекламодателя
  • Формулы
  • HTML код и Цели