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

refactor(tests): simplify code (#11485)

This commit is contained in:
Victor Berchet 2016-09-09 12:04:38 -07:00 committed by Evan Martin
parent f5d44a42c9
commit 5a4e46db20
21 changed files with 505 additions and 544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/@angular/common/test/pipes/json_pipe_spec.ts
View File

@ -67,13 +67,13 @@ export function main() {
it('should work with mutable objects', async(() => { it('should work with mutable objects', async(() => {
let fixture = TestBed.createComponent(TestComp); let fixture = TestBed.createComponent(TestComp);
let mutable: number[] = [1]; let mutable: number[] = [1];
fixture.debugElement.componentInstance.data = mutable; fixture.componentInstance.data = mutable;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1\n]'); expect(fixture.nativeElement).toHaveText('[\n 1\n]');
mutable.push(2); mutable.push(2);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1,\n 2\n]'); expect(fixture.nativeElement).toHaveText('[\n 1,\n 2\n]');
})); }));
}); });

6
modules/@angular/common/test/pipes/slice_pipe_spec.ts
View File

@ -96,13 +96,13 @@ export function main() {
it('should work with mutable arrays', async(() => { it('should work with mutable arrays', async(() => {
let fixture = TestBed.createComponent(TestComp); let fixture = TestBed.createComponent(TestComp);
let mutable: number[] = [1, 2]; let mutable: number[] = [1, 2];
fixture.debugElement.componentInstance.data = mutable; fixture.componentInstance.data = mutable;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2'); expect(fixture.nativeElement).toHaveText('2');
mutable.push(3); mutable.push(3);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2,3'); expect(fixture.nativeElement).toHaveText('2,3');
})); }));
}); });
}); });

116
modules/@angular/core/test/animation/animation_integration_spec.ts
View File

@ -59,7 +59,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -88,7 +88,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
@ -125,7 +125,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = 'state1'; cmp.exp = 'state1';
fixture.detectChanges(); fixture.detectChanges();
@ -164,7 +164,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -209,7 +209,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
@ -278,7 +278,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
@ -334,7 +334,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
@ -395,7 +395,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
const fixture = TestBed.createComponent(DummyIfCmp); const fixture = TestBed.createComponent(DummyIfCmp);
const cmp = fixture.debugElement.componentInstance; const cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
@ -427,7 +427,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -466,7 +466,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -498,7 +498,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = 'state1'; cmp.exp = 'state1';
fixture.detectChanges(); fixture.detectChanges();
@ -544,7 +544,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
@ -592,7 +592,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = 'start'; cmp.exp = 'start';
cmp.exp2 = 'start'; cmp.exp2 = 'start';
@ -639,7 +639,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -649,7 +649,7 @@ function declareTests({useJit}: {useJit: boolean}) {
flushMicrotasks(); flushMicrotasks();
var player = driver.log[0]['player']; var player = driver.log[0]['player'];
var container = fixture.debugElement.nativeElement; var container = fixture.nativeElement;
var ifElm = getDOM().querySelector(container, '.my-if'); var ifElm = getDOM().querySelector(container, '.my-if');
expect(ifElm).toBeTruthy(); expect(ifElm).toBeTruthy();
@ -677,7 +677,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = 'state1'; cmp.exp = 'state1';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -716,7 +716,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = 'state1'; cmp.exp = 'state1';
cmp.exp2 = 'state1'; cmp.exp2 = 'state1';
fixture.detectChanges(); fixture.detectChanges();
@ -784,8 +784,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var parent = fixture.debugElement.nativeElement; var parent = fixture.nativeElement;
cmp.items = [0, 2, 4, 6, 8]; cmp.items = [0, 2, 4, 6, 8];
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -813,8 +813,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var parent = fixture.debugElement.nativeElement; var parent = fixture.nativeElement;
cmp.items = [0, 1, 2, 3, 4]; cmp.items = [0, 1, 2, 3, 4];
fixture.detectChanges(); fixture.detectChanges();
@ -879,8 +879,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = true; cmp.exp = true;
cmp.exp2 = true; cmp.exp2 = true;
fixture.detectChanges(); fixture.detectChanges();
@ -911,7 +911,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
cmp.exp2 = true; cmp.exp2 = true;
fixture.detectChanges(); fixture.detectChanges();
@ -943,7 +943,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
cmp.exp2 = true; cmp.exp2 = true;
fixture.detectChanges(); fixture.detectChanges();
@ -972,7 +972,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -1010,7 +1010,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
cmp.exp2 = true; cmp.exp2 = true;
fixture.detectChanges(); fixture.detectChanges();
@ -1051,7 +1051,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
cmp.exp2 = true; cmp.exp2 = true;
fixture.detectChanges(); fixture.detectChanges();
@ -1087,7 +1087,7 @@ function declareTests({useJit}: {useJit: boolean}) {
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var isAnimationRunning = false; var isAnimationRunning = false;
var calls = 0; var calls = 0;
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.callback = (e: AnimationTransitionEvent) => { cmp.callback = (e: AnimationTransitionEvent) => {
isAnimationRunning = e.totalTime > 0; isAnimationRunning = e.totalTime > 0;
calls++; calls++;
@ -1123,7 +1123,7 @@ function declareTests({useJit}: {useJit: boolean}) {
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var isAnimationRunning = false; var isAnimationRunning = false;
var calls = 0; var calls = 0;
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.callback = (e: AnimationTransitionEvent) => { cmp.callback = (e: AnimationTransitionEvent) => {
isAnimationRunning = e.totalTime > 0; isAnimationRunning = e.totalTime > 0;
calls++; calls++;
@ -1165,7 +1165,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var eventData: AnimationTransitionEvent = null; var eventData: AnimationTransitionEvent = null;
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.callback = (e: AnimationTransitionEvent) => { eventData = e; }; cmp.callback = (e: AnimationTransitionEvent) => { eventData = e; };
cmp.exp = 'one'; cmp.exp = 'one';
fixture.detectChanges(); fixture.detectChanges();
@ -1202,7 +1202,7 @@ function declareTests({useJit}: {useJit: boolean}) {
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var eventData1: AnimationTransitionEvent = null; var eventData1: AnimationTransitionEvent = null;
var eventData2: AnimationTransitionEvent = null; var eventData2: AnimationTransitionEvent = null;
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.callback1 = (e: AnimationTransitionEvent) => { eventData1 = e; }; cmp.callback1 = (e: AnimationTransitionEvent) => { eventData1 = e; };
cmp.callback2 = (e: AnimationTransitionEvent) => { eventData2 = e; }; cmp.callback2 = (e: AnimationTransitionEvent) => { eventData2 = e; };
cmp.exp = 'one'; cmp.exp = 'one';
@ -1347,7 +1347,7 @@ function declareTests({useJit}: {useJit: boolean}) {
var ifCalls = 0; var ifCalls = 0;
var loadingCalls = 0; var loadingCalls = 0;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var ifCmp = fixture.debugElement.componentInstance; var ifCmp = fixture.componentInstance;
var loadingCmp = fixture.debugElement.childNodes[1].componentInstance; var loadingCmp = fixture.debugElement.childNodes[1].componentInstance;
ifCmp.callback = (e: any) => ifCalls++; ifCmp.callback = (e: any) => ifCalls++;
@ -1390,7 +1390,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var startCalls = [0, 0, 0, 0, 0]; var startCalls = [0, 0, 0, 0, 0];
var doneCalls = [0, 0, 0, 0, 0]; var doneCalls = [0, 0, 0, 0, 0];
@ -1442,7 +1442,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = true; cmp.exp = true;
cmp.exp2 = 'blue'; cmp.exp2 = 'blue';
fixture.detectChanges(); fixture.detectChanges();
@ -1500,7 +1500,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyLoadingCmp); let fixture = TestBed.createComponent(DummyLoadingCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
cmp.exp = 'final'; cmp.exp = 'final';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -1542,8 +1542,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'final'; cmp.exp = 'final';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -1575,8 +1575,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'green'; cmp.exp = 'green';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -1631,8 +1631,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'final'; cmp.exp = 'final';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -1659,8 +1659,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'final'; cmp.exp = 'final';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
@ -1688,8 +1688,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'a'; cmp.exp = 'a';
fixture.detectChanges(); fixture.detectChanges();
@ -1744,8 +1744,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); var node = getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'a'; cmp.exp = 'a';
fixture.detectChanges(); fixture.detectChanges();
@ -1791,8 +1791,8 @@ function declareTests({useJit}: {useJit: boolean}) {
const driver = TestBed.get(AnimationDriver) as MockAnimationDriver; const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
let fixture = TestBed.createComponent(DummyIfCmp); let fixture = TestBed.createComponent(DummyIfCmp);
var cmp = fixture.debugElement.componentInstance; var cmp = fixture.componentInstance;
var node = getDOM().querySelector(fixture.debugElement.nativeElement, '.target'); getDOM().querySelector(fixture.nativeElement, '.target');
cmp.exp = 'final'; cmp.exp = 'final';
fixture.detectChanges(); fixture.detectChanges();
@ -1843,27 +1843,25 @@ class InnerContentTrackingAnimationPlayer extends MockAnimationPlayer {
@Component({ @Component({
selector: 'if-cmp', selector: 'if-cmp',
animations: [trigger('myAnimation', [])], animations: [trigger('myAnimation', [])],
template: ` template: `<div *ngIf="exp" [@myAnimation]="exp"></div>`
<div *ngIf="exp" [@myAnimation]="exp"></div>
`
}) })
class DummyIfCmp { class DummyIfCmp {
exp = false; exp: any = false;
exp2 = false; exp2: any = false;
items = [0, 1, 2, 3, 4]; items = [0, 1, 2, 3, 4];
callback: Function = () => {}; callback: Function = () => {};
callback1: Function = () => {};
callback2: Function = () => {};
} }
@Component({ @Component({
selector: 'dummy-loading-cmp', selector: 'dummy-loading-cmp',
host: {'[@loading]': 'exp'}, host: {'[@loading]': 'exp'},
animations: [trigger('loading', [])], animations: [trigger('loading', [])],
template: ` template: `<div>loading...</div>`
<div>loading...</div>
`
}) })
class DummyLoadingCmp { class DummyLoadingCmp {
exp = false; exp: any = false;
callback = () => {}; callback = () => {};
} }

8
modules/@angular/core/test/debug/debug_node_spec.ts
View File

@ -345,14 +345,14 @@ export function main() {
fixture = TestBed.createComponent(EventsComp); fixture = TestBed.createComponent(EventsComp);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.componentInstance.clicked).toBe(false); expect(fixture.componentInstance.clicked).toBe(false);
expect(fixture.debugElement.componentInstance.customed).toBe(false); expect(fixture.componentInstance.customed).toBe(false);
fixture.debugElement.children[0].triggerEventHandler('click', <Event>{}); fixture.debugElement.children[0].triggerEventHandler('click', <Event>{});
expect(fixture.debugElement.componentInstance.clicked).toBe(true); expect(fixture.componentInstance.clicked).toBe(true);
fixture.debugElement.children[1].triggerEventHandler('myevent', <Event>{}); fixture.debugElement.children[1].triggerEventHandler('myevent', <Event>{});
expect(fixture.debugElement.componentInstance.customed).toBe(true); expect(fixture.componentInstance.customed).toBe(true);
}); });
}); });

138
modules/@angular/core/test/linker/integration_spec.ts
View File

@ -44,10 +44,10 @@ function declareTests({useJit}: {useJit: boolean}) {
const template = '<div>{{ctxProp}}</div>'; const template = '<div>{{ctxProp}}</div>';
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('Hello World!'); expect(fixture.nativeElement).toHaveText('Hello World!');
}); });
it('should update text node with a blank string when interpolation evaluates to null', () => { it('should update text node with a blank string when interpolation evaluates to null', () => {
@ -55,10 +55,10 @@ function declareTests({useJit}: {useJit: boolean}) {
const template = '<div>{{null}}{{ctxProp}}</div>'; const template = '<div>{{null}}{{ctxProp}}</div>';
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = null; fixture.componentInstance.ctxProp = null;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
}); });
it('should consume element binding changes', () => { it('should consume element binding changes', () => {
@ -67,7 +67,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!'); expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!');
@ -79,12 +79,12 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Initial aria label'; fixture.componentInstance.ctxProp = 'Initial aria label';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label')) expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Initial aria label'); .toEqual('Initial aria label');
fixture.debugElement.componentInstance.ctxProp = 'Changed aria label'; fixture.componentInstance.ctxProp = 'Changed aria label';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label')) expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Changed aria label'); .toEqual('Changed aria label');
@ -96,12 +96,12 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'bar'; fixture.componentInstance.ctxProp = 'bar';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'foo')) expect(getDOM().getAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toEqual('bar'); .toEqual('bar');
fixture.debugElement.componentInstance.ctxProp = null; fixture.componentInstance.ctxProp = null;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo')) expect(getDOM().hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toBeFalsy(); .toBeFalsy();
@ -113,12 +113,12 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = '10'; fixture.componentInstance.ctxProp = '10';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle(fixture.debugElement.children[0].nativeElement, 'height')) expect(getDOM().getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('10px'); .toEqual('10px');
fixture.debugElement.componentInstance.ctxProp = null; fixture.componentInstance.ctxProp = null;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle(fixture.debugElement.children[0].nativeElement, 'height')) expect(getDOM().getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual(''); .toEqual('');
@ -134,7 +134,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0); expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
fixture.debugElement.componentInstance.ctxNumProp = 5; fixture.componentInstance.ctxNumProp = 5;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5); expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
}); });
@ -148,7 +148,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy(); expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy();
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy(); expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy();
}); });
@ -159,12 +159,12 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Some <span>HTML</span>'; fixture.componentInstance.ctxProp = 'Some <span>HTML</span>';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement)) expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some <span>HTML</span>'); .toEqual('Some <span>HTML</span>');
fixture.debugElement.componentInstance.ctxProp = 'Some other <div>HTML</div>'; fixture.componentInstance.ctxProp = 'Some other <div>HTML</div>';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement)) expect(getDOM().getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some other <div>HTML</div>'); .toEqual('Some other <div>HTML</div>');
@ -177,7 +177,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
var nativeEl = fixture.debugElement.children[0].nativeElement; var nativeEl = fixture.debugElement.children[0].nativeElement;
fixture.debugElement.componentInstance.ctxProp = 'foo bar'; fixture.componentInstance.ctxProp = 'foo bar';
fixture.detectChanges(); fixture.detectChanges();
expect(nativeEl).toHaveCssClass('foo'); expect(nativeEl).toHaveCssClass('foo');
@ -196,7 +196,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
var containerSpan = fixture.debugElement.children[0]; var containerSpan = fixture.debugElement.children[0];
@ -215,7 +215,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'a'; fixture.componentInstance.ctxProp = 'a';
fixture.detectChanges(); fixture.detectChanges();
var dir = fixture.debugElement.children[0].references['dir']; var dir = fixture.debugElement.children[0].references['dir'];
@ -231,7 +231,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.nativeElement).toHaveText('hello');
}); });
// GH issue 328 - https://github.com/angular/angular/issues/328 // GH issue 328 - https://github.com/angular/angular/issues/328
@ -241,7 +241,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
var tc = fixture.debugElement.children[0]; var tc = fixture.debugElement.children[0];
@ -263,7 +263,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const template = '<p no-duplicate></p>'; const template = '<p no-duplicate></p>';
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
expect(fixture.debugElement.nativeElement).toHaveText('noduplicate'); expect(fixture.nativeElement).toHaveText('noduplicate');
}); });
it('should support directives where a selector matches property binding', () => { it('should support directives where a selector matches property binding', () => {
@ -275,11 +275,11 @@ function declareTests({useJit}: {useJit: boolean}) {
var tc = fixture.debugElement.children[0]; var tc = fixture.debugElement.children[0];
var idDir = tc.injector.get(IdDir); var idDir = tc.injector.get(IdDir);
fixture.debugElement.componentInstance.ctxProp = 'some_id'; fixture.componentInstance.ctxProp = 'some_id';
fixture.detectChanges(); fixture.detectChanges();
expect(idDir.id).toEqual('some_id'); expect(idDir.id).toEqual('some_id');
fixture.debugElement.componentInstance.ctxProp = 'other_id'; fixture.componentInstance.ctxProp = 'other_id';
fixture.detectChanges(); fixture.detectChanges();
expect(idDir.id).toEqual('other_id'); expect(idDir.id).toEqual('other_id');
}); });
@ -310,7 +310,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
var childNodesOfWrapper = getDOM().childNodes(fixture.debugElement.nativeElement); var childNodesOfWrapper = getDOM().childNodes(fixture.nativeElement);
// 1 template + 2 copies. // 1 template + 2 copies.
expect(childNodesOfWrapper.length).toBe(3); expect(childNodesOfWrapper.length).toBe(3);
expect(childNodesOfWrapper[1]).toHaveText('hello'); expect(childNodesOfWrapper[1]).toHaveText('hello');
@ -325,7 +325,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('baz'); expect(fixture.nativeElement).toHaveText('baz');
}); });
it('should not detach views in ViewContainers when the parent view is destroyed.', () => { it('should not detach views in ViewContainers when the parent view is destroyed.', () => {
@ -335,7 +335,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
var ngIfEl = fixture.debugElement.children[0]; var ngIfEl = fixture.debugElement.children[0];
@ -343,7 +343,7 @@ function declareTests({useJit}: {useJit: boolean}) {
expect(someViewport.container.length).toBe(2); expect(someViewport.container.length).toBe(2);
expect(ngIfEl.children.length).toBe(2); expect(ngIfEl.children.length).toBe(2);
fixture.debugElement.componentInstance.ctxBoolProp = false; fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges(); fixture.detectChanges();
expect(someViewport.container.length).toBe(2); expect(someViewport.container.length).toBe(2);
@ -356,7 +356,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
var childNodesOfWrapper = getDOM().childNodes(fixture.debugElement.nativeElement); var childNodesOfWrapper = getDOM().childNodes(fixture.nativeElement);
expect(childNodesOfWrapper.length).toBe(1); expect(childNodesOfWrapper.length).toBe(1);
expect(getDOM().isCommentNode(childNodesOfWrapper[0])).toBe(true); expect(getDOM().isCommentNode(childNodesOfWrapper[0])).toBe(true);
}); });
@ -370,7 +370,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
var childNodesOfWrapper = getDOM().childNodes(fixture.debugElement.nativeElement); var childNodesOfWrapper = getDOM().childNodes(fixture.nativeElement);
// 1 template + 2 copies. // 1 template + 2 copies.
expect(childNodesOfWrapper.length).toBe(3); expect(childNodesOfWrapper.length).toBe(3);
expect(childNodesOfWrapper[1]).toHaveText('hello'); expect(childNodesOfWrapper[1]).toHaveText('hello');
@ -390,10 +390,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'From myComp'; fixture.componentInstance.ctxProp = 'From myComp';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement)
.toHaveText('TOOLBAR(From myComp,From toolbar,Component with an injected host)'); .toHaveText('TOOLBAR(From myComp,From toolbar,Component with an injected host)');
}); });
@ -428,7 +428,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('hello|hello|hello'); expect(fixture.nativeElement).toHaveText('hello|hello|hello');
}); });
it('should assign two component instances each with a ref-', () => { it('should assign two component instances each with a ref-', () => {
@ -498,7 +498,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
// Get the element at index 2, since index 0 is the <template>. // Get the element at index 2, since index 0 is the <template>.
expect(getDOM().childNodes(fixture.debugElement.nativeElement)[2]).toHaveText('1-hello'); expect(getDOM().childNodes(fixture.nativeElement)[2]).toHaveText('1-hello');
}); });
}); });
@ -533,11 +533,11 @@ function declareTests({useJit}: {useJit: boolean}) {
var cmp = fixture.debugElement.children[0].references['cmp']; var cmp = fixture.debugElement.children[0].references['cmp'];
fixture.debugElement.componentInstance.ctxProp = 'one'; fixture.componentInstance.ctxProp = 'one';
fixture.detectChanges(); fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1); expect(cmp.numberOfChecks).toEqual(1);
fixture.debugElement.componentInstance.ctxProp = 'two'; fixture.componentInstance.ctxProp = 'two';
fixture.detectChanges(); fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(2); expect(cmp.numberOfChecks).toEqual(2);
}); });
@ -604,11 +604,11 @@ function declareTests({useJit}: {useJit: boolean}) {
var cmp = fixture.debugElement.children[0].references['cmp']; var cmp = fixture.debugElement.children[0].references['cmp'];
fixture.debugElement.componentInstance.ctxProp = 'one'; fixture.componentInstance.ctxProp = 'one';
fixture.detectChanges(); fixture.detectChanges();
expect(cmp.prop).toEqual('one'); expect(cmp.prop).toEqual('one');
fixture.debugElement.componentInstance.ctxProp = 'two'; fixture.componentInstance.ctxProp = 'two';
fixture.detectChanges(); fixture.detectChanges();
expect(cmp.prop).toEqual('two'); expect(cmp.prop).toEqual('two');
}); });
@ -745,14 +745,13 @@ function declareTests({useJit}: {useJit: boolean}) {
var tc = fixture.debugElement.children[0]; var tc = fixture.debugElement.children[0];
var dir = tc.injector.get(DirectiveWithTwoWayBinding); var dir = tc.injector.get(DirectiveWithTwoWayBinding);
fixture.debugElement.componentInstance.ctxProp = 'one'; fixture.componentInstance.ctxProp = 'one';
fixture.detectChanges(); fixture.detectChanges();
expect(dir.control).toEqual('one'); expect(dir.control).toEqual('one');
dir.controlChange.subscribe({ dir.controlChange.subscribe(
next: () => { expect(fixture.debugElement.componentInstance.ctxProp).toEqual('two'); } {next: () => { expect(fixture.componentInstance.ctxProp).toEqual('two'); }});
});
dir.triggerChange('two'); dir.triggerChange('two');
})); }));
@ -857,7 +856,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
globalCounter = 0; globalCounter = 0;
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
var tc = fixture.debugElement.children[0]; var tc = fixture.debugElement.children[0];
@ -870,12 +869,12 @@ function declareTests({useJit}: {useJit: boolean}) {
expect(globalCounter).toEqual(1); expect(globalCounter).toEqual(1);
fixture.debugElement.componentInstance.ctxBoolProp = false; fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges(); fixture.detectChanges();
dispatchEvent(getDOM().getGlobalEventTarget('window'), 'domEvent'); dispatchEvent(getDOM().getGlobalEventTarget('window'), 'domEvent');
expect(globalCounter).toEqual(1); expect(globalCounter).toEqual(1);
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
dispatchEvent(getDOM().getGlobalEventTarget('window'), 'domEvent'); dispatchEvent(getDOM().getGlobalEventTarget('window'), 'domEvent');
expect(globalCounter).toEqual(2); expect(globalCounter).toEqual(2);
@ -940,10 +939,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'Default Interpolation'; fixture.componentInstance.ctxProp = 'Default Interpolation';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement)
.toHaveText( .toHaveText(
'Default Interpolation\nCustom Interpolation A\nCustom Interpolation B (Default Interpolation)'); 'Default Interpolation\nCustom Interpolation A\nCustom Interpolation B (Default Interpolation)');
}); });
@ -1061,7 +1060,7 @@ function declareTests({useJit}: {useJit: boolean}) {
var providing = fixture.debugElement.children[0].references['providing']; var providing = fixture.debugElement.children[0].references['providing'];
expect(providing.created).toBe(false); expect(providing.created).toBe(false);
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
expect(providing.created).toBe(true); expect(providing.created).toBe(true);
@ -1077,8 +1076,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'script').length) expect(getDOM().querySelectorAll(fixture.nativeElement, 'script').length).toEqual(0);
.toEqual(0);
}); });
it('should throw when using directives without selector', () => { it('should throw when using directives without selector', () => {
@ -1179,7 +1177,7 @@ function declareTests({useJit}: {useJit: boolean}) {
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.source).toContain(':0:7'); expect(c.source).toContain(':0:7');
expect(c.context).toBe(fixture.debugElement.componentInstance); expect(c.context).toBe(fixture.componentInstance);
expect(c.references['local']).toBeDefined(); expect(c.references['local']).toBeDefined();
} }
}); });
@ -1221,7 +1219,7 @@ function declareTests({useJit}: {useJit: boolean}) {
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.debugElement.componentInstance); expect(c.context).toBe(fixture.componentInstance);
expect(c.references['local']).toBeDefined(); expect(c.references['local']).toBeDefined();
} }
})); }));
@ -1264,7 +1262,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
expect(fixture.debugElement.nativeElement).toHaveText('hello imp view'); expect(fixture.nativeElement).toHaveText('hello imp view');
}); });
it('should support moving embedded views around', () => { it('should support moving embedded views around', () => {
@ -1280,14 +1278,14 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
expect(anchorElement).toHaveText(''); expect(anchorElement).toHaveText('');
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
expect(anchorElement).toHaveText('hello'); expect(anchorElement).toHaveText('hello');
fixture.debugElement.componentInstance.ctxBoolProp = false; fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
}); });
describe('Property bindings', () => { describe('Property bindings', () => {
@ -1318,10 +1316,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'TITLE'; fixture.componentInstance.ctxProp = 'TITLE';
fixture.detectChanges(); fixture.detectChanges();
var el = getDOM().querySelector(fixture.debugElement.nativeElement, 'span'); var el = getDOM().querySelector(fixture.nativeElement, 'span');
expect(isBlank(el.title) || el.title == '').toBeTruthy(); expect(isBlank(el.title) || el.title == '').toBeTruthy();
}); });
@ -1331,10 +1329,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'TITLE'; fixture.componentInstance.ctxProp = 'TITLE';
fixture.detectChanges(); fixture.detectChanges();
var el = getDOM().querySelector(fixture.debugElement.nativeElement, 'span'); var el = getDOM().querySelector(fixture.nativeElement, 'span');
expect(el.title).toEqual('TITLE'); expect(el.title).toEqual('TITLE');
}); });
}); });
@ -1348,10 +1346,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxProp = 'hello'; fixture.componentInstance.ctxProp = 'hello';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.debugElement.nativeElement)) expect(getDOM().getInnerHTML(fixture.nativeElement))
.toContain('ng-reflect-dir-prop="hello"'); .toContain('ng-reflect-dir-prop="hello"');
}); });
@ -1361,10 +1359,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.debugElement.nativeElement)) expect(getDOM().getInnerHTML(fixture.nativeElement))
.toContain('"ng\-reflect\-ng\-if"\: "true"'); .toContain('"ng\-reflect\-ng\-if"\: "true"');
}); });
@ -1375,7 +1373,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getInnerHTML(fixture.debugElement.nativeElement)).toContain('[ERROR]'); expect(getDOM().getInnerHTML(fixture.nativeElement)).toContain('[ERROR]');
}); });
}); });
@ -1430,7 +1428,7 @@ function declareTests({useJit}: {useJit: boolean}) {
tick(); tick();
expect(fixture.debugElement.componentInstance.ctxProp).toEqual('called'); expect(fixture.componentInstance.ctxProp).toEqual('called');
})); }));
@ -1477,7 +1475,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
var el = fixture.debugElement.nativeElement; var el = fixture.nativeElement;
var svg = getDOM().childNodes(el)[0]; var svg = getDOM().childNodes(el)[0];
var use = getDOM().childNodes(svg)[0]; var use = getDOM().childNodes(svg)[0];
expect(getDOM().getProperty(<Element>svg, 'namespaceURI')) expect(getDOM().getProperty(<Element>svg, 'namespaceURI'))
@ -1497,7 +1495,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
var el = fixture.debugElement.nativeElement; var el = fixture.nativeElement;
var svg = getDOM().childNodes(el)[0]; var svg = getDOM().childNodes(el)[0];
var foreignObject = getDOM().childNodes(svg)[0]; var foreignObject = getDOM().childNodes(svg)[0];
var p = getDOM().childNodes(foreignObject)[0]; var p = getDOM().childNodes(foreignObject)[0];
@ -1518,7 +1516,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(SomeCmp, {set: {template}}); TestBed.overrideComponent(SomeCmp, {set: {template}});
const fixture = TestBed.createComponent(SomeCmp); const fixture = TestBed.createComponent(SomeCmp);
let useEl = getDOM().firstChild(fixture.debugElement.nativeElement); let useEl = getDOM().firstChild(fixture.nativeElement);
expect(getDOM().getAttributeNS(useEl, 'http://www.w3.org/1999/xlink', 'href')) expect(getDOM().getAttributeNS(useEl, 'http://www.w3.org/1999/xlink', 'href'))
.toEqual('#id'); .toEqual('#id');
}); });
@ -1529,8 +1527,8 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(SomeCmp, {set: {template}}); TestBed.overrideComponent(SomeCmp, {set: {template}});
const fixture = TestBed.createComponent(SomeCmp); const fixture = TestBed.createComponent(SomeCmp);
let cmp = fixture.debugElement.componentInstance; let cmp = fixture.componentInstance;
let useEl = getDOM().firstChild(fixture.debugElement.nativeElement); let useEl = getDOM().firstChild(fixture.nativeElement);
cmp.value = '#id'; cmp.value = '#id';
fixture.detectChanges(); fixture.detectChanges();

