diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts index 1c2c3e47f2..40eb1e4380 100644 --- a/packages/core/test/linker/integration_spec.ts +++ b/packages/core/test/linker/integration_spec.ts @@ -103,7 +103,8 @@ function declareTests({useJit}: {useJit: boolean}) { fixture.componentInstance.ctxProp = 'Hello World!'; fixture.detectChanges(); - expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!'); + expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'id')) + .toEqual('Hello World!'); }); it('should consume binding to aria-* attributes', () => { @@ -165,11 +166,13 @@ function declareTests({useJit}: {useJit: boolean}) { const fixture = TestBed.createComponent(MyComp); fixture.detectChanges(); - expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0); + expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'tabIndex')) + .toEqual(0); fixture.componentInstance.ctxNumProp = 5; fixture.detectChanges(); - expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5); + expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'tabIndex')) + .toEqual(5); }); it('should consume binding to camel-cased properties', () => { @@ -179,11 +182,13 @@ function declareTests({useJit}: {useJit: boolean}) { const fixture = TestBed.createComponent(MyComp); fixture.detectChanges(); - expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy(); + expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'readOnly')) + .toBeFalsy(); fixture.componentInstance.ctxBoolProp = true; fixture.detectChanges(); - expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy(); + expect(getDOM().getProperty(fixture.debugElement.children[0].nativeElement, 'readOnly')) + .toBeTruthy(); }); it('should consume binding to innerHtml', () => { @@ -228,7 +233,7 @@ function declareTests({useJit}: {useJit: boolean}) { fixture.debugElement.componentInstance.ctxProp = 'foo'; fixture.detectChanges(); - expect(nativeEl.htmlFor).toBe('foo'); + expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo'); }); it('should consume directive watch expression change.', () => { @@ -897,7 +902,7 @@ function declareTests({useJit}: {useJit: boolean}) { fixture.detectChanges(); - expect(tc.nativeElement.id).toEqual('newId'); + expect(getDOM().getProperty(tc.nativeElement, 'id')).toEqual('newId'); }); it('should not use template variables for expressions in hostProperties', () => { @@ -1573,7 +1578,7 @@ function declareTests({useJit}: {useJit: boolean}) { fixture.detectChanges(); const el = getDOM().querySelector(fixture.nativeElement, 'span'); - expect(el.title).toEqual('TITLE'); + expect(getDOM().getProperty(el, 'title')).toEqual('TITLE'); }); }); diff --git a/packages/platform-server/src/parse5_adapter.ts b/packages/platform-server/src/parse5_adapter.ts index 789cb76f95..590c9bbdd1 100644 --- a/packages/platform-server/src/parse5_adapter.ts +++ b/packages/platform-server/src/parse5_adapter.ts @@ -85,12 +85,17 @@ export class Parse5DomAdapter extends DomAdapter { } else if (name === 'className') { el.attribs['class'] = el.className = value; } else { - el[name] = value; + // Store the property in a separate property bag so that it doesn't clobber + // actual parse5 properties on the Element. + el.properties = el.properties || {}; + el.properties[name] = value; } } // TODO(tbosch): don't even call this method when we run the tests on server side // by not using the DomRenderer in tests. Keeping this for now to make tests happy... - getProperty(el: any, name: string): any { return el[name]; } + getProperty(el: any, name: string): any { + return el.properties ? el.properties[name] : undefined; + } logError(error: string) { console.error(error); } diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts index 92992bcff9..5844a11c36 100644 --- a/packages/platform-server/test/integration_spec.ts +++ b/packages/platform-server/test/integration_spec.ts @@ -197,6 +197,20 @@ class MyHostComponent { class FalseAttributesModule { } +@Component({selector: 'app', template: ''}) +class MyInputComponent { + @Input() + name = ''; +} + +@NgModule({ + declarations: [MyInputComponent], + bootstrap: [MyInputComponent], + imports: [ServerModule, BrowserModule.withServerTransition({appId: 'name-attributes'})] +}) +class NameModule { +} + export function main() { if (getDOM().supportsDOMEvents()) return; // NODE only @@ -439,13 +453,22 @@ export function main() { })); it('should handle false values on attributes', async(() => { - renderModule(FalseAttributesModule, {document: doc}).then((output) => { + renderModule(FalseAttributesModule, {document: doc}).then(output => { expect(output).toBe( '' + 'Works!'); called = true; }); })); + + it('should handle element property "name"', async(() => { + renderModule(NameModule, {document: doc}).then(output => { + expect(output).toBe( + '' + + ''); + called = true; + }); + })); }); describe('http', () => {