cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

test(core): add more root causes for TestBed tests failures (#27236)

Browse Source 
PR Close #27236
This commit is contained in:
Pawel Kozlowski
2018-11-22 15:23:41 +01:00
committed by Jason Aden
parent 3c9ad1d231
commit 9e5223eaba
1 changed files with 129 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -241,42 +241,44 @@ function declareTests(config?: {useJit: boolean}) {
expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo'); expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo');
}); });
fixmeIvy('unknown') && it('should consume directive watch expression change.', () => { fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work') &&
TestBed.configureTestingModule({declarations: [MyComp, MyDir]}); it('should consume directive watch expression change.', () => {
const template = '<span>' + TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
'<div my-dir [elprop]="ctxProp"></div>' + const template = '<span>' +
'<div my-dir elprop="Hi there!"></div>' + '<div my-dir [elprop]="ctxProp"></div>' +
'<div my-dir elprop="Hi {{\'there!\'}}"></div>' + '<div my-dir elprop="Hi there!"></div>' +
'<div my-dir elprop="One more {{ctxProp}}"></div>' + '<div my-dir elprop="Hi {{\'there!\'}}"></div>' +
'</span>'; '<div my-dir elprop="One more {{ctxProp}}"></div>' +
TestBed.overrideComponent(MyComp, {set: {template}}); '</span>';
const fixture = TestBed.createComponent(MyComp); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
const containerSpan = fixture.debugElement.children[0]; const containerSpan = fixture.debugElement.children[0];
expect(containerSpan.children[0].injector.get(MyDir).dirProp).toEqual('Hello World!'); expect(containerSpan.children[0].injector.get(MyDir).dirProp).toEqual('Hello World!');
expect(containerSpan.children[1].injector.get(MyDir).dirProp).toEqual('Hi there!'); expect(containerSpan.children[1].injector.get(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[2].injector.get(MyDir).dirProp).toEqual('Hi there!'); expect(containerSpan.children[2].injector.get(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[3].injector.get(MyDir).dirProp) expect(containerSpan.children[3].injector.get(MyDir).dirProp)
.toEqual('One more Hello World!'); .toEqual('One more Hello World!');
}); });
describe('pipes', () => { describe('pipes', () => {
fixmeIvy('unknown') && it('should support pipes in bindings', () => { fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work') &&
TestBed.configureTestingModule({declarations: [MyComp, MyDir, DoublePipe]}); it('should support pipes in bindings', () => {
const template = '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>'; TestBed.configureTestingModule({declarations: [MyComp, MyDir, DoublePipe]});
TestBed.overrideComponent(MyComp, {set: {template}}); const template = '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>';
const fixture = TestBed.createComponent(MyComp); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'a'; fixture.componentInstance.ctxProp = 'a';
fixture.detectChanges(); fixture.detectChanges();
const dir = fixture.debugElement.children[0].references !['dir']; const dir = fixture.debugElement.children[0].references !['dir'];
expect(dir.dirProp).toEqual('aa'); expect(dir.dirProp).toEqual('aa');
}); });
}); });
it('should support nested components.', () => { it('should support nested components.', () => {
@ -291,20 +293,21 @@ function declareTests(config?: {useJit: boolean}) {
}); });
// GH issue 328 - https://github.com/angular/angular/issues/328 // GH issue 328 - https://github.com/angular/angular/issues/328
fixmeIvy('unknown') && it('should support different directive types on a single node', () => { fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work') &&
TestBed.configureTestingModule({declarations: [MyComp, ChildComp, MyDir]}); it('should support different directive types on a single node', () => {
const template = '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>'; TestBed.configureTestingModule({declarations: [MyComp, ChildComp, MyDir]});
TestBed.overrideComponent(MyComp, {set: {template}}); const template = '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>';
const fixture = TestBed.createComponent(MyComp); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
const tc = fixture.debugElement.children[0]; const tc = fixture.debugElement.children[0];
expect(tc.injector.get(MyDir).dirProp).toEqual('Hello World!'); expect(tc.injector.get(MyDir).dirProp).toEqual('Hello World!');
expect(tc.injector.get(ChildComp).dirProp).toEqual(null); expect(tc.injector.get(ChildComp).dirProp).toEqual(null);
}); });
it('should support directives where a binding attribute is not given', () => { it('should support directives where a binding attribute is not given', () => {
TestBed.configureTestingModule({declarations: [MyComp, MyDir]}); TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
@ -350,7 +353,7 @@ function declareTests(config?: {useJit: boolean}) {
expect(tc.injector.get(EventDir)).not.toBeNull(); expect(tc.injector.get(EventDir)).not.toBeNull();
}); });
fixmeIvy('unknown') && fixmeIvy('FW-680: Throw meaningful error for uninitialized @Output') &&
it('should display correct error message for uninitialized @Output', () => { it('should display correct error message for uninitialized @Output', () => {
@Component({selector: 'my-uninitialized-output', template: '<p>It works!</p>'}) @Component({selector: 'my-uninitialized-output', template: '<p>It works!</p>'})
class UninitializedOutputComp { class UninitializedOutputComp {
@ -374,7 +377,7 @@ function declareTests(config?: {useJit: boolean}) {
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
}); });
fixmeIvy('unknown') && fixmeIvy('FW-678: ivy generates different DOM structure for <ng-container>') &&
it('should support template directives via `<ng-template>` elements.', () => { it('should support template directives via `<ng-template>` elements.', () => {
TestBed.configureTestingModule({declarations: [MyComp, SomeViewport]}); TestBed.configureTestingModule({declarations: [MyComp, SomeViewport]});
const template = const template =
@ -477,7 +480,7 @@ function declareTests(config?: {useJit: boolean}) {
.toBeAnInstanceOf(ExportDir); .toBeAnInstanceOf(ExportDir);
}); });
fixmeIvy('unknown') && fixmeIvy('FW-708: Directives with multiple exports are not supported') &&
it('should assign a directive to a ref when it has multiple exportAs names', () => { it('should assign a directive to a ref when it has multiple exportAs names', () => {
TestBed.configureTestingModule( TestBed.configureTestingModule(
{declarations: [MyComp, DirectiveWithMultipleExportAsNames]}); {declarations: [MyComp, DirectiveWithMultipleExportAsNames]});
@ -542,7 +545,7 @@ function declareTests(config?: {useJit: boolean}) {
expect(value.tagName.toLowerCase()).toEqual('div'); expect(value.tagName.toLowerCase()).toEqual('div');
}); });
fixmeIvy('unknown') && fixmeIvy('FW-709: Context discovery does not support templates (comment nodes)') &&
it('should assign the TemplateRef to a user-defined variable', () => { it('should assign the TemplateRef to a user-defined variable', () => {
const fixture = const fixture =
TestBed.configureTestingModule({declarations: [MyComp]}) TestBed.configureTestingModule({declarations: [MyComp]})
@ -566,19 +569,20 @@ function declareTests(config?: {useJit: boolean}) {
}); });
describe('variables', () => { describe('variables', () => {
fixmeIvy('unknown') && it('should allow to use variables in a for loop', () => { fixmeIvy('FW-678: ivy generates different DOM structure for <ng-container>') &&
const template = it('should allow to use variables in a for loop', () => {
'<ng-template ngFor [ngForOf]="[1]" let-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</ng-template>'; const template =
'<ng-template ngFor [ngForOf]="[1]" let-i><child-cmp-no-template #cmp></child-cmp-no-template>{{i}}-{{cmp.ctxProp}}</ng-template>';
const fixture = const fixture =
TestBed.configureTestingModule({declarations: [MyComp, ChildCompNoTemplate]}) TestBed.configureTestingModule({declarations: [MyComp, ChildCompNoTemplate]})
.overrideComponent(MyComp, {set: {template}}) .overrideComponent(MyComp, {set: {template}})
.createComponent(MyComp); .createComponent(MyComp);
fixture.detectChanges(); fixture.detectChanges();
// Get the element at index 2, since index 0 is the <ng-template>. // Get the element at index 2, since index 0 is the <ng-template>.
expect(getDOM().childNodes(fixture.nativeElement)[2]).toHaveText('1-hello'); expect(getDOM().childNodes(fixture.nativeElement)[2]).toHaveText('1-hello');
}); });
}); });
describe('OnPush components', () => { describe('OnPush components', () => {
@ -920,7 +924,7 @@ function declareTests(config?: {useJit: boolean}) {
.toEqual('button'); .toEqual('button');
}); });
fixmeIvy('unknown') && it('should support updating host element via hostProperties', () => { it('should support updating host element via hostProperties', () => {
TestBed.configureTestingModule({declarations: [MyComp, DirectiveUpdatingHostProperties]}); TestBed.configureTestingModule({declarations: [MyComp, DirectiveUpdatingHostProperties]});
const template = '<div update-host-properties></div>'; const template = '<div update-host-properties></div>';
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
@ -955,17 +959,18 @@ function declareTests(config?: {useJit: boolean}) {
expect(tc.properties['title']).toBe(undefined); expect(tc.properties['title']).toBe(undefined);
}); });
fixmeIvy('unknown') && it('should not allow pipes in hostProperties', () => { fixmeIvy('FW-725: Pipes in host bindings fail with a cryptic error') &&
@Directive({selector: '[host-properties]', host: {'[id]': 'id | uppercase'}}) it('should not allow pipes in hostProperties', () => {
class DirectiveWithHostProps { @Directive({selector: '[host-properties]', host: {'[id]': 'id | uppercase'}})
} class DirectiveWithHostProps {
}
TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]}); TestBed.configureTestingModule({declarations: [MyComp, DirectiveWithHostProps]});
const template = '<div host-properties></div>'; const template = '<div host-properties></div>';
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
expect(() => TestBed.createComponent(MyComp)) expect(() => TestBed.createComponent(MyComp))
.toThrowError(/Host binding expression cannot contain pipes/); .toThrowError(/Host binding expression cannot contain pipes/);
}); });
it('should not use template variables for expressions in hostListeners', () => { it('should not use template variables for expressions in hostListeners', () => {
@Directive({selector: '[host-listener]', host: {'(click)': 'doIt(id, unknownProp)'}}) @Directive({selector: '[host-listener]', host: {'(click)': 'doIt(id, unknownProp)'}})
@ -1281,26 +1286,27 @@ function declareTests(config?: {useJit: boolean}) {
expect(needsAttribute.fooAttribute).toBeNull(); expect(needsAttribute.fooAttribute).toBeNull();
}); });
fixmeIvy('unknown') && it('should support custom interpolation', () => { fixmeIvy('FW-723: Custom interpolation markers are not supported') &&
TestBed.configureTestingModule({ it('should support custom interpolation', () => {
declarations: [ TestBed.configureTestingModule({
MyComp, ComponentWithCustomInterpolationA, ComponentWithCustomInterpolationB, declarations: [
ComponentWithDefaultInterpolation MyComp, ComponentWithCustomInterpolationA, ComponentWithCustomInterpolationB,
] ComponentWithDefaultInterpolation
}); ]
const template = `<div>{{ctxProp}}</div> });
const template = `<div>{{ctxProp}}</div>
<cmp-with-custom-interpolation-a></cmp-with-custom-interpolation-a> <cmp-with-custom-interpolation-a></cmp-with-custom-interpolation-a>
<cmp-with-custom-interpolation-b></cmp-with-custom-interpolation-b>`; <cmp-with-custom-interpolation-b></cmp-with-custom-interpolation-b>`;
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.componentInstance.ctxProp = 'Default Interpolation'; fixture.componentInstance.ctxProp = 'Default Interpolation';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement) expect(fixture.nativeElement)
.toHaveText( .toHaveText(
'Default InterpolationCustom Interpolation ACustom Interpolation B (Default Interpolation)'); 'Default InterpolationCustom Interpolation ACustom Interpolation B (Default Interpolation)');
}); });
}); });
describe('dependency injection', () => { describe('dependency injection', () => {
@ -1506,7 +1512,7 @@ function declareTests(config?: {useJit: boolean}) {
} }
}); });
fixmeIvy('unknown') && fixmeIvy('FW-722: getDebugContext needs to be replaced / re-implemented') &&
it('should provide an error context when an error happens in DI', () => { it('should provide an error context when an error happens in DI', () => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [MyComp, DirectiveThrowingAnError], declarations: [MyComp, DirectiveThrowingAnError],
@ -1525,7 +1531,7 @@ function declareTests(config?: {useJit: boolean}) {
} }
}); });
fixmeIvy('unknown') && fixmeIvy('FW-722: getDebugContext needs to be replaced / re-implemented') &&
it('should provide an error context when an error happens in change detection', () => { it('should provide an error context when an error happens in change detection', () => {
TestBed.configureTestingModule({declarations: [MyComp, DirectiveThrowingAnError]}); TestBed.configureTestingModule({declarations: [MyComp, DirectiveThrowingAnError]});
const template = `<input [value]="one.two.three" #local>`; const template = `<input [value]="one.two.three" #local>`;
@ -1544,7 +1550,7 @@ function declareTests(config?: {useJit: boolean}) {
} }
}); });
fixmeIvy('unknown') && fixmeIvy('FW-722: getDebugContext needs to be replaced / re-implemented') &&
it('should provide an error context when an error happens in change detection (text node)', it('should provide an error context when an error happens in change detection (text node)',
() => { () => {
TestBed.configureTestingModule({declarations: [MyComp]}); TestBed.configureTestingModule({declarations: [MyComp]});
@ -1561,32 +1567,33 @@ function declareTests(config?: {useJit: boolean}) {
}); });
if (getDOM().supportsDOMEvents()) { // this is required to use fakeAsync if (getDOM().supportsDOMEvents()) { // this is required to use fakeAsync
it('should provide an error context when an error happens in an event handler', fixmeIvy('FW-722: getDebugContext needs to be replaced / re-implemented') &&
fakeAsync(() => { it('should provide an error context when an error happens in an event handler',
TestBed.configureTestingModule({ fakeAsync(() => {
declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent], TestBed.configureTestingModule({
schemas: [NO_ERRORS_SCHEMA], declarations: [MyComp, DirectiveEmittingEvent, DirectiveListeningEvent],
}); schemas: [NO_ERRORS_SCHEMA],
const template = `<span emitter listener (event)="throwError()" #local></span>`; });
TestBed.overrideComponent(MyComp, {set: {template}}); const template = `<span emitter listener (event)="throwError()" #local></span>`;
const fixture = TestBed.createComponent(MyComp); TestBed.overrideComponent(MyComp, {set: {template}});
tick(); const fixture = TestBed.createComponent(MyComp);
tick();
const tc = fixture.debugElement.children[0]; const tc = fixture.debugElement.children[0];
const errorHandler = tc.injector.get(ErrorHandler); const errorHandler = tc.injector.get(ErrorHandler);
let err: any; let err: any;
spyOn(errorHandler, 'handleError').and.callFake((e: any) => err = e); spyOn(errorHandler, 'handleError').and.callFake((e: any) => err = e);
tc.injector.get(DirectiveEmittingEvent).fireEvent('boom'); tc.injector.get(DirectiveEmittingEvent).fireEvent('boom');
expect(err).toBeTruthy(); expect(err).toBeTruthy();
const c = getDebugContext(err); const c = getDebugContext(err);
expect(getDOM().nodeName(c.renderNode).toUpperCase()).toEqual('SPAN'); expect(getDOM().nodeName(c.renderNode).toUpperCase()).toEqual('SPAN');
expect(getDOM().nodeName(c.componentRenderElement).toUpperCase()).toEqual('DIV'); expect(getDOM().nodeName(c.componentRenderElement).toUpperCase()).toEqual('DIV');
expect((<Injector>c.injector).get).toBeTruthy(); expect((<Injector>c.injector).get).toBeTruthy();
expect(c.context).toBe(fixture.componentInstance); expect(c.context).toBe(fixture.componentInstance);
expect(c.references['local']).toBeDefined(); expect(c.references['local']).toBeDefined();
})); }));
} }
}); });
@ -1623,18 +1630,19 @@ function declareTests(config?: {useJit: boolean}) {
}); });
describe('Property bindings', () => { describe('Property bindings', () => {
fixmeIvy('unknown') && it('should throw on bindings to unknown properties', () => { fixmeIvy('FW-721: Bindings to unknown properties are not reported as errors') &&
TestBed.configureTestingModule({declarations: [MyComp]}); it('should throw on bindings to unknown properties', () => {
const template = '<div unknown="{{ctxProp}}"></div>'; TestBed.configureTestingModule({declarations: [MyComp]});
TestBed.overrideComponent(MyComp, {set: {template}}); const template = '<div unknown="{{ctxProp}}"></div>';
try { TestBed.overrideComponent(MyComp, {set: {template}});
TestBed.createComponent(MyComp); try {
throw 'Should throw'; TestBed.createComponent(MyComp);
} catch (e) { throw 'Should throw';
expect(e.message).toMatch( } catch (e) {
/Template parse errors:\nCan't bind to 'unknown' since it isn't a known property of 'div'. \("<div \[ERROR ->\]unknown="{{ctxProp}}"><\/div>"\): .*MyComp.html@0:5/); expect(e.message).toMatch(
} /Template parse errors:\nCan't bind to 'unknown' since it isn't a known property of 'div'. \("<div \[ERROR ->\]unknown="{{ctxProp}}"><\/div>"\): .*MyComp.html@0:5/);
}); }
});
it('should not throw for property binding to a non-existing property when there is a matching directive property', it('should not throw for property binding to a non-existing property when there is a matching directive property',
() => { () => {
@ -1657,7 +1665,7 @@ function declareTests(config?: {useJit: boolean}) {
expect(el.title).toBeFalsy(); expect(el.title).toBeFalsy();
}); });
fixmeIvy('unknown') && fixmeIvy('FW-711: elementProperty instruction should not be used in host bindings') &&
it('should work when a directive uses hostProperty to update the DOM element', () => { it('should work when a directive uses hostProperty to update the DOM element', () => {
TestBed.configureTestingModule( TestBed.configureTestingModule(
{declarations: [MyComp, DirectiveWithTitleAndHostProperty]}); {declarations: [MyComp, DirectiveWithTitleAndHostProperty]});