From 8502f0861a07da3d9cb1db3426761d9504086e8a Mon Sep 17 00:00:00 2001
From: Chad Hietala <chadhietala@gmail.com>
Date: Wed, 28 Sep 2016 20:39:12 -0700
Subject: [PATCH] [Bugfix Beta] Fix attrs in className and attribute bindings

---
 packages/ember-glimmer/lib/utils/bindings.js  | 11 +++++++
 .../components/attribute-bindings-test.js     | 31 +++++++++++++++++++
 .../components/class-bindings-test.js         | 31 +++++++++++++++++++
 3 files changed, 73 insertions(+)

diff --git a/packages/ember-glimmer/lib/utils/bindings.js b/packages/ember-glimmer/lib/utils/bindings.js
index ec38800761b..f84c33bbf76 100644
--- a/packages/ember-glimmer/lib/utils/bindings.js
+++ b/packages/ember-glimmer/lib/utils/bindings.js
@@ -14,6 +14,17 @@ function referenceForKey(component, key) {
 }
 
 function referenceForParts(component, parts) {
+  let isAttrs = parts[0] === 'attrs';
+
+  // TODO deprecate this
+  if (isAttrs) {
+    parts.shift();
+
+    if (parts.length === 1) {
+      return referenceForKey(component, parts[0]);
+    }
+  }
+
   return referenceFromParts(component[ROOT_REF], parts);
 }
 
diff --git a/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js b/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js
index aa1f73abc9c..f2b15d34047 100644
--- a/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js
+++ b/packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js
@@ -34,6 +34,37 @@ moduleFor('Attribute bindings integration', class extends RenderingTest {
     this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'data-foo': 'foo', 'data-bar': 'bar' }, content: 'hello' });
   }
 
+  ['@test it can have attribute bindings with attrs']() {
+    let FooBarComponent = Component.extend({
+      attributeBindings: ['attrs.foo:data-foo', 'attrs.baz.bar:data-bar']
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar foo=model.foo baz=model.baz}}', {
+      model: { foo: undefined, baz: { bar: 'bar' } }
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', content: 'hello', attrs: { 'data-bar': 'bar' } });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', content: 'hello', attrs: { 'data-bar': 'bar' } });
+
+    this.runTask(() => {
+      set(this.context, 'model.foo', 'foo');
+      set(this.context, 'model.baz.bar', undefined);
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'data-foo': 'foo' }, content: 'hello' });
+
+    this.runTask(() => set(this.context, 'model', {
+      foo: undefined, baz: { bar: 'bar' }
+    }));
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', content: 'hello', attrs: { 'data-bar': 'bar' } });
+  }
+
   ['@test it can have attribute bindings with a nested path']() {
     let FooBarComponent = Component.extend({
       attributeBindings: ['foo.bar:data-foo-bar']
diff --git a/packages/ember-glimmer/tests/integration/components/class-bindings-test.js b/packages/ember-glimmer/tests/integration/components/class-bindings-test.js
index 67ee73b0df7..41f8a3c475b 100644
--- a/packages/ember-glimmer/tests/integration/components/class-bindings-test.js
+++ b/packages/ember-glimmer/tests/integration/components/class-bindings-test.js
@@ -44,6 +44,37 @@ moduleFor('ClassNameBindings integration', class extends RenderingTest {
     this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view foo enabled sad') }, content: 'hello' });
   }
 
+  ['@test attrs in classNameBindings']() {
+    let FooBarComponent = Component.extend({
+      classNameBindings: ['attrs.joker:purple:green', 'attrs.batman.robin:black:red']
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar joker=model.wat batman=model.super}}', {
+      model: { wat: false, super: { robin: true } }
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view green black') }, content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view green black') }, content: 'hello' });
+
+    this.runTask(() => {
+      set(this.context, 'model.wat', true);
+      set(this.context, 'model.super.robin', false);
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view purple red') }, content: 'hello' });
+
+    this.runTask(() => set(this.context, 'model', {
+      wat: false, super: { robin: true }
+    }));
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view green black') }, content: 'hello' });
+  }
+
   ['@test it can have class name bindings in the template']() {
     this.registerComponent('foo-bar', { template: 'hello' });