Merge pull request #15924 from GavinJoyce/gj/class-name-bindings-stri…

…ng-assertion [BUGFIX beta] assert that `classNameBinding` items are strings
emberjs · Dec 7, 2017 · a8c0232 · a8c0232
2 parents 467ba80 + ded7aa3
commit a8c0232
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/ember-glimmer/lib/component-managers/curly.ts b/packages/ember-glimmer/lib/component-managers/curly.ts
@@ -412,7 +412,19 @@ export function validatePositionalParameters(named: NamedArguments, positional:
 }
 
 export function processComponentInitializationAssertions(component: Component, props: any) {
-  assert(`classNameBindings must not have spaces in them: ${component.toString()}`, (() => {
+  assert(`classNameBindings must be strings: ${component}`, (() => {
+    let { classNameBindings } = component;
+    for (let i = 0; i < classNameBindings.length; i++) {
+      let binding = classNameBindings[i];
+
+      if (typeof binding !== 'string') {
+        return false;
+      }
+    }
+    return true;
+  })());
+
+  assert(`classNameBindings must not have spaces in them: ${component}`, (() => {
     let { classNameBindings } = component;
     for (let i = 0; i < classNameBindings.length; i++) {
       let binding = classNameBindings[i];
@@ -423,14 +435,14 @@ export function processComponentInitializationAssertions(component: Component, p
     return true;
   })());
 
-  assert('You cannot use `classNameBindings` on a tag-less component: ' + component.toString(),
+  assert(`You cannot use \`classNameBindings\` on a tag-less component: ${component}`,
     component.tagName !== '' || !component.classNameBindings || component.classNameBindings.length === 0);
 
-  assert('You cannot use `elementId` on a tag-less component: ' + component.toString(),
+  assert(`You cannot use \`elementId\` on a tag-less component: ${component}`,
     component.tagName !== '' || props.id === component.elementId ||
     (!component.elementId && component.elementId !== ''));
 
-  assert('You cannot use `attributeBindings` on a tag-less component: ' + component.toString(),
+  assert(`You cannot use \`attributeBindings\` on a tag-less component: ${component}`,
     component.tagName !== '' || !component.attributeBindings || component.attributeBindings.length === 0);
 }
 

diff --git a/packages/ember-glimmer/tests/integration/components/class-bindings-test.js b/packages/ember-glimmer/tests/integration/components/class-bindings-test.js
@@ -293,6 +293,20 @@ moduleFor('ClassNameBindings integration', class extends RenderingTest {
     }, /classNameBindings must not have spaces in them/i);
   }
 
+  ['@test it asserts that items must be strings']() {
+    let FooBarComponent = Component.extend({
+      foo: 'foo',
+      bar: 'bar',
+      classNameBindings: ['foo', ,'bar'] // eslint-disable-line no-sparse-arrays
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    expectAssertion(() => {
+      this.render('{{foo-bar}}');
+    }, /classNameBindings must be strings/);
+  }
+
   ['@test it can set class name bindings in the constructor']() {
     let FooBarComponent = Component.extend({
       classNameBindings: ['foo'],