Name: ember-test-selectors
Owner: simplabs
Description: Enabling better element selectors in Ember.js tests
Created: 2016-03-01 12:27:28.0
Updated: 2018-05-23 23:33:06.0
Pushed: 2018-05-17 10:00:01.0
Homepage: https://ember-test-selectors.com
Size: 760
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Enabling better element selectors in Ember.js tests
Removes attributes starting with data-test-
from HTML tags and
component/helper invocations in your templates for production builds
Removes properties starting with data-test-
from your JS objects like
component classes for production builds
Automatically binds properties starting with data-test-
on all components
for development/testing builds
More information on why that is useful are available on our blog!
r install ember-test-selectors
In your templates you are now able to use data-test-*
attributes, which are
automatically removed from production
builds:
icle>
1 data-test-post-title data-test-resource-id="{{post.id}}">{{post.title}}</h1>
>{{post.body}}</p>
ticle>
Once you've done that you can use attribute selectors to look up the elements:
n Acceptance Tests:
('[data-test-post-title]')
('[data-test-resource-id="2"]')
n Component Integration Tests:
.$('[data-test-post-title]').click()
.$('[data-test-resource-id="2"]').click()
You can also use data-test-*
attributes on components:
mments-list data-test-comments-for=post.id}}
These data-test-*
attributes will be bound automatically and available
as data attributes on the <div>
wrapping the component template:
id="ember123" data-test-comments-for="42">
-- comments -->
v>
You can also use boolean attributes, but make sure it is the first parameter as this makes use of Ember's positional params system.
valid }}
mments-list data-test-comments post=post}}
compiler error }}
mments-list post=post data-test-comments}}
Instead of assigning data-test-comment-id
in this example template:
ach comments as |comment|}}
comment-list-item comment=comment data-test-comment-id=comment.id}}
ach}}
you may also use computed properties on the component:
rt default Ember.Component({
mment: null,
ata-test-comment-id': Ember.computed.readOnly('comment.id'),
As with data-test-*
attributes in the templates, these properties, whether
computed or not, will be removed automatically in production builds.
You can override when the data-test-*
attributes should be stripped from the
build by modifying your ember-cli-build.js
file:
app = new EmberApp({
mber-test-selectors': {
strip: false
strip
accepts a Boolean
value and defaults to !app.tests
, which means
that the attributes will be stripped for production builds, unless the build
was triggered by ember test
. That means that if you use
ember test --environment=production
the test selectors will still work, but
for ember build -prod
they will be stripped out.
The testSelector
helper was deprecated in v0.3.7.
There's a codemod available at https://github.com/lorcan/test-selectors-codemod
that can help make the necessary transformations to address the deprecation.
ember-test-selectors is developed by and © simplabs GmbH and contributors. It is released under the MIT License.
ember-test-selectors is not an official part of Ember.js and is not maintained by the Ember.js Core Team.