14
modules/@angular/core/test/linker/ng_container_integration_spec.ts
View File

@ -34,7 +34,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
const el = fixture.debugElement.nativeElement; const el = fixture.nativeElement;
expect(el).toHaveText('foo'); expect(el).toHaveText('foo');
}); });
@ -45,7 +45,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
const el = fixture.debugElement.nativeElement; const el = fixture.nativeElement;
const children = getDOM().childNodes(el); const children = getDOM().childNodes(el);
expect(children.length).toBe(2); expect(children.length).toBe(2);
expect(getDOM().isCommentNode(children[0])).toBe(true); expect(getDOM().isCommentNode(children[0])).toBe(true);
@ -60,7 +60,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
const el = fixture.debugElement.nativeElement; const el = fixture.nativeElement;
const children = getDOM().childNodes(el); const children = getDOM().childNodes(el);
expect(children.length).toBe(5); expect(children.length).toBe(5);
expect(getDOM().isCommentNode(children[0])).toBe(true); expect(getDOM().isCommentNode(children[0])).toBe(true);
@ -75,10 +75,10 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.overrideComponent(MyComp, {set: {template}}); TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp); const fixture = TestBed.createComponent(MyComp);
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
const el = fixture.debugElement.nativeElement; const el = fixture.nativeElement;
const children = getDOM().childNodes(el); const children = getDOM().childNodes(el);
expect(children.length).toBe(4); expect(children.length).toBe(4);
@ -89,7 +89,7 @@ function declareTests({useJit}: {useJit: boolean}) {
expect(getDOM().tagName(children[2]).toUpperCase()).toEqual('P'); expect(getDOM().tagName(children[2]).toUpperCase()).toEqual('P');
expect(getDOM().tagName(children[3]).toUpperCase()).toEqual('B'); expect(getDOM().tagName(children[3]).toUpperCase()).toEqual('B');
fixture.debugElement.componentInstance.ctxBoolProp = false; fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges(); fixture.detectChanges();
expect(children.length).toBe(1); expect(children.length).toBe(1);
@ -103,7 +103,7 @@ function declareTests({useJit}: {useJit: boolean}) {
fixture.detectChanges(); fixture.detectChanges();
const el = fixture.debugElement.nativeElement; const el = fixture.nativeElement;
expect(el).toHaveText('SIMPLE(12)'); expect(el).toHaveText('SIMPLE(12)');
}); });

94
modules/@angular/core/test/linker/projection_integration_spec.ts
View File

