honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

31
packages/core/src/debug/debug_node.ts
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;
}

8
packages/core/src/render3/instructions.ts
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.

5
packages/core/src/render3/interfaces/view.ts
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.

12
packages/core/test/linker/integration_spec.ts
View File

@ -924,19 +924,17 @@ function declareTests(config?: {useJit: boolean}) {
expect(getDOM().getProperty(tc.nativeElement, 'id')).toEqual('newId');
});
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should not use template variables for expressions in hostProperties', () => {
@Directive(
{selector: '[host-properties]', host: {'[id]': 'id', '[title]': 'unknownProp'}})
it('should not use template variables for expressions in hostProperties', () => {
@Directive({selector: '[host-properties]', host: {'[id]': 'id', '[title]': 'unknownProp'}})
class DirectiveWithHostProps {
id = 'one';
}
const fixture =
TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]})
.overrideComponent(MyComp, {
set: {template: `<div *ngFor="let id of ['forId']" host-properties></div>`}
})
.overrideComponent(
MyComp,
{set: {template: `<div *ngFor="let id of ['forId']" host-properties></div>`}})
.createComponent(MyComp);
fixture.detectChanges();

28
packages/core/test/linker/ng_module_integration_spec.ts
View File

@ -423,8 +423,7 @@ function declareTests(config?: {useJit: boolean}) {
});
describe('directives and pipes', () => {
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.describe('declarations', () => {
describe('declarations', () => {
it('should be supported in root modules', () => {
@NgModule({
declarations: [CompUsingModuleDirectiveAndPipe, SomeDirective, SomePipe],
@ -469,8 +468,8 @@ function declareTests(config?: {useJit: boolean}) {
@NgModule({
declarations: [
ParentCompUsingModuleDirectiveAndPipe, CompUsingModuleDirectiveAndPipe,
SomeDirective, SomePipe
ParentCompUsingModuleDirectiveAndPipe, CompUsingModuleDirectiveAndPipe, SomeDirective,
SomePipe
],
entryComponents: [ParentCompUsingModuleDirectiveAndPipe]
})
@ -486,10 +485,8 @@ function declareTests(config?: {useJit: boolean}) {
describe('import/export', () => {
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should support exported directives and pipes', () => {
@NgModule(
{declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
it('should support exported directives and pipes', () => {
@NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
class SomeImportedModule {
}
@ -508,8 +505,7 @@ function declareTests(config?: {useJit: boolean}) {
.toBe('transformed someValue');
});
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should support exported directives and pipes if the module is wrapped into an `ModuleWithProviders`',
it('should support exported directives and pipes if the module is wrapped into an `ModuleWithProviders`',
() => {
@NgModule(
{declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
@ -531,10 +527,8 @@ function declareTests(config?: {useJit: boolean}) {
.toBe('transformed someValue');
});
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should support reexported modules', () => {
@NgModule(
{declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
it('should support reexported modules', () => {
@NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
class SomeReexportedModule {
}
@ -556,10 +550,8 @@ function declareTests(config?: {useJit: boolean}) {
.toBe('transformed someValue');
});
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should support exporting individual directives of an imported module', () => {
@NgModule(
{declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
it('should support exporting individual directives of an imported module', () => {
@NgModule({declarations: [SomeDirective, SomePipe], exports: [SomeDirective, SomePipe]})
class SomeReexportedModule {
}

21
packages/core/test/test_bed_spec.ts
View File

@ -52,6 +52,15 @@ export class WithRefsCmp {
export class InheritedCmp extends SimpleCmp {
}
@Directive({selector: '[dir]', host: {'[id]': 'id'}})
export class HostBindingDir {
id = 'one';
}
@Component({selector: 'host-binding-parent', template: '<div dir></div>'})
export class HostBindingParent {
}
@Component({
selector: 'simple-app',
template: `
@ -62,7 +71,9 @@ export class SimpleApp {
}
@NgModule({
declarations: [HelloWorld, SimpleCmp, WithRefsCmp, InheritedCmp, SimpleApp],
declarations: [
HelloWorld, SimpleCmp, WithRefsCmp, InheritedCmp, SimpleApp, HostBindingParent, HostBindingDir
],
imports: [GreetingModule],
providers: [
{provide: NAME, useValue: 'World!'},
@ -112,6 +123,14 @@ describe('TestBed', () => {
expect(greetingByCss.nativeElement).toHaveText('Hello TestBed!');
});
it('should give the ability to access host properties', () => {
const fixture = TestBed.createComponent(HostBindingParent);
fixture.detectChanges();
const divElement = fixture.debugElement.children[0];
expect(divElement.properties).toEqual({id: 'one'});
});
it('should give access to the node injector', () => {
const fixture = TestBed.createComponent(HelloWorld);
fixture.detectChanges();

9
packages/platform-browser/test/testing_public_spec.ts
View File

@ -251,8 +251,7 @@ class CompWithUrlTemplate {
expect(compFixture.componentInstance).toBeAnInstanceOf(CompUsingModuleDirectiveAndPipe);
});
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should use set up directives and pipes', () => {
it('should use set up directives and pipes', () => {
const compFixture = TestBed.createComponent(CompUsingModuleDirectiveAndPipe);
const el = compFixture.debugElement;
@ -289,8 +288,7 @@ class CompWithUrlTemplate {
expect(service.value).toEqual('real value');
}));
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should use set up directives and pipes', withModule(moduleConfig, () => {
it('should use set up directives and pipes', withModule(moduleConfig, () => {
const compFixture = TestBed.createComponent(CompUsingModuleDirectiveAndPipe);
const el = compFixture.debugElement;
@ -371,8 +369,7 @@ class CompWithUrlTemplate {
.overrideDirective(
SomeDirective, {set: {selector: '[someDir]', host: {'[title]': 'someProp'}}});
});
fixmeIvy('FW-681: not possible to retrieve host property bindings from TView')
.it('should work', () => {
it('should work', () => {
const compFixture = TestBed.createComponent(SomeComponent);
compFixture.detectChanges();
expect(compFixture.debugElement.children[0].properties['title']).toEqual('hello');