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
This commit is contained in:
Jeremy Elbourn 2019-02-13 11:30:02 -08:00 committed by Miško Hevery
parent 627cecdfe2
commit 83fd66d1d0
2 changed files with 26 additions and 11 deletions

View File

@ -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;

View File

@ -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();