ember-test-selectors

Enabling better element selectors in Ember.js tests

Features

• Removes attributes starting with data-test- from HTML tags andcomponent/helper invocations in your templates for production builds

• Removes properties starting with data-test- from your JS objects likecomponent classes for production builds

More information on why that is useful are available on ourblog!

Compatibility

• Ember 3.8 or above
• Ember CLI 3.8 or above
• Node.js 12 or above

Installation

ember install ember-test-selectors

Usage

In your templates you are now able to use data-test-* attributes, which areautomatically removed from production builds:

<article>
  <h1 data-test-post-title data-test-resource-id={{post.id}}>{{post.title}}</h1>
  <p>{{post.body}}</p>
  <button data-test-like-button>Like</button>
</article>

Once you've done that you can use attribute selectors to look up and interactwith those elements:

assert.dom('[data-test-post-title]').hasText('Ember is great!');

await click('[data-test-like-button]');

Usage with Components

You can use the same syntax also for component invocations:

<Spinner @color="blue" data-test-spinner>

Inside the Spinner component template the data-test-spinner attribute willbe applied to the element that has ...attributes on it, or on the componentwrapper div element if you don't use tagName = ''.

Usage in Ember addons

If you want to use ember-test-selectors in an addon make sure that it appearsin the dependencies section of the package.json file, not in thedevDependencies. This ensures that the selectors are also stripped correctlyeven if the app that uses the addon does not use ember-test-selectors itself.

Configuration

You can override when the data-test-* attributes should be stripped from thebuild 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 meansthat the attributes will be stripped for production builds, unless the buildwas triggered by ember test. That means that if you useember test --environment=production the test selectors will still work, butfor ember build -prod they will be stripped out.

License

ember-test-selectors is developed by and ©simplabs GmbH and contributors. It is released under theMIT License.

ember-test-selectors is not an official part of Ember.jsand is not maintained by the Ember.js Core Team.