Skip to content

Traverse a Vue component's VDOM with a jQuery-style API

Notifications You must be signed in to change notification settings

cellengine/vue-traverse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Why?

Currently vue-test-utils must have a DOM to be used, but Vue does not! Contrary to what you might expect, Vue is not very much concerned with the DOM, except in one layer which runs when loaded inside a web browser. Due to this good design, a Vue component can be loaded in Node and you can set the props, call methods, and add listeners in a 100% supported way.

With vue-traverse you can now use a jQuery-like API to test that your template is behaving correctly as state changes, without reliance on jsdom or a web browser. This is thanks to Vue's documented VDOM (which is based on snabbdom).

This mixes well with vue-toolchain which allows you to easily require() a .vue file in mocha (see here).

Usage

const Query = require('vue-traverse');
const Vue = require('vue');
const expect = require('chai').expect;
const ConfirmDialog = require('./ConfirmDialog.vue').default;

const vm = new Vue(ConfirmDialog);
vm.text = 'Are you sure?'; // assuming this component has a 'text' prop...
vm.warn = true; // ... and a 'warn' prop
vm.$mount();

expect(Query(vm).hasClass('confirm-dialog')).to.be.true;
expect(Query(vm).find('.confirm-dialog__text').text()).to.equal('Are you sure?');
expect(Query(vm).find('.confirm-dialog__wrapper').hasClass('confirm-dialog__wrapper--is-warning')).to.be.true

API

These methods should behave just like good old jQuery. You can pretend that you're working on HTMLElements, even though internally you're inspecting the VDOM tree.

Traversal

  • find(selector) - reduce the set of matched elements to those that match selector
  • first() - reduce the set of matched elements to the first one in the set
  • last() - reduce the set of matched elements to the last one in the set

Getters

  • text() - returns the text content of all elements in the set, and children
  • attr(name) - value of the first element's v-bind:name
  • css(name) - value of name in the first element's v-bind:style object
  • prop(name) - value of name in the first element's v-bind.prop:name value
  • hasClass(name) - true if the element has this class via class= or v-bind:class="{}"

About

Traverse a Vue component's VDOM with a jQuery-style API

Resources

Stars

Watchers

Forks

Packages

No packages published