refactor(docs-infra): fix docs examples for tslint rules related to variable names (#38143)

This commit updates the docs examples to be compatible with the
`no-shadowed-variable` and `variable-name` 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/dependency-injection-in-action/src/app/app.module.ts

@@ -42,11 +42,11 @@ const declarations = [
     ParentFinderComponent,
 ];
 
-const a_components = [AliceComponent, AlexComponent ];
+const componentListA = [ AliceComponent, AlexComponent ];
 
-const b_components = [ BarryComponent, BethComponent, BobComponent ];
+const componentListB = [ BarryComponent, BethComponent, BobComponent ];
 
-const c_components = [
+const componentListC = [
   CarolComponent, ChrisComponent, CraigComponent,
   CathyComponent
 ];
@@ -61,9 +61,9 @@ const c_components = [
   ],
   declarations: [
     declarations,
-    a_components,
+    componentListA,
-    b_components,
+    componentListB,
-    c_components,
+    componentListC,
     StorageComponent,
   ],
   bootstrap: [ AppComponent ],

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -237,7 +237,7 @@ export class Provider9Component implements OnInit {
 import { Optional } from '@angular/core';
 // #enddocregion import-optional
 
-let some_message = 'Hello from the injected logger';
+let someMessage = 'Hello from the injected logger';
 
 @Component({
   selector: 'provider-10',
@@ -249,7 +249,7 @@ export class Provider10Component implements OnInit {
   // #docregion provider-10-ctor
   constructor(@Optional() private logger?: Logger) {
     if (this.logger) {
-      this.logger.log(some_message);
+      this.logger.log(someMessage);
     }
   }
   // #enddocregion provider-10-ctor

aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, protractor } from 'protractor';
+import { browser, element, by } from 'protractor';
 
 describe('Event binding example', () => {
 
@@ -36,7 +36,6 @@ describe('Event binding example', () => {
   });
 
   it('should hide the item img', async () => {
-    let deleteButton = element.all(by.css('button')).get(3);
     await deleteButton.click();
     browser.switchTo().alert().accept();
     expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');

aio/content/examples/http/src/app/request-cache.service.ts

@@ -44,8 +44,8 @@ export class RequestCacheWithMap implements RequestCache {
     const url = req.urlWithParams;
     this.messenger.add(`Caching response from "${url}".`);
 
-    const entry = { url, response, lastRead: Date.now() };
+    const newEntry = { url, response, lastRead: Date.now() };
-    this.cache.set(url, entry);
+    this.cache.set(url, newEntry);
 
     // remove expired cache entries
     const expired = Date.now() - maxAge;

aio/content/examples/http/src/testing/http-client.spec.ts

@@ -83,7 +83,7 @@ describe('HttpClient testing', () => {
     // #docregion predicate
     // Expect one request with an authorization header
     const req = httpTestingController.expectOne(
-      req => req.headers.has('Authorization')
+      request => request.headers.has('Authorization')
     );
     // #enddocregion predicate
     req.flush(testData);

aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts

@@ -4,9 +4,7 @@ import { logging } from 'selenium-webdriver';
 describe('Inputs and Outputs', () => {
 
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
-  });
 
 
    // helper function used to test what's logged to the console
@@ -15,11 +13,8 @@ describe('Inputs and Outputs', () => {
       .manage()
       .logs()
       .get(logging.Type.BROWSER);
-    const message = logs.filter(({ message }) =>
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1);
-      message.indexOf(contents) !== -1 ? true : false
+    expect(messages.length).toBeGreaterThan(0);
-    );
-    console.log(message);
-    expect(message.length).toBeGreaterThan(0);
   }
 
   it('should have title Inputs and Outputs', () => {

aio/content/examples/observables/src/multicasting.ts

@@ -9,18 +9,18 @@ function sequenceSubscriber(observer) {
 
   // Will run through an array of numbers, emitting one value
   // per second until it gets to the end of the array.
-  function doSequence(arr, idx) {
+  function doInSequence(arr, idx) {
     timeoutId = setTimeout(() => {
       observer.next(arr[idx]);
       if (idx === arr.length - 1) {
         observer.complete();
       } else {
-        doSequence(arr, ++idx);
+        doInSequence(arr, ++idx);
       }
     }, 1000);
   }
 
-  doSequence(seq, 0);
+  doInSequence(seq, 0);
 
   // Unsubscribe should clear the timeout to stop execution
   return {unsubscribe() {

aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts

@@ -2,10 +2,7 @@ import { browser, element, by } from 'protractor';
 import { logging } from 'selenium-webdriver';
 
 describe('Template-reference-variables-example', () => {
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
-
-  });
 
   // helper function used to test what's logged to the console
   async function logChecker(button, contents) {
@@ -13,10 +10,8 @@ describe('Template-reference-variables-example', () => {
       .manage()
       .logs()
       .get(logging.Type.BROWSER);
-    const message = logs.filter(({ message }) =>
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1);
-      message.indexOf(contents) !== -1 ? true : false
+    expect(messages.length).toBeGreaterThan(0);
-    );
-    expect(message.length).toBeGreaterThan(0);
   }
 
   it('should display Template reference variables', () => {

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

@@ -6,7 +6,6 @@ import { Hero } from '../model/hero';
 //////////  Tests  ////////////////////
 
 describe('HeroDetailComponent - no TestBed', () => {
-  let activatedRoute: ActivatedRouteStub;
   let comp: HeroDetailComponent;
   let expectedHero: Hero;
   let hds: any;
@@ -26,7 +25,6 @@ describe('HeroDetailComponent - no TestBed', () => {
 
     // OnInit calls HDS.getHero; wait for it to get the fake hero
     hds.getHero.calls.first().returnValue.subscribe(done);
-
   });
 
   it('should expose the hero retrieved from the service', () => {

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

@@ -356,14 +356,14 @@ class Page {
   gotoListSpy: jasmine.Spy;
   navigateSpy: jasmine.Spy;
 
-  constructor(fixture: ComponentFixture<HeroDetailComponent>) {
+  constructor(someFixture: ComponentFixture<HeroDetailComponent>) {
     // get the navigate spy from the injected router spy object
     const routerSpy = someFixture.debugElement.injector.get(Router) as any;
     this.navigateSpy = routerSpy.navigate;
 
     // spy on component's `gotoList()` method
-    const component = fixture.componentInstance;
+    const someComponent = someFixture.componentInstance;
-    this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
+    this.gotoListSpy = spyOn(someComponent, 'gotoList').and.callThrough();
   }
 
   //// query helpers ////

aio/content/examples/testing/src/app/model/testing/http-client.spec.ts

@@ -82,7 +82,7 @@ describe('HttpClient testing', () => {
     // #docregion predicate
     // Expect one request with an authorization header
     const req = httpTestingController.expectOne(
-      req => req.headers.has('Authorization')
+      request => request.headers.has('Authorization')
     );
     // #enddocregion predicate
     req.flush(testData);

aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts

@@ -172,11 +172,11 @@ describe('Tutorial part 6', () => {
     });
 
     it(`adds back ${targetHero.name}`, async () => {
-      const newHeroName = 'Alice';
+      const addedHeroName = 'Alice';
       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
       const numHeroes = heroesBefore.length;
 
-      element(by.css('input')).sendKeys(newHeroName);
+      element(by.css('input')).sendKeys(addedHeroName);
       element(by.buttonText('add')).click();
 
       let page = getPageElts();
@@ -186,7 +186,7 @@ describe('Tutorial part 6', () => {
       expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there');
 
       const maxId = heroesBefore[heroesBefore.length - 1].id;
-      expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
+      expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: addedHeroName});
     });
 
     it('displays correctly styled buttons', async () => {

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts

@@ -22,9 +22,9 @@ export class PhoneDetailComponent {
   mainImageUrl: string;
 
   constructor(routeParams: RouteParams, phone: Phone) {
-    phone.get(routeParams.phoneId).subscribe(phone => {
+    phone.get(routeParams.phoneId).subscribe(data => {
-      this.phone = phone;
+      this.phone = data;
-      this.setImage(phone.images[0]);
+      this.setImage(data.images[0]);
     });
   }