ember-test-with-data keeps integration and acceptance testing consistent by using tags set specifically in HTML5 data attributes.
HTML markup and css classes are often sufficient for selecting DOM elements, but that is not the purpose of why they are inserted into your code. HTML provides the structure for your page and css gives your page styling. To use them for testing, we give them a secondary purpose, which can sometimes create unneed complexity.
By creating data-test attributes on elements, we can specifically select DOM elements with that attribute being a sole purpose of helping you test.
There are 2 data attribute addons out there.
So why use ember-test-with-data?
data-test
attributes from your
code so the attributes don't add bloat to your production/staging environmentsdata-test
attribute. This allows for easily setting and finding specific
components when a component is reused.ember install ember-test-with-data
That's it! It should work out of the box, but there are some settings you can change.
You can set your preferences for hidden environments in ember-test-with-data in
the ember-cli-build.js
file in your ember-cli app. Example:
// ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
'ember-test-with-data': {
hidden: EmberApp.env() === 'production'
}
})
return app.toTree()
}
Because the other options are run after build, then they are set in the apps
config/environment.js
file. Example:
// config/environment.js
module.exports = function(environment) {
var ENV = {
/*
* Your settings in here
*/
};
ENV['ember-test-with-data'] = {
dataTestSuffix: 'id', // default null
autoTag: true // default true
}
}
ember-cli-build options
env === 'production'
) - Sets whether data-test
attributes will be stripped.config/environment options
null
) - Sets the suffix of the data-test
identifier. A value of null makes the generated test attributes as data-test
,
but setting it to id
makes the generated test attributes data-test-id
.{{your-component}}
will give the components element a data test attribute of
your-component
)To help you simplify your testing, an acceptance test helper is provided. To
use it in your acceptance tests, simply add the following line to the top of
your start-app.js
helper.
// tests/helpers/start-app.js
import Ember from 'ember';
import './ember-test-with-data/find-with-data';
...
Now in your app you can use findWithData('VALUE_OF_DATA_TEST_ATTRIBUTE')
and
it will find the element you are needing to test.