Spike on assertContent test helper

README.md

@@ -421,6 +421,7 @@ This addon exposes testing helpers which can be used inside of the consuming app
 * `assertTooltipNotRendered(assert)`: asserts if the tooltip has not been rendered. When enableLazyRendering is true the tooltip will only be rendered after the user has interacted with the $target element.
 * `assertTooltipSide(assert, { side: 'right' }): asserts that the tooltip is shown on the correct side of the target. Additional options that can be passed are `selector` and `targetSelector`.
 * `assertTooltipSpacing(assert, { side: 'right', spacing: 10 }): asserts that the tooltip is a given distance from the target (on a given side). `side` and `spacing` must be passed. Additional options that can be passed are `selector` and `targetSelector`.
+* `assertContent(assert, contentString): asserts that the content of the tooltip matches a given string. 
 * `triggerTooltipTargetEvent($targetElement, eventName)`: triggers an event on the passed element. The event will be triggered within an Ember.run so that the tooltip's asynchronicity is accounted for. eventName can be mouseenter, mouseleave, click, focus, focusin, and blur.
 
 Each test helper also accepts an `options` object as a final parameter. If a `selector` property is provided the assertions and actions will be run against the single element found from that selector.

test-support/helpers/ember-tooltips.js

@@ -222,3 +222,20 @@ export function assertTooltipSpacing(assert, options) {
         - Tooltip should be on the ${side} side of the target: ${isSideCorrect}.
         - On the ${side} side of the target, the tooltip should be ${spacing}px from the target but it was ${actualSpacing}px`);
 }
+
+export function assertTooltipContent(assert, options = {}) {
+  const { contentString } = options;
+
+  if (contentString === undefined) {
+    Ember.assert('You must specify a contentString property in the options parameter');
+  }
+
+  const $tooltip = getTooltipFromBody(options.selector);
+  const tooltipContent = $tooltip.text().trim();
+
+  assert.equal(
+    tooltipContent,
+    contentString,
+    `Content of tooltip (${tooltipContent}) matched expected (${contentString})`
+  );
+}

tests/integration/components/content-test.js

@@ -0,0 +1,68 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { assertTooltipContent } from '../../helpers/ember-tooltips';
+
+moduleForComponent('tooltip-on-element', 'Integration | Option | content', {
+  integration: true,
+});
+
+test('assertTooltipContent correctly matches expected tootltip content', function(assert) {
+
+  assert.expect(2);
+
+  this.render(hbs`
+    <div>
+      :)
+      {{tooltip-on-element text='Smiley face'}}
+    </div>
+  `);
+
+  assertTooltipContent(assert, {
+    contentString: 'Smiley face',
+  });
+
+  this.render(hbs`
+    <div>
+      :(
+      {{#tooltip-on-element}}
+        Frowning face
+      {{/tooltip-on-element}}
+    </div>
+  `);
+
+  assertTooltipContent(assert, {
+    contentString: 'Frowning face',
+  });
+});
+
+test('assertTooltipContent correctly compares expected and discovered tooltip content of tooltip', function(assert) {
+
+  assert.expect(2);
+
+  this.render(hbs`
+    <div>
+      :)
+      {{tooltip-on-element text='Smiley face'}}
+    </div>
+  `);
+
+  const stubbedAssert = {
+    equal(arg1, arg2/* , msg */) {
+      assert.equal(
+        arg1,
+        'Smiley face',
+        'Helper correctly finds actual content of tooltip'
+      );
+
+      assert.equal(
+        arg2,
+        'Frowning face',
+        'Helper correctly intends to compare to string we provide'
+      );
+    },
+  };
+
+  assertTooltipContent(stubbedAssert, {
+    contentString: 'Frowning face',
+  });
+});

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

@@ -1,14 +1,18 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { assertTooltipNotRendered, assertTooltipRendered } from '../../../helpers/ember-tooltips';
+import {
+  assertTooltipNotRendered,
+  assertTooltipRendered,
+  assertTooltipContent,
+} from '../../../helpers/ember-tooltips';
 
 moduleForComponent('popover-on-component', 'Integration | Component | popover on component', {
   integration: true,
 });
 
 test('popover-on-component does render when enableLazyRendering=false', function(assert) {
 
-  assert.expect(1);
+  assert.expect(2);
 
   this.render(hbs`
     {{#some-component}}
@@ -18,6 +22,10 @@ test('popover-on-component does render when enableLazyRendering=false', function
     {{/some-component}}
   `);
 
+  assertTooltipContent(assert, {
+    contentString: 'template block text',
+  });
+
   assertTooltipRendered(assert);
 });
 

