Skip to content
Enabling better element selectors in Ember.js tests
JavaScript HTML
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot Add dependabot config file Nov 12, 2019
.github/workflows Drop support for Node 8 Feb 17, 2020
addon/utils Early exit if supportsDataTestProperties is set and component is tag-… Mar 15, 2019
config CI: Use `yarn` instead of `npm` Oct 12, 2018
node-tests tests: Adjust expectations with OS-specific line endings Nov 23, 2019
tests tests/acceptance: Replace `moduleForAcceptance()` with `setupApplicat… Nov 12, 2019
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
.eslintignore Update ESLint configuration Sep 5, 2018
.eslintrc.js ESLint: Disable removed rules Nov 12, 2019
.gitignore Update ignore files Nov 22, 2019
.npmignore Update ignore files Nov 22, 2019
.watchmanconfig Initial Commit from Ember CLI v2.3.0-beta.1 Mar 1, 2016
CHANGELOG.md Fix Changelog May 7, 2020
LICENSE extend copyright until 2018 Jan 3, 2018
README.md README: Clarify `@glimmer/component` situation Nov 22, 2019
RELEASE.md Add Release instructions Nov 15, 2017
ember-cli-build.js Enable `throwUnlessParallelizable` flag to prevent regressions Mar 13, 2019
index.js Rename `included()` parameter to `appOrParent` Apr 18, 2019
package.json Bump ember-source from 3.18.1 to 3.19.0 (#537) Jun 1, 2020
strip-data-test-properties-plugin.js Implement supportsDataTestProperties to disable tagless component ass… Mar 15, 2019
strip-data-test-properties-plugin6.js Implement supportsDataTestProperties to disable tagless component ass… Mar 15, 2019
strip-test-selectors.js Fix positional to hash params transform for Ember 1.11/1.12 (#155) Nov 9, 2017
testem.js testem: Increase `browser_start_timeout` (#463) Dec 16, 2019
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 [Security] Bump websocket-extensions from 0.1.3 to 0.1.4 (#538) Jun 5, 2020

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

Compatibility

  • Ember 2.16 or above
  • Ember CLI 2.14 or above
  • Node.js 8 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 with Curly Components

If you still use the old curly invocation syntax for components you can pass data-test-* arguments to the components and they will automatically be bound on the wrapper element too:

{{spinner color="blue" data-test-spinner=true}}

Please note that the automatic argument binding only works for components based on @ember/component, but not @glimmer/component.

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 © 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.

You can’t perform that action at this time.