@ -23,7 +23,7 @@ export function main() {
TestBed.overrideComponent(MainComp, {set: {template}}); TestBed.overrideComponent(MainComp, {set: {template}});
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(A)'); expect(main.nativeElement).toHaveText('SIMPLE(A)');
}); });
it('should support simple components with text interpolation as direct children', () => { it('should support simple components with text interpolation as direct children', () => {
@ -33,9 +33,9 @@ export function main() {
TestBed.overrideComponent(MainComp, {set: {template}}); TestBed.overrideComponent(MainComp, {set: {template}});
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.debugElement.componentInstance.text = 'A'; main.componentInstance.text = 'A';
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('START(SIMPLE(A))END'); expect(main.nativeElement).toHaveText('START(SIMPLE(A))END');
}); });
it('should support projecting text interpolation to a non bound element', () => { it('should support projecting text interpolation to a non bound element', () => {
@ -44,9 +44,9 @@ export function main() {
TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}}); TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.debugElement.componentInstance.text = 'A'; main.componentInstance.text = 'A';
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(A)'); expect(main.nativeElement).toHaveText('SIMPLE(A)');
}); });
it('should support projecting text interpolation to a non bound element with other bound elements after it', it('should support projecting text interpolation to a non bound element with other bound elements after it',
@ -59,9 +59,9 @@ export function main() {
TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}}); TestBed.overrideComponent(MainComp, {set: {template: '<simple>{{text}}</simple>'}});
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.debugElement.componentInstance.text = 'A'; main.componentInstance.text = 'A';
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(AEL)'); expect(main.nativeElement).toHaveText('SIMPLE(AEL)');
}); });
it('should project content components', () => { it('should project content components', () => {
@ -72,7 +72,7 @@ export function main() {
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('SIMPLE(0|1|2)'); expect(main.nativeElement).toHaveText('SIMPLE(0|1|2)');
}); });
it('should not show the light dom even if there is no content tag', () => { it('should not show the light dom even if there is no content tag', () => {
@ -80,7 +80,7 @@ export function main() {
TestBed.overrideComponent(MainComp, {set: {template: '<empty>A</empty>'}}); TestBed.overrideComponent(MainComp, {set: {template: '<empty>A</empty>'}});
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
expect(main.debugElement.nativeElement).toHaveText(''); expect(main.nativeElement).toHaveText('');
}); });
it('should support multiple content tags', () => { it('should support multiple content tags', () => {
@ -96,7 +96,7 @@ export function main() {
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
expect(main.debugElement.nativeElement).toHaveText('(A, BC)'); expect(main.nativeElement).toHaveText('(A, BC)');
}); });
it('should redistribute only direct children', () => { it('should redistribute only direct children', () => {
@ -111,7 +111,7 @@ export function main() {
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
expect(main.debugElement.nativeElement).toHaveText('(, BAC)'); expect(main.nativeElement).toHaveText('(, BAC)');
}); });
it('should redistribute direct child viewcontainers when the light dom changes', () => { it('should redistribute direct child viewcontainers when the light dom changes', () => {
@ -131,13 +131,13 @@ export function main() {
.childNodes.filter(By.directive(ManualViewportDirective)) .childNodes.filter(By.directive(ManualViewportDirective))
.map(de => de.injector.get(ManualViewportDirective)); .map(de => de.injector.get(ManualViewportDirective));
expect(main.debugElement.nativeElement).toHaveText('(, B)'); expect(main.nativeElement).toHaveText('(, B)');
viewportDirectives.forEach(d => d.show()); viewportDirectives.forEach(d => d.show());
expect(main.debugElement.nativeElement).toHaveText('(A1, B)'); expect(main.nativeElement).toHaveText('(A1, B)');
viewportDirectives.forEach(d => d.hide()); viewportDirectives.forEach(d => d.hide());
expect(main.debugElement.nativeElement).toHaveText('(, B)'); expect(main.nativeElement).toHaveText('(, B)');
}); });
it('should support nested components', () => { it('should support nested components', () => {
@ -152,7 +152,7 @@ export function main() {
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
expect(main.debugElement.nativeElement).toHaveText('OUTER(SIMPLE(AB))'); expect(main.nativeElement).toHaveText('OUTER(SIMPLE(AB))');
}); });
it('should support nesting with content being direct child of a nested component', () => { it('should support nesting with content being direct child of a nested component', () => {
@ -175,10 +175,10 @@ export function main() {
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective); ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))'); expect(main.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
viewportDirective.show(); viewportDirective.show();
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(A,BC)))'); expect(main.nativeElement).toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
}); });
it('should redistribute when the shadow dom changes', () => { it('should redistribute when the shadow dom changes', () => {
@ -199,14 +199,14 @@ export function main() {
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective); ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, BC)'); expect(main.nativeElement).toHaveText('(, BC)');
viewportDirective.show(); viewportDirective.show();
expect(main.debugElement.nativeElement).toHaveText('(A, BC)'); expect(main.nativeElement).toHaveText('(A, BC)');
viewportDirective.hide(); viewportDirective.hide();
expect(main.debugElement.nativeElement).toHaveText('(, BC)'); expect(main.nativeElement).toHaveText('(, BC)');
}); });
// GH-2095 - https://github.com/angular/angular/issues/2095 // GH-2095 - https://github.com/angular/angular/issues/2095
@ -220,7 +220,7 @@ export function main() {
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('P,text'); expect(main.nativeElement).toHaveText('P,text');
}); });
// important as we are moving style tags around during compilation, // important as we are moving style tags around during compilation,
@ -232,7 +232,7 @@ export function main() {
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('P,text'); expect(main.nativeElement).toHaveText('P,text');
}); });
it('should support moving non projected light dom around', () => { it('should support moving non projected light dom around', () => {
@ -263,10 +263,10 @@ export function main() {
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get( main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
ProjectDirective); ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('START()END'); expect(main.nativeElement).toHaveText('START()END');
projectDirective.show(sourceDirective.templateRef); projectDirective.show(sourceDirective.templateRef);
expect(main.debugElement.nativeElement).toHaveText('START(A)END'); expect(main.nativeElement).toHaveText('START(A)END');
}); });
it('should support moving projected light dom around', () => { it('should support moving projected light dom around', () => {
@ -286,10 +286,10 @@ export function main() {
var projectDirective: ProjectDirective = var projectDirective: ProjectDirective =
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get( main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
ProjectDirective); ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START()END'); expect(main.nativeElement).toHaveText('SIMPLE()START()END');
projectDirective.show(sourceDirective.templateRef); projectDirective.show(sourceDirective.templateRef);
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START(A)END'); expect(main.nativeElement).toHaveText('SIMPLE()START(A)END');
}); });
it('should support moving ng-content around', () => { it('should support moving ng-content around', () => {
@ -312,15 +312,15 @@ export function main() {
var projectDirective: ProjectDirective = var projectDirective: ProjectDirective =
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get( main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].injector.get(
ProjectDirective); ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('(, B)START()END'); expect(main.nativeElement).toHaveText('(, B)START()END');
projectDirective.show(sourceDirective.templateRef); projectDirective.show(sourceDirective.templateRef);
expect(main.debugElement.nativeElement).toHaveText('(, B)START(A)END'); expect(main.nativeElement).toHaveText('(, B)START(A)END');
// Stamping ng-content multiple times should not produce the content multiple // Stamping ng-content multiple times should not produce the content multiple
// times... // times...
projectDirective.show(sourceDirective.templateRef); projectDirective.show(sourceDirective.templateRef);
expect(main.debugElement.nativeElement).toHaveText('(, B)START(A)END'); expect(main.nativeElement).toHaveText('(, B)START(A)END');
}); });
// Note: This does not use a ng-content element, but // Note: This does not use a ng-content element, but
@ -335,10 +335,10 @@ export function main() {
var manualDirective: ManualViewportDirective = var manualDirective: ManualViewportDirective =
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective); ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('TREE(0:)'); expect(main.nativeElement).toHaveText('TREE(0:)');
manualDirective.show(); manualDirective.show();
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('TREE(0:TREE(1:))'); expect(main.nativeElement).toHaveText('TREE(0:TREE(1:))');
}); });
// Note: This does not use a ng-content element, but // Note: This does not use a ng-content element, but
@ -353,21 +353,21 @@ export function main() {
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('TREE(0:)'); expect(main.nativeElement).toHaveText('TREE(0:)');
var tree = main.debugElement.query(By.directive(Tree)); var tree = main.debugElement.query(By.directive(Tree));
var manualDirective: ManualViewportDirective = tree.queryAllNodes(By.directive( var manualDirective: ManualViewportDirective = tree.queryAllNodes(By.directive(
ManualViewportDirective))[0].injector.get(ManualViewportDirective); ManualViewportDirective))[0].injector.get(ManualViewportDirective);
manualDirective.show(); manualDirective.show();
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('TREE(0:TREE2(1:))'); expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:))');
var tree2 = main.debugElement.query(By.directive(Tree2)); var tree2 = main.debugElement.query(By.directive(Tree2));
manualDirective = tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( manualDirective = tree2.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective); ManualViewportDirective);
manualDirective.show(); manualDirective.show();
main.detectChanges(); main.detectChanges();
expect(main.debugElement.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))'); expect(main.nativeElement).toHaveText('TREE(0:TREE2(1:TREE(2:)))');
}); });
if (getDOM().supportsNativeShadowDOM()) { if (getDOM().supportsNativeShadowDOM()) {
@ -381,7 +381,7 @@ export function main() {
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
var childNodes = getDOM().childNodes(main.debugElement.nativeElement); var childNodes = getDOM().childNodes(main.nativeElement);
expect(childNodes[0]).toHaveText('div {color: red}SIMPLE1(A)'); expect(childNodes[0]).toHaveText('div {color: red}SIMPLE1(A)');
expect(childNodes[1]).toHaveText('div {color: blue}SIMPLE2(B)'); expect(childNodes[1]).toHaveText('div {color: blue}SIMPLE2(B)');
main.destroy(); main.destroy();
@ -400,7 +400,7 @@ export function main() {
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
var mainEl = main.debugElement.nativeElement; var mainEl = main.nativeElement;
var div1 = getDOM().firstChild(mainEl); var div1 = getDOM().firstChild(mainEl);
var div2 = getDOM().createElement('div'); var div2 = getDOM().createElement('div');
getDOM().setAttribute(div2, 'class', 'redStyle'); getDOM().setAttribute(div2, 'class', 'redStyle');
@ -420,7 +420,7 @@ export function main() {
}); });
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
var mainEl = main.debugElement.nativeElement; var mainEl = main.nativeElement;
var div1 = getDOM().firstChild(mainEl); var div1 = getDOM().firstChild(mainEl);
var div2 = getDOM().createElement('div'); var div2 = getDOM().createElement('div');
getDOM().appendChild(mainEl, div2); getDOM().appendChild(mainEl, div2);
@ -436,16 +436,16 @@ export function main() {
MainComp, {set: {template: `<conditional-text>a</conditional-text>`}}); MainComp, {set: {template: `<conditional-text>a</conditional-text>`}});
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
expect(main.debugElement.nativeElement).toHaveText('MAIN()'); expect(main.nativeElement).toHaveText('MAIN()');
var viewportElement = var viewportElement =
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0]; main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
viewportElement.injector.get(ManualViewportDirective).show(); viewportElement.injector.get(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST())'); expect(main.nativeElement).toHaveText('MAIN(FIRST())');
viewportElement = main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1]; viewportElement = main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
viewportElement.injector.get(ManualViewportDirective).show(); viewportElement.injector.get(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))'); expect(main.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
}); });
it('should allow to switch the order of nested components via ng-content', () => { it('should allow to switch the order of nested components via ng-content', () => {
@ -454,7 +454,7 @@ export function main() {
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.detectChanges(); main.detectChanges();
expect(getDOM().getInnerHTML(main.debugElement.nativeElement)) expect(getDOM().getInnerHTML(main.nativeElement))
.toEqual( .toEqual(
'<cmp-a><cmp-b><cmp-d><i>cmp-d</i></cmp-d></cmp-b>' + '<cmp-a><cmp-b><cmp-d><i>cmp-d</i></cmp-d></cmp-b>' +
'<cmp-c><b>cmp-c</b></cmp-c></cmp-a>'); '<cmp-c><b>cmp-c</b></cmp-c></cmp-a>');
@ -467,7 +467,7 @@ export function main() {
const main = TestBed.createComponent(MainComp); const main = TestBed.createComponent(MainComp);
main.detectChanges(); main.detectChanges();
expect(getDOM().getInnerHTML(main.debugElement.nativeElement)) expect(getDOM().getInnerHTML(main.nativeElement))
.toEqual( .toEqual(
'<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' + '<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>' +
'<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>'); '<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>');
@ -494,12 +494,12 @@ export function main() {
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get( conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].injector.get(
ManualViewportDirective); ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)'); expect(main.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)'); expect(main.nativeElement).toHaveText('(, D)');
viewViewportDir.show(); viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(AC, D)'); expect(main.nativeElement).toHaveText('(AC, D)');
var contentViewportDir = var contentViewportDir =
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get( conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].injector.get(
@ -507,12 +507,12 @@ export function main() {
contentViewportDir.show(); contentViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(ABC, D)'); expect(main.nativeElement).toHaveText('(ABC, D)');
// hide view viewport, and test that it also hides // hide view viewport, and test that it also hides
// the content viewport's views // the content viewport's views
viewViewportDir.hide(); viewViewportDir.hide();
expect(main.debugElement.nativeElement).toHaveText('(, D)'); expect(main.nativeElement).toHaveText('(, D)');
}); });
}); });
} }

26
modules/@angular/core/test/linker/query_integration_spec.ts
View File

@ -84,14 +84,14 @@ export function main() {
TestBed.overrideComponent(MyComp0, {set: {template}}); TestBed.overrideComponent(MyComp0, {set: {template}});
const view = TestBed.createComponent(MyComp0); const view = TestBed.createComponent(MyComp0);
view.debugElement.componentInstance.shouldShow = true; view.componentInstance.shouldShow = true;
view.detectChanges(); view.detectChanges();
var q: NeedsContentChild = view.debugElement.children[0].references['q']; var q: NeedsContentChild = view.debugElement.children[0].references['q'];
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]); expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
view.debugElement.componentInstance.shouldShow = false; view.componentInstance.shouldShow = false;
view.detectChanges(); view.detectChanges();
expect(q.logs).toEqual([ expect(q.logs).toEqual([
@ -199,7 +199,7 @@ export function main() {
view.detectChanges(); view.detectChanges();
expect(asNativeElements(view.debugElement.children)).toHaveText('2|'); expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
view.debugElement.componentInstance.shouldShow = true; view.componentInstance.shouldShow = true;
view.detectChanges(); view.detectChanges();
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|'); expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
}); });
@ -212,7 +212,7 @@ export function main() {
TestBed.overrideComponent(MyComp0, {set: {template}}); TestBed.overrideComponent(MyComp0, {set: {template}});
const fixture = TestBed.createComponent(MyComp0); const fixture = TestBed.createComponent(MyComp0);
fixture.debugElement.componentInstance.shouldShow = true; fixture.componentInstance.shouldShow = true;
fixture.detectChanges(); fixture.detectChanges();
fixture.destroy(); fixture.destroy();
}); });
@ -228,7 +228,7 @@ export function main() {
expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|'); expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
view.debugElement.componentInstance.list = ['3d', '2d']; view.componentInstance.list = ['3d', '2d'];
view.detectChanges(); view.detectChanges();
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|'); expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|');
}); });
@ -357,7 +357,7 @@ export function main() {
} }
}); });
view.debugElement.componentInstance.shouldShow = true; view.componentInstance.shouldShow = true;
view.detectChanges(); view.detectChanges();
})); }));
@ -368,17 +368,17 @@ export function main() {
TestBed.overrideComponent(MyComp0, {set: {template}}); TestBed.overrideComponent(MyComp0, {set: {template}});
const view = TestBed.createComponent(MyComp0); const view = TestBed.createComponent(MyComp0);
view.debugElement.componentInstance.shouldShow = true; view.componentInstance.shouldShow = true;
view.detectChanges(); view.detectChanges();
var q: NeedsQuery = view.debugElement.children[0].references['q']; var q: NeedsQuery = view.debugElement.children[0].references['q'];
expect(q.query.length).toEqual(1); expect(q.query.length).toEqual(1);
view.debugElement.componentInstance.shouldShow = false; view.componentInstance.shouldShow = false;
view.detectChanges(); view.detectChanges();
view.debugElement.componentInstance.shouldShow = true; view.componentInstance.shouldShow = true;
view.detectChanges(); view.detectChanges();
var q2: NeedsQuery = view.debugElement.children[0].references['q']; var q2: NeedsQuery = view.debugElement.children[0].references['q'];
@ -398,7 +398,7 @@ export function main() {
var q = view.debugElement.children[0].references['q']; var q = view.debugElement.children[0].references['q'];
view.debugElement.componentInstance.list = ['1d', '2d']; view.componentInstance.list = ['1d', '2d'];
view.detectChanges(); view.detectChanges();
@ -430,11 +430,11 @@ export function main() {
var q = view.debugElement.children[0].references['q']; var q = view.debugElement.children[0].references['q'];
view.debugElement.componentInstance.list = ['1d', '2d']; view.componentInstance.list = ['1d', '2d'];
view.detectChanges(); view.detectChanges();
view.debugElement.componentInstance.list = ['2d', '1d']; view.componentInstance.list = ['2d', '1d'];
view.detectChanges(); view.detectChanges();
@ -452,7 +452,7 @@ export function main() {
var q = view.debugElement.children[0].references['q']; var q = view.debugElement.children[0].references['q'];
view.debugElement.componentInstance.list = ['1d', '2d']; view.componentInstance.list = ['1d', '2d'];
view.detectChanges(); view.detectChanges();

3
modules/@angular/core/test/linker/regression_integration_spec.ts
View File

@ -165,8 +165,7 @@ function declareTests({useJit}: {useJit: boolean}) {
TestBed.configureTestingModule( TestBed.configureTestingModule(
{declarations: [HeroComponent, VillianComponent, MainComponent]}); {declarations: [HeroComponent, VillianComponent, MainComponent]});
const fixture = TestBed.createComponent(MainComponent); const fixture = TestBed.createComponent(MainComponent);
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement).toHaveText('I was saved by my hero from a villian.');
.toHaveText('I was saved by my hero from a villian.');
}); });
}); });
} }

