comparison.md

mounting

vanilla

const Component = Vue.extend(c);
const vm = new Component();

avoriaz

const vm = avoriaz.mount(c);

vue-test

const vm = vueTest.mount(c);

vue-unit

t.beforeEach(vueUnit.beforeEachHooks);
vueUnit.mount(c);
t.afterEach(vueUnit.afterEachHooks);

vuenit

const vm = vuenit.mount(c);

computed properties

vanilla

t.is(vm.foo, 'foo');

avoriaz

t.is(vm.computed().foo(), 'foo');

vue-test

???

vue-unit

t.is(vm.foo, 'foo');

vuenit

t.is(vm.foo, 'foo');

methods

vanilla

t.is(vm.foo(), 'foo');

avoriaz

t.is(vm.methods().foo(), 'foo');

vue-test

???

vue-unit

vanilla

t.is(vm.foo(), 'foo');

vuenit

vanilla

t.is(vm.foo(), 'foo');

access data

vanilla

t.is(vm.foo, 'foo');

avoriaz

t.is(vm.data().foo, 'foo');

vue-test

???

vue-unit

t.is(vm.foo, 'foo');

vuenit

t.is(vm.foo, 'foo');

update data

vanilla

vm.foo = 'bah';
t.is(vm.foo, 'bah');

avoriaz

vm.setData({ foo : 'bah' });
t.is(vm.data().foo, 'bah');

vue-test

???

vue-unit

vm.foo = 'bah';
t.is(vm.foo, 'bah');

vuenit

vm.foo = 'bah';
t.is(vm.foo, 'bah');

set props

vanilla

const Component = Vue.extend(c);
const vm = new Component({
  propsData : {
    foo : 'bah'
  }
});

avoriaz

const vm = avoriaz.mount(c, {
  propsData : {
    foo : 'bah'
  }
});

vue-test

???

vue-unit

const vm = vueUnit.mount(c, {
  props : {
    foo : 'bah'
  }
});

vuenit

const vm = vuenit.component(c, {
  props : {
    foo : 'bah'
  }
});

access props

vanilla

t.is(vm.foo, 'foo');

avoriaz

t.is(vm.propsData().foo, 'foo');

vue-test

???

vue-unit

t.is(vm.foo, 'foo');

vuenit

t.is(vm.foo, 'foo');

update props

vanilla

???

avoriaz

???

vue-test

???

vue-unit

???

vuenit

vm.propsData.foo = 'bah';
await vm.$nextTick();
t.is(vm.foo, 'bah');

slots

vanilla

???

avoriaz

???

vue-test

???

vue-unit

const vm = vueUnit.component(c, {
  slots : {
    header : '<h1>Header</h1>'
    default : '<div>Body</div>',
    footer : '<h4>Footer</h4>'
  }
});

vuenit

const vm = vuenit.component(c, {
  slots : {
    header : '<h1>Header</h1>'
    default : '<div>Body</div>',
    footer : '<h4>Footer</h4>'
  }
});

component name

vanilla

t.is(vm.$options.name, 'Foo');

avoriaz

t.is(vm.name(), 'Foo');

vue-test

t.is(vm.$options.name, 'Foo');

vue-unit

t.is(vm.$options.name, 'Foo');

vuenit

t.is(vm.$name, 'Foo');

emit events

vanilla

vm.$emit('click', {});

avoriaz

vm.simulate('click'); // cannot attach a payload...

vue-test

vm.trigger('click');

vue-unit

vm.$emit('click', {});

vuenit

vm.$emit('click', {});

emit dom events

vanilla

vm.$el.querySelector('button').dispatchEvent(new Event('click'));

avoriaz

vm.find('button')[0].simulate('click');

vue-test

vm.trigger('click');

vue-unit

vm.$el.querySelector('button').dispatchEvent(new Event('click'));

vuenit

vm.$find('button').$trigger('click');

listen to events

vanilla

vm.$on('customEvent', spy);

avoriaz

???

vue-test

???

vue-unit

vm.$on('customEvent', spy);

vuenit

vm.$on('customEvent', spy);
// or
vuenit.component(c, {
  on : {
    customEvent : spy
  }
});

find child component

vanilla

???

avoriaz

vm.find(MyComponent);

vue-test

???

vue-unit

???

vuenit

vm.$find(MyComponent);
vm.$find('myComponent');

find dom element

vanilla

