[Refactor] Deprecate dispatch in place of trigger

README.md

@@ -43,7 +43,7 @@ const clickHandler = sinon.stub()
 const wrapper = mount(Foo, {
   propsData: { clickHandler }
 })
-wrapper.find('div .bar')[0].dispatch('click')
+wrapper.find('div .bar')[0].trigger('click')
 expect(clickHandler.called).to.equal(true)
 ```
 

docs/SUMMARY.md

@@ -7,7 +7,6 @@
     * [contains](/api/mount/contains.md)
     * [data](/api/mount/data.md)
     * [destroy](/api/mount/destroy.md)
-    * [dispatch](/api/mount/dispatch.md)  
     * [find](/api/mount/find.md)
     * [hasAttribute](/api/mount/hasAttribute.md)
     * [hasClass](/api/mount/hasClass.md)
@@ -23,6 +22,7 @@
     * [setData](/api/mount/setData.md)
     * [setProps](/api/mount/setProps.md)
     * [text](/api/mount/text.md)
+    * [trigger](/api/mount/trigger.md)  
     * [update](/api/mount/update.md)
     * [vm](/api/mount/vm.md)    
   * [selectors](/api/selectors.md)

docs/api/mount/trigger.md

@@ -0,0 +1,24 @@
+# trigger(eventName)
+
+trigger an event on the wrapper
+
+### Arguments
+
+event (`String`): type of event (e.g. click).
+
+## Example
+
+```js
+import { mount } from 'avoriaz';
+import sinon from 'sinon';
+import Foo from './Foo';
+
+const clickHandler = sinon.stub();
+const wrapper = mount(Foo, {
+  propsData: { clickHandler },
+});
+
+wrapper.trigger('click');
+
+expect(clickHandler.called).to.equal(true)
+```

docs/guides/using-with-vuex.md

@@ -25,7 +25,7 @@ This is the component we want to test. It calls Vuex actions.
       actionInputIfTrue: function actionInputIfTrue(event) {
         const inputValue = event.target.value;
         if (inputValue === 'input') {
-          this.$store.dispatch('actionInput', { inputValue });
+          this.$store.trigger('actionInput', { inputValue });
         }
       },
     },
@@ -71,21 +71,21 @@ describe('Actions.vue', () => {
     const wrapper = mount(Actions, { store });
     const input = wrapper.find('input')[0];
     input.element.value = 'input';
-    input.dispatch('input');
+    input.trigger('input');
     expect(actions.actionInput.calledOnce).to.equal(true);
   });
 
   it('does not call store action actionInput when input value is not input and an input even is fired', () => {
     const wrapper = mount(Actions, { store });
     const input = wrapper.find('input')[0];
     input.element.value = 'not input';
-    input.dispatch('input');
+    input.trigger('input');
     expect(actions.actionInput.calledOnce).to.equal(false);
   });
 
   it('calls store action actionClick when button is clicked', () => {
     const wrapper = mount(Actions, { store });
-    wrapper.find('button')[0].dispatch('click');
+    wrapper.find('button')[0].trigger('click');
     expect(actions.actionClick.calledOnce).to.equal(true);
   });
 });
@@ -248,7 +248,7 @@ describe('Modules.vue', () => {
   it('calls store action moduleActionClick when button is clicked', () => {
     const wrapper = mount(Modules, { store });
     const button = wrapper.find('button')[0];
-    button.dispatch('click');
+    button.trigger('click');
     expect(actions.moduleActionClick.calledOnce).to.equal(true);
   });
 

src/Wrapper.js

@@ -90,6 +90,8 @@ export default class Wrapper {
       throw new Error('wrapper.dispatch() must be passed a string');
     }
 
+    console.warn('wrapper.dispatch() is deprecated and will be removed from future versions. Use wrapper.trigger() instead - https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/trigger.html'); // eslint-disable-line no-console
+
     const modifiers = {
       enter: 13,
       tab: 9,
@@ -363,7 +365,7 @@ export default class Wrapper {
       throw new Error('wrapper.simulate() must be passed a string');
     }
 
-    console.warn('wrapper.simulate() is deprecated and will be removed from future versions. Use wrapper.dispatch() instead - https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/dispatch.html'); // eslint-disable-line no-console
+    console.warn('wrapper.simulate() is deprecated and will be removed from future versions. Use wrapper.trigger() instead - https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/trigger.html'); // eslint-disable-line no-console
 
     const modifiers = {
       enter: 13,
@@ -408,4 +410,44 @@ export default class Wrapper {
   text() {
     return this.element.textContent;
   }
+
+    /**
+     * Triggers a DOM event on wrapper
+     *
+     * @param {String} type - type of event
+     * @returns {Boolean}
+     */
+  trigger(type) {
+    if (typeof type !== 'string') {
+      throw new Error('wrapper.trigger() must be passed a string');
+    }
+
+    const modifiers = {
+      enter: 13,
+      tab: 9,
+      delete: 46,
+      esc: 27,
+      space: 32,
+      up: 38,
+      down: 40,
+      left: 37,
+      right: 39,
+    };
+
+    const event = type.split('.');
+
+    const eventObject = new window.Event(event[0]);
+
+    if (event.length === 2) {
+      eventObject.keyCode = modifiers[event[1]];
+    }
+
+    if (this.isVueComponent) {
+      this.vm.$emit(type);
+    }
+
+    this.element.dispatchEvent(eventObject);
+
+    this.update();
+  }
 }

test/unit/specs/wrapper/dispatch.spec.js

@@ -5,6 +5,14 @@ import KeydownComponent from '../../../resources/components/event-components/Key
 import KeydownWithModifier from '../../../resources/components/event-components/KeydownWithModifierComponent.vue';
 
 describe('dispatch', () => {
+  beforeEach(() => {
+    sinon.spy(console, 'warn');
+  });
+
+  afterEach(() => {
+    console.warn.restore(); // eslint-disable-line no-console
+  });
+
   it('causes click handler to fire when wrapper.dispatch("click") is called on a child node', () => {
     const childClickHandler = sinon.stub();
     const wrapper = mount(ClickComponent, {
@@ -71,6 +79,12 @@ describe('dispatch', () => {
     expect(wrapper.hasClass('active')).to.equal(true);
   });
 
+  it('warns that dispatch is deprecated and dispatch should be used instead', () => {
+    mount(ClickToggleComponent).dispatch('click');
+    const message = 'wrapper.dispatch() is deprecated and will be removed from future versions. Use wrapper.trigger() instead - https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/trigger.html';
+    expect(console.warn).to.be.calledWith(message); // eslint-disable-line no-console
+  });
+
   it('throws an error if type is not a string', () => {
     const wrapper = mount(ClickToggleComponent);
     const invalidSelectors = [

test/unit/specs/wrapper/simulate.spec.js

@@ -5,6 +5,13 @@ import KeydownComponent from '../../../resources/components/event-components/Key
 import KeydownWithModifier from '../../../resources/components/event-components/KeydownWithModifierComponent.vue';
 
 describe('simulate', () => {
+  beforeEach(() => {
+    sinon.spy(console, 'warn');
+  });
+
+  afterEach(() => {
+    console.warn.restore(); // eslint-disable-line no-console
+  });
   it('causes click handler to fire when wrapper.simulate("click") is called on a child node', () => {
     const childClickHandler = sinon.stub();
     const wrapper = mount(ClickComponent, {
@@ -67,11 +74,9 @@ describe('simulate', () => {
   });
 
   it('warns that simulate is deprecated and dispatch should be used instead', () => {
-    sinon.spy(console, 'warn');
     mount(ClickToggleComponent).simulate('click');
-    const message = 'wrapper.simulate() is deprecated and will be removed from future versions. Use wrapper.dispatch() instead - https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/dispatch.html';
+    const message = 'wrapper.simulate() is deprecated and will be removed from future versions. Use wrapper.trigger() instead - https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/trigger.html';
     expect(console.warn).to.be.calledWith(message); // eslint-disable-line no-console
-    console.warn.restore(); // eslint-disable-line no-console
   });
 
   it('throws an error if type is not a string', () => {

test/unit/specs/wrapper/trigger.spec.js

@@ -0,0 +1,84 @@
+import mount from '../../../../src/mount';
+import ClickComponent from '../../../resources/components/event-components/ClickComponent.vue';
+import ClickToggleComponent from '../../../resources/components/event-components/ClickToggleComponent.vue';
+import KeydownComponent from '../../../resources/components/event-components/KeydownComponent.vue';
+import KeydownWithModifier from '../../../resources/components/event-components/KeydownWithModifierComponent.vue';
+
+describe('trigger', () => {
+  it('causes click handler to fire when wrapper.trigger("click") is called on a child node', () => {
+    const childClickHandler = sinon.stub();
+    const wrapper = mount(ClickComponent, {
+      propsData: { childClickHandler, parentClickHandler: () => {} },
+    });
+    const button = wrapper.find('#button')[0];
+    button.trigger('click');
+
+    expect(childClickHandler).to.be.calledOnce;
+  });
+
+  it('causes click handler to fire when wrapper.trigger("click") is fired on root node', () => {
+    const parentClickHandler = sinon.stub();
+    const wrapper = mount(ClickComponent, {
+      propsData: { childClickHandler: () => {}, parentClickHandler },
+    });
+    wrapper.trigger('click');
+
+    expect(parentClickHandler).to.be.calledOnce;
+  });
+
+  it('causes click handler to fire when wrapper.trigger("click") is fired on root node', () => {
+    const parentClickHandler = sinon.stub();
+    const TestComponent = {
+      render: h => h(ClickComponent, {
+        props: {
+          childClickHandler: () => {}, parentClickHandler,
+        },
+      }),
+    };
+    const wrapper = mount(TestComponent);
+    wrapper.find(ClickComponent)[0].trigger('click');
+
+    expect(parentClickHandler).to.be.calledOnce;
+  });
+
+  it('causes keydown handler to fire when wrapper.trigger("keydown") is fired on root node', () => {
+    const keydownHandler = sinon.stub();
+    const wrapper = mount(KeydownComponent, {
+      propsData: { keydownHandler },
+    });
+    wrapper.trigger('keydown');
+
+    expect(keydownHandler).to.be.calledOnce;
+  });
+
+  it('causes keydown handler to fire when wrapper.trigger("keydown.enter") is fired on root node', () => {
+    const keydownHandler = sinon.stub();
+    const wrapper = mount(KeydownWithModifier, {
+      propsData: { keydownHandler },
+    });
+    wrapper.trigger('keydown.enter');
+
+    expect(keydownHandler).to.be.calledOnce;
+  });
+
+  it('causes DOM to update after clickHandler method that changes components data is called', () => {
+    const wrapper = mount(ClickToggleComponent);
+
+    expect(wrapper.hasClass('active')).to.equal(false);
+
+    wrapper.trigger('click');
+
+    expect(wrapper.hasClass('active')).to.equal(true);
+  });
+
+  it('throws an error if type is not a string', () => {
+    const wrapper = mount(ClickToggleComponent);
+    const invalidSelectors = [
+      undefined, null, NaN, 0, 2, true, false, () => {}, {}, [],
+    ];
+    invalidSelectors.forEach((invalidSelector) => {
+      const message = 'wrapper.trigger() must be passed a string';
+      expect(() => wrapper.trigger(invalidSelector)).to.throw(Error, message);
+    });
+  });
+});