Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://vue-test-utils.vuejs.org/api/wrapper/ below:

Website Navigation

• GitHub

Wrapper | Vue Test Utils

Vue Test Utils is a wrapper based API.

A Wrapper is an object that contains a mounted component or vnode and methods to test the component or vnode.

Component (read-only): This is the Vue instance. You can access all the instance methods and properties of a vm with wrapper.vm. This only exists on Vue component wrapper or HTMLElement binding Vue component wrapper.

HTMLElement (read-only): the root DOM node of the wrapper

Boolean (read-only): true if component is attached to document when rendered.

Selector: the selector that was used by find() or findAll() to create this wrapper

Returns Wrapper DOM node attribute object. If key is provided, the value for the key will be returned.

• Arguments:

  • {string} key optional

• Returns: {[attribute: string]: any} | string

• Example:

Return Wrapper DOM node classes.

Returns an Array of class names or a boolean if a class name is provided.

• Arguments:

  • {string} className optional

• Returns: Array<{string}> | boolean

• Example:

Deprecation warning

Using contains is deprecated and will be removed in future releases. Use find for DOM nodes (using querySelector syntax), findComponent for components, or wrapper.get instead.

Assert Wrapper contains an element or component matching selector.

• Arguments:

  • {string|Component} selector

• Returns: {boolean}

• Example:

• See also: selectors

Destroys a Vue component instance.

• Example:

if either the attachTo or attachToDocument option caused the component to mount to the document, the component DOM elements will also be removed from the document.

For functional components, destroy only removes the rendered DOM elements from the document.

Return an object containing custom events emitted by the Wrapper vm.

• Returns: { [name: string]: Array<Array<any>> }

• Example:

You can also write the above as follows:

The .emitted() method returns the same object every time it is called, not a new one, and so the object will update when new events are fired:

Deprecation warning

emittedByOrder is deprecated and will be removed in future releases.

Use wrapper.emitted instead.

Return an Array containing custom events emitted by the Wrapper vm.

• Returns: Array<{ name: string, args: Array<any> }>

• Example:

Assert Wrapper exists.

Returns false if called on a Wrapper which does not exist.

• Returns: {boolean}

• Example:

Deprecation warning

Using find to search for a Component is deprecated and will be removed. Use findComponent instead. The find method will continue to work for finding elements using any valid selector.

Returns Wrapper of first DOM node or Vue component matching selector.

Use any valid DOM selector (uses querySelector syntax).

• Arguments:

  • {string} selector

• Returns: {Wrapper}

• Example:

• Note:

  • You may chain find calls together:

See also: get.

Deprecation warning

Using findAll to search for Components is deprecated and will be removed. Use findAllComponents instead. The findAll method will continue to work for finding elements using any valid selector.

Returns a WrapperArray.

Use any valid selector.

• Arguments:

  • {string|Component} selector

• Returns: {WrapperArray}

• Example:

Returns Wrapper of first matching Vue component.

• Arguments:

  • {Component|ref|string} selector

• Returns: {Wrapper}

• Example:

Usage with CSS selectors

Using findComponent with a CSS selector might have confusing behavior

Consider this example:

The reason for such behavior is that RootComponent and ChildComponent are sharing the same DOM node and only the first matching component is returned for each unique DOM node

Returns a WrapperArray of all matching Vue components.

• Arguments:

  • selector Use any valid selector

• Returns: {WrapperArray}

• Example:

Usage with CSS selectors

Using findAllComponents with CSS selector is subject to same limitations as findComponent

Returns HTML of Wrapper DOM node as a string.

• Returns: {string}

• Example:

Deprecation warning

Using get to search for a Component is deprecated and will be removed. Use getComponent instead.

Works just like find but will throw an error if nothing matching the given selector is found. You should use find when searching for an element that may not exist. You should use this method when getting an element that should exist and it will provide a nice error message if that is not the case.

Deprecation warning

Using is to assert that wrapper matches DOM selector is deprecated and will be removed.

For such use cases consider a custom matcher such as those provided in jest-dom . or for DOM element type assertion use native Element.tagName instead.

To keep these tests, a valid replacement for:

• is('DOM_SELECTOR') is an assertion of wrapper.element.tagName.
• is('ATTR_NAME') is a truthy assertion of wrapper.attributes('ATTR_NAME').
• is('CLASS_NAME') is a truthy assertion of wrapper.classes('CLASS_NAME').

