mount-api.md

The mount() function - API documentation

• The mount() function
• Traversal utility functions (.find(), .children(), .parent())
• Attribute utility functions (.html(), .text(), .value(), .data(), .attr(), .prop())
• Iteration utility functions (.each(), .map(), .some(), .every())
• Subset utility functions (.get(), .eq(), .filter())
• Testing utility functions (.contains(), .hasClass(), .matches(), .isEmpty(), .isFragment())
• Event utility functions (.trigger())

The mount() function

The mount() function takes two arguments, a Vue component, and some optional properties, and returns a wrapped mounted component with some useful utility functions.

const mountedComponent = mount(VueComponent, optionalProps);

Traversal utility functions

Three traversal functions allow you to navigate around the DOM inside your component.

They all return null if nothing is found.

.find(selector)

Returns all the children of a component matching a given selector:

const anchorsInComponent = mountedComponent.find('a');

.children(selector)

Gets all the direct children of a component, optionally matching a given selector:

const componentChildren = mountedComponent.children();
const componentChildrenAnchors = mountedComponent.children('a');

.parent(selector)

Returns either the immediate parent of a component, or if specified the first parent matching an optional selector.

const componentParent = mountedComponent.parent();
const componentParentForm = mountedComponent.parent('form');

Attribute utility functions

These functions allow you to get data from an element, such as the contained HTML or the value of an attribute.

.html()

Return the HTML of a component.

const componentHtml = mountedComponent.html();

.text()

Return the text of a component.

const componentHtml = mountedComponent.text();

.value()

Return the value of a component (useful for input elements).

const componentValue = mountedComponent.value();

.data()

Return the value of a data attribute of a component.

const componentDataTimeout = mountedComponent.data('timeout');

.attr()

Return the value of an attribute of a component.

const componentId = mountedComponent.attr('id');

.prop()

Return the value of a property of a component. Will be true or false.

const componentChecked = mountedComponent.prop('checked');

Iteration utility functions

These functions allow you to iterate through components with multiple elements, running a callback on each one. They're basically the same as JavaScript's Array iteration functions with the same names.

this is the current element as a mounted component.

.each()

Equivalent to [].forEach(). Iterate through elements, running a callback on each one.

mountedComponent.find('p').each(function (mountedParagraph, index) {
  this.html(); // this is a mounted component, too!
});

.map()

Equivalent to [].map(). Iterate through elements, running a callback on each one and returning an array of the callback return values.

const paragraphTexts = mountedComponent.find('p').map(function () {
  return this.text();
});

.some()

Equivalent to [].some(). Iterate through elements, testing each element and returning true if the callback function returns true for any of the elements.

const anyEmpty = mountedComponent.find('p').some(function () {
  return this.isEmpty();
});

.every()

Equivalent to [].every(). Iterate through elements, testing each element and returning true if the callback function returns true for every element.

const allEmpty = mountedComponent.find('p').every(function () {
  return this.isEmpty();
});

Subset utility functions

The subset utility functions exist to help you get a subset of the elements of a component: be that just one element, or a number of them.

.get(i)

Gets either the elements contained within a component as an Array, or an individual element if an index is specified.

const paragraphElements = mountedComponent.find('p').get();
const paragraphElement = mountedComponent.find('p').get(2);

.eq(i)

Returns the element in a component at a given index as a mounted component.

const mountedParagraph = mountedComponent.find('p').eq(2);

.filter(predicate)

Returns a subset of the elements within a component according to a predicate function. The predicate function will be passed the elements and must return true or false. Returns a mounted component, not an array of elements.

const emptyParagraphs = mountedComponent.find('p').filter(function () {
  return this.isEmpty();
});

Testing utility functions

These functions return true or false depending on whether something is true or not.

.contains(selector)

Returns true if a component contains an element matching a given selector.

const containsParagraph = mountedComponent.contains('p');

.hasClass(className)

Returns true if a component has a given class name.

const isRed = mountedComponent.hasClass('component--red');

.matches(selector)

Returns true if the component itself matches a given selector.

const isParagraph = mountedComponent.is('p');

.isEmpty()

Returns true if a component has no children.

const isEmpty = mountedComponent.isEmpty();

Event utility functions

There is only one event utility function, .trigger().

.trigger(event)

Triggers an event on an element. Accepts either an instance of the Event class, or a string containing the event name to fire.

mountedComponent.trigger('click');
mountedComponent.trigger(new Event('some-event'));