Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
ember-test-selectors
Advanced tools
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!
ember install ember-test-selectors
In your templates you are now able to use data-test-*
attributes, which are
automatically removed from production
builds:
<article>
<h1 data-test-post-title data-test-resource-id="{{post.id}}">{{post.title}}</h1>
<p>{{post.body}}</p>
</article>
Once you've done that you can use attribute selectors to look up the elements:
// in Acceptance Tests:
find('[data-test-post-title]')
find('[data-test-resource-id="2"]')
// in Component Integration Tests:
this.$('[data-test-post-title]').click()
this.$('[data-test-resource-id="2"]').click()
You can also use data-test-*
attributes on components:
{{comments-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:
<div id="ember123" data-test-comments-for="42">
<!-- comments -->
</div>
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 }}
{{comments-list data-test-comments post=post}}
{{! compiler error }}
{{comments-list post=post data-test-comments}}
Instead of assigning data-test-comment-id
in this example template:
{{#each comments as |comment|}}
{{comment-list-item comment=comment data-test-comment-id=comment.id}}
{{/each}}
you may also use computed properties on the component:
export default Ember.Component({
comment: null,
'data-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:
var app = new EmberApp({
'ember-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.
FAQs
Enabling better Test selectors in Ember.js applications.
The npm package ember-test-selectors receives a total of 46,335 weekly downloads. As such, ember-test-selectors popularity was classified as popular.
We found that ember-test-selectors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.