vm.$el.querySelector('.myClass');

avoriaz

vm.find('.myClass');

vue-test

vm.find('.myClass');

vue-unit

vanilla

vm.$el.querySelector('.myClass');

vuenit

vm.$find('.myClass');

contains component

vanilla

???

avoriaz

t.true(vm.contains(Component));

vue-test

???

vue-unit

???

vuenit

t.true(vm.$contains(Component));

contains dom element

vanilla

t.truthy(vm.$el.querySelector('.myClass'));

avoriaz

t.true(vm.contains('.myClass'));

vue-test

t.true(vm.contains('.myClass'));

vue-unit

t.truthy(vm.$el.querySelector('.myClass'));

vuenit

t.true(vm.$contains('.myClass'));

check component attribute

vanilla

t.is(vm.$el.getAttribute('id'), 'foo');

avoriaz

t.true(vm.hasAttribute('id', 'foo'));

vue-test

???

vue-unit

t.is(vm.$el.getAttribute('id'), 'foo');

vuenit

t.is(vm.$el.getAttribute('id'), 'foo');

check dom attribute

vanilla

t.is(vm.$el.querySelector('.myClass').getAttribute('id'), 'foo');

avoriaz

t.true(vm.find('.myClass')[0].hasAttribute('id', 'foo'));

vue-test

t.true(vm.find('.myClass')[0].getAttribute('id'), 'foo');

vue-unit

t.is(vm.$el.querySelector('.myClass').getAttribute('id'), 'foo');

vuenit

t.is(vm.$find('.myClass').getAttribute('id'), 'foo');

check component class

vanilla

t.true(vm.$el.classList.contains('myClass'));

avoriaz

t.true(vm.hasClass('myClass'));

vue-test

t.true(vm.hasClass('myClass'));

vue-unit

t.true(vm.$el.classList.contains('myClass'));

vuenit

t.true(vm.$el.classList.contains('myClass'));

check dom class

vanilla

t.true(vm.$el.querySelector('.myClass').classList.contains('myClass'));

### avoriaz

t.true(vm.find('.myClass')[0].hasClass('myClass')); // possibly a redundant test!

vue-test

???

vue-unit

t.true(vm.$el.querySelector('.myClass').classList.contains('myClass'));

vuenit

t.true(vm.$find('.myClass').classList.contains('myClass'));

check component style

vanilla

t.is(vm.$el.style.width, '100%');

avoriaz

t.true(vm.hasStyle('width', '100%'));

vue-test

???

vue-unit

t.is(vm.$el.style.width, '100%');

vuenit

t.is(vm.$el.style.width, '100%');

check dom style

vanilla

t.is(vm.$el.querySelector('.myClass').style.width, '100%');

### avoriaz

t.true(vm.find('.myClass').hasStyle('width', '100%'));

vue-test

???

vue-unit

vanilla

t.is(vm.$el.querySelector('.myClass').style.width, '100%');

vuenit

t.is(vm.$find('.myClass').style.width, '100%');

check html

vanilla

t.is(vm.$el.outerHTML, '<div/>');

avoriaz

t.is(vm.html(), '<div/>');

vue-test

t.is(vm.html(), '<div/>');

vue-unit

t.is(vm.$el.outerHTML, '<div/>');

vuenit

t.is(vm.$html, '<div/>');

check component matches selector

vanilla

t.is(vm.$el.tagName, 'DIV');

avoriaz

t.true(vm.is('div'));

vue-test

t.true(vm.matches('div'));

vue-unit

t.is(vm.$el.tagName, 'DIV');

vuenit

t.is(vm.$el.tagName, 'DIV');

check component is empty

vanilla

t.is(vm.$el.children.length, 0);

avoriaz

t.true(vm.isEmpty());

vue-test

t.true(vm.isEmpty());

vue-unit

t.is(vm.$el.children.length, 0);

vuenit

t.is(vm.$el.children.length, 0);

inject dependencies

vanilla

???

avoriaz

???

vue-test

???

vue-unit

???

vuenit

const vm = vuenit.component(c, {
  inject : { $store, $route, service }
});

mock components

vanilla

???

avoriaz

???

vue-test

???

vuenit

var vm = vuenit.component(c, {
  components : {
    myComponent : '<span>mock content</span>'
  }
});

shallow render

vanilla

???

avoriaz

???

vue-test

???

vuenit

var vm = vuenit.shallow(c);