Add support for native class components

I’m not seeing the expected behavior when binding the data-test-* ID within the Javascript file when using Native Classes

Taking your existing README.md example:

export default Ember.Component({
  comment: null,
  'data-test-comment-id': Ember.computed.readOnly('comment.id'),
});

Now convert to use native class syntax and observe that data-test-comment-id does not exist anymore.

Here is a very simple Ember Twiddle, inspect the DOM and you notice data-test-my-component attribute does not exist

https://ember-twiddle.com/7cf08b835afbcbba34f761bcf41930bc

[Turbo87]

I don’t think that removes the need for a solution here

I personally don’t see the need here and won’t put time into it, but feel free to come up with a PR. The constraints are that it needs to behave quite close to the current solution and be entirely optimized out in prod builds.

[marcoow]

I’ll close this - essentially dataAttributeBindings (which ETS adds all data-test- attributes to automatically) is only necessary as currently component templates define inner HTML rather than outer so that dataAttributeBindings is the only way to get the data-test attributes on the component’s outer element. With the new component model where templates define the component’s outer HTML that is no longer necessary and the data-test attribute can be added to the component’s template directly.

In general, I’d advice against using a fixed data-test- attribute per component that is defined inside the component (be it the component’s .js or .hbs) as that makes the tests using the attribute depend on internals of the component and the fact that a specific component is used. What you should do instead is pass data-test- attributes into the component from the context in that the component is invoked - after all, you would usually want to use different data-test- attributes for different invokations of the same component:

<Button data-test-delete-user-button>Delete</Button>
…
<Button data-test-save-record-button>Save</Button>