Ember CLI QUnit text content helpers

tests_acceptance_foo-test.js

// tests/acceptance/foo-test.js

// Assert that text should be found
assert.hasText('Not Found'); // Error: Could not find text "Not Found" on the page

// Provide custom message
assert.hasText('Not Found', 'Expected to find "Not Found"'); // Error: Expected to find "Not Found"

// Find any number of elements containing the query text
text('Found'); // [<div>Found</div>, <input value="Found">]

// Scope selector to type
text('Found', 'div'); // [<div>Found</div>]

// Find buttons
button('Sign In'); // [<input type="submit" value="Sign In">]

// Use with existing helpers
click(button('Sign In'));

tests_helpers_start-app.js

// tests/helpers/start-app.js
//...
import text from './text';
//...

tests_helpers_text.js

import Ember from 'ember';
import QUnit from 'qunit';

var mergeUnique = function(){
  return $.unique($.merge.apply($, arguments));
};

var withValue = function(text, scope) {
  return find(`${scope || ''}[value*="${text}"]`);
};

var directlyContains = function(text, scope){
  var foundText = find(`${scope || ''}:contains(${text})`).filter(function() {
    return (
    $(this).clone() //clone the element
    .children() //select all the children
    .remove() //remove all the children
    .end() //again go back to selected element
    .filter(`:contains(${text})`).length > 0);
  });
  var foundValue = withValue(text, scope);
  return mergeUnique(foundText, foundValue);
};

var textHelpers = function(){

  Ember.Test.registerHelper('button', function (app, text) {
    return mergeUnique(
      withValue(text, 'input'),
      directlyContains(text, 'button'));
  });

  Ember.Test.registerHelper('text', function (app, text) {
    return directlyContains(text);
  });

  QUnit.assert.hasText = function(text, message) {
    var element = directlyContains(text);
    QUnit.assert.ok(element.length, message || `Could not find text "${text}" on the page`);
  };

}();

export default textHelpers;

This really should be in the default test helpers. Super useful for integration testing components!

👍 Thanks! Enjoy the hasText

This is awesome!, there are any ember addon with this helpers added?

Would you consider adding this line so that JShint doesn't complain?

https://gist.github.com/plicjo/0e2ba40a41ea77fd965ce5d929faac67#file-tests_helpers_start-app-js-L3

guys! how to use this method (assert.hasText). What i have done:

1. created file test_helpers_text.js with the given code
2. imported in the another file
3. I am trying to use assert.hasText(text, msg)

but it is throwing me error: cannot user property assert of undefined.

Prompt reply could be helpful.