ember-test-selectors

ember-test-selectors

Enabling better element selectors in Ember.js tests

[!NOTE] ember-test-selectors was written and is maintained by Mainmatter and contributors. We offer consulting, training, and team augmentation for Ember.js – check out our website to learn more!

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

More information on why that is useful are available on our blog!

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 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>
  <button data-test-like-button>Like</button>
</article>

Once you've done that you can use attribute selectors to look up and interact with 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 will be applied to the element that has ...attributes on it, or on the component wrapper 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 appears in the dependencies section of the package.json file, not in the devDependencies. This ensures that the selectors are also stripped correctly even 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 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.

License

ember-test-selectors is developed by and © Mainmatter 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.

Changelog

v7.0.0 (2024-07-25)

:boom: Breaking Change

• #1258 Remove support for Node.js 12, 14 and 16 (@Turbo87)

:rocket: Enhancement

• #1220 Remove Glimmer AST Deprecation (@jrjohnson)
• #1213 Add support for ember-cli-babel v8 (@bertdeblock)

:bug: Bug Fix

• #1212 Fix support for ember-cli-babel v7 (@bertdeblock)

:house: Internal

• #1257 CI: Add Node.js 18 and 20 to the test matrix (@Turbo87)
• #1256 CI: Disable floating Ember.js test scenarios (@Turbo87)
• #889 renovate: Update pnpm version automatically (@Turbo87)
• #670 Add Embroider's test-setup package (@thoov)
• #847 Use prettier for code formatting (@Turbo87)
• #846 CI: Run ember-try scenarios in parallel (@Turbo87)
• #845 Add ember-auto-import and webpack dev dependencies (@Turbo87)
• #844 Enable optional Ember.js features (@Turbo87)
• #754 Use pnpm package manager (@Turbo87)
• #761 CI: Use new yarn cache in setup-node action (@oscard0m)

Committers: 6

• Bert De Block (@bertdeblock)
• Jon Johnson (@jrjohnson)
• Marco Otte-Witte (@marcoow)
• Oscar Dominguez (@oscard0m)
• Tobias Bieniek (@Turbo87)
• Travis Hoover (@thoov)