From 83fd66d1d0875f5c2e7b9289f337fcb6330994af Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Wed, 13 Feb 2019 11:30:02 -0800
Subject: [PATCH] fix(ivy): DebugNode should read styles from StylingContext
 (#28709)

Previously `DebugNode.classes` and `DebugNode.styles` mistakenly used an
object that is only *sometimes* a `StylingContext`. Also fixes a mistake
in `debug_node_spec.ts` where a test component was not declared in the
testing module.

There is still a bug here where `DebugNode` is not exposing *static*
values. This will need to be fixed in a follow up.

PR Close #28709
---
 packages/core/src/debug/debug_node.ts       | 18 ++++++++----------
 packages/core/test/debug/debug_node_spec.ts | 19 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
index 1988b17017..b6c8396dd4 100644
--- a/packages/core/src/debug/debug_node.ts
+++ b/packages/core/src/debug/debug_node.ts
@@ -276,14 +276,13 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
     const element = this.nativeElement;
     if (element) {
       const lContext = loadLContextFromNode(element);
-      const lNode = lContext.lView[lContext.nodeIndex];
       const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
       if (stylingContext) {
-        for (let i = StylingIndex.SingleStylesStartPosition; i < lNode.length;
+        for (let i = StylingIndex.SingleStylesStartPosition; i < stylingContext.length;
              i += StylingIndex.Size) {
-          if (isClassBasedValue(lNode, i)) {
-            const className = getProp(lNode, i);
-            const value = getValue(lNode, i);
+          if (isClassBasedValue(stylingContext, i)) {
+            const className = getProp(stylingContext, i);
+            const value = getValue(stylingContext, i);
             if (typeof value == 'boolean') {
               // we want to ignore `null` since those don't overwrite the values.
               classes[className] = value;
@@ -306,14 +305,13 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
     const element = this.nativeElement;
     if (element) {
       const lContext = loadLContextFromNode(element);
-      const lNode = lContext.lView[lContext.nodeIndex];
       const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
       if (stylingContext) {
-        for (let i = StylingIndex.SingleStylesStartPosition; i < lNode.length;
+        for (let i = StylingIndex.SingleStylesStartPosition; i < stylingContext.length;
              i += StylingIndex.Size) {
-          if (!isClassBasedValue(lNode, i)) {
-            const styleName = getProp(lNode, i);
-            const value = getValue(lNode, i) as string | null;
+          if (!isClassBasedValue(stylingContext, i)) {
+            const styleName = getProp(stylingContext, i);
+            const value = getValue(stylingContext, i) as string | null;
             if (value !== null) {
               // we want to ignore `null` since those don't overwrite the values.
               styles[styleName] = value;
diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
index d96cdb5a23..5577ed49ac 100644
--- a/packages/core/test/debug/debug_node_spec.ts
+++ b/packages/core/test/debug/debug_node_spec.ts
@@ -138,7 +138,12 @@ class LocalsComp {
   template: `
    Bank Name: {{bank}}
    Account Id: {{id}}
- `
+ `,
+  host: {
+    'class': 'static-class',
+    '[class.absent-class]': 'false',
+    '[class.present-class]': 'true',
+  },
 })
 class BankAccount {
   // TODO(issue/24571): remove '!'.
@@ -185,6 +190,7 @@ class TestApp {
           ParentComp,
           TestApp,
           UsingFor,
+          BankAccount,
         ],
         providers: [Logger],
         schemas: [NO_ERRORS_SCHEMA],
@@ -276,6 +282,17 @@ class TestApp {
       expect(bankElem.classes['open']).toBe(false);
     });
 
+    it('should get element classes from host bindings', () => {
+      fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      const debugElement = fixture.debugElement.children[0];
+
+      expect(debugElement.classes['present-class'])
+          .toBe(true, 'Expected bound host CSS class "present-class" to be present');
+      expect(debugElement.classes['absent-class'])
+          .toBe(false, 'Expected bound host CSS class "absent-class" to be absent');
+    });
+
     it('should list element styles', () => {
       fixture = TestBed.createComponent(TestApp);
       fixture.detectChanges();