Add support for data-test-* properties

lib/__tests__/__snapshots__/transform.js.snap

@@ -141,6 +141,57 @@ foo
 =========="
 `;
 
+exports[`classic components handles \`data-test-*\` boolean correctly 1`] = `
+"==========
+
+    export default Component.extend({
+      'data-test-one': true,
+      'data-test-two': true,
+      'data-test-three': false,
+    });
+
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+    export default Component.extend({
+      tagName: \\"\\"
+    });
+
+~~~~~~~~~~
+<div data-test-one data-test-two ...attributes>
+  foo
+</div>
+=========="
+`;
+
+exports[`classic components handles \`data-test-*\` literals correctly 1`] = `
+"==========
+
+    export default Component.extend({
+      'data-test-item': 1,
+      'data-test-name': 'Zoey',
+    });
+
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+    export default Component.extend({
+      tagName: \\"\\"
+    });
+
+~~~~~~~~~~
+<div data-test-item=\\"1\\" data-test-name=\\"Zoey\\" ...attributes>
+  foo
+</div>
+=========="
+`;
+
 exports[`classic components handles \`elementId\` correctly 1`] = `
 "==========
 

lib/__tests__/transform.js

@@ -122,6 +122,47 @@ describe('classic components', function() {
     expect(generateSnapshot(source, template)).toMatchSnapshot();
   });
 
+  test('handles `data-test-*` boolean correctly', () => {
+    let source = `
+    export default Component.extend({
+      'data-test-one': true,
+      'data-test-two': true,
+      'data-test-three': false,
+    });
+  `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
+  test('handles `data-test-*` literals correctly', () => {
+    let source = `
+    export default Component.extend({
+      'data-test-item': 1,
+      'data-test-name': 'Zoey',
+    });
+  `;
+
+    let template = `foo`;
+
+    expect(generateSnapshot(source, template)).toMatchSnapshot();
+  });
+
+  test('throws if data-test-* is a computed value', () => {
+    let source = `
+    export default Component.extend({
+      'data-test-computed': computed(function() {
+        return true;
+      }),
+    });
+  `;
+
+    expect(() => transform(source, '')).toThrowErrorMatchingInlineSnapshot(
+      `"Unsupported value for 'data-test-computed'"`
+    );
+  });
+
   test('throws if `Component.extend({ ... })` argument is not found', () => {
     let source = `
     export default Component.extend();

lib/transform/classic.js

@@ -11,6 +11,8 @@ const {
   findAriaRole,
   isMethod,
   isProperty,
+  isStartsWithProperty,
+  findDataTestAttributes,
 } = require('../utils/classic');
 
 const EVENT_HANDLER_METHODS = [
@@ -125,6 +127,9 @@ module.exports = function transformClassicComponent(root, options) {
   let classNameBindings = findClassNameBindings(properties);
   debug('classNameBindings: %o', classNameBindings);
 
+  let dataTestAttributes = findDataTestAttributes(properties);
+  debug('dataTestAttributes: %o', dataTestAttributes);
+
   let ariaRole;
   try {
     ariaRole = findAriaRole(properties);
@@ -155,6 +160,7 @@ module.exports = function transformClassicComponent(root, options) {
         isProperty(path, 'attributeBindings') ||
         isProperty(path, 'classNames') ||
         isProperty(path, 'classNameBindings') ||
+        isStartsWithProperty(path, 'data-test-') ||
         isProperty(path, 'ariaRole')
     )
     .remove();
@@ -168,6 +174,7 @@ module.exports = function transformClassicComponent(root, options) {
     classNames,
     classNameBindings,
     attributeBindings,
+    dataTestAttributes,
     ariaRole,
   };
 };

lib/transform/native.js

@@ -141,6 +141,15 @@ module.exports = function transformNativeComponent(root, options) {
     .forEach(path => removeDecorator(root, path, 'className', '@ember-decorators/component'));
 
   let newSource = root.toSource();
-
-  return { newSource, tagName, elementId, classNames, classNameBindings, attributeBindings };
+  let dataTestAttributes = new Map();
+
+  return {
+    newSource,
+    tagName,
+    elementId,
+    classNames,
+    classNameBindings,
+    attributeBindings,
+    dataTestAttributes,
+  };
 };

lib/transform/template.js

@@ -8,7 +8,15 @@ const PLACEHOLDER = '@@@PLACEHOLDER@@@';
 
 module.exports = function transformTemplate(
   template,
-  { tagName, elementId, classNames, classNameBindings, attributeBindings, ariaRole },
+  {
+    tagName,
+    elementId,
+    classNames,
+    classNameBindings,
+    attributeBindings,
+    ariaRole,
+    dataTestAttributes,
+  },
   options
 ) {
   // wrap existing template with root element
@@ -50,6 +58,9 @@ module.exports = function transformTemplate(
 
     attrs.push(b.attr('class', b.concat(parts)));
   }
+  dataTestAttributes.forEach((value, key) => {
+    attrs.push(b.attr(key, b.text(value)));
+  });
   attrs.push(b.attr('...attributes', b.text('')));
 
   let templateAST = templateRecast.parse(template);

lib/utils/classic.js

@@ -7,6 +7,18 @@ function isProperty(path, name) {
   return node.type === 'ObjectProperty' && node.key.type === 'Identifier' && node.key.name === name;
 }
 
+function isStartsWithProperty(path, name) {
+  let node = path.value;
+  if (node.type === 'ObjectProperty') {
+    if (node.key.type === 'Identifier') {
+      return node.key.name.startsWith(name);
+    }
+    if (node.key.type === 'StringLiteral') {
+      return node.key.value.startsWith(name);
+    }
+  }
+}
+
 function isMethod(path, name) {
   let node = path.value;
   return node.type === 'ObjectMethod' && node.key.type === 'Identifier' && node.key.name === name;
@@ -91,15 +103,46 @@ function findClassNameBindings(properties) {
   return classNameBindings;
 }
 
+function findDataTestAttributes(properties) {
+  let nodes = properties.filter(path => isStartsWithProperty(path, 'data-test-'));
+  if (!nodes) {
+    return [];
+  }
+  const mappedProperties = nodes.map(node => {
+    return {
+      name: node.value.key.value,
+      value: node.value.value.value,
+      valueType: node.value.value.type,
+    };
+  });
+
+  let dataTestAttributes = new Map();
+  for (let { name, value, valueType } of mappedProperties) {
+    if (valueType === 'BooleanLiteral') {
+      if (value) {
+        dataTestAttributes.set(name, null);
+      }
+    } else if (valueType === 'NumericLiteral' || valueType === 'StringLiteral') {
+      dataTestAttributes.set(name, String(value));
+    } else {
+      throw new SilentError(`Unsupported value for '${name}'`);
+    }
+  }
+
+  return dataTestAttributes;
+}
+
 module.exports = {
   isProperty,
+  isStartsWithProperty,
   isMethod,
   findStringProperty,
   findStringArrayProperties,
   findAriaRole,
   findAttributeBindings,
   findClassNames,
   findClassNameBindings,
+  findDataTestAttributes,
   findElementId,
   findTagName,
 };