Strip "data-test-" attributes from component and helper invocations (#40

)

* tests/integration: Renamed tests to better express intention

These tests are only used to check the stripping on HTML tags, not components.

* dummy: Rename "data-test" component to "data-test-component"

This conflicts with using a `{{data-test}}` property inside a component template

* Strip "data-test-" attributes from component and helper invocations

* dummy/components/print-test-attributes: Adjusted CSS selector names

strip-test-selectors.js

@@ -13,6 +13,10 @@ StripTestSelectorsTransform.prototype.transform = function(ast) {
       node.attributes = node.attributes.filter(function(attribute) {
         return !TEST_SELECTOR_PREFIX.test(attribute.name);
       });
+    } else if (node.type === 'MustacheStatement' || node.type === 'BlockStatement') {
+      node.hash.pairs = node.hash.pairs.filter(function(pair) {
+        return !TEST_SELECTOR_PREFIX.test(pair.key);
+      });
     }
   });
 

tests/dummy/app/templates/components/print-test-attributes.hbs

@@ -0,0 +1,4 @@
+<div class="data-test-first">{{data-test-first}}</div>
+<div class="data-test-second">{{data-test-second}}</div>
+<div class="data-non-test">{{data-non-test}}</div>
+<div class="data-test">{{data-test}}</div>

tests/integration/strip-data-test-attributes-from-components-test.js

@@ -0,0 +1,58 @@
+import { moduleForComponent, test } from "ember-qunit";
+import hbs from "htmlbars-inline-precompile";
+
+import config from 'dummy/config/environment';
+
+moduleForComponent('print-test-attributes', 'StripTestSelectorsTransform plugin', {
+  integration: true
+});
+
+if (config.stripTestSelectors) {
+
+  test('it strips data-test-* attributes from components', function (assert) {
+    this.render(hbs`{{print-test-attributes data-test-first="foobar"}}`);
+
+    assert.equal(this.$('.data-test-first').text(), '', 'the data-test-first was stripped');
+  });
+
+  test('it strips data-test-* attributes from components in block form', function (assert) {
+    this.render(hbs`{{#print-test-attributes data-test-first="foobar"}}hello{{/print-test-attributes}}`);
+
+    assert.equal(this.$('.data-test-first').text(), '', 'the data-test-first was stripped');
+  });
+
+  test('it works with multiple data-test-* attributes on components', function (assert) {
+    this.render(hbs`{{print-test-attributes data-test-first="foobar" data-test-second="second"}}`);
+
+    assert.equal(this.$('.data-test-first').text(), '', 'the data-test-first was stripped');
+    assert.equal(this.$('.data-test-second').text(), '', 'the data-test-second attribute was stripped');
+  });
+
+  test('it leaves other data attributes untouched, when a data-test-* attribute is present as well on components', function (assert) {
+    this.render(hbs`{{print-test-attributes data-test-first="foobar" data-non-test="baz"}}`);
+
+    assert.equal(this.$('.data-test-first').text(), '', 'the data-test-first was stripped');
+    assert.equal(this.$('.data-non-test').text(), 'baz', 'the data-non-test attribute was not stripped');
+  });
+
+  test('it leaves data-test attributes untouched on components', function (assert) {
+    this.render(hbs`{{print-test-attributes data-test="foo"}}`);
+
+    assert.equal(this.$('.data-test').text(), 'foo', 'the data-test attribute was stripped');
+  });
+
+  test('it leaves other data attributes untouched on components', function (assert) {
+    this.render(hbs`{{print-test-attributes data-non-test="foo"}}`);
+
+    assert.equal(this.$('.data-non-test').text(), 'foo', 'the data-non-test attribute was not stripped');
+  });
+
+} else {
+
+  test('it does not strip data-test-* attributes from components', function (assert) {
+    this.render(hbs`{{print-test-attributes data-test-first="foobar"}}`);
+
+    assert.equal(this.$('.data-test-first').text(), 'foobar', 'the data-test-first attribute was not stripped');
+  });
+
+}

tests/integration/strip-data-test-attributes-test.js → tests/integration/strip-data-test-attributes-from-tags-test.js

@@ -3,43 +3,43 @@ import hbs from "htmlbars-inline-precompile";
 
 import config from 'dummy/config/environment';
 
-moduleForComponent('data-test', 'StripTestSelectorsTransform plugin', {
+moduleForComponent('data-test-component', 'StripTestSelectorsTransform plugin', {
   integration: true
 });
 
 if (config.stripTestSelectors) {
 
-  test('it strips data-test-* attributes', function (assert) {
+  test('it strips data-test-* attributes from HTML tags', function (assert) {
     this.render(hbs`<span data-test-id="my-id" ></span>`);
 
     assert.equal(this.$('span').length, 1, 'the span is present');
     assert.equal(this.$('span[data-test-id="my-id"]').length, 0, 'data-test-id is stripped');
   });
 
-  test('it works with multiple data-test-* attributes', function (assert) {
+  test('it works with multiple data-test-* attributes on HTML tags', function (assert) {
     this.render(hbs`<span data-test-first data-test-second"second-id" ></span>`);
 
     assert.equal(this.$('span').length, 1, 'the span is present');
     assert.equal(this.$('span[data-test-first]').length, 0, 'data-test-first is stripped');
     assert.equal(this.$('span[data-test-second="second-id"]').length, 0, 'data-test-second is stripped');
   });
 
-  test('it leaves other data attributes untouched, when a data-test-* attribute is present as well', function (assert) {
+  test('it leaves other data attributes untouched, when a data-test-* attribute is present as well on HTML tags', function (assert) {
     this.render(hbs`<span data-id="my-id" data-test-id="my-test-id" ></span>`);
 
     assert.equal(this.$('span').length, 1, 'the span is present');
     assert.equal(this.$('span[data-id="my-id"]').length, 1, 'data-id is not stripped');
     assert.equal(this.$('span[data-test-id="my-test-id"]').length, 0, 'data-test-id is stripped');
   });
 
-  test('it leaves data-test attributes untouched', function (assert) {
+  test('it leaves data-test attributes untouched on HTML tags', function (assert) {
     this.render(hbs`<span data-test="my-id" ></span>`);
 
     assert.equal(this.$('span').length, 1, 'the span is present');
     assert.equal(this.$('span[data-test="my-id"]').length, 1, 'data-test-id is not stripped');
   });
 
-  test('it leaves other data attributes untouched', function (assert) {
+  test('it leaves other data attributes untouched on HTML tags', function (assert) {
     this.render(hbs`<span data-id="my-id" ></span>`);
 
     assert.equal(this.$('span').length, 1, 'the span is present');
@@ -48,7 +48,7 @@ if (config.stripTestSelectors) {
 
 } else {
 
-  test('it does not strip data-test-* attributes', function (assert) {
+  test('it does not strip data-test-* attributes from HTML tags', function (assert) {
     this.render(hbs`<span data-test-id="my-id" ></span>`);
 
     assert.equal(this.$('span').length, 1, 'the span is present');