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
This commit is contained in:
George Kalpakas 2020-07-30 13:03:10 +03:00 committed by Alex Rickabaugh
parent 0a791e4a50
commit 7c0f11789b
31 changed files with 147 additions and 142 deletions

View File

@ -80,7 +80,7 @@ export class OpenCloseComponent {
// #enddocregion component
@Input() logging = false;
// #docregion events1, events
onAnimationEvent ( event: AnimationEvent ) {
onAnimationEvent( event: AnimationEvent ) {
// #enddocregion events1, events
if (!this.logging) {
return;

View File

@ -8,12 +8,12 @@ describe('Binding syntax e2e tests', () => {
});
// helper function used to test what's logged to the console
async function logChecker(button, contents) {
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
const message = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
expect(message.length).toBeGreaterThan(0);
}
// helper function used to test what's logged to the console
async function logChecker(button, contents) {
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
expect(messages.length).toBeGreaterThan(0);
}
it('should display Binding syntax', function () {

View File

@ -1,4 +1,4 @@
/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
/* tslint:disable: no-unused-variable component-selector-name one-line space-before-function-paren */
/* tslint:disable:*/
// #docplaster
// #docregion

View File

@ -16,26 +16,27 @@ export function simpleCar() {
///////// example 2 ////////////
// #docregion car-ctor-instantiation-with-param
class Engine2 {
constructor(public cylinders: number) { }
}
class Engine2 {
constructor(public cylinders: number) { }
}
// #enddocregion car-ctor-instantiation-with-param
export function superCar() {
// #docregion car-ctor-instantiation-with-param
// #docregion car-ctor-instantiation-with-param
// Super car with 12 cylinders and Flintstone tires.
let bigCylinders = 12;
let car = new Car(new Engine2(bigCylinders), new Tires());
// #enddocregion car-ctor-instantiation-with-param
// #enddocregion car-ctor-instantiation-with-param
car.description = 'Super';
return car;
}
/////////// example 3 //////////
// #docregion car-ctor-instantiation-with-mocks
class MockEngine extends Engine { cylinders = 8; }
class MockTires extends Tires { make = 'YokoGoodStone'; }
// #docregion car-ctor-instantiation-with-mocks
class MockEngine extends Engine { cylinders = 8; }
class MockTires extends Tires { make = 'YokoGoodStone'; }
// #enddocregion car-ctor-instantiation-with-mocks
// #enddocregion car-ctor-instantiation-with-mocks
export function testCar() {
// #docregion car-ctor-instantiation-with-mocks
// Test car with 8 cylinders and YokoGoodStone tires.

View File

@ -1,17 +1,15 @@
import { browser, element, by } from 'protractor';
describe('Getting Started V0', () => {
beforeEach(() => {
return browser.get('/');
});
beforeEach(() => browser.get('/'));
it('should display "My Store" in the top bar', async() => {
it('should display "My Store" in the top bar', async () => {
const title = await element(by.css('app-root app-top-bar h1')).getText();
expect(title).toEqual('My Store');
});
it('should display "Products" on the homepage', async() => {
it('should display "Products" on the homepage', async () => {
const title = await element(by.css('app-root app-product-list h2')).getText();
expect(title).toEqual('Products');

View File

@ -13,17 +13,17 @@ describe('Getting Started', () => {
};
describe('General', () => {
beforeAll(async() => {
beforeAll(async () => {
await browser.get('/');
});
it('should display "My Store"', async() => {
it('should display "My Store"', async () => {
const title = await pageElements.topBarHeader.getText();
expect(title).toEqual('My Store');
});
it('should display "Products" on the homepage', async() => {
it('should display "Products" on the homepage', async () => {
const title = await pageElements.productListHeader.getText();
expect(title).toEqual('Products');
@ -31,11 +31,11 @@ describe('Getting Started', () => {
});
describe('Product List', () => {
beforeAll(async() => {
beforeAll(async () => {
await browser.get('/');
});
it('should display 3 items', async() => {
it('should display 3 items', async () => {
const products = await pageElements.productListItems;
expect(products.length).toEqual(3);
@ -43,11 +43,11 @@ describe('Getting Started', () => {
});
describe('Product Details', () => {
beforeEach(async() => {
beforeEach(async () => {
await browser.get('/');
});
it('should display information for a product', async() => {
it('should display information for a product', async () => {
await pageElements.productListLinks.get(0).click();
const product = pageElements.productDetailsPage;
@ -61,7 +61,7 @@ describe('Getting Started', () => {
expect(productDescription).toBe('A large phone with one of the best screens');
});
it('should add the product to the cart', async() => {
it('should add the product to the cart', async () => {
await pageElements.productListLinks.get(0).click();
const product = pageElements.productDetailsPage;
@ -80,11 +80,11 @@ describe('Getting Started', () => {
describe('Cart', () => {
beforeEach(async() => {
beforeEach(async () => {
await browser.get('/');
});
it('should go through the checkout process', async() => {
it('should go through the checkout process', async () => {
await pageElements.productListLinks.get(0).click();
const checkoutLink = pageElements.topBarCheckoutLink;

View File

@ -21,7 +21,7 @@ export class HeroTaxReturnComponent {
}
@Input()
set taxReturn (htr: HeroTaxReturn) {
set taxReturn(htr: HeroTaxReturn) {
this.heroTaxReturnService.taxReturn = htr;
}
@ -32,7 +32,7 @@ export class HeroTaxReturnComponent {
this.heroTaxReturnService.restoreTaxReturn();
};
onClose() { this.close.emit(); };
onClose() { this.close.emit(); };
onSaved() {
this.flashMessage('Saved');

View File

@ -10,12 +10,12 @@ export class HeroTaxReturnService {
constructor(private heroService: HeroesService) { }
set taxReturn (htr: HeroTaxReturn) {
set taxReturn(htr: HeroTaxReturn) {
this.originalTaxReturn = htr;
this.currentTaxReturn = htr.clone();
}
get taxReturn (): HeroTaxReturn {
get taxReturn(): HeroTaxReturn {
return this.currentTaxReturn;
}

View File

@ -1,9 +1,9 @@
// #docregion
export interface Hero {
id: number;
id: number;
name: string;
tid: string; // tax id
tid: string; // tax id
}
//// HeroTaxReturn ////

View File

@ -33,7 +33,7 @@ export class HeroesService {
}
/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
catchError(this.handleError('getHeroes', []))
@ -60,7 +60,7 @@ export class HeroesService {
// #docregion addHero
/** POST: add a new hero to the database */
addHero (hero: Hero): Observable<Hero> {
addHero(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
.pipe(
catchError(this.handleError('addHero', hero))
@ -70,7 +70,7 @@ export class HeroesService {
// #docregion deleteHero
/** DELETE: delete the hero from the server */
deleteHero (id: number): Observable<{}> {
deleteHero(id: number): Observable<{}> {
const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
return this.http.delete(url, httpOptions)
.pipe(
@ -81,7 +81,7 @@ export class HeroesService {
// #docregion updateHero
/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero): Observable<Hero> {
updateHero(hero: Hero): Observable<Hero> {
// #enddocregion updateHero
// #docregion update-headers
httpOptions.headers =

View File

@ -15,8 +15,10 @@ export class HttpErrorHandler {
constructor(private messageService: MessageService) { }
/** Create curried handleError function that already knows the service name */
createHandleError = (serviceName = '') => <T>
(operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result);
createHandleError = (serviceName = '') => {
return <T>(operation = 'operation', result = {} as T) =>
this.handleError(serviceName, operation, result);
}
/**
* Returns a function that handles Http operation failures.
@ -25,7 +27,7 @@ export class HttpErrorHandler {
* @param operation - name of the operation that failed
* @param result - optional value to return as the observable result
*/
handleError<T> (serviceName = '', operation = 'operation', result = {} as T) {
handleError<T>(serviceName = '', operation = 'operation', result = {} as T) {
return (error: HttpErrorResponse): Observable<T> => {
// TODO: send the error to remote logging infrastructure

View File

@ -39,7 +39,7 @@ export class PackageSearchService {
this.handleError = httpErrorHandler.createHandleError('HeroesService');
}
search (packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
search(packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
// clear if no pkg name
if (!packageName.trim()) { return of([]); }

View File

@ -37,12 +37,12 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
// Query for a VIEW child of type `ChildViewComponent`
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
// #enddocregion hooks
// #enddocregion hooks
constructor(private logger: LoggerService) {
this.logIt('AfterView constructor');
}
// #docregion hooks
// #docregion hooks
ngAfterViewInit() {
// viewChild is set after the view has been initialized
this.logIt('AfterViewInit');
@ -59,11 +59,11 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
this.doSomething();
}
}
// #enddocregion hooks
// #enddocregion hooks
comment = '';
// #docregion do-something
// #docregion do-something
// This surrogate for real business logic sets the `comment`
private doSomething() {
let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
@ -72,14 +72,14 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
this.logger.tick_then(() => this.comment = c);
}
}
// #enddocregion do-something
// #enddocregion do-something
private logIt(method: string) {
let child = this.viewChild;
let message = `${method}: ${child ? child.hero : 'no'} child view`;
this.logger.log(message);
}
// #docregion hooks
// #docregion hooks
// ...
}
// #enddocregion hooks

View File

@ -11,7 +11,7 @@ import { UserService } from '../greeting/user.service';
styleUrls: [ './contact.component.css' ]
})
export class ContactComponent implements OnInit {
contact: Contact;
contact: Contact;
contacts: Contact[];
msg = 'Loading contacts ...';

View File

@ -14,7 +14,7 @@ import { UserServiceConfig } from './user.service';
})
export class GreetingModule {
// #docregion ctor
constructor (@Optional() @SkipSelf() parentModule?: GreetingModule) {
constructor(@Optional() @SkipSelf() parentModule?: GreetingModule) {
if (parentModule) {
throw new Error(
'GreetingModule is already loaded. Import it in the AppModule only');

View File

@ -7,13 +7,14 @@ import { Observable } from 'rxjs';
@Component({
selector: 'zippy',
template: `
<div class="zippy">
<div (click)="toggle()">Toggle</div>
<div [hidden]="!visible">
<ng-content></ng-content>
<div class="zippy">
<div (click)="toggle()">Toggle</div>
<div [hidden]="!visible">
<ng-content></ng-content>
</div>
</div>
</div>`})
`,
})
export class ZippyComponent {
visible = true;
@Output() open = new EventEmitter<any>();

View File

@ -4,18 +4,21 @@ import { Routes, RouterModule } from '@angular/router'; // CLI imports router
// #docregion child-routes
const routes: Routes = [
{ path: 'first-component',
{
path: 'first-component',
component: FirstComponent, // this is the component with the <router-outlet> in the template
children: [
{
path: 'child-a', // child route path
component: ChildAComponent // child route component that the router renders
component: ChildAComponent, // child route component that the router renders
},
{
path: 'child-b',
component: ChildBComponent // another child route component that the router renders
}
] },
component: ChildBComponent, // another child route component that the router renders
},
],
},
];
// #enddocregion child-routes

View File

@ -15,12 +15,12 @@ describe('Testing Example', () => {
};
}
it('has title', async() => {
it('has title', async () => {
expect(await browser.getTitle()).toEqual('App Under Test');
});
it(`has views ${expectedViewNames}`, async () => {
let viewNames = getPageElts().navElts.map(async(el: ElementFinder) => await el.getText());
let viewNames = getPageElts().navElts.map(async (el: ElementFinder) => await el.getText());
expect(viewNames).toEqual(expectedViewNames);
});

View File

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

View File

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

View File

@ -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

View File

@ -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

View File

@ -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
});

View File

@ -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)', () => {

View File

@ -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,

View File

@ -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({

View File

@ -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;
}
}

View File

@ -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

View File

@ -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

View File

@ -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}`;

View File

@ -10,11 +10,11 @@ describe('Lazy Loading AngularJS Tests', function () {
notFoundPageParagraph: element(by.css('app-root app-app404 p')),
};
beforeAll(async() => {
beforeAll(async () => {
await browser.get('/');
});
it('should display \'Angular Home\' when visiting the home page', async() => {
it('should display \'Angular Home\' when visiting the home page', async () => {
await pageElements.homePageHref.click();
const paragraphText = await pageElements.homePageParagraph.getText();
@ -22,7 +22,7 @@ describe('Lazy Loading AngularJS Tests', function () {
expect(paragraphText).toEqual('Angular Home');
});
it('should display \'Users Page\' page when visiting the AngularJS page at /users', async() => {
it('should display \'Users Page\' page when visiting the AngularJS page at /users', async () => {
await pageElements.ajsUsersPageHref.click();
await loadAngularJS();
@ -31,7 +31,7 @@ describe('Lazy Loading AngularJS Tests', function () {
expect(paragraphText).toEqual('Users Page');
});
it('should display \'Angular 404\' when visiting an invalid URL', async() => {
it('should display \'Angular 404\' when visiting an invalid URL', async () => {
await pageElements.notFoundPageHref.click();
const paragraphText = await pageElements.notFoundPageParagraph.getText();