Merge pull request #14106 from rwjblue/do-not-assert-on-id

[BUGFIX beta] Avoid assertion when `id=` is provided to tagless components.
emberjs · Aug 21, 2016 · 3ce9336 · 3ce9336
2 parents ac66e53 + 64a6853
commit 3ce9336
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/ember-glimmer/lib/syntax/curly-component.js b/packages/ember-glimmer/lib/syntax/curly-component.js
@@ -186,7 +186,7 @@ class CurlyComponentManager {
 
     assert('You cannot use `elementId` on a tag-less component: ' + component.toString(), (() => {
       let { elementId, tagName } = component;
-      return tagName !== '' || (!elementId && elementId !== '');
+      return tagName !== '' || props.id === elementId || (!elementId && elementId !== '');
     })());
 
     assert('You cannot use `attributeBindings` on a tag-less component: ' + component.toString(), (() => {

diff --git a/packages/ember-glimmer/tests/integration/components/fragment-components-test.js b/packages/ember-glimmer/tests/integration/components/fragment-components-test.js
@@ -130,6 +130,41 @@ moduleFor('Components test: fragment components', class extends RenderingTest {
     }, /You cannot use `elementId` on a tag-less component/);
   }
 
+  ['@test throws an error if `tagName` is an empty string and `elementId` is specified via template']() {
+    let template = `hit dem folks`;
+    let FooBarComponent = Component.extend({
+      tagName: ''
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template });
+    expectAssertion(() => {
+      this.render(`{{#foo-bar elementId='turntUp'}}{{/foo-bar}}`);
+    }, /You cannot use `elementId` on a tag-less component/);
+  }
+
+  ['@test does not throw an error if `tagName` is an empty string and `id` is specified via JS']() {
+    let template = `{{id}}`;
+    let FooBarComponent = Component.extend({
+      tagName: '',
+      id: 'baz'
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template });
+    this.render(`{{#foo-bar}}{{/foo-bar}}`);
+    this.assertText('baz');
+  }
+
+  ['@test does not throw an error if `tagName` is an empty string and `id` is specified via template']() {
+    let template = `{{id}}`;
+    let FooBarComponent = Component.extend({
+      tagName: ''
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template });
+    this.render(`{{#foo-bar id='baz'}}{{/foo-bar}}`);
+    this.assertText('baz');
+  }
+
   ['@test throws an error if when $() is accessed on component where `tagName` is an empty string']() {
     let template = `hit dem folks`;
     let FooBarComponent = Component.extend({

diff --git a/packages/ember-htmlbars/lib/system/build-component-template.js b/packages/ember-htmlbars/lib/system/build-component-template.js
@@ -41,7 +41,7 @@ export default function buildComponentTemplate({ component, tagName, layout, out
 
     assert('You cannot use `elementId` on a tag-less component: ' + component.toString(), (() => {
       let { elementId } = component;
-      return tagName !== '' || (!elementId && elementId !== '');
+      return tagName !== '' || attrs.id === elementId || (!elementId && elementId !== '');
     })());
 
     assert('You cannot use `attributeBindings` on a tag-less component: ' + component.toString(), (() => {