15
modules/@angular/core/test/linker/security_integration_spec.ts
View File

@ -21,8 +21,7 @@ export function main() {
@Component({selector: 'my-comp', template: ''}) @Component({selector: 'my-comp', template: ''})
class SecuredComponent { class SecuredComponent {
ctxProp: string; ctxProp: any = 'some value';
constructor() { this.ctxProp = 'some value'; }
} }
function declareTests({useJit}: {useJit: boolean}) { function declareTests({useJit}: {useJit: boolean}) {
@ -81,7 +80,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer); const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer);
let e = fixture.debugElement.children[0].nativeElement; let e = fixture.debugElement.children[0].nativeElement;
let ci = fixture.debugElement.componentInstance; let ci = fixture.componentInstance;
let trusted = sanitizer.bypassSecurityTrustUrl('javascript:alert(1)'); let trusted = sanitizer.bypassSecurityTrustUrl('javascript:alert(1)');
ci.ctxProp = trusted; ci.ctxProp = trusted;
fixture.detectChanges(); fixture.detectChanges();
@ -95,7 +94,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer); const sanitizer: DomSanitizer = getTestBed().get(DomSanitizer);
let trusted = sanitizer.bypassSecurityTrustScript('javascript:alert(1)'); let trusted = sanitizer.bypassSecurityTrustScript('javascript:alert(1)');
let ci = fixture.debugElement.componentInstance; let ci = fixture.componentInstance;
ci.ctxProp = trusted; ci.ctxProp = trusted;
expect(() => fixture.detectChanges()).toThrowError(/Required a safe URL, got a Script/); expect(() => fixture.detectChanges()).toThrowError(/Required a safe URL, got a Script/);
}); });
@ -108,7 +107,7 @@ function declareTests({useJit}: {useJit: boolean}) {
let e = fixture.debugElement.children[0].nativeElement; let e = fixture.debugElement.children[0].nativeElement;
let trusted = sanitizer.bypassSecurityTrustUrl('bar/baz'); let trusted = sanitizer.bypassSecurityTrustUrl('bar/baz');
let ci = fixture.debugElement.componentInstance; let ci = fixture.componentInstance;
ci.ctxProp = trusted; ci.ctxProp = trusted;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getProperty(e, 'href')).toMatch(/SafeValue(%20| )must(%20| )use/); expect(getDOM().getProperty(e, 'href')).toMatch(/SafeValue(%20| )must(%20| )use/);
@ -122,7 +121,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(SecuredComponent); const fixture = TestBed.createComponent(SecuredComponent);
let e = fixture.debugElement.children[0].nativeElement; let e = fixture.debugElement.children[0].nativeElement;
let ci = fixture.debugElement.componentInstance; let ci = fixture.componentInstance;
ci.ctxProp = 'hello'; ci.ctxProp = 'hello';
fixture.detectChanges(); fixture.detectChanges();
// In the browser, reading href returns an absolute URL. On the server side, // In the browser, reading href returns an absolute URL. On the server side,
@ -140,7 +139,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(SecuredComponent); const fixture = TestBed.createComponent(SecuredComponent);
let e = fixture.debugElement.children[0].nativeElement; let e = fixture.debugElement.children[0].nativeElement;
let ci = fixture.debugElement.componentInstance; let ci = fixture.componentInstance;
// Make sure binding harmless values works. // Make sure binding harmless values works.
ci.ctxProp = 'red'; ci.ctxProp = 'red';
fixture.detectChanges(); fixture.detectChanges();
@ -172,7 +171,7 @@ function declareTests({useJit}: {useJit: boolean}) {
const fixture = TestBed.createComponent(SecuredComponent); const fixture = TestBed.createComponent(SecuredComponent);
let e = fixture.debugElement.children[0].nativeElement; let e = fixture.debugElement.children[0].nativeElement;
let ci = fixture.debugElement.componentInstance; let ci = fixture.componentInstance;
// Make sure binding harmless values works. // Make sure binding harmless values works.
ci.ctxProp = 'some <p>text</p>'; ci.ctxProp = 'some <p>text</p>';
fixture.detectChanges(); fixture.detectChanges();

16
modules/@angular/core/testing/component_fixture.ts
View File

@ -36,23 +36,11 @@ export class ComponentFixture<T> {
*/ */
elementRef: ElementRef; elementRef: ElementRef;
/**
* The ComponentRef for the component
*/
componentRef: ComponentRef<T>;
/** /**
* The ChangeDetectorRef for the component * The ChangeDetectorRef for the component
*/ */
changeDetectorRef: ChangeDetectorRef; changeDetectorRef: ChangeDetectorRef;
/**
* The NgZone in which this component was instantiated.
*/
ngZone: NgZone;
private _autoDetect: boolean;
private _isStable: boolean = true; private _isStable: boolean = true;
private _isDestroyed: boolean = false; private _isDestroyed: boolean = false;
private _resolve: (result: any) => void; private _resolve: (result: any) => void;
@ -62,7 +50,8 @@ export class ComponentFixture<T> {
private _onMicrotaskEmptySubscription: any /** TODO #9100 */ = null; private _onMicrotaskEmptySubscription: any /** TODO #9100 */ = null;
private _onErrorSubscription: any /** TODO #9100 */ = null; private _onErrorSubscription: any /** TODO #9100 */ = null;
constructor(componentRef: ComponentRef<T>, ngZone: NgZone, autoDetect: boolean) { constructor(
public componentRef: ComponentRef<T>, public ngZone: NgZone, private _autoDetect: boolean) {
this.changeDetectorRef = componentRef.changeDetectorRef; this.changeDetectorRef = componentRef.changeDetectorRef;
this.elementRef = componentRef.location; this.elementRef = componentRef.location;
this.debugElement = <DebugElement>getDebugNode(this.elementRef.nativeElement); this.debugElement = <DebugElement>getDebugNode(this.elementRef.nativeElement);
@ -70,7 +59,6 @@ export class ComponentFixture<T> {
this.nativeElement = this.elementRef.nativeElement; this.nativeElement = this.elementRef.nativeElement;
this.componentRef = componentRef; this.componentRef = componentRef;
this.ngZone = ngZone; this.ngZone = ngZone;
this._autoDetect = autoDetect;
if (ngZone != null) { if (ngZone != null) {
this._onUnstableSubscription = this._onUnstableSubscription =

2
modules/@angular/forms/test/form_array_spec.ts
View File

@ -8,7 +8,7 @@
import {fakeAsync, tick} from '@angular/core/testing'; import {fakeAsync, tick} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms'; import {FormArray, FormControl, FormGroup} from '@angular/forms';
import {isPresent} from '../src/facade/lang'; import {isPresent} from '../src/facade/lang';
import {Validators} from '../src/validators'; import {Validators} from '../src/validators';

2
modules/@angular/forms/test/form_builder_spec.ts
View File

@ -7,7 +7,7 @@
*/ */
import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal'; import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';
import {FormBuilder, FormControl} from '@angular/forms'; import {FormBuilder} from '@angular/forms';
export function main() { export function main() {
function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ { return null; } function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ { return null; }

246
modules/@angular/forms/test/reactive_integration_spec.ts
View File

@ -6,9 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {NgFor, NgIf} from '@angular/common';
import {Component, Directive, EventEmitter, Input, Output, forwardRef} from '@angular/core'; import {Component, Directive, EventEmitter, Input, Output, forwardRef} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, ReactiveFormsModule, Validator, Validators} from '@angular/forms'; import {ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, ReactiveFormsModule, Validator, Validators} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by'; import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
@ -37,7 +36,7 @@ export function main() {
it('should work with single controls', () => { it('should work with single controls', () => {
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl('old value'); const control = new FormControl('old value');
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -53,8 +52,7 @@ export function main() {
it('should work with formGroups (model -> view)', () => { it('should work with formGroups (model -> view)', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
new FormGroup({'login': new FormControl('loginValue')});
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -64,7 +62,7 @@ export function main() {
it('work with formGroups (view -> model)', () => { it('work with formGroups (view -> model)', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('oldValue')}); const form = new FormGroup({'login': new FormControl('oldValue')});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -80,12 +78,10 @@ export function main() {
it('should update DOM elements initially', () => { it('should update DOM elements initially', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
new FormGroup({'login': new FormControl('oldValue')});
fixture.detectChanges(); fixture.detectChanges();
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('newValue')});
new FormGroup({'login': new FormControl('newValue')});
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -94,12 +90,11 @@ export function main() {
it('should update model when UI changes', () => { it('should update model when UI changes', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
new FormGroup({'login': new FormControl('oldValue')});
fixture.detectChanges(); fixture.detectChanges();
const newForm = new FormGroup({'login': new FormControl('newValue')}); const newForm = new FormGroup({'login': new FormControl('newValue')});
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -117,12 +112,12 @@ export function main() {
it('should work with radio buttons when reusing control', () => { it('should work with radio buttons when reusing control', () => {
const fixture = TestBed.createComponent(FormControlRadioButtons); const fixture = TestBed.createComponent(FormControlRadioButtons);
const food = new FormControl('chicken'); const food = new FormControl('chicken');
fixture.debugElement.componentInstance.form = fixture.componentInstance.form =
new FormGroup({'food': food, 'drink': new FormControl('')}); new FormGroup({'food': food, 'drink': new FormControl('')});
fixture.detectChanges(); fixture.detectChanges();
const newForm = new FormGroup({'food': food, 'drink': new FormControl('')}); const newForm = new FormGroup({'food': food, 'drink': new FormControl('')});
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
newForm.setValue({food: 'fish', drink: ''}); newForm.setValue({food: 'fish', drink: ''});
@ -134,7 +129,7 @@ export function main() {
it('should update nested form group model when UI changes', () => { it('should update nested form group model when UI changes', () => {
const fixture = TestBed.createComponent(NestedFormGroupComp); const fixture = TestBed.createComponent(NestedFormGroupComp);
fixture.debugElement.componentInstance.form = new FormGroup( fixture.componentInstance.form = new FormGroup(
{'signin': new FormGroup({'login': new FormControl(), 'password': new FormControl()})}); {'signin': new FormGroup({'login': new FormControl(), 'password': new FormControl()})});
fixture.detectChanges(); fixture.detectChanges();
@ -142,7 +137,7 @@ export function main() {
'signin': new FormGroup( 'signin': new FormGroup(
{'login': new FormControl('Nancy'), 'password': new FormControl('secret')}) {'login': new FormControl('Nancy'), 'password': new FormControl('secret')})
}); });
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input')); const inputs = fixture.debugElement.queryAll(By.css('input'));
@ -168,7 +163,7 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
expect(form.get('login').errors).toEqual({required: true}); expect(form.get('login').errors).toEqual({required: true});
@ -178,7 +173,7 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
expect(newForm.get('login').errors).toEqual({required: true}); expect(newForm.get('login').errors).toEqual({required: true});
@ -190,7 +185,7 @@ export function main() {
'signin': 'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')}) new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
expect(form.get('signin').valid).toBe(false); expect(form.get('signin').valid).toBe(false);
@ -198,7 +193,7 @@ export function main() {
'signin': 'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')}) new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
}); });
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
expect(form.get('signin').valid).toBe(false); expect(form.get('signin').valid).toBe(false);
@ -210,7 +205,7 @@ export function main() {
'signin': 'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')}) new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
form.addControl('email', new FormControl('email')); form.addControl('email', new FormControl('email'));
@ -223,7 +218,7 @@ export function main() {
'signin': 'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')}) new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
}); });
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
emailInput = fixture.debugElement.query(By.css('[formControlName="email"]')); emailInput = fixture.debugElement.query(By.css('[formControlName="email"]'));
@ -234,8 +229,8 @@ export function main() {
const fixture = TestBed.createComponent(FormArrayComp); const fixture = TestBed.createComponent(FormArrayComp);
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]); const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
const form = new FormGroup({cities: cityArray}); const form = new FormGroup({cities: cityArray});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray; fixture.componentInstance.cityArray = cityArray;
fixture.detectChanges(); fixture.detectChanges();
let inputs = fixture.debugElement.queryAll(By.css('input')); let inputs = fixture.debugElement.queryAll(By.css('input'));
@ -248,8 +243,8 @@ export function main() {
const newArr = new FormArray([new FormControl('SF'), new FormControl('NY')]); const newArr = new FormArray([new FormControl('SF'), new FormControl('NY')]);
const newForm = new FormGroup({cities: newArr}); const newForm = new FormGroup({cities: newArr});
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.debugElement.componentInstance.cityArray = newArr; fixture.componentInstance.cityArray = newArr;
fixture.detectChanges(); fixture.detectChanges();
inputs = fixture.debugElement.queryAll(By.css('input')); inputs = fixture.debugElement.queryAll(By.css('input'));
@ -261,7 +256,7 @@ export function main() {
it('should attach dir to control when leaf control changes', () => { it('should attach dir to control when leaf control changes', () => {
const form = new FormGroup({'login': new FormControl('oldValue')}); const form = new FormGroup({'login': new FormControl('oldValue')});
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
form.removeControl('login'); form.removeControl('login');
@ -288,7 +283,7 @@ export function main() {
signin: new FormGroup( signin: new FormGroup(
{login: new FormControl('oldLogin'), password: new FormControl('oldPassword')}) {login: new FormControl('oldLogin'), password: new FormControl('oldPassword')})
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
form.removeControl('signin'); form.removeControl('signin');
@ -318,8 +313,8 @@ export function main() {
const fixture = TestBed.createComponent(FormArrayComp); const fixture = TestBed.createComponent(FormArrayComp);
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]); const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
const form = new FormGroup({cities: cityArray}); const form = new FormGroup({cities: cityArray});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray; fixture.componentInstance.cityArray = cityArray;
fixture.detectChanges(); fixture.detectChanges();
form.removeControl('cities'); form.removeControl('cities');
@ -349,8 +344,8 @@ export function main() {
const fixture = TestBed.createComponent(FormArrayComp); const fixture = TestBed.createComponent(FormArrayComp);
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]); const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
const form = new FormGroup({cities: cityArray}); const form = new FormGroup({cities: cityArray});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray; fixture.componentInstance.cityArray = cityArray;
fixture.detectChanges(); fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input')); const inputs = fixture.debugElement.queryAll(By.css('input'));
@ -372,8 +367,8 @@ export function main() {
const fixture = TestBed.createComponent(FormArrayComp); const fixture = TestBed.createComponent(FormArrayComp);
const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]); const cityArray = new FormArray([new FormControl('SF'), new FormControl('NY')]);
const form = new FormGroup({cities: cityArray}); const form = new FormGroup({cities: cityArray});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray; fixture.componentInstance.cityArray = cityArray;
fixture.detectChanges(); fixture.detectChanges();
cityArray.push(new FormControl('LA')); cityArray.push(new FormControl('LA'));
@ -391,8 +386,8 @@ export function main() {
new FormGroup({town: new FormControl('NY'), state: new FormControl('NY')}) new FormGroup({town: new FormControl('NY'), state: new FormControl('NY')})
]); ]);
const form = new FormGroup({cities: cityArray}); const form = new FormGroup({cities: cityArray});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray; fixture.componentInstance.cityArray = cityArray;
fixture.detectChanges(); fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input')); const inputs = fixture.debugElement.queryAll(By.css('input'));
@ -420,7 +415,7 @@ export function main() {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('oldValue'); const login = new FormControl('oldValue');
const form = new FormGroup({'login': login}); const form = new FormGroup({'login': login});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
login.setValue('newValue'); login.setValue('newValue');
@ -435,7 +430,7 @@ export function main() {
() => { () => {
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl({value: 'some value', disabled: true}); const control = new FormControl({value: 'some value', disabled: true});
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -449,8 +444,8 @@ export function main() {
it('should add disabled attribute to formControlName when instantiated as disabled', () => { it('should add disabled attribute to formControlName when instantiated as disabled', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const control = new FormControl({value: 'some value', disabled: true}); const control = new FormControl({value: 'some value', disabled: true});
fixture.debugElement.componentInstance.form = new FormGroup({login: control}); fixture.componentInstance.form = new FormGroup({login: control});
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -465,7 +460,7 @@ export function main() {
() => { () => {
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl('some value'); const control = new FormControl('some value');
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
control.disable(); control.disable();
@ -483,7 +478,7 @@ export function main() {
() => { () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('login')}); const form = new FormGroup({'login': new FormControl('login')});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
form.disable(); form.disable();
@ -501,7 +496,7 @@ export function main() {
it('should not add disabled attribute to custom controls when disable() is called', () => { it('should not add disabled attribute to custom controls when disable() is called', () => {
const fixture = TestBed.createComponent(MyInputForm); const fixture = TestBed.createComponent(MyInputForm);
const control = new FormControl('some value'); const control = new FormControl('some value');
fixture.debugElement.componentInstance.form = new FormGroup({login: control}); fixture.componentInstance.form = new FormGroup({login: control});
fixture.detectChanges(); fixture.detectChanges();
control.disable(); control.disable();
@ -521,7 +516,7 @@ export function main() {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('oldValue'); const login = new FormControl('oldValue');
const form = new FormGroup({'login': login}); const form = new FormGroup({'login': login});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const loginEl = fixture.debugElement.query(By.css('input')); const loginEl = fixture.debugElement.query(By.css('input'));
@ -537,22 +532,20 @@ export function main() {
describe('submit and reset events', () => { describe('submit and reset events', () => {
it('should emit ngSubmit event on submit', () => { it('should emit ngSubmit event on submit', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
new FormGroup({'login': new FormControl('loginValue')}); fixture.componentInstance.data = 'should be changed';
fixture.debugElement.componentInstance.data = 'should be changed';
fixture.detectChanges(); fixture.detectChanges();
const formEl = fixture.debugElement.query(By.css('form')).nativeElement; const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
dispatchEvent(formEl, 'submit'); dispatchEvent(formEl, 'submit');
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.componentInstance.data).toEqual('submitted'); expect(fixture.componentInstance.data).toEqual('submitted');
}); });
it('should mark formGroup as submitted on submit event', () => { it('should mark formGroup as submitted on submit event', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
new FormGroup({'login': new FormControl('loginValue')});
fixture.detectChanges(); fixture.detectChanges();
const formGroupDir = fixture.debugElement.children[0].injector.get(FormGroupDirective); const formGroupDir = fixture.debugElement.children[0].injector.get(FormGroupDirective);
@ -569,7 +562,7 @@ export function main() {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('some value'); const login = new FormControl('some value');
const form = new FormGroup({'login': login}); const form = new FormGroup({'login': login});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement; const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
@ -583,7 +576,7 @@ export function main() {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('some value'); const login = new FormControl('some value');
const form = new FormGroup({'login': login}); const form = new FormGroup({'login': login});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement; const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
@ -600,7 +593,7 @@ export function main() {
it('should mark controls as dirty before emitting a value change event', () => { it('should mark controls as dirty before emitting a value change event', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('oldValue'); const login = new FormControl('oldValue');
fixture.debugElement.componentInstance.form = new FormGroup({'login': login}); fixture.componentInstance.form = new FormGroup({'login': login});
fixture.detectChanges(); fixture.detectChanges();
login.valueChanges.subscribe(() => { expect(login.dirty).toBe(true); }); login.valueChanges.subscribe(() => { expect(login.dirty).toBe(true); });
@ -616,7 +609,7 @@ export function main() {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const login = new FormControl('oldValue'); const login = new FormControl('oldValue');
const form = new FormGroup({'login': login}); const form = new FormGroup({'login': login});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement; const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
@ -636,7 +629,7 @@ export function main() {
it('should work with single fields', () => { it('should work with single fields', () => {
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl('', Validators.required); const control = new FormControl('', Validators.required);
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')).nativeElement; const input = fixture.debugElement.query(By.css('input')).nativeElement;
@ -657,7 +650,7 @@ export function main() {
it('should work with single fields in parent forms', () => { it('should work with single fields in parent forms', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('', Validators.required)}); const form = new FormGroup({'login': new FormControl('', Validators.required)});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')).nativeElement; const input = fixture.debugElement.query(By.css('input')).nativeElement;
@ -678,7 +671,7 @@ export function main() {
it('should work with formGroup', () => { it('should work with formGroup', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('', Validators.required)}); const form = new FormGroup({'login': new FormControl('', Validators.required)});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')).nativeElement; const input = fixture.debugElement.query(By.css('input')).nativeElement;
@ -707,7 +700,7 @@ export function main() {
FormControlComp, {set: {template: `<input [formControl]="control">`}}); FormControlComp, {set: {template: `<input [formControl]="control">`}});
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl('old'); const control = new FormControl('old');
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -724,7 +717,7 @@ export function main() {
it('should support <input type=text>', () => { it('should support <input type=text>', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('old')}); const form = new FormGroup({'login': new FormControl('old')});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -741,7 +734,7 @@ export function main() {
it('should ignore the change event for <input type=text>', () => { it('should ignore the change event for <input type=text>', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('oldValue')}); const form = new FormGroup({'login': new FormControl('oldValue')});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -756,7 +749,7 @@ export function main() {
FormControlComp, {set: {template: `<textarea [formControl]="control"></textarea>`}}); FormControlComp, {set: {template: `<textarea [formControl]="control"></textarea>`}});
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl('old'); const control = new FormControl('old');
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -775,7 +768,7 @@ export function main() {
FormControlComp, {set: {template: `<input type="checkbox" [formControl]="control">`}}); FormControlComp, {set: {template: `<input type="checkbox" [formControl]="control">`}});
const fixture = TestBed.createComponent(FormControlComp); const fixture = TestBed.createComponent(FormControlComp);
const control = new FormControl(true); const control = new FormControl(true);
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -805,14 +798,14 @@ export function main() {
// view -> model // view -> model
expect(sfOption.nativeElement.selected).toBe(false); expect(sfOption.nativeElement.selected).toBe(false);
expect(fixture.debugElement.componentInstance.form.value).toEqual({'city': 'NY'}); expect(fixture.componentInstance.form.value).toEqual({'city': 'NY'});
}); });
describe('should support <type=number>', () => { describe('should support <type=number>', () => {
it('with basic use case', () => { it('with basic use case', () => {
const fixture = TestBed.createComponent(FormControlNumberInput); const fixture = TestBed.createComponent(FormControlNumberInput);
const control = new FormControl(10); const control = new FormControl(10);
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -829,7 +822,7 @@ export function main() {
it('when value is cleared in the UI', () => { it('when value is cleared in the UI', () => {
const fixture = TestBed.createComponent(FormControlNumberInput); const fixture = TestBed.createComponent(FormControlNumberInput);
const control = new FormControl(10, Validators.required); const control = new FormControl(10, Validators.required);
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
@ -849,7 +842,7 @@ export function main() {
it('when value is cleared programmatically', () => { it('when value is cleared programmatically', () => {
const fixture = TestBed.createComponent(FormControlNumberInput); const fixture = TestBed.createComponent(FormControlNumberInput);
const control = new FormControl(10); const control = new FormControl(10);
fixture.debugElement.componentInstance.control = control; fixture.componentInstance.control = control;
fixture.detectChanges(); fixture.detectChanges();
control.setValue(null); control.setValue(null);
@ -865,7 +858,7 @@ export function main() {
const fixture = TestBed.createComponent(FormControlRadioButtons); const fixture = TestBed.createComponent(FormControlRadioButtons);
const form = const form =
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')}); new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -892,8 +885,7 @@ export function main() {
const fixture = TestBed.createComponent(FormControlRadioButtons); const fixture = TestBed.createComponent(FormControlRadioButtons);
const foodCtrl = new FormControl('fish'); const foodCtrl = new FormControl('fish');
const drinkCtrl = new FormControl('sprite'); const drinkCtrl = new FormControl('sprite');
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
fixture.detectChanges(); fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input')); const inputs = fixture.debugElement.queryAll(By.css('input'));
@ -906,7 +898,7 @@ export function main() {
inputs[0].nativeElement.checked = true; inputs[0].nativeElement.checked = true;
fixture.detectChanges(); fixture.detectChanges();
const value = fixture.debugElement.componentInstance.form.value; const value = fixture.componentInstance.form.value;
expect(value.food).toEqual('chicken'); expect(value.food).toEqual('chicken');
expect(inputs[1].nativeElement.checked).toEqual(false); expect(inputs[1].nativeElement.checked).toEqual(false);
expect(inputs[2].nativeElement.checked).toEqual(false); expect(inputs[2].nativeElement.checked).toEqual(false);
@ -926,8 +918,8 @@ export function main() {
const showRadio = new FormControl('yes'); const showRadio = new FormControl('yes');
const form = const form =
new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')}); new FormGroup({'food': new FormControl('fish'), 'drink': new FormControl('sprite')});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.showRadio = showRadio; fixture.componentInstance.showRadio = showRadio;
showRadio.valueChanges.subscribe((change) => { showRadio.valueChanges.subscribe((change) => {
(change === 'yes') ? form.addControl('food', new FormControl('fish')) : (change === 'yes') ? form.addControl('food', new FormControl('fish')) :
form.removeControl('food'); form.removeControl('food');
@ -961,7 +953,7 @@ export function main() {
food: new FormControl('fish'), food: new FormControl('fish'),
nested: new FormGroup({food: new FormControl('fish')}) nested: new FormGroup({food: new FormControl('fish')})
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -989,8 +981,7 @@ export function main() {
describe('custom value accessors', () => { describe('custom value accessors', () => {
it('should support custom value accessors', () => { it('should support custom value accessors', () => {
const fixture = TestBed.createComponent(WrappedValueForm); const fixture = TestBed.createComponent(WrappedValueForm);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
new FormGroup({'login': new FormControl('aa')});
fixture.detectChanges(); fixture.detectChanges();
// model -> view // model -> view
@ -1001,14 +992,13 @@ export function main() {
dispatchEvent(input.nativeElement, 'input'); dispatchEvent(input.nativeElement, 'input');
// view -> model // view -> model
expect(fixture.debugElement.componentInstance.form.value).toEqual({'login': 'bb'}); expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
}); });
it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property', it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
() => { () => {
const fixture = TestBed.createComponent(MyInputForm); const fixture = TestBed.createComponent(MyInputForm);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
new FormGroup({'login': new FormControl('aa')});
fixture.detectChanges(); fixture.detectChanges();
const input = fixture.debugElement.query(By.css('my-input')); const input = fixture.debugElement.query(By.css('my-input'));
@ -1016,7 +1006,7 @@ export function main() {
input.componentInstance.value = '!bb!'; input.componentInstance.value = '!bb!';
input.componentInstance.onInput.subscribe((value: any) => { input.componentInstance.onInput.subscribe((value: any) => {
expect(fixture.debugElement.componentInstance.form.value).toEqual({'login': 'bb'}); expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
}); });
input.componentInstance.dispatchChangeEvent(); input.componentInstance.dispatchChangeEvent();
}); });
@ -1029,9 +1019,8 @@ export function main() {
it('should support ngModel for complex forms', fakeAsync(() => { it('should support ngModel for complex forms', fakeAsync(() => {
const fixture = TestBed.createComponent(FormGroupNgModel); const fixture = TestBed.createComponent(FormGroupNgModel);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'login': new FormControl('')});
new FormGroup({'login': new FormControl('')}); fixture.componentInstance.login = 'oldValue';
fixture.debugElement.componentInstance.login = 'oldValue';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -1042,13 +1031,13 @@ export function main() {
dispatchEvent(input, 'input'); dispatchEvent(input, 'input');
tick(); tick();
expect(fixture.debugElement.componentInstance.login).toEqual('updatedValue'); expect(fixture.componentInstance.login).toEqual('updatedValue');
})); }));
it('should support ngModel for single fields', fakeAsync(() => { it('should support ngModel for single fields', fakeAsync(() => {
const fixture = TestBed.createComponent(FormControlNgModel); const fixture = TestBed.createComponent(FormControlNgModel);
fixture.debugElement.componentInstance.control = new FormControl(''); fixture.componentInstance.control = new FormControl('');
fixture.debugElement.componentInstance.login = 'oldValue'; fixture.componentInstance.login = 'oldValue';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -1059,12 +1048,12 @@ export function main() {
dispatchEvent(input, 'input'); dispatchEvent(input, 'input');
tick(); tick();
expect(fixture.debugElement.componentInstance.login).toEqual('updatedValue'); expect(fixture.componentInstance.login).toEqual('updatedValue');
})); }));
it('should not update the view when the value initially came from the view', fakeAsync(() => { it('should not update the view when the value initially came from the view', fakeAsync(() => {
const fixture = TestBed.createComponent(FormControlNgModel); const fixture = TestBed.createComponent(FormControlNgModel);
fixture.debugElement.componentInstance.control = new FormControl(''); fixture.componentInstance.control = new FormControl('');
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -1091,7 +1080,7 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const required = fixture.debugElement.query(By.css('[required]')); const required = fixture.debugElement.query(By.css('[required]'));
@ -1136,11 +1125,11 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.required = true; fixture.componentInstance.required = true;
fixture.debugElement.componentInstance.minLen = 3; fixture.componentInstance.minLen = 3;
fixture.debugElement.componentInstance.maxLen = 3; fixture.componentInstance.maxLen = 3;
fixture.debugElement.componentInstance.pattern = '.{3,}'; fixture.componentInstance.pattern = '.{3,}';
fixture.detectChanges(); fixture.detectChanges();
const required = fixture.debugElement.query(By.css('[name=required]')); const required = fixture.debugElement.query(By.css('[name=required]'));
@ -1184,7 +1173,7 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
const required = fixture.debugElement.query(By.css('[name=required]')); const required = fixture.debugElement.query(By.css('[name=required]'));
@ -1208,10 +1197,10 @@ export function main() {
expect(form.hasError('pattern', ['pattern'])).toEqual(false); expect(form.hasError('pattern', ['pattern'])).toEqual(false);
expect(form.valid).toEqual(true); expect(form.valid).toEqual(true);
fixture.debugElement.componentInstance.required = true; fixture.componentInstance.required = true;
fixture.debugElement.componentInstance.minLen = 3; fixture.componentInstance.minLen = 3;
fixture.debugElement.componentInstance.maxLen = 3; fixture.componentInstance.maxLen = 3;
fixture.debugElement.componentInstance.pattern = '.{3,}'; fixture.componentInstance.pattern = '.{3,}';
fixture.detectChanges(); fixture.detectChanges();
dispatchEvent(required.nativeElement, 'input'); dispatchEvent(required.nativeElement, 'input');
@ -1226,17 +1215,17 @@ export function main() {
expect(form.valid).toEqual(false); expect(form.valid).toEqual(false);
expect(required.nativeElement.getAttribute('required')).toEqual(''); expect(required.nativeElement.getAttribute('required')).toEqual('');
expect(fixture.debugElement.componentInstance.minLen.toString()) expect(fixture.componentInstance.minLen.toString())
.toEqual(minLength.nativeElement.getAttribute('minlength')); .toEqual(minLength.nativeElement.getAttribute('minlength'));
expect(fixture.debugElement.componentInstance.maxLen.toString()) expect(fixture.componentInstance.maxLen.toString())
.toEqual(maxLength.nativeElement.getAttribute('maxlength')); .toEqual(maxLength.nativeElement.getAttribute('maxlength'));
expect(fixture.debugElement.componentInstance.pattern.toString()) expect(fixture.componentInstance.pattern.toString())
.toEqual(pattern.nativeElement.getAttribute('pattern')); .toEqual(pattern.nativeElement.getAttribute('pattern'));
fixture.debugElement.componentInstance.required = false; fixture.componentInstance.required = false;
fixture.debugElement.componentInstance.minLen = null; fixture.componentInstance.minLen = null;
fixture.debugElement.componentInstance.maxLen = null; fixture.componentInstance.maxLen = null;
fixture.debugElement.componentInstance.pattern = null; fixture.componentInstance.pattern = null;
fixture.detectChanges(); fixture.detectChanges();
expect(form.hasError('required', ['login'])).toEqual(false); expect(form.hasError('required', ['login'])).toEqual(false);
@ -1259,11 +1248,11 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.debugElement.componentInstance.required = true; fixture.componentInstance.required = true;
fixture.debugElement.componentInstance.minLen = 3; fixture.componentInstance.minLen = 3;
fixture.debugElement.componentInstance.maxLen = 3; fixture.componentInstance.maxLen = 3;
fixture.debugElement.componentInstance.pattern = '.{3,}'; fixture.componentInstance.pattern = '.{3,}';
fixture.detectChanges(); fixture.detectChanges();
const newForm = new FormGroup({ const newForm = new FormGroup({
@ -1272,13 +1261,13 @@ export function main() {
'max': new FormControl(''), 'max': new FormControl(''),
'pattern': new FormControl('') 'pattern': new FormControl('')
}); });
fixture.debugElement.componentInstance.form = newForm; fixture.componentInstance.form = newForm;
fixture.detectChanges(); fixture.detectChanges();
fixture.debugElement.componentInstance.required = false; fixture.componentInstance.required = false;
fixture.debugElement.componentInstance.minLen = null; fixture.componentInstance.minLen = null;
fixture.debugElement.componentInstance.maxLen = null; fixture.componentInstance.maxLen = null;
fixture.debugElement.componentInstance.pattern = null; fixture.componentInstance.pattern = null;
fixture.detectChanges(); fixture.detectChanges();
expect(newForm.hasError('required', ['login'])).toEqual(false); expect(newForm.hasError('required', ['login'])).toEqual(false);
@ -1292,7 +1281,7 @@ export function main() {
const fixture = TestBed.createComponent(UniqLoginWrapper); const fixture = TestBed.createComponent(UniqLoginWrapper);
const form = new FormGroup({'login': new FormControl('')}); const form = new FormGroup({'login': new FormControl('')});
tick(); tick();
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
expect(form.pending).toEqual(true); expect(form.pending).toEqual(true);
@ -1311,7 +1300,7 @@ export function main() {
it('should use sync validators defined in the model', () => { it('should use sync validators defined in the model', () => {
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const form = new FormGroup({'login': new FormControl('aa', Validators.required)}); const form = new FormGroup({'login': new FormControl('aa', Validators.required)});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
expect(form.valid).toEqual(true); expect(form.valid).toEqual(true);
@ -1327,7 +1316,7 @@ export function main() {
const control = const control =
new FormControl('', Validators.required, uniqLoginAsyncValidator('expected')); new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
const form = new FormGroup({'login': control}); const form = new FormGroup({'login': control});
fixture.debugElement.componentInstance.form = form; fixture.componentInstance.form = form;
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -1453,8 +1442,7 @@ export function main() {
template: ` template: `
<div formArrayName="cities"> <div formArrayName="cities">
<input type="text" formControlName="login"> <input type="text" formControlName="login">
</div> </div>`
`
} }
}); });
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
@ -1475,7 +1463,7 @@ export function main() {
} }
}); });
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.myGroup = new FormGroup({}); fixture.componentInstance.myGroup = new FormGroup({});
expect(() => fixture.detectChanges()) expect(() => fixture.detectChanges())
.toThrowError(new RegExp( .toThrowError(new RegExp(
@ -1493,7 +1481,7 @@ export function main() {
} }
}); });
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.myGroup = new FormGroup({}); fixture.componentInstance.myGroup = new FormGroup({});
expect(() => fixture.detectChanges()).not.toThrowError(); expect(() => fixture.detectChanges()).not.toThrowError();
}); });
@ -1512,7 +1500,7 @@ export function main() {
}); });
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
const myGroup = new FormGroup({person: new FormGroup({})}); const myGroup = new FormGroup({person: new FormGroup({})});
fixture.debugElement.componentInstance.myGroup = new FormGroup({person: new FormGroup({})}); fixture.componentInstance.myGroup = new FormGroup({person: new FormGroup({})});
expect(() => fixture.detectChanges()) expect(() => fixture.detectChanges())
.toThrowError(new RegExp( .toThrowError(new RegExp(
@ -1532,7 +1520,7 @@ export function main() {
} }
}); });
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.myGroup = new FormGroup({}); fixture.componentInstance.myGroup = new FormGroup({});
expect(() => fixture.detectChanges()) expect(() => fixture.detectChanges())
.toThrowError( .toThrowError(
@ -1545,13 +1533,11 @@ export function main() {
template: ` template: `
<form [formGroup]="form">hav <form [formGroup]="form">hav
<input type="radio" formControlName="food" name="drink" value="chicken"> <input type="radio" formControlName="food" name="drink" value="chicken">
</form> </form>`
`
} }
}); });
const fixture = TestBed.createComponent(FormGroupComp); const fixture = TestBed.createComponent(FormGroupComp);
fixture.debugElement.componentInstance.form = fixture.componentInstance.form = new FormGroup({'food': new FormControl('fish')});
new FormGroup({'food': new FormControl('fish')});
expect(() => fixture.detectChanges()) expect(() => fixture.detectChanges())
.toThrowError(new RegExp('If you define both a name and a formControlName')); .toThrowError(new RegExp('If you define both a name and a formControlName'));
@ -1655,7 +1641,9 @@ class FormControlComp {
` `
}) })
class FormGroupComp { class FormGroupComp {
control: FormControl;
form: FormGroup; form: FormGroup;
myGroup: FormGroup;
data: string; data: string;
} }

151
modules/@angular/forms/test/template_integration_spec.ts
View File

@ -6,7 +6,6 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {NgFor, NgIf} from '@angular/common';
import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
import {TestBed, async, fakeAsync, tick} from '@angular/core/testing'; import {TestBed, async, fakeAsync, tick} from '@angular/core/testing';
import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, NgForm} from '@angular/forms'; import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, NgForm} from '@angular/forms';
@ -14,8 +13,6 @@ import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {dispatchEvent} from '@angular/platform-browser/testing/browser_util'; import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';
import {ListWrapper} from '../src/facade/collection';
export function main() { export function main() {
describe('template-driven forms integration tests', () => { describe('template-driven forms integration tests', () => {
@ -34,7 +31,7 @@ export function main() {
describe('basic functionality', () => { describe('basic functionality', () => {
it('should support ngModel for standalone fields', fakeAsync(() => { it('should support ngModel for standalone fields', fakeAsync(() => {
const fixture = TestBed.createComponent(StandaloneNgModel); const fixture = TestBed.createComponent(StandaloneNgModel);
fixture.debugElement.componentInstance.name = 'oldValue'; fixture.componentInstance.name = 'oldValue';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -48,12 +45,12 @@ export function main() {
tick(); tick();
// view -> model // view -> model
expect(fixture.debugElement.componentInstance.name).toEqual('updatedValue'); expect(fixture.componentInstance.name).toEqual('updatedValue');
})); }));
it('should support ngModel registration with a parent form', fakeAsync(() => { it('should support ngModel registration with a parent form', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelForm); const fixture = TestBed.createComponent(NgModelForm);
fixture.debugElement.componentInstance.name = 'Nancy'; fixture.componentInstance.name = 'Nancy';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -65,9 +62,9 @@ export function main() {
it('should support ngModelGroup', fakeAsync(() => { it('should support ngModelGroup', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelGroupForm); const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.first = 'Nancy'; fixture.componentInstance.first = 'Nancy';
fixture.debugElement.componentInstance.last = 'Drew'; fixture.componentInstance.last = 'Drew';
fixture.debugElement.componentInstance.email = 'some email'; fixture.componentInstance.email = 'some email';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -88,9 +85,9 @@ export function main() {
it('should add controls and control groups to form control model', fakeAsync(() => { it('should add controls and control groups to form control model', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelGroupForm); const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.first = 'Nancy'; fixture.componentInstance.first = 'Nancy';
fixture.debugElement.componentInstance.last = 'Drew'; fixture.componentInstance.last = 'Drew';
fixture.debugElement.componentInstance.email = 'some email'; fixture.componentInstance.email = 'some email';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -103,9 +100,9 @@ export function main() {
it('should remove controls and control groups from form control model', fakeAsync(() => { it('should remove controls and control groups from form control model', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelNgIfForm); const fixture = TestBed.createComponent(NgModelNgIfForm);
fixture.debugElement.componentInstance.emailShowing = true; fixture.componentInstance.emailShowing = true;
fixture.debugElement.componentInstance.first = 'Nancy'; fixture.componentInstance.first = 'Nancy';
fixture.debugElement.componentInstance.email = 'some email'; fixture.componentInstance.email = 'some email';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -114,7 +111,7 @@ export function main() {
expect(form.value).toEqual({name: {first: 'Nancy'}, email: 'some email'}); expect(form.value).toEqual({name: {first: 'Nancy'}, email: 'some email'});
// should remove individual control successfully // should remove individual control successfully
fixture.debugElement.componentInstance.emailShowing = false; fixture.componentInstance.emailShowing = false;
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -125,7 +122,7 @@ export function main() {
expect(form.control.get('name.first').value).toEqual('Nancy'); expect(form.control.get('name.first').value).toEqual('Nancy');
// should remove form group successfully // should remove form group successfully
fixture.debugElement.componentInstance.groupShowing = false; fixture.componentInstance.groupShowing = false;
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -136,7 +133,7 @@ export function main() {
it('should set status classes with ngModel', async(() => { it('should set status classes with ngModel', async(() => {
const fixture = TestBed.createComponent(NgModelForm); const fixture = TestBed.createComponent(NgModelForm);
fixture.debugElement.componentInstance.name = 'aa'; fixture.componentInstance.name = 'aa';
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
@ -159,7 +156,7 @@ export function main() {
it('should set status classes with ngModelGroup and ngForm', async(() => { it('should set status classes with ngModelGroup and ngForm', async(() => {
const fixture = TestBed.createComponent(NgModelGroupForm); const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.first = ''; fixture.componentInstance.first = '';
fixture.detectChanges(); fixture.detectChanges();
const form = fixture.debugElement.query(By.css('form')).nativeElement; const form = fixture.debugElement.query(By.css('form')).nativeElement;
@ -214,8 +211,8 @@ export function main() {
it('should not register standalone ngModels with parent form', fakeAsync(() => { it('should not register standalone ngModels with parent form', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelOptionsStandalone); const fixture = TestBed.createComponent(NgModelOptionsStandalone);
fixture.debugElement.componentInstance.one = 'some data'; fixture.componentInstance.one = 'some data';
fixture.debugElement.componentInstance.two = 'should not show'; fixture.componentInstance.two = 'should not show';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -229,8 +226,8 @@ export function main() {
it('should override name attribute with ngModelOptions name if provided', fakeAsync(() => { it('should override name attribute with ngModelOptions name if provided', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelForm); const fixture = TestBed.createComponent(NgModelForm);
fixture.debugElement.componentInstance.options = {name: 'override'}; fixture.componentInstance.options = {name: 'override'};
fixture.debugElement.componentInstance.name = 'some data'; fixture.componentInstance.name = 'some data';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -242,13 +239,13 @@ export function main() {
describe('submit and reset events', () => { describe('submit and reset events', () => {
it('should emit ngSubmit event on submit', fakeAsync(() => { it('should emit ngSubmit event on submit', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelForm); const fixture = TestBed.createComponent(NgModelForm);
fixture.debugElement.componentInstance.name = 'old'; fixture.componentInstance.name = 'old';
const form = fixture.debugElement.query(By.css('form')); const form = fixture.debugElement.query(By.css('form'));
dispatchEvent(form.nativeElement, 'submit'); dispatchEvent(form.nativeElement, 'submit');
tick(); tick();
expect(fixture.debugElement.componentInstance.name).toEqual('submitted'); expect(fixture.componentInstance.name).toEqual('submitted');
})); }));
it('should mark NgForm as submitted on submit event', fakeAsync(() => { it('should mark NgForm as submitted on submit event', fakeAsync(() => {
@ -267,7 +264,7 @@ export function main() {
it('should reset the form to empty when reset event is fired', fakeAsync(() => { it('should reset the form to empty when reset event is fired', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelForm); const fixture = TestBed.createComponent(NgModelForm);
fixture.debugElement.componentInstance.name = 'should be cleared'; fixture.componentInstance.name = 'should be cleared';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -275,18 +272,17 @@ export function main() {
const formEl = fixture.debugElement.query(By.css('form')); const formEl = fixture.debugElement.query(By.css('form'));
const input = fixture.debugElement.query(By.css('input')); const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toBe('should be cleared'); // view value expect(input.nativeElement.value).toBe('should be cleared'); // view value
expect(fixture.debugElement.componentInstance.name) expect(fixture.componentInstance.name).toBe('should be cleared'); // ngModel value
.toBe('should be cleared'); // ngModel value expect(form.value.name).toEqual('should be cleared'); // control value
expect(form.value.name).toEqual('should be cleared'); // control value
dispatchEvent(formEl.nativeElement, 'reset'); dispatchEvent(formEl.nativeElement, 'reset');
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(input.nativeElement.value).toBe(''); // view value expect(input.nativeElement.value).toBe(''); // view value
expect(fixture.debugElement.componentInstance.name).toBe(null); // ngModel value expect(fixture.componentInstance.name).toBe(null); // ngModel value
expect(form.value.name).toEqual(null); // control value expect(form.value.name).toEqual(null); // control value
})); }));
it('should reset the form submit state when reset button is clicked', fakeAsync(() => { it('should reset the form submit state when reset button is clicked', fakeAsync(() => {
@ -310,7 +306,7 @@ export function main() {
it('should emit valueChanges and statusChanges on init', fakeAsync(() => { it('should emit valueChanges and statusChanges on init', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelForm); const fixture = TestBed.createComponent(NgModelForm);
const form = fixture.debugElement.children[0].injector.get(NgForm); const form = fixture.debugElement.children[0].injector.get(NgForm);
fixture.debugElement.componentInstance.name = 'aa'; fixture.componentInstance.name = 'aa';
fixture.detectChanges(); fixture.detectChanges();
expect(form.valid).toEqual(true); expect(form.valid).toEqual(true);
@ -369,10 +365,10 @@ export function main() {
describe('disabled controls', () => { describe('disabled controls', () => {
it('should not consider disabled controls in value or validation', fakeAsync(() => { it('should not consider disabled controls in value or validation', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelGroupForm); const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.isDisabled = false; fixture.componentInstance.isDisabled = false;
fixture.debugElement.componentInstance.first = ''; fixture.componentInstance.first = '';
fixture.debugElement.componentInstance.last = 'Drew'; fixture.componentInstance.last = 'Drew';
fixture.debugElement.componentInstance.email = 'some email'; fixture.componentInstance.email = 'some email';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -393,8 +389,8 @@ export function main() {
it('should add disabled attribute in the UI if disable() is called programmatically', it('should add disabled attribute in the UI if disable() is called programmatically',
fakeAsync(() => { fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelGroupForm); const fixture = TestBed.createComponent(NgModelGroupForm);
fixture.debugElement.componentInstance.isDisabled = false; fixture.componentInstance.isDisabled = false;
fixture.debugElement.componentInstance.first = 'Nancy'; fixture.componentInstance.first = 'Nancy';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -409,8 +405,8 @@ export function main() {
it('should disable a custom control if disabled attr is added', async(() => { it('should disable a custom control if disabled attr is added', async(() => {
const fixture = TestBed.createComponent(NgModelCustomWrapper); const fixture = TestBed.createComponent(NgModelCustomWrapper);
fixture.debugElement.componentInstance.name = 'Nancy'; fixture.componentInstance.name = 'Nancy';
fixture.debugElement.componentInstance.isDisabled = true; fixture.componentInstance.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
@ -429,7 +425,7 @@ export function main() {
describe('radio controls', () => { describe('radio controls', () => {
it('should support <type=radio>', fakeAsync(() => { it('should support <type=radio>', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelRadioForm); const fixture = TestBed.createComponent(NgModelRadioForm);
fixture.debugElement.componentInstance.food = 'fish'; fixture.componentInstance.food = 'fish';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -442,14 +438,14 @@ export function main() {
tick(); tick();
// view -> model // view -> model
expect(fixture.debugElement.componentInstance.food).toEqual('chicken'); expect(fixture.componentInstance.food).toEqual('chicken');
expect(inputs[1].nativeElement.checked).toEqual(false); expect(inputs[1].nativeElement.checked).toEqual(false);
})); }));
it('should support multiple named <type=radio> groups', fakeAsync(() => { it('should support multiple named <type=radio> groups', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelRadioForm); const fixture = TestBed.createComponent(NgModelRadioForm);
fixture.debugElement.componentInstance.food = 'fish'; fixture.componentInstance.food = 'fish';
fixture.debugElement.componentInstance.drink = 'sprite'; fixture.componentInstance.drink = 'sprite';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -462,8 +458,8 @@ export function main() {
dispatchEvent(inputs[0].nativeElement, 'change'); dispatchEvent(inputs[0].nativeElement, 'change');
tick(); tick();
expect(fixture.debugElement.componentInstance.food).toEqual('chicken'); expect(fixture.componentInstance.food).toEqual('chicken');
expect(fixture.debugElement.componentInstance.drink).toEqual('sprite'); expect(fixture.componentInstance.drink).toEqual('sprite');
expect(inputs[1].nativeElement.checked).toEqual(false); expect(inputs[1].nativeElement.checked).toEqual(false);
expect(inputs[2].nativeElement.checked).toEqual(false); expect(inputs[2].nativeElement.checked).toEqual(false);
expect(inputs[3].nativeElement.checked).toEqual(true); expect(inputs[3].nativeElement.checked).toEqual(true);
@ -473,7 +469,7 @@ export function main() {
describe('select controls', () => { describe('select controls', () => {
it('with option values that are objects', fakeAsync(() => { it('with option values that are objects', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelSelectForm); const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.debugElement.componentInstance; const comp = fixture.componentInstance;
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}]; comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
comp.selectedCity = comp.cities[1]; comp.selectedCity = comp.cities[1];
fixture.detectChanges(); fixture.detectChanges();
@ -492,12 +488,12 @@ export function main() {
tick(); tick();
// view -> model // view -> model
expect(comp.selectedCity.name).toEqual('Buffalo'); expect(comp.selectedCity['name']).toEqual('Buffalo');
})); }));
it('when new options are added', fakeAsync(() => { it('when new options are added', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelSelectForm); const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.debugElement.componentInstance; const comp = fixture.componentInstance;
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}]; comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
comp.selectedCity = comp.cities[1]; comp.selectedCity = comp.cities[1];
fixture.detectChanges(); fixture.detectChanges();
@ -516,7 +512,7 @@ export function main() {
it('when options are removed', fakeAsync(() => { it('when options are removed', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelSelectForm); const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.debugElement.componentInstance; const comp = fixture.componentInstance;
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}]; comp.cities = [{'name': 'SF'}, {'name': 'NYC'}];
comp.selectedCity = comp.cities[1]; comp.selectedCity = comp.cities[1];
fixture.detectChanges(); fixture.detectChanges();
@ -534,7 +530,7 @@ export function main() {
it('when option values have same content, but different identities', fakeAsync(() => { it('when option values have same content, but different identities', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelSelectForm); const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.debugElement.componentInstance; const comp = fixture.componentInstance;
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'NYC'}]; comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'NYC'}];
comp.selectedCity = comp.cities[0]; comp.selectedCity = comp.cities[0];
fixture.detectChanges(); fixture.detectChanges();
@ -553,7 +549,7 @@ export function main() {
describe('custom value accessors', () => { describe('custom value accessors', () => {
it('should support standard writing to view and model', async(() => { it('should support standard writing to view and model', async(() => {
const fixture = TestBed.createComponent(NgModelCustomWrapper); const fixture = TestBed.createComponent(NgModelCustomWrapper);
fixture.debugElement.componentInstance.name = 'Nancy'; fixture.componentInstance.name = 'Nancy';
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
@ -567,7 +563,7 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
// view -> model // view -> model
expect(fixture.debugElement.componentInstance.name).toEqual('Carson'); expect(fixture.componentInstance.name).toEqual('Carson');
}); });
}); });
})); }));
@ -578,10 +574,10 @@ export function main() {
it('should support dir validators using bindings', fakeAsync(() => { it('should support dir validators using bindings', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelValidationBindings); const fixture = TestBed.createComponent(NgModelValidationBindings);
fixture.debugElement.componentInstance.required = true; fixture.componentInstance.required = true;
fixture.debugElement.componentInstance.minLen = 3; fixture.componentInstance.minLen = 3;
fixture.debugElement.componentInstance.maxLen = 3; fixture.componentInstance.maxLen = 3;
fixture.debugElement.componentInstance.pattern = '.{3,}'; fixture.componentInstance.pattern = '.{3,}';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -648,10 +644,10 @@ export function main() {
expect(form.control.hasError('pattern', ['pattern'])).toEqual(false); expect(form.control.hasError('pattern', ['pattern'])).toEqual(false);
expect(form.valid).toEqual(true); expect(form.valid).toEqual(true);
fixture.debugElement.componentInstance.required = true; fixture.componentInstance.required = true;
fixture.debugElement.componentInstance.minLen = 3; fixture.componentInstance.minLen = 3;
fixture.debugElement.componentInstance.maxLen = 3; fixture.componentInstance.maxLen = 3;
fixture.debugElement.componentInstance.pattern = '.{3,}'; fixture.componentInstance.pattern = '.{3,}';
fixture.detectChanges(); fixture.detectChanges();
dispatchEvent(required.nativeElement, 'input'); dispatchEvent(required.nativeElement, 'input');
@ -666,17 +662,17 @@ export function main() {
expect(form.valid).toEqual(false); expect(form.valid).toEqual(false);
expect(required.nativeElement.getAttribute('required')).toEqual(''); expect(required.nativeElement.getAttribute('required')).toEqual('');
expect(fixture.debugElement.componentInstance.minLen.toString()) expect(fixture.componentInstance.minLen.toString())
.toEqual(minLength.nativeElement.getAttribute('minlength')); .toEqual(minLength.nativeElement.getAttribute('minlength'));
expect(fixture.debugElement.componentInstance.maxLen.toString()) expect(fixture.componentInstance.maxLen.toString())
.toEqual(maxLength.nativeElement.getAttribute('maxlength')); .toEqual(maxLength.nativeElement.getAttribute('maxlength'));
expect(fixture.debugElement.componentInstance.pattern.toString()) expect(fixture.componentInstance.pattern.toString())
.toEqual(pattern.nativeElement.getAttribute('pattern')); .toEqual(pattern.nativeElement.getAttribute('pattern'));
fixture.debugElement.componentInstance.required = false; fixture.componentInstance.required = false;
fixture.debugElement.componentInstance.minLen = null; fixture.componentInstance.minLen = null;
fixture.debugElement.componentInstance.maxLen = null; fixture.componentInstance.maxLen = null;
fixture.debugElement.componentInstance.pattern = null; fixture.componentInstance.pattern = null;
fixture.detectChanges(); fixture.detectChanges();
expect(form.control.hasError('required', ['required'])).toEqual(false); expect(form.control.hasError('required', ['required'])).toEqual(false);
@ -697,7 +693,7 @@ export function main() {
it('should update the view when the model is set back to what used to be in the view', it('should update the view when the model is set back to what used to be in the view',
fakeAsync(() => { fakeAsync(() => {
const fixture = TestBed.createComponent(StandaloneNgModel); const fixture = TestBed.createComponent(StandaloneNgModel);
fixture.debugElement.componentInstance.name = ''; fixture.componentInstance.name = '';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
@ -708,16 +704,16 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(fixture.debugElement.componentInstance.name).toEqual('aa'); expect(fixture.componentInstance.name).toEqual('aa');
// Programmatically update the input value to be "bb". // Programmatically update the input value to be "bb".
fixture.debugElement.componentInstance.name = 'bb'; fixture.componentInstance.name = 'bb';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(input.value).toEqual('bb'); expect(input.value).toEqual('bb');
// Programatically set it back to "aa". // Programatically set it back to "aa".
fixture.debugElement.componentInstance.name = 'aa'; fixture.componentInstance.name = 'aa';
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(input.value).toEqual('aa'); expect(input.value).toEqual('aa');
@ -808,6 +804,7 @@ class NgModelNgIfForm {
first: string; first: string;
groupShowing = true; groupShowing = true;
emailShowing = true; emailShowing = true;
email: string;
} }
@Component({ @Component({
@ -872,7 +869,7 @@ class NgModelRadioForm {
` `
}) })
class NgModelSelectForm { class NgModelSelectForm {
selectedCity: Object = {}; selectedCity: {[k: string]: string} = {};
cities: any[] = []; cities: any[] = [];
} }
@ -929,7 +926,7 @@ class NgModelValidationBindings {
} }
function sortedClassList(el: HTMLElement) { function sortedClassList(el: HTMLElement) {
var l = getDOM().classList(el); const l = getDOM().classList(el);
ListWrapper.sort(l); l.sort();
return l; return l;
} }

4
modules/@angular/forms/test/validators_spec.ts
View File

@ -17,8 +17,8 @@ import {EventEmitter} from '../src/facade/async';
export function main() { export function main() {
function validator(key: string, error: any) { function validator(key: string, error: any) {
return function(c: AbstractControl) { return function(c: AbstractControl) {
var r = {}; var r: {[k: string]: string} = {};
(r as any)[key] = error; r[key] = error;
return r; return r;
}; };
} }

3
modules/@angular/platform-browser-dynamic/test/testing_public_browser_spec.ts
View File

@ -124,8 +124,7 @@ export function main() {
TestBed.compileComponents().then(() => { TestBed.compileComponents().then(() => {
let componentFixture = TestBed.createComponent(ExternalTemplateComp); let componentFixture = TestBed.createComponent(ExternalTemplateComp);
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement.textContent) expect(componentFixture.nativeElement.textContent).toEqual('from external template\n');
.toEqual('from external template\n');
}); });
}), }),
10000); // Long timeout here because this test makes an actual ResourceLoader request, and 10000); // Long timeout here because this test makes an actual ResourceLoader request, and

18
modules/@angular/platform-browser/test/testing_public_spec.ts
View File

@ -545,25 +545,25 @@ export function main() {
var fixture = TestBed.createComponent(ChildComp); var fixture = TestBed.createComponent(ChildComp);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('Original Child'); expect(fixture.nativeElement).toHaveText('Original Child');
})); }));
it('should allow changing members of the component', async(() => { it('should allow changing members of the component', async(() => {
var componentFixture = TestBed.createComponent(MyIfComp); var componentFixture = TestBed.createComponent(MyIfComp);
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement).toHaveText('MyIf()'); expect(componentFixture.nativeElement).toHaveText('MyIf()');
componentFixture.debugElement.componentInstance.showMore = true; componentFixture.componentInstance.showMore = true;
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement).toHaveText('MyIf(More)'); expect(componentFixture.nativeElement).toHaveText('MyIf(More)');
})); }));
it('should override a template', async(() => { it('should override a template', async(() => {
TestBed.overrideComponent(ChildComp, {set: {template: '<span>Mock</span>'}}); TestBed.overrideComponent(ChildComp, {set: {template: '<span>Mock</span>'}});
let componentFixture = TestBed.createComponent(ChildComp); let componentFixture = TestBed.createComponent(ChildComp);
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement).toHaveText('Mock'); expect(componentFixture.nativeElement).toHaveText('Mock');
})); }));
@ -573,8 +573,7 @@ export function main() {
{set: {providers: [{provide: FancyService, useClass: MockFancyService}]}}); {set: {providers: [{provide: FancyService, useClass: MockFancyService}]}});
var componentFixture = TestBed.createComponent(TestProvidersComp); var componentFixture = TestBed.createComponent(TestProvidersComp);
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement) expect(componentFixture.nativeElement).toHaveText('injected value: mocked out value');
.toHaveText('injected value: mocked out value');
})); }));
@ -585,8 +584,7 @@ export function main() {
var componentFixture = TestBed.createComponent(TestViewProvidersComp); var componentFixture = TestBed.createComponent(TestViewProvidersComp);
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement) expect(componentFixture.nativeElement).toHaveText('injected value: mocked out value');
.toHaveText('injected value: mocked out value');
})); }));
}); });
describe('using alternate components', () => { describe('using alternate components', () => {
@ -603,7 +601,7 @@ export function main() {
let componentFixture = TestBed.createComponent(ParentComp); let componentFixture = TestBed.createComponent(ParentComp);
componentFixture.detectChanges(); componentFixture.detectChanges();
expect(componentFixture.debugElement.nativeElement).toHaveText('Parent(Mock)'); expect(componentFixture.nativeElement).toHaveText('Parent(Mock)');
})); }));
}); });
}); });

16
modules/@angular/platform-webworker/test/web_workers/worker/renderer_integration_spec.ts
View File

@ -106,10 +106,10 @@ export function main() {
TestBed.overrideComponent(MyComp2, {set: {template: '<div>{{ctxProp}}</div>'}}); TestBed.overrideComponent(MyComp2, {set: {template: '<div>{{ctxProp}}</div>'}});
const fixture = TestBed.createComponent(MyComp2); const fixture = TestBed.createComponent(MyComp2);
var renderEl = getRenderElement(fixture.debugElement.nativeElement); var renderEl = getRenderElement(fixture.nativeElement);
expect(renderEl).toHaveText(''); expect(renderEl).toHaveText('');
fixture.debugElement.componentInstance.ctxProp = 'Hello World!'; fixture.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges(); fixture.detectChanges();
expect(renderEl).toHaveText('Hello World!'); expect(renderEl).toHaveText('Hello World!');
}); });
@ -142,7 +142,7 @@ export function main() {
}; };
// root element // root element
checkSetters(fixture.componentRef, fixture.debugElement.nativeElement); checkSetters(fixture.componentRef, fixture.nativeElement);
// nested elements // nested elements
checkSetters(fixture.componentRef, fixture.debugElement.children[0].nativeElement); checkSetters(fixture.componentRef, fixture.debugElement.children[0].nativeElement);
}); });
@ -153,9 +153,9 @@ export function main() {
MyComp2, {set: {template: '<template [ngIf]="ctxBoolProp"></template>'}}); MyComp2, {set: {template: '<template [ngIf]="ctxBoolProp"></template>'}});
const fixture = TestBed.createComponent(MyComp2); const fixture = TestBed.createComponent(MyComp2);
(<MyComp2>fixture.debugElement.componentInstance).ctxBoolProp = true; (<MyComp2>fixture.componentInstance).ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
var el = getRenderElement(fixture.debugElement.nativeElement); var el = getRenderElement(fixture.nativeElement);
expect(getDOM().getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"'); expect(getDOM().getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"');
}); });
@ -164,14 +164,14 @@ export function main() {
MyComp2, {set: {template: '<template [ngIf]="ctxBoolProp">hello</template>'}}); MyComp2, {set: {template: '<template [ngIf]="ctxBoolProp">hello</template>'}});
const fixture = TestBed.createComponent(MyComp2); const fixture = TestBed.createComponent(MyComp2);
var rootEl = getRenderElement(fixture.debugElement.nativeElement); var rootEl = getRenderElement(fixture.nativeElement);
expect(rootEl).toHaveText(''); expect(rootEl).toHaveText('');
fixture.debugElement.componentInstance.ctxBoolProp = true; fixture.componentInstance.ctxBoolProp = true;
fixture.detectChanges(); fixture.detectChanges();
expect(rootEl).toHaveText('hello'); expect(rootEl).toHaveText('hello');
fixture.debugElement.componentInstance.ctxBoolProp = false; fixture.componentInstance.ctxBoolProp = false;
fixture.detectChanges(); fixture.detectChanges();
expect(rootEl).toHaveText(''); expect(rootEl).toHaveText('');
}); });

163
modules/@angular/router/test/integration.spec.ts
View File

@ -131,14 +131,14 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22'); expect(location.path()).toEqual('/team/22');
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ , right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
router.navigateByUrl('/team/33', {skipLocationChange: true}); router.navigateByUrl('/team/33', {skipLocationChange: true});
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22'); expect(location.path()).toEqual('/team/22');
expect(fixture.debugElement.nativeElement).toHaveText('team 33 [ , right: ]'); expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
}))); })));
it('should skip location update when using NavigationExtras.skipLocationChange with navigate', it('should skip location update when using NavigationExtras.skipLocationChange with navigate',
@ -152,14 +152,14 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22'); expect(location.path()).toEqual('/team/22');
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ , right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
router.navigate(['/team/33'], {skipLocationChange: true}); router.navigate(['/team/33'], {skipLocationChange: true});
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22'); expect(location.path()).toEqual('/team/22');
expect(fixture.debugElement.nativeElement).toHaveText('team 33 [ , right: ]'); expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
}))); })));
it('should navigate back and forward', it('should navigate back and forward',
@ -212,7 +212,7 @@ describe('Integration', () => {
(<any>location).simulateUrlPop('/team/22/user/fedor'); (<any>location).simulateUrlPop('/team/22/user/fedor');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ user fedor, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ user fedor, right: ]');
expectEvents(recordedEvents, [ expectEvents(recordedEvents, [
[NavigationStart, '/team/22/user/victor'], [RoutesRecognized, '/team/22/user/victor'], [NavigationStart, '/team/22/user/victor'], [RoutesRecognized, '/team/22/user/victor'],
@ -233,14 +233,14 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
const cmp = fixture.debugElement.children[1].componentInstance; const cmp = fixture.debugElement.children[1].componentInstance;
expect(location.path()).toEqual('/one/two'); expect(location.path()).toEqual('/one/two');
expect(fixture.debugElement.nativeElement).toHaveText('collect-params'); expect(fixture.nativeElement).toHaveText('collect-params');
expect(cmp.recordedUrls()).toEqual(['one/two']); expect(cmp.recordedUrls()).toEqual(['one/two']);
router.navigateByUrl('/three/four'); router.navigateByUrl('/three/four');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/three/four'); expect(location.path()).toEqual('/three/four');
expect(fixture.debugElement.nativeElement).toHaveText('collect-params'); expect(fixture.nativeElement).toHaveText('collect-params');
expect(cmp.recordedUrls()).toEqual(['one/two', 'three/four']); expect(cmp.recordedUrls()).toEqual(['one/two', 'three/four']);
}))); })));
@ -259,8 +259,7 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/(user/victor//right:simple)'); router.navigateByUrl('/team/22/(user/victor//right:simple)');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
.toHaveText('team 22 [ user victor, right: simple ]');
}))); })));
it('should deactivate outlets', fakeAsync(inject([Router], (router: Router) => { it('should deactivate outlets', fakeAsync(inject([Router], (router: Router) => {
@ -281,7 +280,7 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/user/victor'); router.navigateByUrl('/team/22/user/victor');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ user victor, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: ]');
}))); })));
it('should deactivate nested outlets', fakeAsync(inject([Router], (router: Router) => { it('should deactivate nested outlets', fakeAsync(inject([Router], (router: Router) => {
@ -305,7 +304,7 @@ describe('Integration', () => {
router.navigateByUrl('/'); router.navigateByUrl('/');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
}))); })));
it('should set query params and fragment', fakeAsync(inject([Router], (router: Router) => { it('should set query params and fragment', fakeAsync(inject([Router], (router: Router) => {
@ -315,11 +314,11 @@ describe('Integration', () => {
router.navigateByUrl('/query?name=1#fragment1'); router.navigateByUrl('/query?name=1#fragment1');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('query: 1 fragment: fragment1'); expect(fixture.nativeElement).toHaveText('query: 1 fragment: fragment1');
router.navigateByUrl('/query?name=2#fragment2'); router.navigateByUrl('/query?name=2#fragment2');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('query: 2 fragment: fragment2'); expect(fixture.nativeElement).toHaveText('query: 2 fragment: fragment2');
}))); })));
it('should push params only when they change', fakeAsync(inject([Router], (router: Router) => { it('should push params only when they change', fakeAsync(inject([Router], (router: Router) => {
@ -357,12 +356,12 @@ describe('Integration', () => {
router.navigateByUrl('/user/victor'); router.navigateByUrl('/user/victor');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('user victor'); expect(fixture.nativeElement).toHaveText('user victor');
router.navigateByUrl('/'); router.navigateByUrl('/');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('simple'); expect(fixture.nativeElement).toHaveText('simple');
}))); })));
it('should cancel in-flight navigations', fakeAsync(inject([Router], (router: Router) => { it('should cancel in-flight navigations', fakeAsync(inject([Router], (router: Router) => {
@ -386,7 +385,7 @@ describe('Integration', () => {
expect(r1).toEqual(false); // returns false because it was canceled expect(r1).toEqual(false); // returns false because it was canceled
expect(r2).toEqual(true); // returns true because it was successful expect(r2).toEqual(true); // returns true because it was successful
expect(fixture.debugElement.nativeElement).toHaveText('user fedor'); expect(fixture.nativeElement).toHaveText('user fedor');
expect(user.recordedParams).toEqual([{name: 'init'}, {name: 'fedor'}]); expect(user.recordedParams).toEqual([{name: 'init'}, {name: 'fedor'}]);
expectEvents(recordedEvents, [ expectEvents(recordedEvents, [
@ -416,7 +415,7 @@ describe('Integration', () => {
router.navigateByUrl('/user/fedor'); router.navigateByUrl('/user/fedor');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('user fedor'); expect(fixture.nativeElement).toHaveText('user fedor');
expectEvents(recordedEvents, [ expectEvents(recordedEvents, [
[NavigationStart, '/invalid'], [NavigationError, '/invalid'], [NavigationStart, '/invalid'], [NavigationError, '/invalid'],
@ -488,27 +487,25 @@ describe('Integration', () => {
router.navigateByUrl('/parent/11/(simple//right:user/victor)'); router.navigateByUrl('/parent/11/(simple//right:user/victor)');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)'); expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement).toHaveText('primary [simple] right [user victor]');
.toHaveText('primary [simple] right [user victor]');
// navigate to the same route with different params (reuse) // navigate to the same route with different params (reuse)
router.navigateByUrl('/parent/22/(simple//right:user/fedor)'); router.navigateByUrl('/parent/22/(simple//right:user/fedor)');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/parent/22/(simple//right:user/fedor)'); expect(location.path()).toEqual('/parent/22/(simple//right:user/fedor)');
expect(fixture.debugElement.nativeElement).toHaveText('primary [simple] right [user fedor]'); expect(fixture.nativeElement).toHaveText('primary [simple] right [user fedor]');
// navigate to a normal route (check deactivation) // navigate to a normal route (check deactivation)
router.navigateByUrl('/user/victor'); router.navigateByUrl('/user/victor');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/user/victor'); expect(location.path()).toEqual('/user/victor');
expect(fixture.debugElement.nativeElement).toHaveText('primary [user victor] right []'); expect(fixture.nativeElement).toHaveText('primary [user victor] right []');
// navigate back to a componentless route // navigate back to a componentless route
router.navigateByUrl('/parent/11/(simple//right:user/victor)'); router.navigateByUrl('/parent/11/(simple//right:user/victor)');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)'); expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement).toHaveText('primary [simple] right [user victor]');
.toHaveText('primary [simple] right [user victor]');
}))); })));
it('should emit an event when an outlet gets activated', fakeAsync(() => { it('should emit an event when an outlet gets activated', fakeAsync(() => {
@ -531,7 +528,7 @@ describe('Integration', () => {
const router: Router = TestBed.get(Router); const router: Router = TestBed.get(Router);
const fixture = createRoot(router, Container); const fixture = createRoot(router, Container);
const cmp = fixture.debugElement.componentInstance; const cmp = fixture.componentInstance;
router.resetConfig( router.resetConfig(
[{path: 'blank', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]); [{path: 'blank', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]);
@ -645,14 +642,14 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link'); router.navigateByUrl('/team/22/link');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ link, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/33/simple'); expect(native.getAttribute('href')).toEqual('/team/33/simple');
native.click(); native.click();
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 33 [ simple, right: ]'); expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
}))); })));
it('should not preserve query params and fragment by default', fakeAsync(() => { it('should not preserve query params and fragment by default', fakeAsync(() => {
@ -670,7 +667,7 @@ describe('Integration', () => {
router.resetConfig([{path: 'home', component: SimpleCmp}]); router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
router.navigateByUrl('/home?q=123#fragment'); router.navigateByUrl('/home?q=123#fragment');
advance(fixture); advance(fixture);
@ -692,7 +689,7 @@ describe('Integration', () => {
router.resetConfig([{path: 'home', component: SimpleCmp}]); router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
router.navigateByUrl('/home?q=123'); router.navigateByUrl('/home?q=123');
advance(fixture); advance(fixture);
@ -721,13 +718,13 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link'); router.navigateByUrl('/team/22/link');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ link, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.debugElement.nativeElement.querySelector('button'); const native = fixture.nativeElement.querySelector('button');
native.click(); native.click();
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 33 [ simple, right: ]'); expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
}))); })));
it('should support absolute router links', fakeAsync(inject([Router], (router: Router) => { it('should support absolute router links', fakeAsync(inject([Router], (router: Router) => {
@ -743,14 +740,14 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link'); router.navigateByUrl('/team/22/link');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ link, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/33/simple'); expect(native.getAttribute('href')).toEqual('/team/33/simple');
native.click(); native.click();
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 33 [ simple, right: ]'); expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
}))); })));
it('should support relative router links', fakeAsync(inject([Router], (router: Router) => { it('should support relative router links', fakeAsync(inject([Router], (router: Router) => {
@ -766,14 +763,14 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link'); router.navigateByUrl('/team/22/link');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ link, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/22/simple'); expect(native.getAttribute('href')).toEqual('/team/22/simple');
native.click(); native.click();
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ simple, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ simple, right: ]');
}))); })));
it('should support top-level link', fakeAsync(inject([Router], (router: Router) => { it('should support top-level link', fakeAsync(inject([Router], (router: Router) => {
@ -785,20 +782,20 @@ describe('Integration', () => {
router.navigateByUrl('/'); router.navigateByUrl('/');
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText(' '); expect(fixture.nativeElement).toHaveText(' ');
const cmp = fixture.debugElement.componentInstance; const cmp = fixture.componentInstance;
cmp.show = true; cmp.show = true;
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('link '); expect(fixture.nativeElement).toHaveText('link ');
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/simple'); expect(native.getAttribute('href')).toEqual('/simple');
native.click(); native.click();
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('link simple'); expect(fixture.nativeElement).toHaveText('link simple');
}))); })));
it('should support query params and fragments', it('should support query params and fragments',
@ -817,12 +814,12 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link'); router.navigateByUrl('/team/22/link');
advance(fixture); advance(fixture);
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/22/simple?q=1#f'); expect(native.getAttribute('href')).toEqual('/team/22/simple?q=1#f');
native.click(); native.click();
advance(fixture); advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 [ simple, right: ]'); expect(fixture.nativeElement).toHaveText('team 22 [ simple, right: ]');
expect(location.path()).toEqual('/team/22/simple?q=1#f'); expect(location.path()).toEqual('/team/22/simple?q=1#f');
}))); })));
@ -1401,8 +1398,8 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true'); expect(location.path()).toEqual('/team/22/link;exact=true');
const nativeLink = fixture.debugElement.nativeElement.querySelector('a'); const nativeLink = fixture.nativeElement.querySelector('a');
const nativeButton = fixture.debugElement.nativeElement.querySelector('button'); const nativeButton = fixture.nativeElement.querySelector('button');
expect(nativeLink.className).toEqual('active'); expect(nativeLink.className).toEqual('active');
expect(nativeButton.className).toEqual('active'); expect(nativeButton.className).toEqual('active');
@ -1427,7 +1424,7 @@ describe('Integration', () => {
const f = TestBed.createComponent(RootCmpWithLink); const f = TestBed.createComponent(RootCmpWithLink);
advance(f); advance(f);
const link = f.debugElement.nativeElement.querySelector('a'); const link = f.nativeElement.querySelector('a');
expect(link.className).toEqual(''); expect(link.className).toEqual('');
router.initialNavigation(); router.initialNavigation();
@ -1456,7 +1453,7 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true'); expect(location.path()).toEqual('/team/22/link;exact=true');
const native = fixture.debugElement.nativeElement.querySelector('#link-parent'); const native = fixture.nativeElement.querySelector('#link-parent');
expect(native.className).toEqual('active'); expect(native.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple'); router.navigateByUrl('/team/22/link/simple');
@ -1484,7 +1481,7 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22/link'); expect(location.path()).toEqual('/team/22/link');
const native = fixture.debugElement.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');
expect(native.className).toEqual('active'); expect(native.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple'); router.navigateByUrl('/team/22/link/simple');
@ -1496,45 +1493,45 @@ describe('Integration', () => {
}); });
describe('lazy loading', () => { describe('lazy loading', () => {
it('works', fakeAsync(inject( it('works',
[Router, Location, NgModuleFactoryLoader], fakeAsync(inject(
(router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => { [Router, Location, NgModuleFactoryLoader],
@Component({ (router: Router, location: Location, loader: SpyNgModuleFactoryLoader) => {
selector: 'lazy', @Component({
template: 'lazy-loaded-parent [<router-outlet></router-outlet>]' selector: 'lazy',
}) template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'
class ParentLazyLoadedComponent { })
} class ParentLazyLoadedComponent {
}
@Component({selector: 'lazy', template: 'lazy-loaded-child'}) @Component({selector: 'lazy', template: 'lazy-loaded-child'})
class ChildLazyLoadedComponent { class ChildLazyLoadedComponent {
} }
@NgModule({ @NgModule({
declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent], declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
imports: [RouterModule.forChild([{ imports: [RouterModule.forChild([{
path: 'loaded', path: 'loaded',
component: ParentLazyLoadedComponent, component: ParentLazyLoadedComponent,
children: [{path: 'child', component: ChildLazyLoadedComponent}] children: [{path: 'child', component: ChildLazyLoadedComponent}]
}])] }])]
}) })
class LoadedModule { class LoadedModule {
} }
loader.stubbedModules = {expected: LoadedModule}; loader.stubbedModules = {expected: LoadedModule};
const fixture = createRoot(router, RootCmp); const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]); router.resetConfig([{path: 'lazy', loadChildren: 'expected'}]);
router.navigateByUrl('/lazy/loaded/child'); router.navigateByUrl('/lazy/loaded/child');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/lazy/loaded/child'); expect(location.path()).toEqual('/lazy/loaded/child');
expect(fixture.debugElement.nativeElement) expect(fixture.nativeElement).toHaveText('lazy-loaded-parent [lazy-loaded-child]');
.toHaveText('lazy-loaded-parent [lazy-loaded-child]'); })));
})));
it('throws an error when forRoot() is used in a lazy context', it('throws an error when forRoot() is used in a lazy context',
fakeAsync(inject( fakeAsync(inject(
[Router, Location, NgModuleFactoryLoader], [Router, Location, NgModuleFactoryLoader],
@ -1656,7 +1653,7 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/lazy/loaded/child'); expect(location.path()).toEqual('/lazy/loaded/child');
expect(fixture.debugElement.nativeElement).toHaveText('lazy-loaded'); expect(fixture.nativeElement).toHaveText('lazy-loaded');
}))); })));
it('works when given a callback', it('works when given a callback',
@ -1681,7 +1678,7 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/lazy/loaded'); expect(location.path()).toEqual('/lazy/loaded');
expect(fixture.debugElement.nativeElement).toHaveText('lazy-loaded'); expect(fixture.nativeElement).toHaveText('lazy-loaded');
}))); })));
it('error emit an error when cannot load a config', it('error emit an error when cannot load a config',

2
tools/public_api_guard/core/testing/index.d.ts vendored
View File

@ -10,7 +10,7 @@ export declare class ComponentFixture<T> {
elementRef: ElementRef; elementRef: ElementRef;
nativeElement: any; nativeElement: any;
ngZone: NgZone; ngZone: NgZone;
constructor(componentRef: ComponentRef<T>, ngZone: NgZone, autoDetect: boolean); constructor(componentRef: ComponentRef<T>, ngZone: NgZone, _autoDetect: boolean);
autoDetectChanges(autoDetect?: boolean): void; autoDetectChanges(autoDetect?: boolean): void;
checkNoChanges(): void; checkNoChanges(): void;
destroy(): void; destroy(): void;