Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ember CLI QUnit text content helpers
// 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
//...
import text from './text';
//...
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;
@trabus

This comment has been minimized.

Copy link

trabus commented Oct 29, 2015

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

@ryanlitalien

This comment has been minimized.

Copy link

ryanlitalien commented Nov 5, 2015

👍 Thanks! Enjoy the hasText

@hugoruscitti

This comment has been minimized.

Copy link

hugoruscitti commented Jan 4, 2016

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

@plicjo

This comment has been minimized.

Copy link

plicjo commented Sep 7, 2016

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

@PritamBhanji08

This comment has been minimized.

Copy link

PritamBhanji08 commented Jul 9, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.