Strip test selectors defined in component javascript

[blimmer]

This is a great idea! However, many times I find myself doing something like this:

export default Ember.Component.extend({
  attributeBindings: ['data-test-id'],
  'data-test-id': Ember.computed('model.id', function() {
     return `model-name-${id}-component`;
  }),
});

Just browsing the code, it looks like this wouldn't be stripped (since it's using a handlebars AST parser).

[marcoow]

We find it more convenient to have the data attributes in the templates as that also allows more flexibility since you can have data attributes on individual elements as well as opposed to only the component itself. Of course it would be nice to support this case as well though.

Would be great if you could submit a PR implementing that although I'm not sure how this would best be done.

[marcoow]

It would probably also make sense to always (except for in production of course) add a data-test-<component-name> attribute to the component so you can always select the component itself, e.g. data-test-blog-post.

[marcoow]

I'm using this in a project now:

// app/mixins/components/has-test-selector.js
import Ember from 'ember';
import ENV from '../../config/environment';

const { computed } = Ember;
const { getPrototypeOf } = Object;

let TestSelectorMixin;

if (ENV.environment !== 'production') {
  TestSelectorMixin = Ember.Mixin.create({
    attributeBindings: 'data-test-selector',

    'data-test-selector': computed(function() {
      return getPrototypeOf(this)._debugContainerKey.replace(/^component:/, '');
    })
  });
} else {
  TestSelectorMixin = Ember.Mixin.create();
}

export default TestSelectorMixin;

I guess sth. like this could be added to ember-test-selectors as well.

Of course this.__proto__._debugContainerKey is private Ember.js API but there seems to be consensus that it could be publicized so it shouldn't be too bad to rely on it now.

[chrisdpeters]

@marcoow I like this idea.

Would it make more sense if it were something a tad more descriptive like component, rather than selector because the selector is being based on the component name? Just an idea/question; I really don't know if that's any better.

[marcoow]

@chrisdpeters: yeah, sounds like a good idea.

[bcardarella]

@marcoow any update on this?

[marcoow]

I'm hoping someone will find some time to do this soon. It would definitely be a great addition. Someone on our team might actually be able to pick this up in the next weeks but we've all been pretty busy lately.

[marcoow]

This has been fixed via #45