For discussion: Mount API that takes a single object

package.json

@@ -17,7 +17,7 @@
     "babel-runtime": "^6.0.0",
     "dashify": "^0.2.2",
     "matches-selector": "^1.0.0",
-    "vue": "^1.0.21"
+    "vue": "^2.2"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",
@@ -28,6 +28,7 @@
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-es2015-rollup": "^3.0.0",
     "chai": "^3.5.0",
+    "css-loader": "^0.26.2",
     "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
     "karma": "^0.13.15",
@@ -47,8 +48,8 @@
     "rollup-plugin-node-resolve": "^2.0.0",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^8.5.2",
+    "vue-loader": "^11.0.0",
+    "vue-template-compiler": "^2.2.1",
     "webpack": "^1.12.2"
   }
 }

src/MountedComponent.js

@@ -28,7 +28,7 @@ Object.defineProperty(MountedComponent.prototype, 'length', {
  * @param {string} [slot] Optional slot content as a string.
  * @private
  */
-MountedComponent.prototype._init = function initMountedComponent(TestComponent, props = {}, slot = '') {
+MountedComponent.prototype._init = function initMountedComponent(TestComponent, props = {}, slot = '', eventBindings = {}) {
   // Necessary hack to support Vue 1.x: for 2.x, we could just use v-bind
   // https://github.com/vuejs/vue/issues/2114
   const propsString = Object.keys(props)
@@ -41,9 +41,43 @@ MountedComponent.prototype._init = function initMountedComponent(TestComponent,
     data: props
   }).$mount();
 
+  Object.keys(eventBindings).forEach(function(event) {
+    this._vm.$children[0].$on(event, eventBindings[event]);
+  }, this);
+
   this._el = this._vm.$el.children;
 };
 
+MountedComponent.prototype._init2 = function initMountedComponent2(TestComponent, options) {
+  var props = options && options.props || {};
+  var slots = options && options.slots || {};
+  var events = options && options.events || {};
+
+  var scopedSlots = {};
+
+  var Tester = Vue.extend({
+    functional: true,
+    render: function(createElement, context) {
+      return createElement(TestComponent, {
+        scopedSlots: scopedSlots,
+        props: props,
+        on: events
+      });
+
+    }
+  });
+
+  this._vm = new Tester();
+
+  Object.keys(slots).forEach(function(slot) {
+    scopedSlots[slot] = Vue.compile(slots[slot]).render.bind(this._vm);
+  }, this);
+
+  this._vm.$mount();
+
+  this._el = [this._vm.$el];
+};
+
 /**
  * Generate a new MountedComponent in the same VM, but with different elements.
  *

src/index.js

@@ -1,4 +1,5 @@
 import MountedComponent from './MountedComponent';
+import Vue from 'vue';
 
 /**
  * Mount a given component with optional props, returning a MountedComponent
@@ -9,9 +10,15 @@ import MountedComponent from './MountedComponent';
  * @param {string} [slot] Optional slot content as a string.
  * @returns {MountedComponent}
  */
-export function mount(TestComponent, props, slot) {
+export function mount(TestComponent, props, slot, events) {
   const mounted = new MountedComponent();
-  mounted._init(TestComponent, props, slot);
+  mounted._init(TestComponent, props, slot, events);
+  return mounted;
+}
+
+export function mount2(TestComponent, options) {
+  var mounted = new MountedComponent();
+  mounted._init2(TestComponent, options);
   return mounted;
 }
 
@@ -28,3 +35,6 @@ export function createMounter(TestComponent) {
 
 // Passthrough
 export { default as chaiPlugin } from './chai-plugin';
+
+// Shutoff the message from Vue about not being in production mode.
+Vue.config.productionTip = false;

test/fixtures/Events.vue

@@ -13,6 +13,8 @@
     methods: {
       clicked(e) {
         e.target.className = 'clicked';
+
+        this.$emit('anEvent', 'this is a sample event');
       }
     }
   };

test/karma.conf.js

@@ -3,6 +3,11 @@ var webpack = require('webpack');
 var projectRoot = path.resolve(__dirname, '../');
 
 var webpackConfig = {
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.common.js'
+    }
+  },
   module: {
     preLoaders: [
       {

test/specs/mounted/attributes/attr.spec.js

@@ -1,14 +1,14 @@
-import { mount } from '../../../../src/index.js';
+import { mount2 } from '../../../../src/index.js';
 import Tree from '../../../fixtures/Tree.vue';
 
 describe('.attr()', function () {
   it('should return attributes of element', function () {
-    const mounted = mount(Tree);
+    const mounted = mount2(Tree);
     expect(mounted.attr('id')).to.equal('app');
   });
 
   it('should return null when attribute not found', function () {
-    const mounted = mount(Tree);
+    const mounted = mount2(Tree);
     expect(mounted.attr('../../../src')).to.equal(null);
   });
 });

test/specs/mounted/attributes/data.spec.js

@@ -1,14 +1,14 @@
-import { mount } from '../../../../src/index.js';
+import { mount2 } from '../../../../src/index.js';
 import Tree from '../../../fixtures/Tree.vue';
 
 describe('.data()', function () {
   it('should return data attributes of element', function () {
-    const mounted = mount(Tree);
+    const mounted = mount2(Tree);
     expect(mounted.data('foo')).to.equal('bar');
   });
 
   it('should return undefined when data attribute not found', function () {
-    const mounted = mount(Tree);
+    const mounted = mount2(Tree);
     expect(mounted.data('blalba')).to.equal(undefined);
   });
 });

test/specs/mounted/attributes/html.spec.js

@@ -1,9 +1,9 @@
-import { mount } from '../../../../src/index.js';
+import { mount2 } from '../../../../src/index.js';
 import Title from '../../../fixtures/Title.vue';
 
 describe('.html()', function () {
   it('should return HTML of element', function () {
-    const mounted = mount(Title);
+    const mounted = mount2(Title);
 
     expect(mounted.html()).to.equal('<h1>Hello world!</h1>');
   });

test/specs/mounted/attributes/prop.spec.js

@@ -1,14 +1,14 @@
-import { mount } from '../../../../src/index.js';
+import { mount2 } from '../../../../src/index.js';
 import Tree from '../../../fixtures/Tree.vue';
 
 describe('.prop()', function () {
   it('should return true when property found', function () {
-    const mounted = mount(Tree).find('.disabled');
+    const mounted = mount2(Tree).find('.disabled');
     expect(mounted.prop('disabled')).to.equal(true);
   });
 
   it('should return false when property not found', function () {
-    const mounted = mount(Tree).find('.not-disabled');
+    const mounted = mount2(Tree).find('.not-disabled');
     expect(mounted.prop('disabled')).to.equal(false);
   });
 });

test/specs/mounted/attributes/text.spec.js

@@ -1,9 +1,9 @@
-import { mount } from '../../../../src/index.js';
+import { mount2 } from '../../../../src/index.js';
 import Title from '../../../fixtures/Title.vue';
 
 describe('.text()', function () {
   it('should return text of element', function () {
-    const mounted = mount(Title, { title: 'foo bar baz' });
+    const mounted = mount2(Title, { props: { title: 'foo bar baz' } });
 
     expect(mounted.text()).to.equal('foo bar baz');
   });

test/specs/mounted/attributes/value.spec.js

@@ -1,21 +1,21 @@
-import { mount } from '../../../../src/index.js';
+import { mount2 } from '../../../../src/index.js';
 import Input from '../../../fixtures/Input.vue';
 import Title from '../../../fixtures/Title.vue';
 
 describe('.value()', function () {
   it('should return value of input', function () {
-    const mounted = mount(Input);
+    const mounted = mount2(Input);
 
     expect(mounted.value()).to.equal('default value');
   });
 
   it('should return empty string when no value', function () {
-    const mounted = mount(Input, { value: '' });
+    const mounted = mount2(Input, { props: { value: '' } });
     expect(mounted.value()).to.equal('');
   });
 
   it('should return undefined when not an input', function () {
-    const mounted = mount(Title);
+    const mounted = mount2(Title);
     expect(mounted.value()).to.equal(undefined);
   });
 });

test/specs/mounted/events/trigger.spec.js

@@ -25,3 +25,16 @@ describe('.trigger()', function () {
     expect(links._el[4].className).to.equal('clicked');
   });
 });
+
+describe('Emitted events', function () {
+  it('should be testable', function () {
+    var spy = sinon.spy();
+
+    const mounted = mount(Events, {}, '', { anEvent: spy });
+
+    const link = mounted.find('a:first-child');
+
+    link.trigger('click');
+    expect(spy).to.have.been.calledOnce;
+  });
+});