feat(ivy): support host properties in DebugElement.properties (#28355)

DebugElement.properties should contain a map of element
property names to element property values, with entries
for both normal property bindings and host bindings.
Many Angular core tests depend on this map being present.

This commit adds support for host property bindings in
DebugElement.properties, which fixes the Angular core tests.
There is still work to be done for normal property bindings.

PR Close #28355
This commit is contained in:
Kara Erickson
2019-01-22 15:02:52 -08:00
committed by Jason Aden
parent c522e03fe9
commit 46aec4a58f
7 changed files with 213 additions and 175 deletions

View File

@ -239,14 +239,35 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
get name(): string { return this.nativeElement !.nodeName; }
/**
* Returns a map of property names to property values for an element.
*
* This map includes:
* - Regular property bindings (e.g. `[id]="id"`) - TODO
* - Host property bindings (e.g. `host: { '[id]': "id" }`)
* - Interpolated property bindings (e.g. `id="{{ value }}") - TODO
*
* It should NOT include input property bindings or attribute bindings.
*/
get properties(): {[key: string]: any;} {
const context = loadLContext(this.nativeNode) !;
const lView = context.lView;
const tView = lView[TVIEW];
const tNode = tView.data[context.nodeIndex] as TNode;
const properties = {};
// TODO: https://angular-team.atlassian.net/browse/FW-681
// Missing implementation here...
const tData = lView[TVIEW].data;
const tNode = tData[context.nodeIndex] as TNode;
// TODO(kara): include regular property binding values (not just host properties)
const properties: {[key: string]: string} = {};
// Host binding values for a node are stored after directives on that node
let index = tNode.directiveEnd;
let propertyName = tData[index];
// When we reach a value in TView.data that is not a string, we know we've
// hit the next node's providers and directives and should stop copying data.
while (typeof propertyName === 'string') {
properties[propertyName] = lView[index];
propertyName = tData[++index];
}
return properties;
}

View File

@ -1154,6 +1154,14 @@ function elementPropertyInternal<T>(
validateProperty(propName);
ngDevMode.rendererSetProperty++;
}
const tView = lView[TVIEW];
const lastBindingIndex = lView[BINDING_INDEX] - 1;
if (nativeOnly && tView.data[lastBindingIndex] == null) {
// We need to store the host property name so it can be accessed by DebugElement.properties.
// Host properties cannot have interpolations, so using the last binding index is
// sufficient.
tView.data[lastBindingIndex] = propName;
}
const renderer = loadRendererFn ? loadRendererFn(tNode, lView) : lView[RENDERER];
// It is assumed that the sanitizer is only added when the compiler determines that the property
// is risky, so sanitization can be done without further checks.

View File

@ -556,11 +556,14 @@ export type HookData = (number | (() => void))[];
* Each pipe's definition is stored here at the same index as its pipe instance in
* the data array.
*
* Each host property's name is stored here at the same index as its value in the
* data array.
*
* Injector bloom filters are also stored here.
*/
export type TData =
(TNode | PipeDef<any>| DirectiveDef<any>| ComponentDef<any>| number | Type<any>|
InjectionToken<any>| TI18n | I18nUpdateOpCodes | null)[];
InjectionToken<any>| TI18n | I18nUpdateOpCodes | null | string)[];
// Note: This hack is necessary so we don't erroneously get a circular dependency
// failure based on types.