tests/integration/components/text-test.js

@@ -1,6 +1,6 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { assertTooltipRendered } from '../../helpers/ember-tooltips';
+import { assertTooltipRendered, assertTooltipContent } from '../../helpers/ember-tooltips';
 
 moduleForComponent('tooltip-on-element', 'Integration | Component | inline', {
   integration: true,
@@ -14,9 +14,9 @@ test('tooltip-on-element renders with text param', function(assert) {
     {{tooltip-on-element text='Here is more info'}}
   `);
 
-  assert.equal(this.$().text().trim(), 'Here is more info',
-    'Should render with content equal to the text property');
+  assertTooltipContent(assert, {
+    contentString: 'Here is more info',
+  });
 
   assertTooltipRendered(assert);
-
 });

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

@@ -1,13 +1,19 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { assertTooltipNotRendered, assertTooltipRendered } from '../../helpers/ember-tooltips';
+import {
+  assertTooltipNotRendered,
+  assertTooltipRendered,
+  assertTooltipContent,
+} from '../../helpers/ember-tooltips';
 
 moduleForComponent('tooltip-on-component', 'Integration | Component | tooltip-on-component', {
   integration: true,
 });
 
 test('tooltip-on-component does render when enableLazyRendering=false', function(assert) {
 
+  assert.expect(2);
+
   this.render(hbs`
     {{#some-component}}
       {{#tooltip-on-component enableLazyRendering=false}}
@@ -16,12 +22,17 @@ test('tooltip-on-component does render when enableLazyRendering=false', function
     {{/some-component}}
   `);
 
-  assertTooltipRendered(assert);
+  assertTooltipContent(assert, {
+    contentString: 'template block text',
+  });
 
+  assertTooltipRendered(assert);
 });
 
 test('tooltip-on-component does not eagerly render when enableLazyRendering=true', function(assert) {
 
+  assert.expect(1);
+
   this.render(hbs`
     {{#some-component}}
       {{#tooltip-on-component enableLazyRendering=true}}

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

@@ -2,6 +2,8 @@ import { moduleForComponent, test } from 'ember-qunit';
 import { assertTooltipRendered } from '../../helpers/ember-tooltips';
 import hbs from 'htmlbars-inline-precompile';
 
+import { assertTooltipContent } from '../../helpers/ember-tooltips';
+
 moduleForComponent('tooltip-on-element', 'Integration | Component | tooltip on element', {
   integration: true,
 });
@@ -16,11 +18,11 @@ test('tooltip-on-element renders', function(assert) {
     {{/tooltip-on-element}}
   `);
 
-  assert.equal(this.$().text().trim(), 'template block text',
-    'Should render with content');
+  assertTooltipContent(assert, {
+    contentString: 'template block text',
+  });
 
   assertTooltipRendered(assert);
-
 });
 
 test('tooltip-on-element has the proper aria-describedby tag', function(assert) {
@@ -40,7 +42,10 @@ test('tooltip-on-element has the proper aria-describedby tag', function(assert)
   const $tooltipTarget = this.$('.target');
   const describedBy = $tooltipTarget.attr('aria-describedby');
 
-  assert.equal(this.$(`#${describedBy}`).text().trim(), 'Some info in a tooltip.');
+  assertTooltipContent(assert, {
+    selector: `#${describedBy}`,
+    contentString: 'Some info in a tooltip.',
+  });
   assert.equal(describedBy.indexOf('#'), '-1');
 
 });

tests/integration/components/update-for-test.js

@@ -2,7 +2,12 @@ import Ember from 'ember';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
-const { RSVP, run } = Ember;
+const {
+  RSVP,
+  run,
+} = Ember;
+
+import { assertTooltipContent } from '../../helpers/ember-tooltips';
 
 moduleForComponent('tooltip-on-element', 'Integration | Option | updateFor', {
   integration: true,
@@ -34,14 +39,16 @@ test('updateFor test', function(assert) {
   `);
 
   const done = assert.async();
-  const $tooltip = this.$();
 
-  assert.equal($tooltip.text().trim(), '...',
-    'Should render ...');
+  assertTooltipContent(assert, {
+    contentString: '...',
+  });
 
   run.later(() => {
-    assert.equal($tooltip.text().trim(), 'Some model',
-      'Should render "Some model"');
+    assertTooltipContent(assert, {
+      contentString: 'Some model',
+    });
+
     done();
   }, 200);