-
Notifications
You must be signed in to change notification settings - Fork 142
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #149 from a15n/a15n/lazy-render-target-fix
add level to #some-component, proper $target for lazy-render-wrapper, tests
- Loading branch information
Showing
3 changed files
with
200 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| {{!-- an extra div is needed so that the -on-component tests | ||
| are actually grabbing the parentView, which is not necessarily | ||
| always the parent element --}} | ||
| <div> | ||
| {{yield}} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import Ember from 'ember'; | ||
| import { moduleForComponent, test } from 'ember-qunit'; | ||
| import hbs from 'htmlbars-inline-precompile'; | ||
| import { targetEventNameSpace } from 'ember-tooltips/components/lazy-render-wrapper'; | ||
|
|
||
| moduleForComponent('tooltip-on-element', 'Integration | Component | event handlers', { | ||
| integration: true | ||
| }); | ||
|
|
||
|
|
||
| function assertTargetHasLazyRenderEvents(assert, $target, eventType="hover") { | ||
| const eventsObject = $._data($target[0], 'events'); | ||
|
|
||
| function assertEventExists(event) { | ||
| // for some reason mouseenter events are stored as mouseover in the eventsObject | ||
| // same for mouseleave -> mouse out | ||
| let eventObjectName = event; | ||
| if (event === 'mouseenter') { | ||
| eventObjectName = 'mouseover'; | ||
| } else if (event === 'mouseleave') { | ||
| eventObjectName = 'mouseout'; | ||
| } | ||
|
|
||
| assert.ok(eventsObject && eventsObject[eventObjectName], | ||
| `the eventsObject exists and should have ${eventObjectName} event`); | ||
|
|
||
| let eventHandler = eventsObject[eventObjectName][0]; | ||
| assert.equal(eventHandler.origType, event, | ||
| `the eventHandler's origType property should equal ${event}`); | ||
|
|
||
| assert.ok(eventHandler.namespace.indexOf(targetEventNameSpace) >= 0, | ||
| 'the eventHandler\'s namespace property be unique to ember-tooltips'); | ||
| } | ||
|
|
||
| function assertNumEventsExist(num) { | ||
| // This function asserts that a certain number of event handlers are attached to an object. | ||
| // Event handlers are stored in arrays on the eventsObject like so... | ||
| // eventsObject = { focusin: [x, x], click: [x] } would equal 3 events | ||
|
|
||
| let numEvents = Object.keys(eventsObject || {}).reduce(function(n, keyName) { | ||
| return n + eventsObject[keyName].length; | ||
| }, 0); | ||
|
|
||
| assert.equal(num, numEvents, | ||
| `${num} events should exist`); | ||
| } | ||
|
|
||
| if (eventType === 'hover') { | ||
| assertNumEventsExist(3); | ||
| assertEventExists('focusin'); | ||
| assertEventExists('mouseenter'); | ||
| assertEventExists('mouseleave'); | ||
| } else if (eventType === 'click') { | ||
| assertNumEventsExist(2); | ||
| assertEventExists('focusin'); | ||
| assertEventExists('click'); | ||
| } else if (eventType === 'focus') { | ||
| assertNumEventsExist(1); | ||
| assertEventExists('focusin'); | ||
| } else if (eventType === 'none') { | ||
| assertNumEventsExist(0); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| ['hover', 'click', 'focus', 'none'].forEach(function(eventType) { | ||
| test(`lazy-render-wrapper correctly assigns event handlers when event=${eventType}`, function(assert) { | ||
|
|
||
| this.set('eventType', eventType); | ||
|
|
||
| this.render(hbs`{{tooltip-on-element event=eventType enableLazyRendering=true}}`); | ||
|
|
||
| const $target = this.$(); | ||
|
|
||
| assertTargetHasLazyRenderEvents(assert, $target, eventType); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
|
|
||
| test('lazy-render-wrapper correctly assigns event handlers when target="some-id"', function(assert) { | ||
|
|
||
| this.render(hbs` | ||
| <div id="some-id"></div> | ||
| {{tooltip-on-element target="#some-id" enableLazyRendering=true}} | ||
| `); | ||
|
|
||
| const $target = this.$('#some-id'); | ||
|
|
||
| assertTargetHasLazyRenderEvents(assert, $target); | ||
|
|
||
| }); | ||
|
|
||
|
|
||
| test('lazy-render-wrapper correctly assigns event handlers when -on-component', function(assert) { | ||
|
|
||
| this.render(hbs` | ||
| {{#some-component}} | ||
| {{tooltip-on-component enableLazyRendering=true}} | ||
| {{/some-component}} | ||
| `); | ||
|
|
||
| const $target = this.$('.some-component'); | ||
|
|
||
| assertTargetHasLazyRenderEvents(assert, $target); | ||
|
|
||
| }); | ||
|
|
||
|
|
||
| test('lazy-render-wrapper removes event handlers when -on-component is destroyed', function(assert) { | ||
|
|
||
| this.render(hbs` | ||
| {{#some-component}} | ||
| {{#unless deleteTooltip}} | ||
| {{tooltip-on-component enableLazyRendering=true}} | ||
| {{/unless}} | ||
| {{/some-component}} | ||
| `); | ||
|
|
||
| const $target = this.$('.some-component'); | ||
| const done = assert.async(); | ||
|
|
||
| assertTargetHasLazyRenderEvents(assert, $target); | ||
|
|
||
| this.set('deleteTooltip', true); | ||
|
|
||
| Ember.run.later(() => { | ||
| assertTargetHasLazyRenderEvents(assert, $target, 'none'); | ||
| done(); | ||
| }, 1000); | ||
|
|
||
| }); |