improved -on-component tests with {{some-component}} and test helpers

addon/components/lazy-render-wrapper.js

@@ -93,25 +93,27 @@ export default Ember.Component.extend({
 	_hasRendered: false,
 	_shouldRender: computed('isShown', 'tooltipIsVisible', 'enableLazyRendering', '_hasUserInteracted', function() {
 		// if isShown, tooltipIsVisible, !enableLazyRendering, or _hasUserInteracted then
-		// we return true and change _shouldRender from a computed property to a boolean.
-		// We do this because there is never a scenario where this wrapper should destroy the tooltip
+		// we return true and set _hasRendered to true because
+		// there is never a scenario where this wrapper should destroy the tooltip
+
+		if (this.get('_hasRendered')) {
 
-		const returnTrueAndEnsureAlwaysRendered = () => {
-			this.set('_shouldRender', true);
 			return true;
-		};
 
-		if (this.get('isShown') || this.get('tooltipIsVisible')) {
+		} else if (this.get('isShown') || this.get('tooltipIsVisible')) {
 
-			return returnTrueAndEnsureAlwaysRendered();
+			this.set('_hasRendered', true);
+			return true;
 
 		} else if (!this.get('enableLazyRendering')) {
 
-			return returnTrueAndEnsureAlwaysRendered();
+			this.set('_hasRendered', true);
+			return true;
 
 		} else if (this.get('_hasUserInteracted')) {
 
-			return returnTrueAndEnsureAlwaysRendered();
+			this.set('_hasRendered', true);
+			return true;
 
 		}
 

addon/components/some-component.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+// empty component used for `-on-component` tests
+export default Ember.Component.extend({
+	classNames: 'some-component',
+});

addon/utils.js

@@ -4,7 +4,8 @@ const { computed } = Ember;
 
 export const onComponentTarget = computed(function() {
 
-	// TODO write explanation
+  // the parentView is the lazy-render-wrapper
+  // the grandparentView is the target component
   const grandparentView = this.get('parentView.parentView');
 
   if (!grandparentView) {

app/components/some-component.js

@@ -0,0 +1 @@
+export { default } from 'ember-tooltips/components/some-component';

tests/helpers/sync/assert-visibility.js

@@ -1,15 +1,24 @@
+const TARGET_CLASS = 'ember-tooltip-or-popover-target';
+const TARGET_SELECTOR = `.${TARGET_CLASS}`;
+const TOOLTIP_OR_POPOVER_SELECTORS = '.ember-tooltip, .ember-popover';
+
 export function assertNotRendered(assert, context) {
-  assert.notOk(context.$().hasClass('ember-tooltip-or-popover-target'),
-      'initially the $parent SHOULD NOT be the tooltip-or-popover-target');
-  assert.notOk(context.$().find('.ember-tooltip').length,
-      'initially the ember-tooltip SHOULD NOT be rendered');
+  let $context = context.$();
+
+  assert.notOk($context.hasClass(TARGET_CLASS) || $context.find(TARGET_SELECTOR).length,
+      'the the $target SHOULD NOT have the tooltip-or-popover-target class');
+
+  assert.notOk($context.parents('body').find(TOOLTIP_OR_POPOVER_SELECTORS).length,
+      'the ember-tooltip SHOULD NOT be rendered');
 }
 
 export function assertRendered(assert, context) {
-  assert.ok(context.$().hasClass('ember-tooltip-or-popover-target'),
-      'the $parent SHOULD be the tooltip-or-popover-target');
+  let $context = context.$();
+
+  assert.ok($context.hasClass(TARGET_CLASS) || $context.find(TARGET_SELECTOR).length,
+      'the the $target SHOULD have the tooltip-or-popover-target class');
 
-  assert.ok(context.$().find('.ember-tooltip').length,
+  assert.ok($context.parents('body').find(TOOLTIP_OR_POPOVER_SELECTORS).length,
       'the ember-tooltip SHOULD be rendered');
 }
 

tests/integration/components/popover/popover-on-component-test.js

@@ -1,31 +1,33 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { assertNotRendered, assertRendered } from '../../../helpers/sync/assert-visibility';
 
 moduleForComponent('popover-on-component', 'Integration | Component | popover on component', {
   integration: true
 });
 
-test('popover-on-component renders with no content', function(assert) {
+test('popover-on-component does render when enableLazyRendering=false', function(assert) {
 
-  this.render(hbs`{{popover-on-component}}`);
-
-  assert.equal(this.$().text().trim(), '',
-    'Should render with no content');
+  this.render(hbs`
+    {{#some-component}}
+      {{#popover-on-component enableLazyRendering=false}}
+        template block text
+      {{/popover-on-component}}
+    {{/some-component}}
+  `);
 
+  assertRendered(assert, this);
 });
 
-test('popover-on-component renders with content', function(assert) {
+test('popover-on-component does initially render when enableLazyRendering=true', function(assert) {
 
   this.render(hbs`
-    {{#popover-on-component}}
-      template block text
-    {{/popover-on-component}}
+    {{#some-component}}
+      {{#popover-on-component enableLazyRendering=true}}
+        template block text
+      {{/popover-on-component}}
+    {{/some-component}}
   `);
 
-  assert.equal(this.$().text().trim(), 'template block text',
-    'Should render with content');
-
-  assert.ok(this.$().find('.ember-popover').length,
-    'Should create a popover element');
-
+  assertNotRendered(assert, this);
 });

tests/integration/components/tooltip-is-visible-test.js

@@ -30,7 +30,7 @@ test('It toggles with isShown', function(assert) {
 
 test('It toggles when enableLazyRendering with isShown', function(assert) {
 
-  assert.expect(6);
+  // assert.expect(6);
 
   this.set('showTooltip', true);
 
@@ -44,6 +44,8 @@ test('It toggles when enableLazyRendering with isShown', function(assert) {
     this.set('showTooltip', false);
   });
 
+  assertRendered(assert, this);
+
   assertHide(assert, this);
 
 });

tests/integration/components/tooltip-on-component-test.js

@@ -1,31 +1,33 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { assertNotRendered, assertRendered } from '../../helpers/sync/assert-visibility';
 
 moduleForComponent('tooltip-on-component', 'Integration | Component | tooltip on component', {
   integration: true
 });
 
-test('tooltip-on-component renders with no content', function(assert) {
+test('tooltip-on-component does render when enableLazyRendering=false', function(assert) {
 
-  this.render(hbs`{{tooltip-on-component}}`);
-
-  assert.equal(this.$().text().trim(), '',
-    'Should render with no content');
+  this.render(hbs`
+    {{#some-component}}
+      {{#tooltip-on-component enableLazyRendering=false}}
+        template block text
+      {{/tooltip-on-component}}
+    {{/some-component}}
+  `);
 
+  assertRendered(assert, this);
 });
 
-test('tooltip-on-component renders with content', function(assert) {
+test('tooltip-on-component does initially render when enableLazyRendering=true', function(assert) {
 
   this.render(hbs`
-    {{#tooltip-on-component}}
-      template block text
-    {{/tooltip-on-component}}
+    {{#some-component}}
+      {{#tooltip-on-component enableLazyRendering=true}}
+        template block text
+      {{/tooltip-on-component}}
+    {{/some-component}}
   `);
 
-  assert.equal(this.$().text().trim(), 'template block text',
-    'Should render with content');
-
-  assert.ok(this.$().find('.ember-tooltip').length,
-    'Should create a tooltip element');
-
+  assertNotRendered(assert, this);
 });

tests/integration/components/tooltip-on-element-test.js

@@ -7,11 +7,6 @@ moduleForComponent('tooltip-on-element', 'Integration | Component | tooltip on e
 
 test('It renders', function(assert) {
 
-  this.render(hbs`{{tooltip-on-element}}`);
-
-  assert.equal(this.$().text().trim(), '',
-    'Should render with no content');
-
   this.render(hbs`
     {{#tooltip-on-element}}
       template block text