diff --git a/addon/components/x-tree-node.js b/addon/components/x-tree-node.js index 95c67c7..a0a01aa 100644 --- a/addon/components/x-tree-node.js +++ b/addon/components/x-tree-node.js @@ -31,7 +31,6 @@ export default Component.extend({ } }, - contextMenu(event) { if (this.onContextMenu) { event.preventDefault(); @@ -39,7 +38,21 @@ export default Component.extend({ } }, - 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) { diff --git a/tests/integration/components/x-tree-node-test.js b/tests/integration/components/x-tree-node-test.js index 7fe7c89..9000340 100644 --- a/tests/integration/components/x-tree-node-test.js +++ b/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'); + }); });