Assertion against component definition is not deprecated

When using with findComponent, access the DOM element with findComponent(Comp).element

Assert Wrapper DOM node or vm matches selector.

• Arguments:

  • {string|Component} selector

• Returns: {boolean}

• Example:

Deprecation warning

isEmpty is deprecated and will be removed in future releases.

Consider a custom matcher such as those provided in jest-dom .

When using with findComponent, access the DOM element with findComponent(Comp).element

Assert Wrapper does not contain child node.

• Returns: {boolean}

• Example:

Assert Wrapper is visible.

Returns false if an ancestor element has display: none, visibility: hidden, opacity :0 style, is located inside collapsed <details> tag or has hidden attribute.

This can be used to assert that a component is hidden by v-show.

• Returns: {boolean}

• Example:

Deprecation warning

isVueInstance is deprecated and will be removed in future releases.

Tests relying on the isVueInstance assertion provide little to no value. We suggest replacing them with purposeful assertions.

To keep these tests, a valid replacement for isVueInstance() is a truthy assertion of wrapper.find(...).vm.

Assert Wrapper is Vue instance.

• Returns: {boolean}

• Example:

Returns component name if Wrapper contains a Vue instance, or the tag name of Wrapper DOM node if Wrapper does not contain a Vue instance.

• Returns: {string}

• Example:

Return Wrapper vm props object. If key is provided, the value for the key will be returned.

Note the Wrapper must contain a Vue instance.

• Arguments:

  • {string} key optional

• Returns: {[prop: string]: any} | any

• Example:

Sets checked value for input element of type checkbox or radio and updates v-model bound data.

• Arguments:

  • {Boolean} checked (default: true)

• Example:

• Note:

When you try to set the value to state via v-model by radioInput.element.checked = true; radioInput.trigger('input'), v-model is not triggered. v-model is triggered by change event.

checkboxInput.setChecked(checked) is an alias of the following code.

Sets Wrapper vm data.

setData works by recursively calling Vue.set.

Note the Wrapper must contain a Vue instance.

• Arguments:

  • {Object} data

• Example:

Deprecation warning

setMethods is deprecated and will be removed in future releases.

There's no clear path to replace setMethods, because it really depends on your previous usage. It easily leads to flaky tests that rely on implementation details, which is discouraged .

We suggest rethinking those tests.

To stub a complex method extract it from the component and test it in isolation. To assert that a method is called, use your test runner to spy on it.

Sets Wrapper vm methods and forces update.

Note the Wrapper must contain a Vue instance.

• Arguments:

  • {Object} methods

• Example:

• Arguments:

  • {Object} props

• Usage:

Sets Wrapper vm props and forces update.

WARNING

setProps should be called only for top-level component, mounted by mount or shallowMount

You can also pass a propsData object, which will initialize the Vue instance with passed values.

Selects an option element and updates v-model bound data.

• Example:

• Note:

When you try to set the value to state via v-model by option.element.selected = true; parentSelect.trigger('input'), v-model is not triggered. v-model is triggered by change event.

option.setSelected() is an alias of the following code.

Sets value of a text-control input or select element and updates v-model bound data.

• Arguments:

  • {any} value

• Example:

• Note:

  • textInput.setValue(value) is an alias of the following code.
  • select.setValue(value) is an alias of the following code.

Returns text content of Wrapper.

• Returns: {string}

• Example:

Triggers an event asynchronously on the Wrapper DOM node.

trigger takes an optional options object. The properties in the options object are added to the Event. trigger returns a Promise, which when resolved, guarantees the component is updated. trigger only works with native DOM events. To emit a custom event, use wrapper.vm.$emit('myCustomEvent')

• Arguments:

  • {string} eventType required
  • {Object} options optional

• Example:

TIP

When using trigger('focus') with jsdom v16.4.0 and above you must use the attachTo option when mounting the component. This is because a bug fix in jsdom v16.4.0 changed el.focus() to do nothing on elements that are disconnected from the DOM.

• Setting the event target:

Under the hood, trigger creates an Event object and dispatches the event on the Wrapper element.

It's not possible to edit the target value of an Event object, so you can't set target in the options object.

To add an attribute to the target, you need to set the value of the Wrapper element before calling trigger. You can do this with the element property.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4