From 70767733603e8d1d7dbb408315f6aec3d798030f Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Wed, 28 Nov 2018 12:18:44 +0100 Subject: [PATCH] test(ivy): update root causes for @angular/core TestBed failures (#27321) PR Close #27321 --- packages/core/test/linker/integration_spec.ts | 188 +++++++++--------- .../linker/projection_integration_spec.ts | 145 +++++++------- 2 files changed, 162 insertions(+), 171 deletions(-) diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts index 24780ee87c..9404cd0ba2 100644 --- a/packages/core/test/linker/integration_spec.ts +++ b/packages/core/test/linker/integration_spec.ts @@ -28,16 +28,13 @@ import {stringify} from '../../src/util'; const ANCHOR_ELEMENT = new InjectionToken('AnchorElement'); -{ - if (ivyEnabled) { - describe('ivy', () => { declareTests(); }); - } else { - describe('jit', () => { declareTests({useJit: true}); }); - describe('no jit', () => { declareTests({useJit: false}); }); - } +if (ivyEnabled) { + describe('ivy', () => { declareTests(); }); +} else { + describe('jit', () => { declareTests({useJit: true}); }); + describe('no jit', () => { declareTests({useJit: false}); }); } - function declareTests(config?: {useJit: boolean}) { describe('integration tests', function() { @@ -227,19 +224,18 @@ function declareTests(config?: {useJit: boolean}) { expect(nativeEl).not.toHaveCssClass('initial'); }); - fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work') && - it('should consume binding to htmlFor using for alias', () => { - const template = ''; - const fixture = TestBed.configureTestingModule({declarations: [MyComp]}) - .overrideComponent(MyComp, {set: {template}}) - .createComponent(MyComp); + it('should consume binding to htmlFor using for alias', () => { + const template = ''; + const fixture = TestBed.configureTestingModule({declarations: [MyComp]}) + .overrideComponent(MyComp, {set: {template}}) + .createComponent(MyComp); - const nativeEl = fixture.debugElement.children[0].nativeElement; - fixture.debugElement.componentInstance.ctxProp = 'foo'; - fixture.detectChanges(); + const nativeEl = fixture.debugElement.children[0].nativeElement; + fixture.debugElement.componentInstance.ctxProp = 'foo'; + fixture.detectChanges(); - expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo'); - }); + expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo'); + }); fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work') && it('should consume directive watch expression change.', () => { @@ -856,48 +852,52 @@ function declareTests(config?: {useJit: boolean}) { dir.triggerChange('two'); })); - fixmeIvy('unknown') && it('should support render events', () => { - TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]}); - const template = '
'; - TestBed.overrideComponent(MyComp, {set: {template}}); - const fixture = TestBed.createComponent(MyComp); + fixmeIvy( + 'FW-743: Registering events on global objects (document, window, body) is not supported') && + it('should support render events', () => { + TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]}); + const template = '
'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const tc = fixture.debugElement.children[0]; - const listener = tc.injector.get(DirectiveListeningDomEvent); + const tc = fixture.debugElement.children[0]; + const listener = tc.injector.get(DirectiveListeningDomEvent); - dispatchEvent(tc.nativeElement, 'domEvent'); + dispatchEvent(tc.nativeElement, 'domEvent'); - expect(listener.eventTypes).toEqual([ - 'domEvent', 'body_domEvent', 'document_domEvent', 'window_domEvent' - ]); + expect(listener.eventTypes).toEqual([ + 'domEvent', 'body_domEvent', 'document_domEvent', 'window_domEvent' + ]); - fixture.destroy(); - listener.eventTypes = []; - dispatchEvent(tc.nativeElement, 'domEvent'); - expect(listener.eventTypes).toEqual([]); - }); + fixture.destroy(); + listener.eventTypes = []; + dispatchEvent(tc.nativeElement, 'domEvent'); + expect(listener.eventTypes).toEqual([]); + }); - fixmeIvy('unknown') && it('should support render global events', () => { - TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]}); - const template = '
'; - TestBed.overrideComponent(MyComp, {set: {template}}); - const fixture = TestBed.createComponent(MyComp); - const doc = TestBed.get(DOCUMENT); + fixmeIvy( + 'FW-743: Registering events on global objects (document, window, body) is not supported') && + it('should support render global events', () => { + TestBed.configureTestingModule({declarations: [MyComp, DirectiveListeningDomEvent]}); + const template = '
'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); + const doc = TestBed.get(DOCUMENT); - const tc = fixture.debugElement.children[0]; - const listener = tc.injector.get(DirectiveListeningDomEvent); - dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent'); - expect(listener.eventTypes).toEqual(['window_domEvent']); + const tc = fixture.debugElement.children[0]; + const listener = tc.injector.get(DirectiveListeningDomEvent); + dispatchEvent(getDOM().getGlobalEventTarget(doc, 'window'), 'domEvent'); + expect(listener.eventTypes).toEqual(['window_domEvent']); - listener.eventTypes = []; - dispatchEvent(getDOM().getGlobalEventTarget(doc, 'document'), 'domEvent'); - expect(listener.eventTypes).toEqual(['document_domEvent', 'window_domEvent']); + listener.eventTypes = []; + dispatchEvent(getDOM().getGlobalEventTarget(doc, 'document'), 'domEvent'); + expect(listener.eventTypes).toEqual(['document_domEvent', 'window_domEvent']); - fixture.destroy(); - listener.eventTypes = []; - dispatchEvent(getDOM().getGlobalEventTarget(doc, 'body'), 'domEvent'); - expect(listener.eventTypes).toEqual([]); - }); + fixture.destroy(); + listener.eventTypes = []; + dispatchEvent(getDOM().getGlobalEventTarget(doc, 'body'), 'domEvent'); + expect(listener.eventTypes).toEqual([]); + }); it('should support updating host element via hostAttributes on root elements', () => { @Component({host: {'role': 'button'}, template: ''}) @@ -1034,7 +1034,8 @@ function declareTests(config?: {useJit: boolean}) { }); } - fixmeIvy('unknown') && + fixmeIvy( + 'FW-743: Registering events on global objects (document, window, body) is not supported') && it('should support render global events from multiple directives', () => { TestBed.configureTestingModule({ declarations: [MyComp, DirectiveListeningDomEvent, DirectiveListeningDomEventOther] @@ -1457,37 +1458,35 @@ function declareTests(config?: {useJit: boolean}) { `Directive ${stringify(SomeDirective)} has no selector, please add it!`); }); - fixmeIvy('FW-662: Components without selector are not supported') && - it('should use a default element name for components without selectors', () => { - let noSelectorComponentFactory: ComponentFactory = undefined !; + it('should use a default element name for components without selectors', () => { + let noSelectorComponentFactory: ComponentFactory = undefined !; - @Component({template: '----'}) - class NoSelectorComponent { - } + @Component({template: '----'}) + class NoSelectorComponent { + } - @Component( - {selector: 'some-comp', template: '', entryComponents: [NoSelectorComponent]}) - class SomeComponent { - constructor(componentFactoryResolver: ComponentFactoryResolver) { - // grab its own component factory - noSelectorComponentFactory = - componentFactoryResolver.resolveComponentFactory(NoSelectorComponent) !; - } - } + @Component({selector: 'some-comp', template: '', entryComponents: [NoSelectorComponent]}) + class SomeComponent { + constructor(componentFactoryResolver: ComponentFactoryResolver) { + // grab its own component factory + noSelectorComponentFactory = + componentFactoryResolver.resolveComponentFactory(NoSelectorComponent) !; + } + } - TestBed.configureTestingModule({declarations: [SomeComponent, NoSelectorComponent]}); + TestBed.configureTestingModule({declarations: [SomeComponent, NoSelectorComponent]}); - // get the factory - TestBed.createComponent(SomeComponent); + // get the factory + TestBed.createComponent(SomeComponent); - expect(noSelectorComponentFactory.selector).toBe('ng-component'); + expect(noSelectorComponentFactory.selector).toBe('ng-component'); - expect(getDOM() - .nodeName( - noSelectorComponentFactory.create(Injector.NULL).location.nativeElement) - .toLowerCase()) - .toEqual('ng-component'); - }); + expect( + getDOM() + .nodeName(noSelectorComponentFactory.create(Injector.NULL).location.nativeElement) + .toLowerCase()) + .toEqual('ng-component'); + }); }); describe('error handling', () => { @@ -1699,15 +1698,13 @@ function declareTests(config?: {useJit: boolean}) { .toContain('ng-reflect-dir-prop="hello"'); }); - fixmeIvy('FW-664: ng-reflect-* is not supported') && - it(`should work with prop names containing '$'`, () => { - TestBed.configureTestingModule({declarations: [ParentCmp, SomeCmpWithInput]}); - const fixture = TestBed.createComponent(ParentCmp); - fixture.detectChanges(); + it(`should work with prop names containing '$'`, () => { + TestBed.configureTestingModule({declarations: [ParentCmp, SomeCmpWithInput]}); + const fixture = TestBed.createComponent(ParentCmp); + fixture.detectChanges(); - expect(getDOM().getInnerHTML(fixture.nativeElement)) - .toContain('ng-reflect-test_="hello"'); - }); + expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('ng-reflect-test_="hello"'); + }); fixmeIvy('FW-664: ng-reflect-* is not supported') && it('should reflect property values on template comments', () => { @@ -1725,16 +1722,15 @@ function declareTests(config?: {useJit: boolean}) { .toContain('"ng\-reflect\-ng\-if"\: "true"'); }); - fixmeIvy('FW-664: ng-reflect-* is not supported') && - it('should indicate when toString() throws', () => { - TestBed.configureTestingModule({declarations: [MyComp, MyDir]}); - const template = '
'; - TestBed.overrideComponent(MyComp, {set: {template}}); - const fixture = TestBed.createComponent(MyComp); + fixmeIvy('unknown') && it('should indicate when toString() throws', () => { + TestBed.configureTestingModule({declarations: [MyComp, MyDir]}); + const template = '
'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - fixture.detectChanges(); - expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]'); - }); + fixture.detectChanges(); + expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]'); + }); }); describe('property decorators', () => { diff --git a/packages/core/test/linker/projection_integration_spec.ts b/packages/core/test/linker/projection_integration_spec.ts index f7a58249b4..45831bdf36 100644 --- a/packages/core/test/linker/projection_integration_spec.ts +++ b/packages/core/test/linker/projection_integration_spec.ts @@ -239,38 +239,37 @@ import {fixmeIvy} from '@angular/private/testing'; expect(main.nativeElement).toHaveText('P,text'); }); - fixmeIvy('FW-665: Unable to find the given context data for the given target') && - it('should support moving non projected light dom around', () => { - let sourceDirective: ManualViewportDirective = undefined !; + it('should support moving non projected light dom around', () => { + let sourceDirective: ManualViewportDirective = undefined !; - @Directive({selector: '[manual]'}) - class ManualViewportDirective { - constructor(public templateRef: TemplateRef) { sourceDirective = this; } - } + @Directive({selector: '[manual]'}) + class ManualViewportDirective { + constructor(public templateRef: TemplateRef) { sourceDirective = this; } + } - TestBed.configureTestingModule( - {declarations: [Empty, ProjectDirective, ManualViewportDirective]}); - TestBed.overrideComponent(MainComp, { - set: { - template: '' + - '
A
' + - '' + - 'START(
)END' - } - }); - const main = TestBed.createComponent(MainComp); + TestBed.configureTestingModule( + {declarations: [Empty, ProjectDirective, ManualViewportDirective]}); + TestBed.overrideComponent(MainComp, { + set: { + template: '' + + '
A
' + + '' + + 'START(
)END' + } + }); + const main = TestBed.createComponent(MainComp); - const projectDirective: ProjectDirective = - main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get( - ProjectDirective); + const projectDirective: ProjectDirective = + main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get( + ProjectDirective); - expect(main.nativeElement).toHaveText('START()END'); + expect(main.nativeElement).toHaveText('START()END'); - projectDirective.show(sourceDirective.templateRef); - expect(main.nativeElement).toHaveText('START(A)END'); - }); + projectDirective.show(sourceDirective.templateRef); + expect(main.nativeElement).toHaveText('START(A)END'); + }); - fixmeIvy('unknown') && it('should support moving projected light dom around', () => { + it('should support moving projected light dom around', () => { TestBed.configureTestingModule( {declarations: [Empty, ProjectDirective, ManualViewportDirective]}); TestBed.overrideComponent(MainComp, { @@ -330,52 +329,49 @@ import {fixmeIvy} from '@angular/private/testing'; // Note: This does not use a ng-content element, but // is still important as we are merging proto views independent of // the presence of ng-content elements! - fixmeIvy('FW-665: Unable to find the given context data for the given target') && - it('should still allow to implement a recursive trees', () => { - TestBed.configureTestingModule({declarations: [Tree, ManualViewportDirective]}); - TestBed.overrideComponent(MainComp, {set: {template: ''}}); - const main = TestBed.createComponent(MainComp); + it('should still allow to implement a recursive trees', () => { + TestBed.configureTestingModule({declarations: [Tree, ManualViewportDirective]}); + TestBed.overrideComponent(MainComp, {set: {template: ''}}); + const main = TestBed.createComponent(MainComp); - main.detectChanges(); - const manualDirective: ManualViewportDirective = - main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0] - .injector.get(ManualViewportDirective); - expect(main.nativeElement).toHaveText('TREE(0:)'); - manualDirective.show(); - main.detectChanges(); - expect(main.nativeElement).toHaveText('TREE(0:TREE(1:))'); - }); + main.detectChanges(); + const manualDirective: ManualViewportDirective = + main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( + ManualViewportDirective); + expect(main.nativeElement).toHaveText('TREE(0:)'); + manualDirective.show(); + main.detectChanges(); + expect(main.nativeElement).toHaveText('TREE(0:TREE(1:))'); + }); // Note: This does not use a ng-content element, but // is still important as we are merging proto views independent of // the presence of ng-content elements! - fixmeIvy('FW-665: Unable to find the given context data for the given target') && - it('should still allow to implement a recursive trees via multiple components', () => { - TestBed.configureTestingModule({declarations: [Tree, Tree2, ManualViewportDirective]}); - TestBed.overrideComponent(MainComp, {set: {template: ''}}); - TestBed.overrideComponent( - Tree, {set: {template: 'TREE({{depth}}:)'}}); - const main = TestBed.createComponent(MainComp); + it('should still allow to implement a recursive trees via multiple components', () => { + TestBed.configureTestingModule({declarations: [Tree, Tree2, ManualViewportDirective]}); + TestBed.overrideComponent(MainComp, {set: {template: ''}}); + TestBed.overrideComponent( + Tree, {set: {template: 'TREE({{depth}}:)'}}); + const main = TestBed.createComponent(MainComp); - main.detectChanges(); + main.detectChanges(); - expect(main.nativeElement).toHaveText('TREE(0:)'); + expect(main.nativeElement).toHaveText('TREE(0:)'); - const tree = main.debugElement.query(By.directive(Tree)); - let manualDirective: ManualViewportDirective = tree.queryAllNodes(By.directive( - ManualViewportDirective))[0].injector.get(ManualViewportDirective); - manualDirective.show(); - main.detectChanges(); - expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:))'); + const tree = main.debugElement.query(By.directive(Tree)); + let manualDirective: ManualViewportDirective = tree.queryAllNodes(By.directive( + ManualViewportDirective))[0].injector.get(ManualViewportDirective); + manualDirective.show(); + main.detectChanges(); + expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:))'); - const tree2 = main.debugElement.query(By.directive(Tree2)); - manualDirective = - tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( - ManualViewportDirective); - manualDirective.show(); - main.detectChanges(); - expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))'); - }); + const tree2 = main.debugElement.query(By.directive(Tree2)); + manualDirective = tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( + ManualViewportDirective); + manualDirective.show(); + main.detectChanges(); + expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))'); + }); if (getDOM().supportsNativeShadowDOM()) { it('should support native content projection and isolate styles per component', () => { @@ -457,20 +453,19 @@ import {fixmeIvy} from '@angular/private/testing'; expect(main.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))'); }); - fixmeIvy('unknown') && - it('should allow to switch the order of nested components via ng-content', () => { - TestBed.configureTestingModule({declarations: [CmpA, CmpB, CmpD, CmpC]}); - TestBed.overrideComponent(MainComp, {set: {template: ``}}); - const main = TestBed.createComponent(MainComp); + it('should allow to switch the order of nested components via ng-content', () => { + TestBed.configureTestingModule({declarations: [CmpA, CmpB, CmpD, CmpC]}); + TestBed.overrideComponent(MainComp, {set: {template: ``}}); + const main = TestBed.createComponent(MainComp); - main.detectChanges(); - expect(getDOM().getInnerHTML(main.nativeElement)) - .toEqual( - 'cmp-d' + - 'cmp-c'); - }); + main.detectChanges(); + expect(getDOM().getInnerHTML(main.nativeElement)) + .toEqual( + 'cmp-d' + + 'cmp-c'); + }); - fixmeIvy('unknown') && it('should create nested components in the right order', () => { + it('should create nested components in the right order', () => { TestBed.configureTestingModule( {declarations: [CmpA1, CmpA2, CmpB11, CmpB12, CmpB21, CmpB22]}); TestBed.overrideComponent(MainComp, {set: {template: ``}});