Merge pull request #8 from sir-dunxalot/feature/destroy-tooltip

Feature/destroy tooltip

addon/mixins/components/tooltips.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 import renderTooltip from 'ember-tooltips/utils/render-tooltip';
 
+const { on } = Ember;
+
 export default Ember.Mixin.create({
 
   /**
@@ -40,6 +42,21 @@ export default Ember.Mixin.create({
   tooltipSpacing: 10,
   tooltipTypeClass: null,
 
+  /**
+  Removes a tooltip from the DOM if the element it is attached
+  to is destroyed.
+
+  @method destroyTooltip
+  */
+
+  destroyTooltip: on('willDestroyElement', function() {
+    const tooltip = this.get('tooltip');
+
+    if (tooltip) {
+      tooltip.detach();
+    }
+  }),
+
   /**
   Adds a tooltip to the current view using the values of the tooltip
   properties on the view or, if a `{{tooltip-on-parent}}` component is
@@ -81,7 +98,7 @@ export default Ember.Mixin.create({
   @param [maybeTooltipComponent] An optionally-passed component for a `{{tooltip-on-parent}}` class
   */
 
-  renderTooltip: Ember.on('didInsertElement', function(maybeTooltipComponent) {
+  renderTooltip: on('didInsertElement', function(maybeTooltipComponent) {
     const componentWasPassed = Ember.typeOf(maybeTooltipComponent) === 'instance';
     const component = componentWasPassed ? maybeTooltipComponent : Ember.Object.create({});
 

app/initializers/ember-tooltips.js

@@ -7,7 +7,6 @@ import Tooltips from '../mixins/components/tooltips';
 export function initialize() {
   const defaultOptions = {
     addTo: ['Component', 'View'],
-    disableInitializer: true,
   };
   const overridingOptions = ENV.tooltips || {};
   const options = Ember.merge(defaultOptions, overridingOptions);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-tooltips",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Renders and positions plain text tooltips and HTMLBars tooltips on any Ember view or component",
   "directories": {
     "doc": "doc",

tests/.jshintrc

@@ -25,7 +25,8 @@
     "inspect",
     "mouseOut",
     "mouseOver",
-    "assertTooltipProperties"
+    "assertTooltipProperties",
+    "andThenAfterRender"
   ],
   "node": false,
   "browser": false,

tests/acceptance/destroy-on-transition-test.js

@@ -0,0 +1,54 @@
+import Ember from 'ember';
+import { module, test } from 'qunit';
+import selectorFor from '../helpers/selector-for';
+import startApp from '../helpers/start-app';
+
+var application;
+
+module('Acceptance | destroy on transition', {
+  beforeEach: function() {
+    application = startApp();
+  },
+
+  afterEach: function() {
+    Ember.run(application, 'destroy');
+  }
+});
+
+test('visiting /destroy-on-transition', function(assert) {
+  const tooltip = 'show-on-click';
+
+  assert.expect(9);
+
+  visit('/destroy-on-transition');
+
+  andThenAfterRender(function() {
+    assert.equal(currentURL(), '/destroy-on-transition',
+      'Should be on correct route');
+
+    assertTooltipProperties(assert, tooltip, {
+      content: 'Should be removed on transition',
+      event: 'click',
+    });
+
+  });
+
+  click(selectorFor(tooltip));
+
+  andThenAfterRender(function() {
+
+    assert.ok(inspect(tooltip).length,
+      'The tooltip should be in the DOM');
+
+  });
+
+  visit('/');
+
+  andThen(function() {
+
+    assert.ok(inspect(tooltip).length === 0,
+      'The tooltip should not be in the DOM after a route transition');
+
+  });
+
+});

tests/dummy/app/router.js

@@ -6,6 +6,7 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('destroy-on-transition');
   this.route('tooltip-as-component');
   this.route('tooltip-on-element');
   this.route('tooltip-on-helper');

tests/dummy/app/templates/destroy-on-transition.hbs

@@ -0,0 +1,13 @@
+<h2>Tooltips on helpers</h2>
+
+<ul class="examples">
+
+  <li>
+    {{test-component
+      tooltipContent='Should be removed on transition'
+      tooltipEvent='click'
+      data-test='show-on-click'
+    }}
+  </li>
+
+</ul>

tests/helpers/async/and-then-after-render.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Test.registerAsyncHelper('andThenAfterRender',
+  function(app, callback) {
+    andThen(function() {
+      Ember.run.scheduleOnce('afterRender', this, callback);
+    });
+  }
+);

tests/helpers/async/assert-tooltip-properties.js

@@ -11,7 +11,6 @@ function cleanWhitespace(jQueryElement) {
   return jQueryElement;
 }
 
-
 /* like click() but runs asyncrously allowing you to
 use it outside of an andThen function with the same
 stuff in the DOM */

tests/helpers/start-app.js

@@ -3,6 +3,7 @@ import Application from '../../app';
 import Router from '../../router';
 import config from '../../config/environment';
 
+import andThenAfterRender from './async/and-then-after-render';
 import assertTooltipProperties from './async/assert-tooltip-properties';
 import mouseOut from './async/mouse-out';
 import mouseOver from './async/mouse-over';