no-positional-data-test-selectors.md

no-positional-data-test-selectors

✅ The extends: 'recommended' property in a configuration file enables this rule.

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Motivation

ember-test-selectors is a very popular library that enables better element selectors for testing.

One of the features that had been added to ember-test-selectors over the years was to allow passing a positional argument to curly component invocations as a shorthand (to avoid having to also add a named argument value).

That would look like:

{{some-thing data-test-foo}}

Internally, that was converted to an attributeBinding for @ember/components. Unfortunately, that particular invocation syntax is in conflict with modern Ember Octane templates. For example, in the snippet above data-test-foo is actually referring to this.data-test-foo (and would be marked as an error by the no-implicit-this rule).

Additionally, the nature of these "fake" local properties significantly confuses the codemods that are used to transition an application into Ember Octane (e.g. ember-no-implicit-this-codemod and ember-angle-brackets-codemod).

Examples

This rule forbids the following:

{{foo-bar data-test-blah}}
{{#foo-bar data-test-blah}}
{{/foo-bar}}

And suggests using the following instead:

{{foo-bar data-test-blah=true}}
{{#foo-bar data-test-blah=true}}
{{/foo-bar}}

References

• ember-test-selectors#d47f73d