Implement supportsDataTestProperties to disable tagless component ass…

…ertion

README.md

@@ -114,6 +114,49 @@ export default Ember.Component({
 As with `data-test-*` attributes in the templates, these properties, whether
 computed or not, will be removed automatically in production builds.
 
+### Usage with tagless components
+
+Since tagless components do not have a root element, `data-test-*` attributes
+passed to them cannot be bound to the DOM. If you try to pass a `data-test-*`
+attribute to a tagless component, or define one in its Javascript class,
+`ember-test-selectors` will throw an assertion error.
+
+However, there are some cases where you might want to pass a `data-test-*`
+attribute to a tagless component, for example a tagless wrapper component:
+
+```js
+// comment-wrapper.js
+export default Ember.Component({
+  tagName: ''
+})
+```
+
+```hbs
+{{!-- comment-wrapper.hbs --}}
+Comment:
+{{comment-list-item comment=comment data-test-comment-id=data-test-comment-id}}
+```
+
+```handlebars
+{{!-- comment-list.hbs --}}
+{{#each comments as |comment|}}
+  {{comment-wrapper comment=comment data-test-comment-id=comment.id}}
+{{/each}}
+```
+
+In this case, to prevent the assertion on the specific `comment-wrapper`
+component, you can specify `supportsDataTestProperties` on the class:
+
+```js
+// comment-wrapper.js
+export default Ember.Component({
+  tagName: '',
+  supportsDataTestProperties: true
+})
+```
+
+`supportsDataTestProperties`, like `data-test-*` properties, will be stripped
+from the build.
 
 Configuration
 ------------------------------------------------------------------------------

addon/utils/bind-data-test-attributes.js

@@ -15,14 +15,16 @@ export default function bindDataTestAttributes(component) {
     return;
   }
 
-  let tagName = component.get('tagName');
+  if (!component.get('supportsDataTestProperties')) {
+    let tagName = component.get('tagName');
 
-  let message = `ember-test-selectors could not bind data-test-* properties on ${component} ` +
-    `automatically because tagName is empty.`;
+    let message = `ember-test-selectors could not bind data-test-* properties on ${component} ` +
+      `automatically because tagName is empty.`;
 
-  assert(message, tagName !== '', {
-    id: 'ember-test-selectors.empty-tag-name',
-  });
+    assert(message, tagName !== '', {
+      id: 'ember-test-selectors.empty-tag-name',
+    });
+  }
 
   let attributeBindings = component.getWithDefault('attributeBindings', []);
   if (!isArray(attributeBindings)) {

node-tests/fixtures/default/expected.js

@@ -14,4 +14,7 @@ exports['default'] = _ember2['default'].Component.extend({
   foo: 'foo',
   'data-test': 'test'
 });
-module.exports = exports['default'];
+var c2 = _ember2['default'].Component.extend({
+  foo: 'foo'
+});
+exports.c2 = c2;

node-tests/fixtures/default/expected6.js

@@ -4,3 +4,7 @@ export default Ember.Component.extend({
   foo: 'foo',
   'data-test': 'test'
 });
+
+export let c2 = Ember.Component.extend({
+  foo: 'foo'
+});

node-tests/fixtures/default/expected7.js

@@ -3,3 +3,6 @@ export default Ember.Component.extend({
   foo: 'foo',
   'data-test': 'test'
 });
+export let c2 = Ember.Component.extend({
+  foo: 'foo'
+});

node-tests/fixtures/default/fixture.js

@@ -7,4 +7,10 @@ export default Ember.Component.extend({
   'data-test-foobar': Ember.computed('data-test-foo', function() {
     return `${this.get('data-test-foo')}bar`
   }),
+  supportsDataTestProperties: true
+});
+
+export let c2 = Ember.Component.extend({
+  foo: 'foo',
+  'supportsDataTestProperties': true
 });

strip-data-test-properties-plugin.js

@@ -3,12 +3,14 @@
 /* eslint-env node */
 
 let TEST_SELECTOR_PREFIX = /data-test-.*/;
+let SUPPORTS_DATA_TEST_PROP = 'supportsDataTestProperties';
 
 function StripDataTestPropertiesPlugin(babel) {
   return new babel.Plugin('ember-test-selectors', {
     visitor: {
       Property(node) {
-        if (TEST_SELECTOR_PREFIX.test(node.key.value)) {
+        let nodeName = node.key.name || node.key.value;
+        if (TEST_SELECTOR_PREFIX.test(nodeName) || nodeName === SUPPORTS_DATA_TEST_PROP) {
           this.dangerouslyRemove();
         }
       },

strip-data-test-properties-plugin6.js

@@ -3,12 +3,14 @@
 /* eslint-env node */
 
 let TEST_SELECTOR_PREFIX = /data-test-.*/;
+let SUPPORTS_DATA_TEST_PROP = 'supportsDataTestProperties';
 
 function StripDataTestPropertiesPlugin() {
   return {
     visitor: {
       Property(path) {
-        if (TEST_SELECTOR_PREFIX.test(path.node.key.value)) {
+        let nodeName = path.node.key.name || path.node.key.value;
+        if (TEST_SELECTOR_PREFIX.test(nodeName) || nodeName === SUPPORTS_DATA_TEST_PROP) {
           path.remove();
         }
       },

tests/unit/utils/bind-data-test-attributes-test.js

@@ -129,6 +129,20 @@ test('it breaks if tagName is empty', function(assert) {
   assert.throws(() => bindDataTestAttributes(instance));
 });
 
+test('it does not breaks if tagName is empty and supportsDataTestProperties is set', function(assert) {
+  let Fixture = EmberObject.extend({
+    tagName: '',
+    supportsDataTestProperties: true,
+    'data-test-from-factory': 'foo',
+  });
+  let instance = Fixture.create({
+    'data-test-from-invocation': 'bar',
+  });
+
+  bindDataTestAttributes(instance);
+  assert.ok(true, 'did not throw');
+});
+
 test('issue #106', function(assert) {
   let Component = EmberObject.extend({});