docs(testing): port to Angular v4 (#3524)

Author: Foxandxss

public/docs/_examples/testing/ts/src/app/app.component.router.spec.ts

@@ -141,7 +141,7 @@ function createComponent() {
   comp = fixture.componentInstance;
 
   const injector = fixture.debugElement.injector;
-  location = injector.get(Location);
+  location = injector.get(Location) as SpyLocation;
   router = injector.get(Router);
   router.initialNavigation();
   spyOn(injector.get(TwainService), 'getQuote')

public/docs/_examples/testing/ts/src/app/bag/async-helper.spec.ts

@@ -34,7 +34,7 @@ describe('Angular async helper', () => {
 
   // Use done. Cannot use setInterval with async or fakeAsync
   // See https://github.com/angular/angular/issues/10127
-  it('should run async test with successful delayed Observable', done => {
+  it('should run async test with successful delayed Observable', (done: any) => {
     const source = Observable.of(true).delay(10);
     source.subscribe(
       val => actuallyDone = true,

public/docs/_examples/testing/ts/src/app/bag/bag.no-testbed.spec.ts

@@ -18,15 +18,15 @@ describe('FancyService without the TestBed', () => {
     expect(service.getValue()).toBe('real value');
   });
 
-  it('#getAsyncValue should return async value', done => {
+  it('#getAsyncValue should return async value', (done: DoneFn) => {
     service.getAsyncValue().then(value => {
       expect(value).toBe('async value');
       done();
     });
   });
 
   // #docregion getTimeoutValue
-  it('#getTimeoutValue should return timeout value',  done => {
+  it('#getTimeoutValue should return timeout value',  (done: DoneFn) => {
     service = new FancyService();
     service.getTimeoutValue().then(value => {
       expect(value).toBe('timeout value');
@@ -35,7 +35,7 @@ describe('FancyService without the TestBed', () => {
   });
   // #enddocregion getTimeoutValue
 
-  it('#getObservableValue should return observable value', done => {
+  it('#getObservableValue should return observable value', (done: DoneFn) => {
     service.getObservableValue().subscribe(value => {
       expect(value).toBe('observable value');
       done();

public/docs/_examples/testing/ts/src/app/bag/bag.spec.ts

@@ -73,7 +73,7 @@ describe('use inject helper in beforeEach', () => {
   }));
 
   // Must use done. See https://github.com/angular/angular/issues/10127
-  it('test should wait for FancyService.getObservableDelayValue', done => {
+  it('test should wait for FancyService.getObservableDelayValue', (done: DoneFn) => {
     service.getObservableDelayValue().subscribe(value => {
       expect(value).toBe('observable delay value');
       done();
@@ -187,20 +187,21 @@ describe('TestBed Component Tests', () => {
     expect(selected).toHaveText(hero.name);
   });
 
-  it('can access the instance variable of an `*ngFor` row', () => {
+  it('can access the instance variable of an `*ngFor` row component', () => {
     const fixture = TestBed.createComponent(IoParentComponent);
     const comp = fixture.componentInstance;
+    const heroName = comp.heroes[0].name; // first hero's name
 
     fixture.detectChanges();
-    const heroEl = fixture.debugElement.query(By.css('.hero')); // first hero
+    const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
 
-    const ngForRow = heroEl.parent; // Angular's NgForRow wrapper element
+    const hero = ngForRow.context['hero']; // the hero object passed into the row
+    expect(hero.name).toBe(heroName, 'ngRow.context.hero');
 
-    // jasmine.any is instance-of-type test.
-    expect(ngForRow.componentInstance).toEqual(jasmine.any(IoComponent), 'component is IoComp');
-
-    const hero = ngForRow.context['$implicit']; // the hero object
-    expect(hero.name).toBe(comp.heroes[0].name, '1st hero\'s name');
+    const rowComp = ngForRow.componentInstance;
+    // jasmine.any is an "instance-of-type" test.
+    expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+    expect(rowComp.hero.name).toBe(heroName, 'component.hero');
   });
 
 
@@ -343,7 +344,7 @@ describe('TestBed Component Tests', () => {
     const childComp = el.componentInstance as BankAccountComponent;
     expect(childComp).toEqual(jasmine.any(BankAccountComponent));
 
-    expect(el.context).toBe(comp, 'context is the parent component');
+    expect(el.context).toBe(childComp, 'context is the child component');
 
     expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
     expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
@@ -447,7 +448,7 @@ describe('TestBed Component Overrides:', () => {
     // `inject` uses TestBed's injector
     inject([FancyService], (s: FancyService) => testBedProvider = s)();
     tcProvider = fixture.debugElement.injector.get(FancyService);
-    tpcProvider = fixture.debugElement.children[0].injector.get(FancyService);
+    tpcProvider = fixture.debugElement.children[0].injector.get(FancyService) as FakeFancyService;
 
     expect(testBedProvider).not.toBe(tcProvider, 'testBed/tc not same providers');
     expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers');

public/docs/_examples/testing/ts/src/app/hero/hero-detail.component.no-testbed.spec.ts

@@ -12,7 +12,7 @@ describe('HeroDetailComponent - no TestBed', () => {
   let hds: any;
   let router: any;
 
-  beforeEach( done => {
+  beforeEach((done: any) => {
     expectedHero = new Hero(42, 'Bubba');
     activatedRoute = new ActivatedRouteStub();
     activatedRoute.testParams = { id: expectedHero.id };
@@ -45,7 +45,7 @@ describe('HeroDetailComponent - no TestBed', () => {
     expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
   });
 
-  it('should navigate when click save resolves', done => {
+  it('should navigate when click save resolves', (done: any) => {
     comp.save();
     // waits for async save to complete before navigating
     hds.saveHero.calls.first().returnValue

public/docs/_examples/testing/ts/src/app/hero/hero-detail.component.spec.ts

@@ -90,7 +90,7 @@ function overrideSetup() {
   beforeEach( async(() => {
     createComponent();
     // get the component's injected HeroDetailServiceSpy
-    hdsSpy = fixture.debugElement.injector.get(HeroDetailService);
+    hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
   }));
 
   it('should have called `getHero`', () => {

public/docs/_examples/testing/ts/src/app/shared/twain.component.spec.ts

@@ -78,7 +78,7 @@ describe('TwainComponent', () => {
   // #enddocregion tests
 
   // #docregion done-test
-  it('should show quote after getQuote promise (done)', done => {
+  it('should show quote after getQuote promise (done)', (done: any) => {
     fixture.detectChanges();
 
     // get the spy promise and wait for it to resolve