Merge pull request #375 from sir-dunxalot/mf-fix_updatefor

Check updateFor explicitly against default value, rather than truthy check

addon/components/ember-tooltip-base.js

@@ -227,7 +227,7 @@ export default Component.extend({
 
       /* If updateFor exists, update the tooltip incase the changed Attr affected the tooltip content's height or width */
 
-      if (this.get('updateFor') && this.get('_tooltip').popperInstance) {
+      if (this.get('updateFor') !== null && this.get('_tooltip').popperInstance) {
         const popper = this.get('_tooltip').popperInstance;
 
         if (popper) {

tests/acceptance/update-for-reposition-test.js

@@ -0,0 +1,52 @@
+import { settled, triggerEvent, visit, waitFor } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import {
+  assertTooltipNotRendered,
+  assertTooltipRendered,
+  assertTooltipNotVisible,
+  assertTooltipVisible
+} from 'ember-tooltips/test-support/dom/assertions';
+
+module('Acceptance | updateFor reposition stability', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('updateFor reposition stability', async function(assert) {
+    assert.expect(7);
+
+    await visit('/update-for-reposition');
+
+    assertTooltipNotRendered(assert);
+
+    const tooltipSelector = '.js-test-tooltip';
+    const tooltipTargets = document.querySelectorAll('.js-test-tooltip-target');
+    const tooltipTarget = tooltipTargets[0];
+    const tooltipOptions = {
+      selector: tooltipSelector
+    };
+
+    assert.equal(tooltipTargets.length, 1, 'there should be one tooltipTarget');
+
+    assertTooltipNotRendered(assert, tooltipOptions);
+
+    triggerEvent(tooltipTarget, 'mouseenter');
+    await waitFor('.js-test-loading', { count: 1 });
+
+    let tooltip = document.querySelector(tooltipSelector);
+    const originalTooltipPosBottom = Math.floor(tooltip.getClientRects()[0].bottom);
+
+    assertTooltipRendered(assert, tooltipOptions);
+    assertTooltipVisible(assert, tooltipOptions);
+
+    await waitFor('.js-test-table', { timeout: 1200, count: 1 });
+
+    const newTooltipPosBottom = Math.floor(tooltip.getClientRects()[0].bottom);
+    assert.equal(originalTooltipPosBottom, newTooltipPosBottom);
+
+    await triggerEvent(tooltipTarget, 'mouseleave');
+
+    await settled();
+
+    assertTooltipNotVisible(assert, tooltipOptions);
+  });
+});

tests/dummy/app/controllers/update-for-reposition.js

@@ -0,0 +1,41 @@
+import Controller from '@ember/controller';
+import { set } from '@ember/object';
+
+export default Controller.extend({
+  rows: null,
+  isLoading: true,
+
+  init() {
+    this._super(...arguments);
+    set(this, 'rows', []);
+  },
+
+  actions: {
+    fetchData() {
+      setTimeout(() => {
+        if (this.isDestroying) { return; }
+
+        set(this, 'rows', [
+          {
+            text: 'random text',
+            number: 1
+          },
+          {
+            text: 'random text',
+            number: 2
+          },
+          {
+            text: 'random text',
+            number: 3
+          }
+        ]);
+        set(this, 'isLoading', false);
+      }, 1000)
+    },
+
+    deleteData() {
+      set(this, 'isLoading', true);
+      set(this, 'rows', []);
+    }
+  }
+});

tests/dummy/app/router.js

@@ -9,6 +9,7 @@ const Router = EmberRouter.extend({
 Router.map(function() {
   this.route('acceptance');
   this.route('many-tooltips');
+  this.route('update-for-reposition');
 });
 
 export default Router;

tests/dummy/app/templates/update-for-reposition.hbs

@@ -0,0 +1,33 @@
+<div style="height: 300px" {{! template-lint-disable }} ></div>
+<h1 class="js-test-tooltip-target" style="display: flex; justify-content: center;" {{! template-lint-disable }}>
+  Hover here
+  {{#ember-tooltip
+    tooltipClass="js-test-tooltip"
+    updateFor=isLoading
+    onShow=(action "fetchData")
+    onHide=(action "deleteData")
+    side="top"
+  }}
+    {{#if isLoading}}
+      <span class="js-test-loading">Loading</span>
+    {{else}}
+      <table class="js-test-table">
+        <thead>
+        </thead>
+        <tbody>
+          {{#each rows as |row|}}
+            <tr>
+              <td>
+                {{row.text}}
+              </td>
+              <td>
+                {{row.number}}
+              </td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    {{/if}}
+  {{/ember-tooltip}}
+</h1>
+{{outlet}}