cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): DebugNode should read styles from StylingContext (#28709)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/src/debug/debug_node.ts
View File

@ -276,14 +276,13 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
const element = this.nativeElement; const element = this.nativeElement;
if (element) { if (element) {
const lContext = loadLContextFromNode(element); const lContext = loadLContextFromNode(element);
const lNode = lContext.lView[lContext.nodeIndex];
const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView); const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
if (stylingContext) { if (stylingContext) {
for (let i = StylingIndex.SingleStylesStartPosition; i < lNode.length; for (let i = StylingIndex.SingleStylesStartPosition; i < stylingContext.length;
i += StylingIndex.Size) { i += StylingIndex.Size) {
if (isClassBasedValue(lNode, i)) { if (isClassBasedValue(stylingContext, i)) {
const className = getProp(lNode, i); const className = getProp(stylingContext, i);
const value = getValue(lNode, i); const value = getValue(stylingContext, i);
if (typeof value == 'boolean') { if (typeof value == 'boolean') {
// we want to ignore `null` since those don't overwrite the values. // we want to ignore `null` since those don't overwrite the values.
classes[className] = value; classes[className] = value;
@ -306,14 +305,13 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
const element = this.nativeElement; const element = this.nativeElement;
if (element) { if (element) {
const lContext = loadLContextFromNode(element); const lContext = loadLContextFromNode(element);
const lNode = lContext.lView[lContext.nodeIndex];
const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView); const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
if (stylingContext) { if (stylingContext) {
for (let i = StylingIndex.SingleStylesStartPosition; i < lNode.length; for (let i = StylingIndex.SingleStylesStartPosition; i < stylingContext.length;
i += StylingIndex.Size) { i += StylingIndex.Size) {
if (!isClassBasedValue(lNode, i)) { if (!isClassBasedValue(stylingContext, i)) {
const styleName = getProp(lNode, i); const styleName = getProp(stylingContext, i);
const value = getValue(lNode, i) as string | null; const value = getValue(stylingContext, i) as string | null;
if (value !== null) { if (value !== null) {
// we want to ignore `null` since those don't overwrite the values. // we want to ignore `null` since those don't overwrite the values.
styles[styleName] = value; styles[styleName] = value;

19
packages/core/test/debug/debug_node_spec.ts
View File

@ -138,7 +138,12 @@ class LocalsComp {
template: ` template: `
Bank Name: {{bank}} Bank Name: {{bank}}
Account Id: {{id}} Account Id: {{id}}
` `,
host: {
'class': 'static-class',
'[class.absent-class]': 'false',
'[class.present-class]': 'true',
},
}) })
class BankAccount { class BankAccount {
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
@ -185,6 +190,7 @@ class TestApp {
ParentComp, ParentComp,
TestApp, TestApp,
UsingFor, UsingFor,
BankAccount,
], ],
providers: [Logger], providers: [Logger],
schemas: [NO_ERRORS_SCHEMA], schemas: [NO_ERRORS_SCHEMA],
@ -276,6 +282,17 @@ class TestApp {
expect(bankElem.classes['open']).toBe(false); 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', () => { it('should list element styles', () => {
fixture = TestBed.createComponent(TestApp); fixture = TestBed.createComponent(TestApp);
fixture.detectChanges(); fixture.detectChanges();