Merge pull request #32 from Gaurav0/mouseenter_deprecation

Fix deprecation for mouseenter / leave events

Author: btecu

addon/components/x-tree-node.js

@@ -31,15 +31,28 @@ export default Component.extend({
     }
   },
 
-
   contextMenu(event) {
     if (this.onContextMenu) {
       event.preventDefault();
       this.onContextMenu(this.model);
     }
   },
 
-  mouseEnter() {
+  didInsertElement() {
+    this._super(...arguments);
+    this._handleMouseEnter = this.handleMouseEnter.bind(this);
+    this._handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.element.addEventListener('mouseenter', this._handleMouseEnter);
+    this.element.addEventListener('mouseleave', this._handleMouseLeave);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this.element.removeEventListener('mouseenter', this._handleMouseEnter);
+    this.element.removeEventListener('mouseleave', this._handleMouseLeave);
+  },
+
+  handleMouseEnter() {
     if (!get(this, 'model.isDisabled')) {
       set(this, 'model.isSelected', true);
     }
@@ -50,7 +63,7 @@ export default Component.extend({
     }
   },
 
-  mouseLeave() {
+  handleMouseLeave() {
     set(this, 'model.isSelected', false);
 
     if (this.onHoverOut) {

tests/integration/components/x-tree-node-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click, triggerEvent } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | x-tree-node', function(hooks) {
@@ -23,4 +23,66 @@ module('Integration | Component | x-tree-node', function(hooks) {
 
     assert.equal(this.element.textContent.trim(), 'template block text');
   });
+
+  test('select event', async function(assert) {
+    this.selected = false;
+    this.model = {
+      name: 'a',
+      children: []
+    };
+    this.set('onSelect', () => {
+      this.selected = !this.selected;
+    });
+
+    await render(hbs`{{x-tree-node model=model onSelect=(action onSelect)}}`);
+
+    await click('.tree-toggle');
+
+    assert.equal(this.selected, true, 'selected');
+
+    await click('.tree-toggle');
+
+    assert.equal(this.selected, false, 'unselected');
+  });
+
+  test('contextmenu event', async function(assert) {
+    this.rightClicked = false;
+    this.model = {
+      name: 'a',
+      children: []
+    };
+    this.set('onContextMenu', () => {
+      this.rightClicked = true;
+    });
+
+    await render(hbs`{{x-tree-node model=model onContextMenu=(action onContextMenu)}}`);
+
+    await triggerEvent('.tree-toggle', 'contextmenu');
+
+    assert.equal(this.rightClicked, true, 'right click detected');
+  });
+
+  test('onHover and onHoverOut events', async function(assert) {
+    this.hovering = false;
+    this.model = {
+      name: 'a',
+      children: []
+    };
+    this.set('onHover', () => {
+      this.hovering = true;
+    });
+    this.set('onHoverOut', () => {
+      this.hovering = false;
+    });
+
+    await render(hbs`{{x-tree-node model=model onHover=(action onHover) onHoverOut=(action onHoverOut)}}`);
+
+    await triggerEvent('.tree-toggle', 'mouseenter');
+
+    assert.equal(this.hovering, true, 'hovering');
+
+    await triggerEvent('.tree-toggle', 'mouseleave');
+
+    assert.equal(this.hovering, false, 'hover out');
+  });
 });