Enabling better element selectors in Ember.js tests
JavaScript HTML
Clone or download
Permalink
Failed to load latest commit information.
addon/utils Remove deprecated code (#187) Apr 26, 2018
config Update files to `ember-cli` v3.0.0 blueprint Mar 22, 2018
node-tests Add Babel 6 compatibility (#86) Mar 27, 2017
tests Remove deprecated code (#187) Apr 26, 2018
vendor/ember-test-selectors Replace initializer with IIFE in the vendor tree (#52) Jan 17, 2017
.editorconfig Upgrade to Ember CLI 2.7 Aug 31, 2016
.ember-cli Initial Commit from Ember CLI v2.3.0-beta.1 Mar 1, 2016
.eslintrc.js Update eslint-config-simplabs to the latest version πŸš€ (#66) Feb 3, 2017
.gitignore Update files to `ember-cli` v3.0.0 blueprint Mar 22, 2018
.npmignore Update files to `ember-cli` v3.0.0 blueprint Mar 22, 2018
.travis.yml use headless chrome on ci Jan 3, 2018
.watchmanconfig Initial Commit from Ember CLI v2.3.0-beta.1 Mar 1, 2016
CHANGELOG.md Update CHANGELOG Apr 26, 2018
LICENSE extend copyright until 2018 Jan 3, 2018
README.md Merge pull request #141 from kellyselden/patch-1 Aug 30, 2017
RELEASE.md Add Release instructions Nov 15, 2017
ember-cli-build.js Update files to `ember-cli` v3.0.0 blueprint Mar 22, 2018
index.js Fix positional to hash params transform for Ember 1.11/1.12 (#155) Nov 9, 2017
package.json chore(package): update broccoli-stew to version 2.0.0 (#198) Jul 16, 2018
strip-data-test-properties-plugin.js Update eslint-config-simplabs to the latest version πŸš€ (#65) Jan 31, 2017
strip-data-test-properties-plugin6.js Add Babel 6 compatibility (#86) Mar 27, 2017
strip-test-selectors.js Fix positional to hash params transform for Ember 1.11/1.12 (#155) Nov 9, 2017
testem.js testem: Use `--no-sandbox` on TravisCI (#169) Jan 22, 2018
transform-test-selector-params-to-hash-pairs.js Fix positional to hash params transform for Ember 1.11/1.12 (#155) Nov 9, 2017
yarn.lock Converting imports to use ember modules Apr 26, 2018

README.md

ember-test-selectors

Latest NPM release TravisCI Build Status

Enabling better element selectors in Ember.js tests

Features

  • 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-test-selectors

Installation

ember install ember-test-selectors

Usage

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()

Usage in Components

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}}

Usage in Computed Properties

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.

Configuration

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.

Deprecations

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.

License

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.