style(docs-infra): fix docs examples for tslint rules related to whitespace (#38143)

This commit updates the docs examples to be compatible with the `align`,
`space-before-function-paren` and `typedef-whitespace` tslint rules.

This is in preparation of updating the docs examples `tslint.json` to
match the one generated for new Angular CLI apps in a future commit.

PR Close #38143

aio/content/examples/testing/src/app/app.component.router.spec.ts

@@ -156,9 +156,9 @@ function createComponent() {
 }
 
 class Page {
-  aboutLinkDe:     DebugElement;
+  aboutLinkDe: DebugElement;
   dashboardLinkDe: DebugElement;
-  heroesLinkDe:    DebugElement;
+  heroesLinkDe: DebugElement;
 
   // for debugging
   comp: AppComponent;

aio/content/examples/testing/src/app/app.component.spec.ts

@@ -18,7 +18,7 @@ class RouterOutletStubComponent { }
 class WelcomeStubComponent {}
 // #enddocregion component-stubs
 
-let comp:    AppComponent;
+let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 
 describe('AppComponent & TestModule', () => {

aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts

@@ -75,16 +75,16 @@ describe('BannerComponent (with beforeEach)', () => {
   it('should create', () => {
     expect(component).toBeDefined();
   });
-// #enddocregion v3
+  // #enddocregion v3
 
-// #docregion v4-test-2
+  // #docregion v4-test-2
   it('should contain "banner works!"', () => {
     const bannerElement: HTMLElement = fixture.nativeElement;
     expect(bannerElement.textContent).toContain('banner works!');
   });
-// #enddocregion v4-test-2
+  // #enddocregion v4-test-2
 
-// #docregion v4-test-3
+  // #docregion v4-test-3
   it('should have <p> with "banner works!"', () => {
     // #docregion nativeElement
     const bannerElement: HTMLElement = fixture.nativeElement;
@@ -92,28 +92,28 @@ describe('BannerComponent (with beforeEach)', () => {
     const p = bannerElement.querySelector('p');
     expect(p.textContent).toEqual('banner works!');
   });
-// #enddocregion v4-test-3
+  // #enddocregion v4-test-3
 
 
-// #docregion v4-test-4
-it('should find the <p> with fixture.debugElement.nativeElement)', () => {
-  // #docregion debugElement-nativeElement
-  const bannerDe: DebugElement = fixture.debugElement;
-  const bannerEl: HTMLElement = bannerDe.nativeElement;
-  // #enddocregion debugElement-nativeElement
-  const p = bannerEl.querySelector('p');
-  expect(p.textContent).toEqual('banner works!');
-});
-// #enddocregion v4-test-4
+  // #docregion v4-test-4
+  it('should find the <p> with fixture.debugElement.nativeElement)', () => {
+    // #docregion debugElement-nativeElement
+    const bannerDe: DebugElement = fixture.debugElement;
+    const bannerEl: HTMLElement = bannerDe.nativeElement;
+    // #enddocregion debugElement-nativeElement
+    const p = bannerEl.querySelector('p');
+    expect(p.textContent).toEqual('banner works!');
+  });
+  // #enddocregion v4-test-4
 
-// #docregion v4-test-5
-it('should find the <p> with fixture.debugElement.query(By.css)', () => {
-  const bannerDe: DebugElement = fixture.debugElement;
-  const paragraphDe = bannerDe.query(By.css('p'));
-  const p: HTMLElement = paragraphDe.nativeElement;
-  expect(p.textContent).toEqual('banner works!');
-});
-// #enddocregion v4-test-5
-// #docregion v3
+  // #docregion v4-test-5
+  it('should find the <p> with fixture.debugElement.query(By.css)', () => {
+    const bannerDe: DebugElement = fixture.debugElement;
+    const paragraphDe = bannerDe.query(By.css('p'));
+    const p: HTMLElement = paragraphDe.nativeElement;
+    expect(p.textContent).toEqual('banner works!');
+  });
+  // #enddocregion v4-test-5
+  // #docregion v3
 });
 // #enddocregion v3, v4

aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts

@@ -11,9 +11,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BannerComponent } from './banner.component';
 
 describe('BannerComponent (AutoChangeDetect)', () => {
-  let comp:    BannerComponent;
+  let comp: BannerComponent;
   let fixture: ComponentFixture<BannerComponent>;
-  let h1:      HTMLElement;
+  let h1: HTMLElement;
 
   beforeEach(() => {
     // #docregion auto-detect

aio/content/examples/testing/src/app/banner/banner.component.spec.ts

@@ -6,10 +6,10 @@ import { DebugElement } from '@angular/core';
 import { BannerComponent } from './banner.component';
 
 describe('BannerComponent (inline template)', () => {
-// #docregion setup
+  // #docregion setup
   let component: BannerComponent;
-  let fixture:   ComponentFixture<BannerComponent>;
-  let h1:        HTMLElement;
+  let fixture: ComponentFixture<BannerComponent>;
+  let h1: HTMLElement;
 
   // #docregion configure-and-create
   beforeEach(() => {
@@ -22,15 +22,15 @@ describe('BannerComponent (inline template)', () => {
     h1 = fixture.nativeElement.querySelector('h1');
     // #docregion configure-and-create
   });
-// #enddocregion setup, configure-and-create
+  // #enddocregion setup, configure-and-create
 
-// #docregion test-w-o-detect-changes
+  // #docregion test-w-o-detect-changes
   it('no title in the DOM after createComponent()', () => {
     expect(h1.textContent).toEqual('');
   });
-// #enddocregion test-w-o-detect-changes
+  // #enddocregion test-w-o-detect-changes
 
-// #docregion expect-h1-default-v1
+  // #docregion expect-h1-default-v1
   it('should display original title', () => {
     // #enddocregion expect-h1-default-v1
     fixture.detectChanges();
@@ -39,18 +39,18 @@ describe('BannerComponent (inline template)', () => {
   });
   // #enddocregion expect-h1-default-v1
 
-// #docregion expect-h1-default
-it('should display original title after detectChanges()', () => {
-  fixture.detectChanges();
-  expect(h1.textContent).toContain(component.title);
-});
-// #enddocregion expect-h1-default
+  // #docregion expect-h1-default
+  it('should display original title after detectChanges()', () => {
+    fixture.detectChanges();
+    expect(h1.textContent).toContain(component.title);
+  });
+  // #enddocregion expect-h1-default
 
-// #docregion after-change
-it('should display a different test title', () => {
-  component.title = 'Test Title';
-  fixture.detectChanges();
-  expect(h1.textContent).toContain('Test Title');
-});
-// #enddocregion after-change
+  // #docregion after-change
+  it('should display a different test title', () => {
+    component.title = 'Test Title';
+    fixture.detectChanges();
+    expect(h1.textContent).toContain('Test Title');
+  });
+  // #enddocregion after-change
 });

aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts

@@ -74,22 +74,22 @@ describe('DashboardHeroComponent when tested directly', () => {
     let selectedHero: Hero;
     comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
-  // #docregion trigger-event-handler
+    // #docregion trigger-event-handler
     heroDe.triggerEventHandler('click', null);
-  // #enddocregion trigger-event-handler
+    // #enddocregion trigger-event-handler
     expect(selectedHero).toBe(expectedHero);
   });
   // #enddocregion click-test
 
-    // #docregion click-test-2
-    it('should raise selected event when clicked (element.click)', () => {
-      let selectedHero: Hero;
-      comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+  // #docregion click-test-2
+  it('should raise selected event when clicked (element.click)', () => {
+    let selectedHero: Hero;
+    comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
-      heroEl.click();
-      expect(selectedHero).toBe(expectedHero);
-    });
-    // #enddocregion click-test-2
+    heroEl.click();
+    expect(selectedHero).toBe(expectedHero);
+  });
+  // #enddocregion click-test-2
 
   // #docregion click-test-3
   it('should raise selected event when clicked (click helper)', () => {

aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts

@@ -109,12 +109,12 @@ function tests(heroClick: Function) {
     let router: Router;
 
      // Trigger component so it gets heroes and binds to them
-     beforeEach(async(() => {
-        router = fixture.debugElement.injector.get(Router);
-        fixture.detectChanges(); // runs ngOnInit -> getHeroes
-        fixture.whenStable() // No need for the `lastPromise` hack!
-          .then(() => fixture.detectChanges()); // bind to heroes
-     }));
+    beforeEach(async(() => {
+      router = fixture.debugElement.injector.get(Router);
+      fixture.detectChanges(); // runs ngOnInit -> getHeroes
+      fixture.whenStable() // No need for the `lastPromise` hack!
+        .then(() => fixture.detectChanges()); // bind to heroes
+    }));
 
     it('should HAVE heroes', () => {
       expect(comp.heroes.length).toBeGreaterThan(0,

aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts

@@ -557,8 +557,8 @@ describe('demo (with TestBed):', () => {
 
   describe('lifecycle hooks w/ MyIfParentComp', () => {
     let fixture: ComponentFixture<MyIfParentComponent>;
-    let parent:  MyIfParentComponent;
-    let child:   MyIfChildComponent;
+    let parent: MyIfParentComponent;
+    let child: MyIfChildComponent;
 
     beforeEach(() => {
       TestBed.configureTestingModule({

aio/content/examples/testing/src/app/demo/demo.ts

@@ -51,7 +51,7 @@ export class MasterService {
 export class ReversePipe implements PipeTransform {
   transform(s: string) {
     let r = '';
-    for (let i = s.length; i; )  { r += s[--i]; };
+    for (let i = s.length; i; ) { r += s[--i]; };
     return r;
   }
 }

aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

@@ -354,7 +354,7 @@ class Page {
   get nameInput()   { return this.query<HTMLInputElement>('input'); }
 
   gotoListSpy: jasmine.Spy;
-  navigateSpy:  jasmine.Spy;
+  navigateSpy: jasmine.Spy;
 
   constructor(fixture: ComponentFixture<HeroDetailComponent>) {
     // get the navigate spy from the injected router spy object

aio/content/examples/testing/src/app/hero/hero-detail.component.ts

@@ -17,7 +17,7 @@ export class HeroDetailComponent implements OnInit {
   // #docregion ctor
   constructor(
     private heroDetailService: HeroDetailService,
-    private route:  ActivatedRoute,
+    private route: ActivatedRoute,
     private router: Router) {
   }
   // #enddocregion ctor

aio/content/examples/testing/src/testing/jasmine-matchers.ts

@@ -17,7 +17,7 @@ function toHaveText(): jasmine.CustomMatcher {
       const message = pass ? '' : composeMessage();
       return { pass, message };
 
-      function composeMessage () {
+      function composeMessage() {
         const a = (actualText.length < 100 ? actualText : actualText.substr(0, 100) + '...');
         const efo = expectationFailOutput ? ` '${expectationFailOutput}'` : '';
         return `Expected element to have text content '${expectedText}' instead of '${a}'${efo}`;