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:
parent
627cecdfe2
commit
83fd66d1d0
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue