From 3899abf5b886826a00d443db364d7b1fb085122b Mon Sep 17 00:00:00 2001 From: "anh.pham" Date: Sun, 24 Apr 2022 23:45:23 +0200 Subject: [PATCH] fix: correct deprecation message of `ngcc-jest-processor` Closes #1411 --- .../__tests__/bar.component.spec.ts | 25 +- e2e/async/__tests__/async.spec.ts | 17 +- .../__tests__/full-ivy-lib.spec.ts | 16 +- .../__tests__/partial-ivy-lib.spec.ts | 16 +- .../__tests__/foo.component.spec.ts | 21 +- .../src/app/app-initial.component.spec.ts | 53 ++-- .../src/app/app.component.router.spec.ts | 14 +- .../src/app/app.component.spec.ts | 84 +++--- .../banner/banner-initial.component.spec.ts | 8 +- .../dashboard-hero.component.spec.ts | 16 +- .../dashboard.component.no-testbed.spec.ts | 15 +- .../app/dashboard/dashboard.component.spec.ts | 44 ++- .../src/app/demo/async-helper.spec.ts | 130 ++++----- .../example-app-v11/src/app/demo/demo.spec.ts | 13 +- .../src/app/demo/demo.testbed.spec.ts | 127 ++++---- .../app/hero/hero-detail.component.spec.ts | 274 ++++++++---------- .../src/app/hero/hero-list.component.spec.ts | 32 +- .../src/app/model/hero.service.spec.ts | 78 +++-- .../src/app/shared/canvas.component.spec.ts | 34 +-- .../src/app/twain/twain.component.spec.ts | 86 +++--- .../src/app/app-initial.component.spec.ts | 53 ++-- .../app1/src/app/app.component.router.spec.ts | 14 +- .../app1/src/app/app.component.spec.ts | 84 +++--- .../banner/banner-initial.component.spec.ts | 8 +- .../dashboard-hero.component.spec.ts | 16 +- .../dashboard.component.no-testbed.spec.ts | 15 +- .../app/dashboard/dashboard.component.spec.ts | 44 ++- .../app1/src/app/demo/async-helper.spec.ts | 130 ++++----- .../projects/app1/src/app/demo/demo.spec.ts | 13 +- .../app1/src/app/demo/demo.testbed.spec.ts | 127 ++++---- .../app/hero/hero-detail.component.spec.ts | 274 ++++++++---------- .../src/app/hero/hero-list.component.spec.ts | 32 +- .../app1/src/app/model/hero.service.spec.ts | 78 +++-- .../src/app/shared/canvas.component.spec.ts | 34 +-- .../src/app/twain/twain.component.spec.ts | 86 +++--- .../src/app/app-initial.component.spec.ts | 53 ++-- .../app2/src/app/app.component.router.spec.ts | 14 +- .../app2/src/app/app.component.spec.ts | 84 +++--- .../banner/banner-initial.component.spec.ts | 8 +- .../dashboard-hero.component.spec.ts | 16 +- .../dashboard.component.no-testbed.spec.ts | 15 +- .../app/dashboard/dashboard.component.spec.ts | 64 ++-- .../app2/src/app/demo/async-helper.spec.ts | 130 ++++----- .../projects/app2/src/app/demo/demo.spec.ts | 13 +- .../app2/src/app/demo/demo.testbed.spec.ts | 127 ++++---- .../app/hero/hero-detail.component.spec.ts | 274 ++++++++---------- .../src/app/hero/hero-list.component.spec.ts | 32 +- .../app2/src/app/model/hero.service.spec.ts | 78 +++-- .../src/app/shared/canvas.component.spec.ts | 34 +-- .../src/app/twain/twain.component.spec.ts | 86 +++--- .../src/app/app-initial.component.spec.ts | 53 ++-- .../src/app/app.component.router.spec.ts | 14 +- .../src/app/app.component.spec.ts | 84 +++--- .../banner/banner-initial.component.spec.ts | 8 +- .../dashboard-hero.component.spec.ts | 16 +- .../dashboard.component.no-testbed.spec.ts | 15 +- .../app/dashboard/dashboard.component.spec.ts | 44 ++- .../src/app/demo/async-helper.spec.ts | 130 ++++----- .../example-app-v12/src/app/demo/demo.spec.ts | 13 +- .../src/app/demo/demo.testbed.spec.ts | 127 ++++---- .../app/hero/hero-detail.component.spec.ts | 274 ++++++++---------- .../src/app/hero/hero-list.component.spec.ts | 32 +- .../src/app/model/hero.service.spec.ts | 78 +++-- .../src/app/shared/canvas.component.spec.ts | 34 +-- .../src/app/twain/twain.component.spec.ts | 86 +++--- .../src/app/app-initial.component.spec.ts | 53 ++-- .../src/app/app.component.router.spec.ts | 14 +- .../src/app/app.component.spec.ts | 84 +++--- .../banner/banner-initial.component.spec.ts | 8 +- .../dashboard-hero.component.spec.ts | 16 +- .../dashboard.component.no-testbed.spec.ts | 15 +- .../app/dashboard/dashboard.component.spec.ts | 44 ++- .../src/app/demo/async-helper.spec.ts | 130 ++++----- .../example-app-v13/src/app/demo/demo.spec.ts | 13 +- .../src/app/demo/demo.testbed.spec.ts | 127 ++++---- .../app/hero/hero-detail.component.spec.ts | 274 ++++++++---------- .../src/app/hero/hero-list.component.spec.ts | 32 +- .../src/app/model/hero.service.spec.ts | 76 +++-- .../src/app/shared/canvas.component.spec.ts | 34 +-- .../src/app/twain/twain.component.spec.ts | 86 +++--- .../src/app/app-initial.component.spec.ts | 53 ++-- .../src/app/app.component.router.spec.ts | 14 +- .../angular-app/src/app/app.component.spec.ts | 84 +++--- .../banner/banner-initial.component.spec.ts | 8 +- .../dashboard-hero.component.spec.ts | 16 +- .../dashboard.component.no-testbed.spec.ts | 15 +- .../app/dashboard/dashboard.component.spec.ts | 44 ++- .../src/app/demo/async-helper.spec.ts | 130 ++++----- .../angular-app/src/app/demo/demo.spec.ts | 13 +- .../src/app/demo/demo.testbed.spec.ts | 127 ++++---- .../app/hero/hero-detail.component.spec.ts | 274 ++++++++---------- .../src/app/hero/hero-list.component.spec.ts | 32 +- .../src/app/model/hero.service.spec.ts | 78 +++-- .../src/app/shared/canvas.component.spec.ts | 34 +-- .../src/app/twain/twain.component.spec.ts | 86 +++--- ngcc-jest-processor.js | 2 +- 96 files changed, 2743 insertions(+), 3420 deletions(-) diff --git a/e2e/ast-transformers/ng-jit-transformers/__tests__/bar.component.spec.ts b/e2e/ast-transformers/ng-jit-transformers/__tests__/bar.component.spec.ts index 7130c9cf5a..006570e785 100644 --- a/e2e/ast-transformers/ng-jit-transformers/__tests__/bar.component.spec.ts +++ b/e2e/ast-transformers/ng-jit-transformers/__tests__/bar.component.spec.ts @@ -16,18 +16,15 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; }) class BarComponent {} -test( - 'templateUrl/styleUrls/styles should work', - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [BarComponent], - }); - const fixture = TestBed.createComponent(BarComponent); - fixture.detectChanges(); +test('templateUrl/styleUrls/styles should work', waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [BarComponent], + }); + const fixture = TestBed.createComponent(BarComponent); + fixture.detectChanges(); - const elementToFind = fixture.debugElement.nativeElement.querySelector('p'); - expect(elementToFind).toBeDefined(); - expect(window.getComputedStyle(elementToFind).color).toEqual(''); - expect(window.getComputedStyle(elementToFind).fontSize).toEqual(''); - }), -); + const elementToFind = fixture.debugElement.nativeElement.querySelector('p'); + expect(elementToFind).toBeDefined(); + expect(window.getComputedStyle(elementToFind).color).toEqual(''); + expect(window.getComputedStyle(elementToFind).fontSize).toEqual(''); +})); diff --git a/e2e/async/__tests__/async.spec.ts b/e2e/async/__tests__/async.spec.ts index 62cd71a94c..5d21339ded 100644 --- a/e2e/async/__tests__/async.spec.ts +++ b/e2e/async/__tests__/async.spec.ts @@ -73,14 +73,11 @@ describe('async with Angular testing apis', () => { expect(flag).toBe(true); })); - test( - 'waitForAsync should work', - waitForAsync(() => { - let flag = false; - setTimeout(() => { - flag = true; - expect(flag).toBe(true); - }, 100); - }), - ); + test('waitForAsync should work', waitForAsync(() => { + let flag = false; + setTimeout(() => { + flag = true; + expect(flag).toBe(true); + }, 100); + })); }); diff --git a/e2e/full-ivy-lib/__tests__/full-ivy-lib.spec.ts b/e2e/full-ivy-lib/__tests__/full-ivy-lib.spec.ts index 29f81783a8..43e52f40c2 100644 --- a/e2e/full-ivy-lib/__tests__/full-ivy-lib.spec.ts +++ b/e2e/full-ivy-lib/__tests__/full-ivy-lib.spec.ts @@ -5,16 +5,14 @@ describe('Full Ivy library', () => { let fullIvyComponent: FullIvyComponent; let fullIvyService: FullIvyService; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [FullIvyModule], - }); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [FullIvyModule], + }); - fullIvyComponent = TestBed.createComponent(FullIvyComponent).componentInstance; - fullIvyService = TestBed.inject(FullIvyService); - }), - ); + fullIvyComponent = TestBed.createComponent(FullIvyComponent).componentInstance; + fullIvyService = TestBed.inject(FullIvyService); + })); test('should create the component instance', () => { expect(fullIvyComponent).toBeDefined(); diff --git a/e2e/partial-ivy-lib/__tests__/partial-ivy-lib.spec.ts b/e2e/partial-ivy-lib/__tests__/partial-ivy-lib.spec.ts index 2b8760ff21..9cc45d3821 100644 --- a/e2e/partial-ivy-lib/__tests__/partial-ivy-lib.spec.ts +++ b/e2e/partial-ivy-lib/__tests__/partial-ivy-lib.spec.ts @@ -6,16 +6,14 @@ describe('Partial Ivy library', () => { let partialIvyComponent: PartialIvyComponent; let partialIvyService: PartialIvyService; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [PartialIvyModule, PartialIvyTestingModule], - }); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [PartialIvyModule, PartialIvyTestingModule], + }); - partialIvyComponent = TestBed.createComponent(PartialIvyComponent).componentInstance; - partialIvyService = TestBed.inject(PartialIvyService); - }), - ); + partialIvyComponent = TestBed.createComponent(PartialIvyComponent).componentInstance; + partialIvyService = TestBed.inject(PartialIvyService); + })); test('should create the component instance', () => { expect(partialIvyComponent).toBeDefined(); diff --git a/e2e/snapshot-serializers/__tests__/foo.component.spec.ts b/e2e/snapshot-serializers/__tests__/foo.component.spec.ts index 9abf399653..1fe7bb3e53 100644 --- a/e2e/snapshot-serializers/__tests__/foo.component.spec.ts +++ b/e2e/snapshot-serializers/__tests__/foo.component.spec.ts @@ -22,17 +22,14 @@ class FooComponent { condition2 = false; } -test( - 'snapshot should work', - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [FooComponent], - }); +test('snapshot should work', waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [FooComponent], + }); - const fixture = TestBed.createComponent(FooComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(FooComponent); + fixture.detectChanges(); - expect(fixture).toMatchSnapshot(); - expect(fixture.debugElement.nativeElement).toMatchSnapshot(); - }), -); + expect(fixture).toMatchSnapshot(); + expect(fixture.debugElement.nativeElement).toMatchSnapshot(); +})); diff --git a/examples/example-app-v11/src/app/app-initial.component.spec.ts b/examples/example-app-v11/src/app/app-initial.component.spec.ts index b12363b69d..f13ecfb673 100644 --- a/examples/example-app-v11/src/app/app-initial.component.spec.ts +++ b/examples/example-app-v11/src/app/app-initial.component.spec.ts @@ -5,38 +5,27 @@ import { ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app-initial.component'; describe('AppComponent (initial CLI version)', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }), - ); - it( - 'should create the app', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }), - ); - it( - `should have as title 'app'`, - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('app'); - }), - ); - it( - 'should render title', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + })); + it('should create the app', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); + })); }); describe('AppComponent (initial CLI version - as it should be)', () => { diff --git a/examples/example-app-v11/src/app/app.component.router.spec.ts b/examples/example-app-v11/src/app/app.component.router.spec.ts index 7b549530c3..29dc0fba7d 100644 --- a/examples/example-app-v11/src/app/app.component.router.spec.ts +++ b/examples/example-app-v11/src/app/app.component.router.spec.ts @@ -26,14 +26,12 @@ let router: Router; let location: SpyLocation; describe('AppComponent & RouterTestingModule', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [AppModule, RouterTestingModule.withRoutes(routes)], - providers: [{ provide: HeroService, useClass: TestHeroService }], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [AppModule, RouterTestingModule.withRoutes(routes)], + providers: [{ provide: HeroService, useClass: TestHeroService }], + }).compileComponents(); + })); it('should navigate to "Dashboard" immediately', fakeAsync(() => { createComponent(); diff --git a/examples/example-app-v11/src/app/app.component.spec.ts b/examples/example-app-v11/src/app/app.component.spec.ts index 370cd83a69..7866693a2c 100644 --- a/examples/example-app-v11/src/app/app.component.spec.ts +++ b/examples/example-app-v11/src/app/app.component.spec.ts @@ -21,59 +21,53 @@ let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent, + RouterLinkDirectiveStub, + BannerStubComponent, + RouterOutletStubComponent, + WelcomeStubComponent, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & AppModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ imports: [AppModule] }) - .overrideModule(AppModule, { - remove: { imports: [AppRoutingModule] }, - add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ imports: [AppModule] }) + .overrideModule(AppModule, { + remove: { imports: [AppRoutingModule] }, + add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); diff --git a/examples/example-app-v11/src/app/banner/banner-initial.component.spec.ts b/examples/example-app-v11/src/app/banner/banner-initial.component.spec.ts index 0acdb5b29e..b29a8abeff 100644 --- a/examples/example-app-v11/src/app/banner/banner-initial.component.spec.ts +++ b/examples/example-app-v11/src/app/banner/banner-initial.component.spec.ts @@ -7,11 +7,9 @@ describe('BannerComponent (initial CLI generated)', () => { let component: BannerComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); diff --git a/examples/example-app-v11/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-v11/src/app/dashboard/dashboard-hero.component.spec.ts index 66b0235c1e..1f67b659d6 100644 --- a/examples/example-app-v11/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/examples/example-app-v11/src/app/dashboard/dashboard-hero.component.spec.ts @@ -27,11 +27,9 @@ describe('DashboardHeroComponent when tested directly', () => { let heroDe: DebugElement; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); @@ -92,11 +90,9 @@ describe('DashboardHeroComponent when inside a test host', () => { let fixture: ComponentFixture; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(TestHostComponent); diff --git a/examples/example-app-v11/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/examples/example-app-v11/src/app/dashboard/dashboard.component.no-testbed.spec.ts index d04067162f..5ebee4160e 100644 --- a/examples/example-app-v11/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/examples/example-app-v11/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -28,15 +28,12 @@ describe('DashboardComponent class only', () => { expect(comp.heroes.length).toEqual(0); }); - it( - 'should HAVE heroes after HeroService gets them', - waitForAsync(() => { - comp.ngOnInit(); - heroService.lastHeroesResult?.subscribe(() => { - expect(comp.heroes.length).toBeGreaterThan(0); - }); - }), - ); + it('should HAVE heroes after HeroService gets them', waitForAsync(() => { + comp.ngOnInit(); + heroService.lastHeroesResult?.subscribe(() => { + expect(comp.heroes.length).toBeGreaterThan(0); + }); + })); it('should tell ROUTER to navigate by hero id', () => { const hero: Hero = { id: 42, name: 'Abbracadabra' }; diff --git a/examples/example-app-v11/src/app/dashboard/dashboard.component.spec.ts b/examples/example-app-v11/src/app/dashboard/dashboard.component.spec.ts index 4b7a98c6ac..179087b628 100644 --- a/examples/example-app-v11/src/app/dashboard/dashboard.component.spec.ts +++ b/examples/example-app-v11/src/app/dashboard/dashboard.component.spec.ts @@ -21,30 +21,28 @@ describe('DashboardComponent (deep)', () => { let router: Router; let spy: ReturnType; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [CommonModule, FormsModule, RouterTestingModule], - declarations: [DashboardComponent, DashboardHeroComponent], - providers: [ - { - provide: HeroService, - useValue: { - getHeroes: () => of(getTestHeroes()), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [CommonModule, FormsModule, RouterTestingModule], + declarations: [DashboardComponent, DashboardHeroComponent], + providers: [ + { + provide: HeroService, + useValue: { + getHeroes: () => of(getTestHeroes()), }, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - router = TestBed.inject(Router); - spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); - }); - }), - ); + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); + }); + })); it('should not have heroes before ngOnInit', () => { expect(component.heroes.length).toEqual(0); diff --git a/examples/example-app-v11/src/app/demo/async-helper.spec.ts b/examples/example-app-v11/src/app/demo/async-helper.spec.ts index 2030df3a72..531263644c 100644 --- a/examples/example-app-v11/src/app/demo/async-helper.spec.ts +++ b/examples/example-app-v11/src/app/demo/async-helper.spec.ts @@ -23,53 +23,41 @@ describe('Angular async helper', () => { }, 0); }); - it( - 'should run async test with task (setTimeout)', - waitForAsync(() => { - setTimeout(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }, 0); - }), - ); - - it( - 'should run async test with task (clearInterval)', - waitForAsync(() => { - const id = setInterval(() => { - actuallyDone = true; - clearInterval(id); - expect(actuallyDone).toBeTruthy(); - }, 100); - }), - ); - - it( - 'should run async test with successful promise', - waitForAsync(() => { - const p = new Promise((resolve) => { - setTimeout(resolve, 10); - }); - p.then(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }); - }), - ); - - it( - 'should run async test with failed promise', - waitForAsync(() => { - const p = new Promise((resolve, reject) => { - setTimeout(reject, 10); - }); - p.catch(() => { - actuallyDone = true; - // eslint-disable-next-line jest/no-conditional-expect - expect(actuallyDone).toBeTruthy(); - }); - }), - ); + it('should run async test with task (setTimeout)', waitForAsync(() => { + setTimeout(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }, 0); + })); + + it('should run async test with task (clearInterval)', waitForAsync(() => { + const id = setInterval(() => { + actuallyDone = true; + clearInterval(id); + expect(actuallyDone).toBeTruthy(); + }, 100); + })); + + it('should run async test with successful promise', waitForAsync(() => { + const p = new Promise((resolve) => { + setTimeout(resolve, 10); + }); + p.then(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }); + })); + + it('should run async test with failed promise', waitForAsync(() => { + const p = new Promise((resolve, reject) => { + setTimeout(reject, 10); + }); + p.catch(() => { + actuallyDone = true; + // eslint-disable-next-line jest/no-conditional-expect + expect(actuallyDone).toBeTruthy(); + }); + })); it('should run async test with successful delayed Observable', async () => { const source = of(true).pipe(delay(10)); @@ -87,20 +75,17 @@ describe('Angular async helper', () => { .toPromise(); }); - it( - 'should run async test with successful delayed Observable (waitForAsync)', - waitForAsync(() => { - const source = of(true).pipe(delay(10)); - source.subscribe( - () => (actuallyDone = true), - // eslint-disable-next-line jest/no-jasmine-globals - (err) => fail(err), - () => { - expect(actuallyDone).toBeTruthy(); - }, - ); - }), - ); + it('should run async test with successful delayed Observable (waitForAsync)', waitForAsync(() => { + const source = of(true).pipe(delay(10)); + source.subscribe( + () => (actuallyDone = true), + // eslint-disable-next-line jest/no-jasmine-globals + (err) => fail(err), + () => { + expect(actuallyDone).toBeTruthy(); + }, + ); + })); it('should run async test with successful delayed Observable (fakeAsync)', fakeAsync(() => { const source = of(true).pipe(delay(10)); @@ -187,19 +172,16 @@ describe('Angular async helper', () => { callback(); } - it( - 'should wait until promise.then is called', - waitForAsync(() => { - let finished = false; - new Promise((res) => { - jsonp('localhost:8080/jsonp', () => { - finished = true; - res(); - }); - }).then(() => { - expect(finished).toBe(true); + it('should wait until promise.then is called', waitForAsync(() => { + let finished = false; + new Promise((res) => { + jsonp('localhost:8080/jsonp', () => { + finished = true; + res(); }); - }), - ); + }).then(() => { + expect(finished).toBe(true); + }); + })); }); }); diff --git a/examples/example-app-v11/src/app/demo/demo.spec.ts b/examples/example-app-v11/src/app/demo/demo.spec.ts index 3f6cc85226..552785db74 100644 --- a/examples/example-app-v11/src/app/demo/demo.spec.ts +++ b/examples/example-app-v11/src/app/demo/demo.spec.ts @@ -19,14 +19,11 @@ describe('demo (no TestBed):', () => { expect(service.getValue()).toBe('real value'); }); - it( - '#getObservableValue should return value from observable', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => { - expect(value).toBe('observable value'); - }); - }), - ); + it('#getObservableValue should return value from observable', waitForAsync(() => { + service.getObservableValue().subscribe((value) => { + expect(value).toBe('observable value'); + }); + })); it('#getPromiseValue should return value from a promise', async () => { await service.getPromiseValue().then((value) => { diff --git a/examples/example-app-v11/src/app/demo/demo.testbed.spec.ts b/examples/example-app-v11/src/app/demo/demo.testbed.spec.ts index 2e011b5f7c..83fd128417 100644 --- a/examples/example-app-v11/src/app/demo/demo.testbed.spec.ts +++ b/examples/example-app-v11/src/app/demo/demo.testbed.spec.ts @@ -55,28 +55,19 @@ describe('demo (with TestBed):', () => { expect(TestBed.inject(NotProvided, null)).toBeNull(); }); - it( - 'test should wait for ValueService.getPromiseValue', - waitForAsync(() => { - service.getPromiseValue().then((value) => expect(value).toBe('promise value')); - }), - ); + it('test should wait for ValueService.getPromiseValue', waitForAsync(() => { + service.getPromiseValue().then((value) => expect(value).toBe('promise value')); + })); - it( - 'test should wait for ValueService.getObservableValue', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); - }), - ); + it('test should wait for ValueService.getObservableValue', waitForAsync(() => { + service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); + })); - it( - 'test should wait for ValueService.getObservableDelayValue', - waitForAsync(() => { - service.getObservableDelayValue().subscribe((value) => { - expect(value).toBe('observable delay value'); - }); - }), - ); + it('test should wait for ValueService.getObservableDelayValue', waitForAsync(() => { + service.getObservableDelayValue().subscribe((value) => { + expect(value).toBe('observable delay value'); + }); + })); it('should allow the use of fakeAsync', fakeAsync(() => { let value = ''; @@ -141,13 +132,11 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ providers: [ValueService] }); }); - beforeEach( - waitForAsync( - inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then((value) => (serviceValue = value)); - }), - ), - ); + beforeEach(waitForAsync( + inject([ValueService], (service: ValueService) => { + service.getPromiseValue().then((value) => (serviceValue = value)); + }), + )); it('should use asynchronously modified value ... in synchronous test', () => { expect(serviceValue).toBe('promise value'); @@ -155,13 +144,11 @@ describe('demo (with TestBed):', () => { }); describe('TestBed component tests', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [DemoModule], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [DemoModule], + }).compileComponents(); + })); it('should create a component with inline template', () => { const fixture = TestBed.createComponent(Child1Component); @@ -235,38 +222,35 @@ describe('demo (with TestBed):', () => { expect(span.textContent).toMatch(/is on/i); }); - it( - 'should support entering text in input box (ngModel)', - waitForAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; + it('should support entering text in input box (ngModel)', waitForAsync(() => { + const expectedOrigName = 'John'; + const expectedNewName = 'Sally'; - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(InputComponent); + fixture.detectChanges(); - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; + const comp = fixture.componentInstance; + const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - fixture - .whenStable() - .then(() => { - expect(input.value).toBe(expectedOrigName); + fixture + .whenStable() + .then(() => { + expect(input.value).toBe(expectedOrigName); - input.value = expectedNewName; + input.value = expectedNewName; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - input.dispatchEvent(new Event('input')); + input.dispatchEvent(new Event('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName); - }); - }), - ); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.name).toBe(expectedNewName); + }); + })); it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { const expectedOrigName = 'John'; @@ -545,24 +529,21 @@ describe('demo (with TestBed):', () => { expect(child.childValue).toBe('foo'); }); - it( - 'changed child value flows to parent', - waitForAsync(() => { - fixture.detectChanges(); - getChild(); + it('changed child value flows to parent', waitForAsync(() => { + fixture.detectChanges(); + getChild(); - child.childValue = 'bar'; + child.childValue = 'bar'; - return new Promise((resolve) => { - setTimeout(() => resolve(), 0); - }).then(() => { - fixture.detectChanges(); + return new Promise((resolve) => { + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); - expect(child.ngOnChangesCounter).toBe(2); - expect(parent.parentValue).toBe('bar'); - }); - }), - ); + expect(child.ngOnChangesCounter).toBe(2); + expect(parent.parentValue).toBe('bar'); + }); + })); it('clicking "Close Child" triggers child OnDestroy', () => { fixture.detectChanges(); diff --git a/examples/example-app-v11/src/app/hero/hero-detail.component.spec.ts b/examples/example-app-v11/src/app/hero/hero-detail.component.spec.ts index fb95645573..60f7299834 100644 --- a/examples/example-app-v11/src/app/hero/hero-detail.component.spec.ts +++ b/examples/example-app-v11/src/app/hero/hero-detail.component.spec.ts @@ -30,41 +30,37 @@ describe('HeroDetailComponent', () => { }); describe('with HeroModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); describe('when navigate to existing hero', () => { let expectedHero: Hero; - beforeEach( - waitForAsync(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -108,19 +104,17 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach( - waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -132,20 +126,18 @@ describe('HeroDetailComponent', () => { }); describe('when navigate to non-existent hero id', () => { - beforeEach( - waitForAsync(() => { - activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should try to navigate back to hero list', () => { expect(page.gotoListSpy.mock.calls.length).toBeTruthy(); @@ -181,46 +173,42 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], + }) + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); - activatedRoute.setParamMap({ id: 99999 }); + activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - heroDetailsService = fixture.debugElement.injector.get( - HeroDetailService, - ) as unknown as HeroDetailServiceMock; + heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); }); - }), - ); + }); + })); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -260,79 +248,69 @@ describe('HeroDetailComponent', () => { }); describe('with FormsModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [FormsModule, RouterTestingModule], - declarations: [HeroDetailComponent, TitleCasePipe], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [FormsModule, RouterTestingModule], + declarations: [HeroDetailComponent, TitleCasePipe], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "formsModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("formsModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); describe('with SharedModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [SharedModule, RouterTestingModule], - declarations: [HeroDetailComponent], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [SharedModule, RouterTestingModule], + declarations: [HeroDetailComponent], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "sharedModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("sharedModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); }); diff --git a/examples/example-app-v11/src/app/hero/hero-list.component.spec.ts b/examples/example-app-v11/src/app/hero/hero-list.component.spec.ts index d7ba271808..bb542e3249 100644 --- a/examples/example-app-v11/src/app/hero/hero-list.component.spec.ts +++ b/examples/example-app-v11/src/app/hero/hero-list.component.spec.ts @@ -19,23 +19,21 @@ let fixture: ComponentFixture; let page: Page; describe('HeroListComponent', () => { - beforeEach( - waitForAsync(() => { - const routerSpy = { - navigate: jest.fn(), - }; - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, - ], - }) - .compileComponents() - .then(createComponent); - }), - ); + beforeEach(waitForAsync(() => { + const routerSpy = { + navigate: jest.fn(), + }; + + TestBed.configureTestingModule({ + imports: [HeroModule], + providers: [ + { provide: HeroService, useClass: TestHeroService }, + { provide: Router, useValue: routerSpy }, + ], + }) + .compileComponents() + .then(createComponent); + })); it('should display heroes', () => { expect(page.heroRows.length).toBeGreaterThan(0); diff --git a/examples/example-app-v11/src/app/model/hero.service.spec.ts b/examples/example-app-v11/src/app/model/hero.service.spec.ts index 514e5efbae..08f6a1c2fa 100644 --- a/examples/example-app-v11/src/app/model/hero.service.spec.ts +++ b/examples/example-app-v11/src/app/model/hero.service.spec.ts @@ -20,49 +20,43 @@ describe('HeroesService (with spies)', () => { heroService = new HeroService(httpClient); }); - it( - 'should return expected heroes (HttpClient called once)', - waitForAsync(() => { - const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ]; - - httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - - heroService.getHeroes().subscribe( - (heroes) => { - expect(heroes).toEqual(expectedHeroes); - }, - () => { - throw new Error('Error getting heroes'); - }, - ); - expect(httpClientSpy.get.mock.calls.length).toBe(1); - }), - ); - - it( - 'should return an error when the server returns a 404', - waitForAsync(() => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, - statusText: 'Not Found', - }); - - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + it('should return expected heroes (HttpClient called once)', waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; + + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); + + heroService.getHeroes().subscribe( + (heroes) => { + expect(heroes).toEqual(expectedHeroes); + }, + () => { + throw new Error('Error getting heroes'); + }, + ); + expect(httpClientSpy.get.mock.calls.length).toBe(1); + })); + + it('should return an error when the server returns a 404', waitForAsync(() => { + const errorResponse = new HttpErrorResponse({ + error: 'test 404 error', + status: 404, + statusText: 'Not Found', + }); - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - }), - ); + httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + + heroService.getHeroes().subscribe( + () => { + throw new Error('expected an error, not heroes'); + }, + (error) => { + expect(error.message).toContain('test 404 error'); + }, + ); + })); }); describe('HeroesService (with mocks)', () => { diff --git a/examples/example-app-v11/src/app/shared/canvas.component.spec.ts b/examples/example-app-v11/src/app/shared/canvas.component.spec.ts index 1a0ed9bbda..b0cb4a5108 100644 --- a/examples/example-app-v11/src/app/shared/canvas.component.spec.ts +++ b/examples/example-app-v11/src/app/shared/canvas.component.spec.ts @@ -6,24 +6,22 @@ describe('CanvasComponent', () => { let fixture: ComponentFixture; let component: CanvasComponent; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [CanvasComponent], - }) - .compileComponents() - .then(() => { - (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ - { - source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], - }, - ]; - fixture = TestBed.createComponent(CanvasComponent); - component = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [CanvasComponent], + }) + .compileComponents() + .then(() => { + (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ + { + source: 'HTMLCanvasElement.toBlob', + callbackArgs: [{ size: 200 }], + }, + ]; + fixture = TestBed.createComponent(CanvasComponent); + component = fixture.componentInstance; + }); + })); it('should be able to generate blob data from canvas', fakeAsync(() => { fixture.detectChanges(); diff --git a/examples/example-app-v11/src/app/twain/twain.component.spec.ts b/examples/example-app-v11/src/app/twain/twain.component.spec.ts index 32c089448d..875641ff8f 100644 --- a/examples/example-app-v11/src/app/twain/twain.component.spec.ts +++ b/examples/example-app-v11/src/app/twain/twain.component.spec.ts @@ -21,31 +21,29 @@ describe('TwainComponent', () => { return el ? el.textContent : null; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [TwainComponent], - providers: [ - { - provide: TwainService, - useValue: { - getQuote: jest.fn(), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [TwainComponent], + providers: [ + { + provide: TwainService, + useValue: { + getQuote: jest.fn(), }, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - twainService = TestBed.inject(TwainService); - getQuoteSpy = jest.spyOn(twainService, 'getQuote'); - - getQuoteSpy.mockImplementation(() => of(testQuote)); - }); - }), - ); + }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TwainComponent); + component = fixture.componentInstance; + quoteEl = fixture.nativeElement.querySelector('.twain'); + twainService = TestBed.inject(TwainService); + getQuoteSpy = jest.spyOn(twainService, 'getQuote'); + + getQuoteSpy.mockImplementation(() => of(testQuote)); + }); + })); describe('when test with synchronous observable', () => { it('should not show quote before OnInit', () => { @@ -114,19 +112,16 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it( - 'should show quote after getQuote (waitForAsync)', - waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); + it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe('...'); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -143,18 +138,15 @@ describe('TwainComponent', () => { .toPromise(); }); - it( - 'should show quote after getQuote', - waitForAsync(() => { - fixture.detectChanges(); + it('should show quote after getQuote', waitForAsync(() => { + fixture.detectChanges(); - twainService.getQuote().subscribe(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + twainService.getQuote().subscribe(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should display error when TwainService fails', fakeAsync(() => { getQuoteSpy.mockReturnValue(throwError('TwainService test failure')); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/app-initial.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/app-initial.component.spec.ts index b12363b69d..f13ecfb673 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/app-initial.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/app-initial.component.spec.ts @@ -5,38 +5,27 @@ import { ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app-initial.component'; describe('AppComponent (initial CLI version)', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }), - ); - it( - 'should create the app', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }), - ); - it( - `should have as title 'app'`, - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('app'); - }), - ); - it( - 'should render title', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + })); + it('should create the app', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); + })); }); describe('AppComponent (initial CLI version - as it should be)', () => { diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.router.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.router.spec.ts index 7b549530c3..29dc0fba7d 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.router.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.router.spec.ts @@ -26,14 +26,12 @@ let router: Router; let location: SpyLocation; describe('AppComponent & RouterTestingModule', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [AppModule, RouterTestingModule.withRoutes(routes)], - providers: [{ provide: HeroService, useClass: TestHeroService }], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [AppModule, RouterTestingModule.withRoutes(routes)], + providers: [{ provide: HeroService, useClass: TestHeroService }], + }).compileComponents(); + })); it('should navigate to "Dashboard" immediately', fakeAsync(() => { createComponent(); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.spec.ts index 370cd83a69..7866693a2c 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/app.component.spec.ts @@ -21,59 +21,53 @@ let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent, + RouterLinkDirectiveStub, + BannerStubComponent, + RouterOutletStubComponent, + WelcomeStubComponent, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & AppModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ imports: [AppModule] }) - .overrideModule(AppModule, { - remove: { imports: [AppRoutingModule] }, - add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ imports: [AppModule] }) + .overrideModule(AppModule, { + remove: { imports: [AppRoutingModule] }, + add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/banner/banner-initial.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/banner/banner-initial.component.spec.ts index 0acdb5b29e..b29a8abeff 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/banner/banner-initial.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/banner/banner-initial.component.spec.ts @@ -7,11 +7,9 @@ describe('BannerComponent (initial CLI generated)', () => { let component: BannerComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard-hero.component.spec.ts index 66b0235c1e..1f67b659d6 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard-hero.component.spec.ts @@ -27,11 +27,9 @@ describe('DashboardHeroComponent when tested directly', () => { let heroDe: DebugElement; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); @@ -92,11 +90,9 @@ describe('DashboardHeroComponent when inside a test host', () => { let fixture: ComponentFixture; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(TestHostComponent); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.no-testbed.spec.ts index d04067162f..5ebee4160e 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -28,15 +28,12 @@ describe('DashboardComponent class only', () => { expect(comp.heroes.length).toEqual(0); }); - it( - 'should HAVE heroes after HeroService gets them', - waitForAsync(() => { - comp.ngOnInit(); - heroService.lastHeroesResult?.subscribe(() => { - expect(comp.heroes.length).toBeGreaterThan(0); - }); - }), - ); + it('should HAVE heroes after HeroService gets them', waitForAsync(() => { + comp.ngOnInit(); + heroService.lastHeroesResult?.subscribe(() => { + expect(comp.heroes.length).toBeGreaterThan(0); + }); + })); it('should tell ROUTER to navigate by hero id', () => { const hero: Hero = { id: 42, name: 'Abbracadabra' }; diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.spec.ts index 4b7a98c6ac..179087b628 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/dashboard/dashboard.component.spec.ts @@ -21,30 +21,28 @@ describe('DashboardComponent (deep)', () => { let router: Router; let spy: ReturnType; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [CommonModule, FormsModule, RouterTestingModule], - declarations: [DashboardComponent, DashboardHeroComponent], - providers: [ - { - provide: HeroService, - useValue: { - getHeroes: () => of(getTestHeroes()), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [CommonModule, FormsModule, RouterTestingModule], + declarations: [DashboardComponent, DashboardHeroComponent], + providers: [ + { + provide: HeroService, + useValue: { + getHeroes: () => of(getTestHeroes()), }, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - router = TestBed.inject(Router); - spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); - }); - }), - ); + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); + }); + })); it('should not have heroes before ngOnInit', () => { expect(component.heroes.length).toEqual(0); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/demo/async-helper.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/demo/async-helper.spec.ts index 2030df3a72..531263644c 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/demo/async-helper.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/demo/async-helper.spec.ts @@ -23,53 +23,41 @@ describe('Angular async helper', () => { }, 0); }); - it( - 'should run async test with task (setTimeout)', - waitForAsync(() => { - setTimeout(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }, 0); - }), - ); - - it( - 'should run async test with task (clearInterval)', - waitForAsync(() => { - const id = setInterval(() => { - actuallyDone = true; - clearInterval(id); - expect(actuallyDone).toBeTruthy(); - }, 100); - }), - ); - - it( - 'should run async test with successful promise', - waitForAsync(() => { - const p = new Promise((resolve) => { - setTimeout(resolve, 10); - }); - p.then(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }); - }), - ); - - it( - 'should run async test with failed promise', - waitForAsync(() => { - const p = new Promise((resolve, reject) => { - setTimeout(reject, 10); - }); - p.catch(() => { - actuallyDone = true; - // eslint-disable-next-line jest/no-conditional-expect - expect(actuallyDone).toBeTruthy(); - }); - }), - ); + it('should run async test with task (setTimeout)', waitForAsync(() => { + setTimeout(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }, 0); + })); + + it('should run async test with task (clearInterval)', waitForAsync(() => { + const id = setInterval(() => { + actuallyDone = true; + clearInterval(id); + expect(actuallyDone).toBeTruthy(); + }, 100); + })); + + it('should run async test with successful promise', waitForAsync(() => { + const p = new Promise((resolve) => { + setTimeout(resolve, 10); + }); + p.then(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }); + })); + + it('should run async test with failed promise', waitForAsync(() => { + const p = new Promise((resolve, reject) => { + setTimeout(reject, 10); + }); + p.catch(() => { + actuallyDone = true; + // eslint-disable-next-line jest/no-conditional-expect + expect(actuallyDone).toBeTruthy(); + }); + })); it('should run async test with successful delayed Observable', async () => { const source = of(true).pipe(delay(10)); @@ -87,20 +75,17 @@ describe('Angular async helper', () => { .toPromise(); }); - it( - 'should run async test with successful delayed Observable (waitForAsync)', - waitForAsync(() => { - const source = of(true).pipe(delay(10)); - source.subscribe( - () => (actuallyDone = true), - // eslint-disable-next-line jest/no-jasmine-globals - (err) => fail(err), - () => { - expect(actuallyDone).toBeTruthy(); - }, - ); - }), - ); + it('should run async test with successful delayed Observable (waitForAsync)', waitForAsync(() => { + const source = of(true).pipe(delay(10)); + source.subscribe( + () => (actuallyDone = true), + // eslint-disable-next-line jest/no-jasmine-globals + (err) => fail(err), + () => { + expect(actuallyDone).toBeTruthy(); + }, + ); + })); it('should run async test with successful delayed Observable (fakeAsync)', fakeAsync(() => { const source = of(true).pipe(delay(10)); @@ -187,19 +172,16 @@ describe('Angular async helper', () => { callback(); } - it( - 'should wait until promise.then is called', - waitForAsync(() => { - let finished = false; - new Promise((res) => { - jsonp('localhost:8080/jsonp', () => { - finished = true; - res(); - }); - }).then(() => { - expect(finished).toBe(true); + it('should wait until promise.then is called', waitForAsync(() => { + let finished = false; + new Promise((res) => { + jsonp('localhost:8080/jsonp', () => { + finished = true; + res(); }); - }), - ); + }).then(() => { + expect(finished).toBe(true); + }); + })); }); }); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.spec.ts index 3f6cc85226..552785db74 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.spec.ts @@ -19,14 +19,11 @@ describe('demo (no TestBed):', () => { expect(service.getValue()).toBe('real value'); }); - it( - '#getObservableValue should return value from observable', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => { - expect(value).toBe('observable value'); - }); - }), - ); + it('#getObservableValue should return value from observable', waitForAsync(() => { + service.getObservableValue().subscribe((value) => { + expect(value).toBe('observable value'); + }); + })); it('#getPromiseValue should return value from a promise', async () => { await service.getPromiseValue().then((value) => { diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.testbed.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.testbed.spec.ts index 2e011b5f7c..83fd128417 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.testbed.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/demo/demo.testbed.spec.ts @@ -55,28 +55,19 @@ describe('demo (with TestBed):', () => { expect(TestBed.inject(NotProvided, null)).toBeNull(); }); - it( - 'test should wait for ValueService.getPromiseValue', - waitForAsync(() => { - service.getPromiseValue().then((value) => expect(value).toBe('promise value')); - }), - ); + it('test should wait for ValueService.getPromiseValue', waitForAsync(() => { + service.getPromiseValue().then((value) => expect(value).toBe('promise value')); + })); - it( - 'test should wait for ValueService.getObservableValue', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); - }), - ); + it('test should wait for ValueService.getObservableValue', waitForAsync(() => { + service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); + })); - it( - 'test should wait for ValueService.getObservableDelayValue', - waitForAsync(() => { - service.getObservableDelayValue().subscribe((value) => { - expect(value).toBe('observable delay value'); - }); - }), - ); + it('test should wait for ValueService.getObservableDelayValue', waitForAsync(() => { + service.getObservableDelayValue().subscribe((value) => { + expect(value).toBe('observable delay value'); + }); + })); it('should allow the use of fakeAsync', fakeAsync(() => { let value = ''; @@ -141,13 +132,11 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ providers: [ValueService] }); }); - beforeEach( - waitForAsync( - inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then((value) => (serviceValue = value)); - }), - ), - ); + beforeEach(waitForAsync( + inject([ValueService], (service: ValueService) => { + service.getPromiseValue().then((value) => (serviceValue = value)); + }), + )); it('should use asynchronously modified value ... in synchronous test', () => { expect(serviceValue).toBe('promise value'); @@ -155,13 +144,11 @@ describe('demo (with TestBed):', () => { }); describe('TestBed component tests', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [DemoModule], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [DemoModule], + }).compileComponents(); + })); it('should create a component with inline template', () => { const fixture = TestBed.createComponent(Child1Component); @@ -235,38 +222,35 @@ describe('demo (with TestBed):', () => { expect(span.textContent).toMatch(/is on/i); }); - it( - 'should support entering text in input box (ngModel)', - waitForAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; + it('should support entering text in input box (ngModel)', waitForAsync(() => { + const expectedOrigName = 'John'; + const expectedNewName = 'Sally'; - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(InputComponent); + fixture.detectChanges(); - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; + const comp = fixture.componentInstance; + const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - fixture - .whenStable() - .then(() => { - expect(input.value).toBe(expectedOrigName); + fixture + .whenStable() + .then(() => { + expect(input.value).toBe(expectedOrigName); - input.value = expectedNewName; + input.value = expectedNewName; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - input.dispatchEvent(new Event('input')); + input.dispatchEvent(new Event('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName); - }); - }), - ); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.name).toBe(expectedNewName); + }); + })); it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { const expectedOrigName = 'John'; @@ -545,24 +529,21 @@ describe('demo (with TestBed):', () => { expect(child.childValue).toBe('foo'); }); - it( - 'changed child value flows to parent', - waitForAsync(() => { - fixture.detectChanges(); - getChild(); + it('changed child value flows to parent', waitForAsync(() => { + fixture.detectChanges(); + getChild(); - child.childValue = 'bar'; + child.childValue = 'bar'; - return new Promise((resolve) => { - setTimeout(() => resolve(), 0); - }).then(() => { - fixture.detectChanges(); + return new Promise((resolve) => { + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); - expect(child.ngOnChangesCounter).toBe(2); - expect(parent.parentValue).toBe('bar'); - }); - }), - ); + expect(child.ngOnChangesCounter).toBe(2); + expect(parent.parentValue).toBe('bar'); + }); + })); it('clicking "Close Child" triggers child OnDestroy', () => { fixture.detectChanges(); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-detail.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-detail.component.spec.ts index fb95645573..60f7299834 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-detail.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-detail.component.spec.ts @@ -30,41 +30,37 @@ describe('HeroDetailComponent', () => { }); describe('with HeroModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); describe('when navigate to existing hero', () => { let expectedHero: Hero; - beforeEach( - waitForAsync(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -108,19 +104,17 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach( - waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -132,20 +126,18 @@ describe('HeroDetailComponent', () => { }); describe('when navigate to non-existent hero id', () => { - beforeEach( - waitForAsync(() => { - activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should try to navigate back to hero list', () => { expect(page.gotoListSpy.mock.calls.length).toBeTruthy(); @@ -181,46 +173,42 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], + }) + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); - activatedRoute.setParamMap({ id: 99999 }); + activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - heroDetailsService = fixture.debugElement.injector.get( - HeroDetailService, - ) as unknown as HeroDetailServiceMock; + heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); }); - }), - ); + }); + })); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -260,79 +248,69 @@ describe('HeroDetailComponent', () => { }); describe('with FormsModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [FormsModule, RouterTestingModule], - declarations: [HeroDetailComponent, TitleCasePipe], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [FormsModule, RouterTestingModule], + declarations: [HeroDetailComponent, TitleCasePipe], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "formsModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("formsModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); describe('with SharedModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [SharedModule, RouterTestingModule], - declarations: [HeroDetailComponent], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [SharedModule, RouterTestingModule], + declarations: [HeroDetailComponent], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "sharedModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("sharedModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); }); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-list.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-list.component.spec.ts index d7ba271808..bb542e3249 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-list.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/hero/hero-list.component.spec.ts @@ -19,23 +19,21 @@ let fixture: ComponentFixture; let page: Page; describe('HeroListComponent', () => { - beforeEach( - waitForAsync(() => { - const routerSpy = { - navigate: jest.fn(), - }; - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, - ], - }) - .compileComponents() - .then(createComponent); - }), - ); + beforeEach(waitForAsync(() => { + const routerSpy = { + navigate: jest.fn(), + }; + + TestBed.configureTestingModule({ + imports: [HeroModule], + providers: [ + { provide: HeroService, useClass: TestHeroService }, + { provide: Router, useValue: routerSpy }, + ], + }) + .compileComponents() + .then(createComponent); + })); it('should display heroes', () => { expect(page.heroRows.length).toBeGreaterThan(0); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/model/hero.service.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/model/hero.service.spec.ts index 514e5efbae..08f6a1c2fa 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/model/hero.service.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/model/hero.service.spec.ts @@ -20,49 +20,43 @@ describe('HeroesService (with spies)', () => { heroService = new HeroService(httpClient); }); - it( - 'should return expected heroes (HttpClient called once)', - waitForAsync(() => { - const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ]; - - httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - - heroService.getHeroes().subscribe( - (heroes) => { - expect(heroes).toEqual(expectedHeroes); - }, - () => { - throw new Error('Error getting heroes'); - }, - ); - expect(httpClientSpy.get.mock.calls.length).toBe(1); - }), - ); - - it( - 'should return an error when the server returns a 404', - waitForAsync(() => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, - statusText: 'Not Found', - }); - - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + it('should return expected heroes (HttpClient called once)', waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; + + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); + + heroService.getHeroes().subscribe( + (heroes) => { + expect(heroes).toEqual(expectedHeroes); + }, + () => { + throw new Error('Error getting heroes'); + }, + ); + expect(httpClientSpy.get.mock.calls.length).toBe(1); + })); + + it('should return an error when the server returns a 404', waitForAsync(() => { + const errorResponse = new HttpErrorResponse({ + error: 'test 404 error', + status: 404, + statusText: 'Not Found', + }); - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - }), - ); + httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + + heroService.getHeroes().subscribe( + () => { + throw new Error('expected an error, not heroes'); + }, + (error) => { + expect(error.message).toContain('test 404 error'); + }, + ); + })); }); describe('HeroesService (with mocks)', () => { diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/shared/canvas.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/shared/canvas.component.spec.ts index 1a0ed9bbda..b0cb4a5108 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/shared/canvas.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/shared/canvas.component.spec.ts @@ -6,24 +6,22 @@ describe('CanvasComponent', () => { let fixture: ComponentFixture; let component: CanvasComponent; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [CanvasComponent], - }) - .compileComponents() - .then(() => { - (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ - { - source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], - }, - ]; - fixture = TestBed.createComponent(CanvasComponent); - component = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [CanvasComponent], + }) + .compileComponents() + .then(() => { + (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ + { + source: 'HTMLCanvasElement.toBlob', + callbackArgs: [{ size: 200 }], + }, + ]; + fixture = TestBed.createComponent(CanvasComponent); + component = fixture.componentInstance; + }); + })); it('should be able to generate blob data from canvas', fakeAsync(() => { fixture.detectChanges(); diff --git a/examples/example-app-v12-monorepo/projects/app1/src/app/twain/twain.component.spec.ts b/examples/example-app-v12-monorepo/projects/app1/src/app/twain/twain.component.spec.ts index 32c089448d..875641ff8f 100644 --- a/examples/example-app-v12-monorepo/projects/app1/src/app/twain/twain.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app1/src/app/twain/twain.component.spec.ts @@ -21,31 +21,29 @@ describe('TwainComponent', () => { return el ? el.textContent : null; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [TwainComponent], - providers: [ - { - provide: TwainService, - useValue: { - getQuote: jest.fn(), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [TwainComponent], + providers: [ + { + provide: TwainService, + useValue: { + getQuote: jest.fn(), }, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - twainService = TestBed.inject(TwainService); - getQuoteSpy = jest.spyOn(twainService, 'getQuote'); - - getQuoteSpy.mockImplementation(() => of(testQuote)); - }); - }), - ); + }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TwainComponent); + component = fixture.componentInstance; + quoteEl = fixture.nativeElement.querySelector('.twain'); + twainService = TestBed.inject(TwainService); + getQuoteSpy = jest.spyOn(twainService, 'getQuote'); + + getQuoteSpy.mockImplementation(() => of(testQuote)); + }); + })); describe('when test with synchronous observable', () => { it('should not show quote before OnInit', () => { @@ -114,19 +112,16 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it( - 'should show quote after getQuote (waitForAsync)', - waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); + it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe('...'); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -143,18 +138,15 @@ describe('TwainComponent', () => { .toPromise(); }); - it( - 'should show quote after getQuote', - waitForAsync(() => { - fixture.detectChanges(); + it('should show quote after getQuote', waitForAsync(() => { + fixture.detectChanges(); - twainService.getQuote().subscribe(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + twainService.getQuote().subscribe(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should display error when TwainService fails', fakeAsync(() => { getQuoteSpy.mockReturnValue(throwError('TwainService test failure')); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/app-initial.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/app-initial.component.spec.ts index b12363b69d..f13ecfb673 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/app-initial.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/app-initial.component.spec.ts @@ -5,38 +5,27 @@ import { ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app-initial.component'; describe('AppComponent (initial CLI version)', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }), - ); - it( - 'should create the app', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }), - ); - it( - `should have as title 'app'`, - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('app'); - }), - ); - it( - 'should render title', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + })); + it('should create the app', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); + })); }); describe('AppComponent (initial CLI version - as it should be)', () => { diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.router.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.router.spec.ts index 7b549530c3..29dc0fba7d 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.router.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.router.spec.ts @@ -26,14 +26,12 @@ let router: Router; let location: SpyLocation; describe('AppComponent & RouterTestingModule', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [AppModule, RouterTestingModule.withRoutes(routes)], - providers: [{ provide: HeroService, useClass: TestHeroService }], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [AppModule, RouterTestingModule.withRoutes(routes)], + providers: [{ provide: HeroService, useClass: TestHeroService }], + }).compileComponents(); + })); it('should navigate to "Dashboard" immediately', fakeAsync(() => { createComponent(); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.spec.ts index 370cd83a69..7866693a2c 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/app.component.spec.ts @@ -21,59 +21,53 @@ let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent, + RouterLinkDirectiveStub, + BannerStubComponent, + RouterOutletStubComponent, + WelcomeStubComponent, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & AppModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ imports: [AppModule] }) - .overrideModule(AppModule, { - remove: { imports: [AppRoutingModule] }, - add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ imports: [AppModule] }) + .overrideModule(AppModule, { + remove: { imports: [AppRoutingModule] }, + add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/banner/banner-initial.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/banner/banner-initial.component.spec.ts index 0acdb5b29e..b29a8abeff 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/banner/banner-initial.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/banner/banner-initial.component.spec.ts @@ -7,11 +7,9 @@ describe('BannerComponent (initial CLI generated)', () => { let component: BannerComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard-hero.component.spec.ts index 66b0235c1e..1f67b659d6 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard-hero.component.spec.ts @@ -27,11 +27,9 @@ describe('DashboardHeroComponent when tested directly', () => { let heroDe: DebugElement; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); @@ -92,11 +90,9 @@ describe('DashboardHeroComponent when inside a test host', () => { let fixture: ComponentFixture; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(TestHostComponent); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.no-testbed.spec.ts index d04067162f..5ebee4160e 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -28,15 +28,12 @@ describe('DashboardComponent class only', () => { expect(comp.heroes.length).toEqual(0); }); - it( - 'should HAVE heroes after HeroService gets them', - waitForAsync(() => { - comp.ngOnInit(); - heroService.lastHeroesResult?.subscribe(() => { - expect(comp.heroes.length).toBeGreaterThan(0); - }); - }), - ); + it('should HAVE heroes after HeroService gets them', waitForAsync(() => { + comp.ngOnInit(); + heroService.lastHeroesResult?.subscribe(() => { + expect(comp.heroes.length).toBeGreaterThan(0); + }); + })); it('should tell ROUTER to navigate by hero id', () => { const hero: Hero = { id: 42, name: 'Abbracadabra' }; diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.spec.ts index 301bbd6d20..4ac218a9a0 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/dashboard/dashboard.component.spec.ts @@ -21,42 +21,38 @@ describe('DashboardComponent (deep)', () => { let router: Router; let spy: ReturnType; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [CommonModule, FormsModule, RouterTestingModule], - declarations: [DashboardComponent, DashboardHeroComponent], - providers: [ - { - provide: HeroService, - useValue: { - getHeroes: () => of(getTestHeroes()), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [CommonModule, FormsModule, RouterTestingModule], + declarations: [DashboardComponent, DashboardHeroComponent], + providers: [ + { + provide: HeroService, + useValue: { + getHeroes: () => of(getTestHeroes()), }, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - router = TestBed.inject(Router); - spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); - }); - }), - ); + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); + }); + })); it('should not have heroes before ngOnInit', () => { expect(component.heroes.length).toEqual(0); }); describe('after get dashboard heroes (deep)', () => { - beforeEach( - waitForAsync(() => { - fixture.detectChanges(); - fixture.whenStable().then(() => fixture.detectChanges()); - }), - ); + beforeEach(waitForAsync(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => fixture.detectChanges()); + })); it('should have heroes', () => { expect(component.heroes.length).toBeGreaterThan(0); @@ -79,12 +75,10 @@ describe('DashboardComponent (deep)', () => { }); describe('after get dashboard heroes (shallow)', () => { - beforeEach( - waitForAsync(() => { - fixture.detectChanges(); - fixture.whenStable().then(() => fixture.detectChanges()); - }), - ); + beforeEach(waitForAsync(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => fixture.detectChanges()); + })); it('should have heroes', () => { expect(component.heroes.length).toBeGreaterThan(0); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/demo/async-helper.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/demo/async-helper.spec.ts index 2030df3a72..531263644c 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/demo/async-helper.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/demo/async-helper.spec.ts @@ -23,53 +23,41 @@ describe('Angular async helper', () => { }, 0); }); - it( - 'should run async test with task (setTimeout)', - waitForAsync(() => { - setTimeout(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }, 0); - }), - ); - - it( - 'should run async test with task (clearInterval)', - waitForAsync(() => { - const id = setInterval(() => { - actuallyDone = true; - clearInterval(id); - expect(actuallyDone).toBeTruthy(); - }, 100); - }), - ); - - it( - 'should run async test with successful promise', - waitForAsync(() => { - const p = new Promise((resolve) => { - setTimeout(resolve, 10); - }); - p.then(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }); - }), - ); - - it( - 'should run async test with failed promise', - waitForAsync(() => { - const p = new Promise((resolve, reject) => { - setTimeout(reject, 10); - }); - p.catch(() => { - actuallyDone = true; - // eslint-disable-next-line jest/no-conditional-expect - expect(actuallyDone).toBeTruthy(); - }); - }), - ); + it('should run async test with task (setTimeout)', waitForAsync(() => { + setTimeout(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }, 0); + })); + + it('should run async test with task (clearInterval)', waitForAsync(() => { + const id = setInterval(() => { + actuallyDone = true; + clearInterval(id); + expect(actuallyDone).toBeTruthy(); + }, 100); + })); + + it('should run async test with successful promise', waitForAsync(() => { + const p = new Promise((resolve) => { + setTimeout(resolve, 10); + }); + p.then(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }); + })); + + it('should run async test with failed promise', waitForAsync(() => { + const p = new Promise((resolve, reject) => { + setTimeout(reject, 10); + }); + p.catch(() => { + actuallyDone = true; + // eslint-disable-next-line jest/no-conditional-expect + expect(actuallyDone).toBeTruthy(); + }); + })); it('should run async test with successful delayed Observable', async () => { const source = of(true).pipe(delay(10)); @@ -87,20 +75,17 @@ describe('Angular async helper', () => { .toPromise(); }); - it( - 'should run async test with successful delayed Observable (waitForAsync)', - waitForAsync(() => { - const source = of(true).pipe(delay(10)); - source.subscribe( - () => (actuallyDone = true), - // eslint-disable-next-line jest/no-jasmine-globals - (err) => fail(err), - () => { - expect(actuallyDone).toBeTruthy(); - }, - ); - }), - ); + it('should run async test with successful delayed Observable (waitForAsync)', waitForAsync(() => { + const source = of(true).pipe(delay(10)); + source.subscribe( + () => (actuallyDone = true), + // eslint-disable-next-line jest/no-jasmine-globals + (err) => fail(err), + () => { + expect(actuallyDone).toBeTruthy(); + }, + ); + })); it('should run async test with successful delayed Observable (fakeAsync)', fakeAsync(() => { const source = of(true).pipe(delay(10)); @@ -187,19 +172,16 @@ describe('Angular async helper', () => { callback(); } - it( - 'should wait until promise.then is called', - waitForAsync(() => { - let finished = false; - new Promise((res) => { - jsonp('localhost:8080/jsonp', () => { - finished = true; - res(); - }); - }).then(() => { - expect(finished).toBe(true); + it('should wait until promise.then is called', waitForAsync(() => { + let finished = false; + new Promise((res) => { + jsonp('localhost:8080/jsonp', () => { + finished = true; + res(); }); - }), - ); + }).then(() => { + expect(finished).toBe(true); + }); + })); }); }); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.spec.ts index 3f6cc85226..552785db74 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.spec.ts @@ -19,14 +19,11 @@ describe('demo (no TestBed):', () => { expect(service.getValue()).toBe('real value'); }); - it( - '#getObservableValue should return value from observable', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => { - expect(value).toBe('observable value'); - }); - }), - ); + it('#getObservableValue should return value from observable', waitForAsync(() => { + service.getObservableValue().subscribe((value) => { + expect(value).toBe('observable value'); + }); + })); it('#getPromiseValue should return value from a promise', async () => { await service.getPromiseValue().then((value) => { diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.testbed.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.testbed.spec.ts index 2e011b5f7c..83fd128417 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.testbed.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/demo/demo.testbed.spec.ts @@ -55,28 +55,19 @@ describe('demo (with TestBed):', () => { expect(TestBed.inject(NotProvided, null)).toBeNull(); }); - it( - 'test should wait for ValueService.getPromiseValue', - waitForAsync(() => { - service.getPromiseValue().then((value) => expect(value).toBe('promise value')); - }), - ); + it('test should wait for ValueService.getPromiseValue', waitForAsync(() => { + service.getPromiseValue().then((value) => expect(value).toBe('promise value')); + })); - it( - 'test should wait for ValueService.getObservableValue', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); - }), - ); + it('test should wait for ValueService.getObservableValue', waitForAsync(() => { + service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); + })); - it( - 'test should wait for ValueService.getObservableDelayValue', - waitForAsync(() => { - service.getObservableDelayValue().subscribe((value) => { - expect(value).toBe('observable delay value'); - }); - }), - ); + it('test should wait for ValueService.getObservableDelayValue', waitForAsync(() => { + service.getObservableDelayValue().subscribe((value) => { + expect(value).toBe('observable delay value'); + }); + })); it('should allow the use of fakeAsync', fakeAsync(() => { let value = ''; @@ -141,13 +132,11 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ providers: [ValueService] }); }); - beforeEach( - waitForAsync( - inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then((value) => (serviceValue = value)); - }), - ), - ); + beforeEach(waitForAsync( + inject([ValueService], (service: ValueService) => { + service.getPromiseValue().then((value) => (serviceValue = value)); + }), + )); it('should use asynchronously modified value ... in synchronous test', () => { expect(serviceValue).toBe('promise value'); @@ -155,13 +144,11 @@ describe('demo (with TestBed):', () => { }); describe('TestBed component tests', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [DemoModule], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [DemoModule], + }).compileComponents(); + })); it('should create a component with inline template', () => { const fixture = TestBed.createComponent(Child1Component); @@ -235,38 +222,35 @@ describe('demo (with TestBed):', () => { expect(span.textContent).toMatch(/is on/i); }); - it( - 'should support entering text in input box (ngModel)', - waitForAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; + it('should support entering text in input box (ngModel)', waitForAsync(() => { + const expectedOrigName = 'John'; + const expectedNewName = 'Sally'; - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(InputComponent); + fixture.detectChanges(); - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; + const comp = fixture.componentInstance; + const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - fixture - .whenStable() - .then(() => { - expect(input.value).toBe(expectedOrigName); + fixture + .whenStable() + .then(() => { + expect(input.value).toBe(expectedOrigName); - input.value = expectedNewName; + input.value = expectedNewName; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - input.dispatchEvent(new Event('input')); + input.dispatchEvent(new Event('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName); - }); - }), - ); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.name).toBe(expectedNewName); + }); + })); it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { const expectedOrigName = 'John'; @@ -545,24 +529,21 @@ describe('demo (with TestBed):', () => { expect(child.childValue).toBe('foo'); }); - it( - 'changed child value flows to parent', - waitForAsync(() => { - fixture.detectChanges(); - getChild(); + it('changed child value flows to parent', waitForAsync(() => { + fixture.detectChanges(); + getChild(); - child.childValue = 'bar'; + child.childValue = 'bar'; - return new Promise((resolve) => { - setTimeout(() => resolve(), 0); - }).then(() => { - fixture.detectChanges(); + return new Promise((resolve) => { + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); - expect(child.ngOnChangesCounter).toBe(2); - expect(parent.parentValue).toBe('bar'); - }); - }), - ); + expect(child.ngOnChangesCounter).toBe(2); + expect(parent.parentValue).toBe('bar'); + }); + })); it('clicking "Close Child" triggers child OnDestroy', () => { fixture.detectChanges(); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-detail.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-detail.component.spec.ts index fb95645573..60f7299834 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-detail.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-detail.component.spec.ts @@ -30,41 +30,37 @@ describe('HeroDetailComponent', () => { }); describe('with HeroModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); describe('when navigate to existing hero', () => { let expectedHero: Hero; - beforeEach( - waitForAsync(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -108,19 +104,17 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach( - waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -132,20 +126,18 @@ describe('HeroDetailComponent', () => { }); describe('when navigate to non-existent hero id', () => { - beforeEach( - waitForAsync(() => { - activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should try to navigate back to hero list', () => { expect(page.gotoListSpy.mock.calls.length).toBeTruthy(); @@ -181,46 +173,42 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], + }) + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); - activatedRoute.setParamMap({ id: 99999 }); + activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - heroDetailsService = fixture.debugElement.injector.get( - HeroDetailService, - ) as unknown as HeroDetailServiceMock; + heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); }); - }), - ); + }); + })); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -260,79 +248,69 @@ describe('HeroDetailComponent', () => { }); describe('with FormsModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [FormsModule, RouterTestingModule], - declarations: [HeroDetailComponent, TitleCasePipe], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [FormsModule, RouterTestingModule], + declarations: [HeroDetailComponent, TitleCasePipe], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "formsModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("formsModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); describe('with SharedModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [SharedModule, RouterTestingModule], - declarations: [HeroDetailComponent], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [SharedModule, RouterTestingModule], + declarations: [HeroDetailComponent], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "sharedModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("sharedModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); }); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-list.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-list.component.spec.ts index d7ba271808..bb542e3249 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-list.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/hero/hero-list.component.spec.ts @@ -19,23 +19,21 @@ let fixture: ComponentFixture; let page: Page; describe('HeroListComponent', () => { - beforeEach( - waitForAsync(() => { - const routerSpy = { - navigate: jest.fn(), - }; - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, - ], - }) - .compileComponents() - .then(createComponent); - }), - ); + beforeEach(waitForAsync(() => { + const routerSpy = { + navigate: jest.fn(), + }; + + TestBed.configureTestingModule({ + imports: [HeroModule], + providers: [ + { provide: HeroService, useClass: TestHeroService }, + { provide: Router, useValue: routerSpy }, + ], + }) + .compileComponents() + .then(createComponent); + })); it('should display heroes', () => { expect(page.heroRows.length).toBeGreaterThan(0); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/model/hero.service.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/model/hero.service.spec.ts index 514e5efbae..08f6a1c2fa 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/model/hero.service.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/model/hero.service.spec.ts @@ -20,49 +20,43 @@ describe('HeroesService (with spies)', () => { heroService = new HeroService(httpClient); }); - it( - 'should return expected heroes (HttpClient called once)', - waitForAsync(() => { - const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ]; - - httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - - heroService.getHeroes().subscribe( - (heroes) => { - expect(heroes).toEqual(expectedHeroes); - }, - () => { - throw new Error('Error getting heroes'); - }, - ); - expect(httpClientSpy.get.mock.calls.length).toBe(1); - }), - ); - - it( - 'should return an error when the server returns a 404', - waitForAsync(() => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, - statusText: 'Not Found', - }); - - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + it('should return expected heroes (HttpClient called once)', waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; + + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); + + heroService.getHeroes().subscribe( + (heroes) => { + expect(heroes).toEqual(expectedHeroes); + }, + () => { + throw new Error('Error getting heroes'); + }, + ); + expect(httpClientSpy.get.mock.calls.length).toBe(1); + })); + + it('should return an error when the server returns a 404', waitForAsync(() => { + const errorResponse = new HttpErrorResponse({ + error: 'test 404 error', + status: 404, + statusText: 'Not Found', + }); - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - }), - ); + httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + + heroService.getHeroes().subscribe( + () => { + throw new Error('expected an error, not heroes'); + }, + (error) => { + expect(error.message).toContain('test 404 error'); + }, + ); + })); }); describe('HeroesService (with mocks)', () => { diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/shared/canvas.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/shared/canvas.component.spec.ts index 1a0ed9bbda..b0cb4a5108 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/shared/canvas.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/shared/canvas.component.spec.ts @@ -6,24 +6,22 @@ describe('CanvasComponent', () => { let fixture: ComponentFixture; let component: CanvasComponent; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [CanvasComponent], - }) - .compileComponents() - .then(() => { - (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ - { - source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], - }, - ]; - fixture = TestBed.createComponent(CanvasComponent); - component = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [CanvasComponent], + }) + .compileComponents() + .then(() => { + (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ + { + source: 'HTMLCanvasElement.toBlob', + callbackArgs: [{ size: 200 }], + }, + ]; + fixture = TestBed.createComponent(CanvasComponent); + component = fixture.componentInstance; + }); + })); it('should be able to generate blob data from canvas', fakeAsync(() => { fixture.detectChanges(); diff --git a/examples/example-app-v12-monorepo/projects/app2/src/app/twain/twain.component.spec.ts b/examples/example-app-v12-monorepo/projects/app2/src/app/twain/twain.component.spec.ts index 32c089448d..875641ff8f 100644 --- a/examples/example-app-v12-monorepo/projects/app2/src/app/twain/twain.component.spec.ts +++ b/examples/example-app-v12-monorepo/projects/app2/src/app/twain/twain.component.spec.ts @@ -21,31 +21,29 @@ describe('TwainComponent', () => { return el ? el.textContent : null; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [TwainComponent], - providers: [ - { - provide: TwainService, - useValue: { - getQuote: jest.fn(), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [TwainComponent], + providers: [ + { + provide: TwainService, + useValue: { + getQuote: jest.fn(), }, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - twainService = TestBed.inject(TwainService); - getQuoteSpy = jest.spyOn(twainService, 'getQuote'); - - getQuoteSpy.mockImplementation(() => of(testQuote)); - }); - }), - ); + }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TwainComponent); + component = fixture.componentInstance; + quoteEl = fixture.nativeElement.querySelector('.twain'); + twainService = TestBed.inject(TwainService); + getQuoteSpy = jest.spyOn(twainService, 'getQuote'); + + getQuoteSpy.mockImplementation(() => of(testQuote)); + }); + })); describe('when test with synchronous observable', () => { it('should not show quote before OnInit', () => { @@ -114,19 +112,16 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it( - 'should show quote after getQuote (waitForAsync)', - waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); + it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe('...'); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -143,18 +138,15 @@ describe('TwainComponent', () => { .toPromise(); }); - it( - 'should show quote after getQuote', - waitForAsync(() => { - fixture.detectChanges(); + it('should show quote after getQuote', waitForAsync(() => { + fixture.detectChanges(); - twainService.getQuote().subscribe(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + twainService.getQuote().subscribe(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should display error when TwainService fails', fakeAsync(() => { getQuoteSpy.mockReturnValue(throwError('TwainService test failure')); diff --git a/examples/example-app-v12/src/app/app-initial.component.spec.ts b/examples/example-app-v12/src/app/app-initial.component.spec.ts index b12363b69d..f13ecfb673 100644 --- a/examples/example-app-v12/src/app/app-initial.component.spec.ts +++ b/examples/example-app-v12/src/app/app-initial.component.spec.ts @@ -5,38 +5,27 @@ import { ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app-initial.component'; describe('AppComponent (initial CLI version)', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }), - ); - it( - 'should create the app', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }), - ); - it( - `should have as title 'app'`, - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('app'); - }), - ); - it( - 'should render title', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + })); + it('should create the app', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); + })); }); describe('AppComponent (initial CLI version - as it should be)', () => { diff --git a/examples/example-app-v12/src/app/app.component.router.spec.ts b/examples/example-app-v12/src/app/app.component.router.spec.ts index 7b549530c3..29dc0fba7d 100644 --- a/examples/example-app-v12/src/app/app.component.router.spec.ts +++ b/examples/example-app-v12/src/app/app.component.router.spec.ts @@ -26,14 +26,12 @@ let router: Router; let location: SpyLocation; describe('AppComponent & RouterTestingModule', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [AppModule, RouterTestingModule.withRoutes(routes)], - providers: [{ provide: HeroService, useClass: TestHeroService }], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [AppModule, RouterTestingModule.withRoutes(routes)], + providers: [{ provide: HeroService, useClass: TestHeroService }], + }).compileComponents(); + })); it('should navigate to "Dashboard" immediately', fakeAsync(() => { createComponent(); diff --git a/examples/example-app-v12/src/app/app.component.spec.ts b/examples/example-app-v12/src/app/app.component.spec.ts index 370cd83a69..7866693a2c 100644 --- a/examples/example-app-v12/src/app/app.component.spec.ts +++ b/examples/example-app-v12/src/app/app.component.spec.ts @@ -21,59 +21,53 @@ let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent, + RouterLinkDirectiveStub, + BannerStubComponent, + RouterOutletStubComponent, + WelcomeStubComponent, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & AppModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ imports: [AppModule] }) - .overrideModule(AppModule, { - remove: { imports: [AppRoutingModule] }, - add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ imports: [AppModule] }) + .overrideModule(AppModule, { + remove: { imports: [AppRoutingModule] }, + add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); diff --git a/examples/example-app-v12/src/app/banner/banner-initial.component.spec.ts b/examples/example-app-v12/src/app/banner/banner-initial.component.spec.ts index 0acdb5b29e..b29a8abeff 100644 --- a/examples/example-app-v12/src/app/banner/banner-initial.component.spec.ts +++ b/examples/example-app-v12/src/app/banner/banner-initial.component.spec.ts @@ -7,11 +7,9 @@ describe('BannerComponent (initial CLI generated)', () => { let component: BannerComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); diff --git a/examples/example-app-v12/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-v12/src/app/dashboard/dashboard-hero.component.spec.ts index 66b0235c1e..1f67b659d6 100644 --- a/examples/example-app-v12/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/examples/example-app-v12/src/app/dashboard/dashboard-hero.component.spec.ts @@ -27,11 +27,9 @@ describe('DashboardHeroComponent when tested directly', () => { let heroDe: DebugElement; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); @@ -92,11 +90,9 @@ describe('DashboardHeroComponent when inside a test host', () => { let fixture: ComponentFixture; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(TestHostComponent); diff --git a/examples/example-app-v12/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/examples/example-app-v12/src/app/dashboard/dashboard.component.no-testbed.spec.ts index d04067162f..5ebee4160e 100644 --- a/examples/example-app-v12/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/examples/example-app-v12/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -28,15 +28,12 @@ describe('DashboardComponent class only', () => { expect(comp.heroes.length).toEqual(0); }); - it( - 'should HAVE heroes after HeroService gets them', - waitForAsync(() => { - comp.ngOnInit(); - heroService.lastHeroesResult?.subscribe(() => { - expect(comp.heroes.length).toBeGreaterThan(0); - }); - }), - ); + it('should HAVE heroes after HeroService gets them', waitForAsync(() => { + comp.ngOnInit(); + heroService.lastHeroesResult?.subscribe(() => { + expect(comp.heroes.length).toBeGreaterThan(0); + }); + })); it('should tell ROUTER to navigate by hero id', () => { const hero: Hero = { id: 42, name: 'Abbracadabra' }; diff --git a/examples/example-app-v12/src/app/dashboard/dashboard.component.spec.ts b/examples/example-app-v12/src/app/dashboard/dashboard.component.spec.ts index 4b7a98c6ac..179087b628 100644 --- a/examples/example-app-v12/src/app/dashboard/dashboard.component.spec.ts +++ b/examples/example-app-v12/src/app/dashboard/dashboard.component.spec.ts @@ -21,30 +21,28 @@ describe('DashboardComponent (deep)', () => { let router: Router; let spy: ReturnType; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [CommonModule, FormsModule, RouterTestingModule], - declarations: [DashboardComponent, DashboardHeroComponent], - providers: [ - { - provide: HeroService, - useValue: { - getHeroes: () => of(getTestHeroes()), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [CommonModule, FormsModule, RouterTestingModule], + declarations: [DashboardComponent, DashboardHeroComponent], + providers: [ + { + provide: HeroService, + useValue: { + getHeroes: () => of(getTestHeroes()), }, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - router = TestBed.inject(Router); - spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); - }); - }), - ); + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); + }); + })); it('should not have heroes before ngOnInit', () => { expect(component.heroes.length).toEqual(0); diff --git a/examples/example-app-v12/src/app/demo/async-helper.spec.ts b/examples/example-app-v12/src/app/demo/async-helper.spec.ts index 2030df3a72..531263644c 100644 --- a/examples/example-app-v12/src/app/demo/async-helper.spec.ts +++ b/examples/example-app-v12/src/app/demo/async-helper.spec.ts @@ -23,53 +23,41 @@ describe('Angular async helper', () => { }, 0); }); - it( - 'should run async test with task (setTimeout)', - waitForAsync(() => { - setTimeout(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }, 0); - }), - ); - - it( - 'should run async test with task (clearInterval)', - waitForAsync(() => { - const id = setInterval(() => { - actuallyDone = true; - clearInterval(id); - expect(actuallyDone).toBeTruthy(); - }, 100); - }), - ); - - it( - 'should run async test with successful promise', - waitForAsync(() => { - const p = new Promise((resolve) => { - setTimeout(resolve, 10); - }); - p.then(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }); - }), - ); - - it( - 'should run async test with failed promise', - waitForAsync(() => { - const p = new Promise((resolve, reject) => { - setTimeout(reject, 10); - }); - p.catch(() => { - actuallyDone = true; - // eslint-disable-next-line jest/no-conditional-expect - expect(actuallyDone).toBeTruthy(); - }); - }), - ); + it('should run async test with task (setTimeout)', waitForAsync(() => { + setTimeout(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }, 0); + })); + + it('should run async test with task (clearInterval)', waitForAsync(() => { + const id = setInterval(() => { + actuallyDone = true; + clearInterval(id); + expect(actuallyDone).toBeTruthy(); + }, 100); + })); + + it('should run async test with successful promise', waitForAsync(() => { + const p = new Promise((resolve) => { + setTimeout(resolve, 10); + }); + p.then(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }); + })); + + it('should run async test with failed promise', waitForAsync(() => { + const p = new Promise((resolve, reject) => { + setTimeout(reject, 10); + }); + p.catch(() => { + actuallyDone = true; + // eslint-disable-next-line jest/no-conditional-expect + expect(actuallyDone).toBeTruthy(); + }); + })); it('should run async test with successful delayed Observable', async () => { const source = of(true).pipe(delay(10)); @@ -87,20 +75,17 @@ describe('Angular async helper', () => { .toPromise(); }); - it( - 'should run async test with successful delayed Observable (waitForAsync)', - waitForAsync(() => { - const source = of(true).pipe(delay(10)); - source.subscribe( - () => (actuallyDone = true), - // eslint-disable-next-line jest/no-jasmine-globals - (err) => fail(err), - () => { - expect(actuallyDone).toBeTruthy(); - }, - ); - }), - ); + it('should run async test with successful delayed Observable (waitForAsync)', waitForAsync(() => { + const source = of(true).pipe(delay(10)); + source.subscribe( + () => (actuallyDone = true), + // eslint-disable-next-line jest/no-jasmine-globals + (err) => fail(err), + () => { + expect(actuallyDone).toBeTruthy(); + }, + ); + })); it('should run async test with successful delayed Observable (fakeAsync)', fakeAsync(() => { const source = of(true).pipe(delay(10)); @@ -187,19 +172,16 @@ describe('Angular async helper', () => { callback(); } - it( - 'should wait until promise.then is called', - waitForAsync(() => { - let finished = false; - new Promise((res) => { - jsonp('localhost:8080/jsonp', () => { - finished = true; - res(); - }); - }).then(() => { - expect(finished).toBe(true); + it('should wait until promise.then is called', waitForAsync(() => { + let finished = false; + new Promise((res) => { + jsonp('localhost:8080/jsonp', () => { + finished = true; + res(); }); - }), - ); + }).then(() => { + expect(finished).toBe(true); + }); + })); }); }); diff --git a/examples/example-app-v12/src/app/demo/demo.spec.ts b/examples/example-app-v12/src/app/demo/demo.spec.ts index 3f6cc85226..552785db74 100644 --- a/examples/example-app-v12/src/app/demo/demo.spec.ts +++ b/examples/example-app-v12/src/app/demo/demo.spec.ts @@ -19,14 +19,11 @@ describe('demo (no TestBed):', () => { expect(service.getValue()).toBe('real value'); }); - it( - '#getObservableValue should return value from observable', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => { - expect(value).toBe('observable value'); - }); - }), - ); + it('#getObservableValue should return value from observable', waitForAsync(() => { + service.getObservableValue().subscribe((value) => { + expect(value).toBe('observable value'); + }); + })); it('#getPromiseValue should return value from a promise', async () => { await service.getPromiseValue().then((value) => { diff --git a/examples/example-app-v12/src/app/demo/demo.testbed.spec.ts b/examples/example-app-v12/src/app/demo/demo.testbed.spec.ts index 2e011b5f7c..83fd128417 100644 --- a/examples/example-app-v12/src/app/demo/demo.testbed.spec.ts +++ b/examples/example-app-v12/src/app/demo/demo.testbed.spec.ts @@ -55,28 +55,19 @@ describe('demo (with TestBed):', () => { expect(TestBed.inject(NotProvided, null)).toBeNull(); }); - it( - 'test should wait for ValueService.getPromiseValue', - waitForAsync(() => { - service.getPromiseValue().then((value) => expect(value).toBe('promise value')); - }), - ); + it('test should wait for ValueService.getPromiseValue', waitForAsync(() => { + service.getPromiseValue().then((value) => expect(value).toBe('promise value')); + })); - it( - 'test should wait for ValueService.getObservableValue', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); - }), - ); + it('test should wait for ValueService.getObservableValue', waitForAsync(() => { + service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); + })); - it( - 'test should wait for ValueService.getObservableDelayValue', - waitForAsync(() => { - service.getObservableDelayValue().subscribe((value) => { - expect(value).toBe('observable delay value'); - }); - }), - ); + it('test should wait for ValueService.getObservableDelayValue', waitForAsync(() => { + service.getObservableDelayValue().subscribe((value) => { + expect(value).toBe('observable delay value'); + }); + })); it('should allow the use of fakeAsync', fakeAsync(() => { let value = ''; @@ -141,13 +132,11 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ providers: [ValueService] }); }); - beforeEach( - waitForAsync( - inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then((value) => (serviceValue = value)); - }), - ), - ); + beforeEach(waitForAsync( + inject([ValueService], (service: ValueService) => { + service.getPromiseValue().then((value) => (serviceValue = value)); + }), + )); it('should use asynchronously modified value ... in synchronous test', () => { expect(serviceValue).toBe('promise value'); @@ -155,13 +144,11 @@ describe('demo (with TestBed):', () => { }); describe('TestBed component tests', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [DemoModule], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [DemoModule], + }).compileComponents(); + })); it('should create a component with inline template', () => { const fixture = TestBed.createComponent(Child1Component); @@ -235,38 +222,35 @@ describe('demo (with TestBed):', () => { expect(span.textContent).toMatch(/is on/i); }); - it( - 'should support entering text in input box (ngModel)', - waitForAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; + it('should support entering text in input box (ngModel)', waitForAsync(() => { + const expectedOrigName = 'John'; + const expectedNewName = 'Sally'; - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(InputComponent); + fixture.detectChanges(); - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; + const comp = fixture.componentInstance; + const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - fixture - .whenStable() - .then(() => { - expect(input.value).toBe(expectedOrigName); + fixture + .whenStable() + .then(() => { + expect(input.value).toBe(expectedOrigName); - input.value = expectedNewName; + input.value = expectedNewName; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - input.dispatchEvent(new Event('input')); + input.dispatchEvent(new Event('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName); - }); - }), - ); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.name).toBe(expectedNewName); + }); + })); it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { const expectedOrigName = 'John'; @@ -545,24 +529,21 @@ describe('demo (with TestBed):', () => { expect(child.childValue).toBe('foo'); }); - it( - 'changed child value flows to parent', - waitForAsync(() => { - fixture.detectChanges(); - getChild(); + it('changed child value flows to parent', waitForAsync(() => { + fixture.detectChanges(); + getChild(); - child.childValue = 'bar'; + child.childValue = 'bar'; - return new Promise((resolve) => { - setTimeout(() => resolve(), 0); - }).then(() => { - fixture.detectChanges(); + return new Promise((resolve) => { + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); - expect(child.ngOnChangesCounter).toBe(2); - expect(parent.parentValue).toBe('bar'); - }); - }), - ); + expect(child.ngOnChangesCounter).toBe(2); + expect(parent.parentValue).toBe('bar'); + }); + })); it('clicking "Close Child" triggers child OnDestroy', () => { fixture.detectChanges(); diff --git a/examples/example-app-v12/src/app/hero/hero-detail.component.spec.ts b/examples/example-app-v12/src/app/hero/hero-detail.component.spec.ts index fb95645573..60f7299834 100644 --- a/examples/example-app-v12/src/app/hero/hero-detail.component.spec.ts +++ b/examples/example-app-v12/src/app/hero/hero-detail.component.spec.ts @@ -30,41 +30,37 @@ describe('HeroDetailComponent', () => { }); describe('with HeroModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); describe('when navigate to existing hero', () => { let expectedHero: Hero; - beforeEach( - waitForAsync(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -108,19 +104,17 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach( - waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -132,20 +126,18 @@ describe('HeroDetailComponent', () => { }); describe('when navigate to non-existent hero id', () => { - beforeEach( - waitForAsync(() => { - activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should try to navigate back to hero list', () => { expect(page.gotoListSpy.mock.calls.length).toBeTruthy(); @@ -181,46 +173,42 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], + }) + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); - activatedRoute.setParamMap({ id: 99999 }); + activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - heroDetailsService = fixture.debugElement.injector.get( - HeroDetailService, - ) as unknown as HeroDetailServiceMock; + heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); }); - }), - ); + }); + })); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -260,79 +248,69 @@ describe('HeroDetailComponent', () => { }); describe('with FormsModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [FormsModule, RouterTestingModule], - declarations: [HeroDetailComponent, TitleCasePipe], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [FormsModule, RouterTestingModule], + declarations: [HeroDetailComponent, TitleCasePipe], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "formsModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("formsModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); describe('with SharedModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [SharedModule, RouterTestingModule], - declarations: [HeroDetailComponent], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [SharedModule, RouterTestingModule], + declarations: [HeroDetailComponent], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "sharedModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("sharedModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); }); diff --git a/examples/example-app-v12/src/app/hero/hero-list.component.spec.ts b/examples/example-app-v12/src/app/hero/hero-list.component.spec.ts index d7ba271808..bb542e3249 100644 --- a/examples/example-app-v12/src/app/hero/hero-list.component.spec.ts +++ b/examples/example-app-v12/src/app/hero/hero-list.component.spec.ts @@ -19,23 +19,21 @@ let fixture: ComponentFixture; let page: Page; describe('HeroListComponent', () => { - beforeEach( - waitForAsync(() => { - const routerSpy = { - navigate: jest.fn(), - }; - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, - ], - }) - .compileComponents() - .then(createComponent); - }), - ); + beforeEach(waitForAsync(() => { + const routerSpy = { + navigate: jest.fn(), + }; + + TestBed.configureTestingModule({ + imports: [HeroModule], + providers: [ + { provide: HeroService, useClass: TestHeroService }, + { provide: Router, useValue: routerSpy }, + ], + }) + .compileComponents() + .then(createComponent); + })); it('should display heroes', () => { expect(page.heroRows.length).toBeGreaterThan(0); diff --git a/examples/example-app-v12/src/app/model/hero.service.spec.ts b/examples/example-app-v12/src/app/model/hero.service.spec.ts index 514e5efbae..08f6a1c2fa 100644 --- a/examples/example-app-v12/src/app/model/hero.service.spec.ts +++ b/examples/example-app-v12/src/app/model/hero.service.spec.ts @@ -20,49 +20,43 @@ describe('HeroesService (with spies)', () => { heroService = new HeroService(httpClient); }); - it( - 'should return expected heroes (HttpClient called once)', - waitForAsync(() => { - const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ]; - - httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - - heroService.getHeroes().subscribe( - (heroes) => { - expect(heroes).toEqual(expectedHeroes); - }, - () => { - throw new Error('Error getting heroes'); - }, - ); - expect(httpClientSpy.get.mock.calls.length).toBe(1); - }), - ); - - it( - 'should return an error when the server returns a 404', - waitForAsync(() => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, - statusText: 'Not Found', - }); - - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + it('should return expected heroes (HttpClient called once)', waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; + + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); + + heroService.getHeroes().subscribe( + (heroes) => { + expect(heroes).toEqual(expectedHeroes); + }, + () => { + throw new Error('Error getting heroes'); + }, + ); + expect(httpClientSpy.get.mock.calls.length).toBe(1); + })); + + it('should return an error when the server returns a 404', waitForAsync(() => { + const errorResponse = new HttpErrorResponse({ + error: 'test 404 error', + status: 404, + statusText: 'Not Found', + }); - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - }), - ); + httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + + heroService.getHeroes().subscribe( + () => { + throw new Error('expected an error, not heroes'); + }, + (error) => { + expect(error.message).toContain('test 404 error'); + }, + ); + })); }); describe('HeroesService (with mocks)', () => { diff --git a/examples/example-app-v12/src/app/shared/canvas.component.spec.ts b/examples/example-app-v12/src/app/shared/canvas.component.spec.ts index 1a0ed9bbda..b0cb4a5108 100644 --- a/examples/example-app-v12/src/app/shared/canvas.component.spec.ts +++ b/examples/example-app-v12/src/app/shared/canvas.component.spec.ts @@ -6,24 +6,22 @@ describe('CanvasComponent', () => { let fixture: ComponentFixture; let component: CanvasComponent; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [CanvasComponent], - }) - .compileComponents() - .then(() => { - (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ - { - source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], - }, - ]; - fixture = TestBed.createComponent(CanvasComponent); - component = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [CanvasComponent], + }) + .compileComponents() + .then(() => { + (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ + { + source: 'HTMLCanvasElement.toBlob', + callbackArgs: [{ size: 200 }], + }, + ]; + fixture = TestBed.createComponent(CanvasComponent); + component = fixture.componentInstance; + }); + })); it('should be able to generate blob data from canvas', fakeAsync(() => { fixture.detectChanges(); diff --git a/examples/example-app-v12/src/app/twain/twain.component.spec.ts b/examples/example-app-v12/src/app/twain/twain.component.spec.ts index 32c089448d..875641ff8f 100644 --- a/examples/example-app-v12/src/app/twain/twain.component.spec.ts +++ b/examples/example-app-v12/src/app/twain/twain.component.spec.ts @@ -21,31 +21,29 @@ describe('TwainComponent', () => { return el ? el.textContent : null; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [TwainComponent], - providers: [ - { - provide: TwainService, - useValue: { - getQuote: jest.fn(), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [TwainComponent], + providers: [ + { + provide: TwainService, + useValue: { + getQuote: jest.fn(), }, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - twainService = TestBed.inject(TwainService); - getQuoteSpy = jest.spyOn(twainService, 'getQuote'); - - getQuoteSpy.mockImplementation(() => of(testQuote)); - }); - }), - ); + }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TwainComponent); + component = fixture.componentInstance; + quoteEl = fixture.nativeElement.querySelector('.twain'); + twainService = TestBed.inject(TwainService); + getQuoteSpy = jest.spyOn(twainService, 'getQuote'); + + getQuoteSpy.mockImplementation(() => of(testQuote)); + }); + })); describe('when test with synchronous observable', () => { it('should not show quote before OnInit', () => { @@ -114,19 +112,16 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it( - 'should show quote after getQuote (waitForAsync)', - waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); + it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe('...'); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -143,18 +138,15 @@ describe('TwainComponent', () => { .toPromise(); }); - it( - 'should show quote after getQuote', - waitForAsync(() => { - fixture.detectChanges(); + it('should show quote after getQuote', waitForAsync(() => { + fixture.detectChanges(); - twainService.getQuote().subscribe(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + twainService.getQuote().subscribe(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should display error when TwainService fails', fakeAsync(() => { getQuoteSpy.mockReturnValue(throwError('TwainService test failure')); diff --git a/examples/example-app-v13/src/app/app-initial.component.spec.ts b/examples/example-app-v13/src/app/app-initial.component.spec.ts index b12363b69d..f13ecfb673 100644 --- a/examples/example-app-v13/src/app/app-initial.component.spec.ts +++ b/examples/example-app-v13/src/app/app-initial.component.spec.ts @@ -5,38 +5,27 @@ import { ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app-initial.component'; describe('AppComponent (initial CLI version)', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }), - ); - it( - 'should create the app', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }), - ); - it( - `should have as title 'app'`, - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('app'); - }), - ); - it( - 'should render title', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + })); + it('should create the app', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); + })); }); describe('AppComponent (initial CLI version - as it should be)', () => { diff --git a/examples/example-app-v13/src/app/app.component.router.spec.ts b/examples/example-app-v13/src/app/app.component.router.spec.ts index 7b549530c3..29dc0fba7d 100644 --- a/examples/example-app-v13/src/app/app.component.router.spec.ts +++ b/examples/example-app-v13/src/app/app.component.router.spec.ts @@ -26,14 +26,12 @@ let router: Router; let location: SpyLocation; describe('AppComponent & RouterTestingModule', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [AppModule, RouterTestingModule.withRoutes(routes)], - providers: [{ provide: HeroService, useClass: TestHeroService }], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [AppModule, RouterTestingModule.withRoutes(routes)], + providers: [{ provide: HeroService, useClass: TestHeroService }], + }).compileComponents(); + })); it('should navigate to "Dashboard" immediately', fakeAsync(() => { createComponent(); diff --git a/examples/example-app-v13/src/app/app.component.spec.ts b/examples/example-app-v13/src/app/app.component.spec.ts index 370cd83a69..7866693a2c 100644 --- a/examples/example-app-v13/src/app/app.component.spec.ts +++ b/examples/example-app-v13/src/app/app.component.spec.ts @@ -21,59 +21,53 @@ let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent, + RouterLinkDirectiveStub, + BannerStubComponent, + RouterOutletStubComponent, + WelcomeStubComponent, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & AppModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ imports: [AppModule] }) - .overrideModule(AppModule, { - remove: { imports: [AppRoutingModule] }, - add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ imports: [AppModule] }) + .overrideModule(AppModule, { + remove: { imports: [AppRoutingModule] }, + add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); diff --git a/examples/example-app-v13/src/app/banner/banner-initial.component.spec.ts b/examples/example-app-v13/src/app/banner/banner-initial.component.spec.ts index 0acdb5b29e..b29a8abeff 100644 --- a/examples/example-app-v13/src/app/banner/banner-initial.component.spec.ts +++ b/examples/example-app-v13/src/app/banner/banner-initial.component.spec.ts @@ -7,11 +7,9 @@ describe('BannerComponent (initial CLI generated)', () => { let component: BannerComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); diff --git a/examples/example-app-v13/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-v13/src/app/dashboard/dashboard-hero.component.spec.ts index 66b0235c1e..1f67b659d6 100644 --- a/examples/example-app-v13/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/examples/example-app-v13/src/app/dashboard/dashboard-hero.component.spec.ts @@ -27,11 +27,9 @@ describe('DashboardHeroComponent when tested directly', () => { let heroDe: DebugElement; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); @@ -92,11 +90,9 @@ describe('DashboardHeroComponent when inside a test host', () => { let fixture: ComponentFixture; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(TestHostComponent); diff --git a/examples/example-app-v13/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/examples/example-app-v13/src/app/dashboard/dashboard.component.no-testbed.spec.ts index d04067162f..5ebee4160e 100644 --- a/examples/example-app-v13/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/examples/example-app-v13/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -28,15 +28,12 @@ describe('DashboardComponent class only', () => { expect(comp.heroes.length).toEqual(0); }); - it( - 'should HAVE heroes after HeroService gets them', - waitForAsync(() => { - comp.ngOnInit(); - heroService.lastHeroesResult?.subscribe(() => { - expect(comp.heroes.length).toBeGreaterThan(0); - }); - }), - ); + it('should HAVE heroes after HeroService gets them', waitForAsync(() => { + comp.ngOnInit(); + heroService.lastHeroesResult?.subscribe(() => { + expect(comp.heroes.length).toBeGreaterThan(0); + }); + })); it('should tell ROUTER to navigate by hero id', () => { const hero: Hero = { id: 42, name: 'Abbracadabra' }; diff --git a/examples/example-app-v13/src/app/dashboard/dashboard.component.spec.ts b/examples/example-app-v13/src/app/dashboard/dashboard.component.spec.ts index 4b7a98c6ac..179087b628 100644 --- a/examples/example-app-v13/src/app/dashboard/dashboard.component.spec.ts +++ b/examples/example-app-v13/src/app/dashboard/dashboard.component.spec.ts @@ -21,30 +21,28 @@ describe('DashboardComponent (deep)', () => { let router: Router; let spy: ReturnType; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [CommonModule, FormsModule, RouterTestingModule], - declarations: [DashboardComponent, DashboardHeroComponent], - providers: [ - { - provide: HeroService, - useValue: { - getHeroes: () => of(getTestHeroes()), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [CommonModule, FormsModule, RouterTestingModule], + declarations: [DashboardComponent, DashboardHeroComponent], + providers: [ + { + provide: HeroService, + useValue: { + getHeroes: () => of(getTestHeroes()), }, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - router = TestBed.inject(Router); - spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); - }); - }), - ); + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); + }); + })); it('should not have heroes before ngOnInit', () => { expect(component.heroes.length).toEqual(0); diff --git a/examples/example-app-v13/src/app/demo/async-helper.spec.ts b/examples/example-app-v13/src/app/demo/async-helper.spec.ts index 210efa9d29..ca753b6655 100644 --- a/examples/example-app-v13/src/app/demo/async-helper.spec.ts +++ b/examples/example-app-v13/src/app/demo/async-helper.spec.ts @@ -23,53 +23,41 @@ describe('Angular async helper', () => { }, 0); }); - it( - 'should run async test with task (setTimeout)', - waitForAsync(() => { - setTimeout(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }, 0); - }), - ); - - it( - 'should run async test with task (clearInterval)', - waitForAsync(() => { - const id = setInterval(() => { - actuallyDone = true; - clearInterval(id); - expect(actuallyDone).toBeTruthy(); - }, 100); - }), - ); - - it( - 'should run async test with successful promise', - waitForAsync(() => { - const p = new Promise((resolve) => { - setTimeout(resolve, 10); - }); - p.then(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }); - }), - ); - - it( - 'should run async test with failed promise', - waitForAsync(() => { - const p = new Promise((resolve, reject) => { - setTimeout(reject, 10); - }); - p.catch(() => { - actuallyDone = true; - // eslint-disable-next-line jest/no-conditional-expect - expect(actuallyDone).toBeTruthy(); - }); - }), - ); + it('should run async test with task (setTimeout)', waitForAsync(() => { + setTimeout(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }, 0); + })); + + it('should run async test with task (clearInterval)', waitForAsync(() => { + const id = setInterval(() => { + actuallyDone = true; + clearInterval(id); + expect(actuallyDone).toBeTruthy(); + }, 100); + })); + + it('should run async test with successful promise', waitForAsync(() => { + const p = new Promise((resolve) => { + setTimeout(resolve, 10); + }); + p.then(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }); + })); + + it('should run async test with failed promise', waitForAsync(() => { + const p = new Promise((resolve, reject) => { + setTimeout(reject, 10); + }); + p.catch(() => { + actuallyDone = true; + // eslint-disable-next-line jest/no-conditional-expect + expect(actuallyDone).toBeTruthy(); + }); + })); it('should run async test with successful delayed Observable', async () => { const source = of(true).pipe(delay(10)); @@ -87,20 +75,17 @@ describe('Angular async helper', () => { ); }); - it( - 'should run async test with successful delayed Observable (waitForAsync)', - waitForAsync(() => { - const source = of(true).pipe(delay(10)); - source.subscribe({ - next: () => (actuallyDone = true), - // eslint-disable-next-line jest/no-jasmine-globals - error: (err) => fail(err), - complete: () => { - expect(actuallyDone).toBeTruthy(); - }, - }); - }), - ); + it('should run async test with successful delayed Observable (waitForAsync)', waitForAsync(() => { + const source = of(true).pipe(delay(10)); + source.subscribe({ + next: () => (actuallyDone = true), + // eslint-disable-next-line jest/no-jasmine-globals + error: (err) => fail(err), + complete: () => { + expect(actuallyDone).toBeTruthy(); + }, + }); + })); it('should run async test with successful delayed Observable (fakeAsync)', fakeAsync(() => { const source = of(true).pipe(delay(10)); @@ -187,19 +172,16 @@ describe('Angular async helper', () => { callback(); } - it( - 'should wait until promise.then is called', - waitForAsync(() => { - let finished = false; - new Promise((res) => { - jsonp('localhost:8080/jsonp', () => { - finished = true; - res(); - }); - }).then(() => { - expect(finished).toBe(true); + it('should wait until promise.then is called', waitForAsync(() => { + let finished = false; + new Promise((res) => { + jsonp('localhost:8080/jsonp', () => { + finished = true; + res(); }); - }), - ); + }).then(() => { + expect(finished).toBe(true); + }); + })); }); }); diff --git a/examples/example-app-v13/src/app/demo/demo.spec.ts b/examples/example-app-v13/src/app/demo/demo.spec.ts index a4ad3f994a..6d6bb4f186 100644 --- a/examples/example-app-v13/src/app/demo/demo.spec.ts +++ b/examples/example-app-v13/src/app/demo/demo.spec.ts @@ -19,14 +19,11 @@ describe('demo (no TestBed):', () => { expect(service.getValue()).toBe('real value'); }); - it( - '#getObservableValue should return value from observable', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => { - expect(value).toBe('observable value'); - }); - }), - ); + it('#getObservableValue should return value from observable', waitForAsync(() => { + service.getObservableValue().subscribe((value) => { + expect(value).toBe('observable value'); + }); + })); it('#getPromiseValue should return value from a promise', async () => { await service.getPromiseValue().then((value) => { diff --git a/examples/example-app-v13/src/app/demo/demo.testbed.spec.ts b/examples/example-app-v13/src/app/demo/demo.testbed.spec.ts index dd8f103527..962f150ce0 100644 --- a/examples/example-app-v13/src/app/demo/demo.testbed.spec.ts +++ b/examples/example-app-v13/src/app/demo/demo.testbed.spec.ts @@ -55,28 +55,19 @@ describe('demo (with TestBed):', () => { expect(TestBed.inject(NotProvided, null)).toBeNull(); }); - it( - 'test should wait for ValueService.getPromiseValue', - waitForAsync(() => { - service.getPromiseValue().then((value) => expect(value).toBe('promise value')); - }), - ); + it('test should wait for ValueService.getPromiseValue', waitForAsync(() => { + service.getPromiseValue().then((value) => expect(value).toBe('promise value')); + })); - it( - 'test should wait for ValueService.getObservableValue', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); - }), - ); + it('test should wait for ValueService.getObservableValue', waitForAsync(() => { + service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); + })); - it( - 'test should wait for ValueService.getObservableDelayValue', - waitForAsync(() => { - service.getObservableDelayValue().subscribe((value) => { - expect(value).toBe('observable delay value'); - }); - }), - ); + it('test should wait for ValueService.getObservableDelayValue', waitForAsync(() => { + service.getObservableDelayValue().subscribe((value) => { + expect(value).toBe('observable delay value'); + }); + })); it('should allow the use of fakeAsync', fakeAsync(() => { let value = ''; @@ -141,13 +132,11 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ providers: [ValueService] }); }); - beforeEach( - waitForAsync( - inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then((value) => (serviceValue = value)); - }), - ), - ); + beforeEach(waitForAsync( + inject([ValueService], (service: ValueService) => { + service.getPromiseValue().then((value) => (serviceValue = value)); + }), + )); it('should use asynchronously modified value ... in synchronous test', () => { expect(serviceValue).toBe('promise value'); @@ -155,13 +144,11 @@ describe('demo (with TestBed):', () => { }); describe('TestBed component tests', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [DemoModule], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [DemoModule], + }).compileComponents(); + })); it('should create a component with inline template', () => { const fixture = TestBed.createComponent(Child1Component); @@ -235,38 +222,35 @@ describe('demo (with TestBed):', () => { expect(span.textContent).toMatch(/is on/i); }); - it( - 'should support entering text in input box (ngModel)', - waitForAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; + it('should support entering text in input box (ngModel)', waitForAsync(() => { + const expectedOrigName = 'John'; + const expectedNewName = 'Sally'; - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(InputComponent); + fixture.detectChanges(); - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; + const comp = fixture.componentInstance; + const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - fixture - .whenStable() - .then(() => { - expect(input.value).toBe(expectedOrigName); + fixture + .whenStable() + .then(() => { + expect(input.value).toBe(expectedOrigName); - input.value = expectedNewName; + input.value = expectedNewName; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - input.dispatchEvent(new Event('input')); + input.dispatchEvent(new Event('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName); - }); - }), - ); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.name).toBe(expectedNewName); + }); + })); it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { const expectedOrigName = 'John'; @@ -545,24 +529,21 @@ describe('demo (with TestBed):', () => { expect(child.childValue).toBe('foo'); }); - it( - 'changed child value flows to parent', - waitForAsync(() => { - fixture.detectChanges(); - getChild(); + it('changed child value flows to parent', waitForAsync(() => { + fixture.detectChanges(); + getChild(); - child.childValue = 'bar'; + child.childValue = 'bar'; - return new Promise((resolve) => { - setTimeout(() => resolve(), 0); - }).then(() => { - fixture.detectChanges(); + return new Promise((resolve) => { + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); - expect(child.ngOnChangesCounter).toBe(2); - expect(parent.parentValue).toBe('bar'); - }); - }), - ); + expect(child.ngOnChangesCounter).toBe(2); + expect(parent.parentValue).toBe('bar'); + }); + })); it('clicking "Close Child" triggers child OnDestroy', () => { fixture.detectChanges(); diff --git a/examples/example-app-v13/src/app/hero/hero-detail.component.spec.ts b/examples/example-app-v13/src/app/hero/hero-detail.component.spec.ts index 35c5b111ed..83e2fffee8 100644 --- a/examples/example-app-v13/src/app/hero/hero-detail.component.spec.ts +++ b/examples/example-app-v13/src/app/hero/hero-detail.component.spec.ts @@ -30,41 +30,37 @@ describe('HeroDetailComponent', () => { }); describe('with HeroModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); + }); + })); describe('when navigate to existing hero', () => { let expectedHero: Hero; - beforeEach( - waitForAsync(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -108,19 +104,17 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach( - waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -132,20 +126,18 @@ describe('HeroDetailComponent', () => { }); describe('when navigate to non-existent hero id', () => { - beforeEach( - waitForAsync(() => { - activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should try to navigate back to hero list', () => { expect(page.gotoListSpy.mock.calls.length).toBeTruthy(); @@ -181,46 +173,42 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], + }) + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); - activatedRoute.setParamMap({ id: 99999 }); + activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - heroDetailsService = fixture.debugElement.injector.get( - HeroDetailService, - ) as unknown as HeroDetailServiceMock; + heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); }); - }), - ); + }); + })); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -260,79 +248,69 @@ describe('HeroDetailComponent', () => { }); describe('with FormsModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [FormsModule, RouterTestingModule], - declarations: [HeroDetailComponent, TitleCasePipe], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [FormsModule, RouterTestingModule], + declarations: [HeroDetailComponent, TitleCasePipe], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); + }); + })); - it( - "formsModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("formsModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); describe('with SharedModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [SharedModule, RouterTestingModule], - declarations: [HeroDetailComponent], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [SharedModule, RouterTestingModule], + declarations: [HeroDetailComponent], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); + }); + })); - it( - "sharedModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("sharedModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); }); diff --git a/examples/example-app-v13/src/app/hero/hero-list.component.spec.ts b/examples/example-app-v13/src/app/hero/hero-list.component.spec.ts index d7ba271808..bb542e3249 100644 --- a/examples/example-app-v13/src/app/hero/hero-list.component.spec.ts +++ b/examples/example-app-v13/src/app/hero/hero-list.component.spec.ts @@ -19,23 +19,21 @@ let fixture: ComponentFixture; let page: Page; describe('HeroListComponent', () => { - beforeEach( - waitForAsync(() => { - const routerSpy = { - navigate: jest.fn(), - }; - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, - ], - }) - .compileComponents() - .then(createComponent); - }), - ); + beforeEach(waitForAsync(() => { + const routerSpy = { + navigate: jest.fn(), + }; + + TestBed.configureTestingModule({ + imports: [HeroModule], + providers: [ + { provide: HeroService, useClass: TestHeroService }, + { provide: Router, useValue: routerSpy }, + ], + }) + .compileComponents() + .then(createComponent); + })); it('should display heroes', () => { expect(page.heroRows.length).toBeGreaterThan(0); diff --git a/examples/example-app-v13/src/app/model/hero.service.spec.ts b/examples/example-app-v13/src/app/model/hero.service.spec.ts index bda7a44911..a0d2931d4c 100644 --- a/examples/example-app-v13/src/app/model/hero.service.spec.ts +++ b/examples/example-app-v13/src/app/model/hero.service.spec.ts @@ -20,49 +20,43 @@ describe('HeroesService (with spies)', () => { heroService = new HeroService(httpClient); }); - it( - 'should return expected heroes (HttpClient called once)', - waitForAsync(() => { - const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ]; - - httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - - heroService.getHeroes().subscribe({ - next: (heroes) => { - expect(heroes).toEqual(expectedHeroes); - }, - error: () => { - throw new Error('Error getting heroes'); - }, - }); - expect(httpClientSpy.get.mock.calls.length).toBe(1); - }), - ); - - it( - 'should return an error when the server returns a 404', - waitForAsync(() => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, - statusText: 'Not Found', - }); + it('should return expected heroes (HttpClient called once)', waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; + + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); + + heroService.getHeroes().subscribe({ + next: (heroes) => { + expect(heroes).toEqual(expectedHeroes); + }, + error: () => { + throw new Error('Error getting heroes'); + }, + }); + expect(httpClientSpy.get.mock.calls.length).toBe(1); + })); + + it('should return an error when the server returns a 404', waitForAsync(() => { + const errorResponse = new HttpErrorResponse({ + error: 'test 404 error', + status: 404, + statusText: 'Not Found', + }); - httpClientSpy.get.mockReturnValue(throwError(() => errorResponse)); + httpClientSpy.get.mockReturnValue(throwError(() => errorResponse)); - heroService.getHeroes().subscribe({ - next: () => { - throw new Error('expected an error, not heroes'); - }, - error: (error) => { - expect(error.message).toContain('test 404 error'); - }, - }); - }), - ); + heroService.getHeroes().subscribe({ + next: () => { + throw new Error('expected an error, not heroes'); + }, + error: (error) => { + expect(error.message).toContain('test 404 error'); + }, + }); + })); }); describe('HeroesService (with mocks)', () => { diff --git a/examples/example-app-v13/src/app/shared/canvas.component.spec.ts b/examples/example-app-v13/src/app/shared/canvas.component.spec.ts index 3431dbfbbd..aa7898b34b 100644 --- a/examples/example-app-v13/src/app/shared/canvas.component.spec.ts +++ b/examples/example-app-v13/src/app/shared/canvas.component.spec.ts @@ -6,24 +6,22 @@ describe('CanvasComponent', () => { let fixture: ComponentFixture; let component: CanvasComponent; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [CanvasComponent], - }) - .compileComponents() - .then(() => { - (window as typeof window & Record)['__zone_symbol__FakeAsyncTestMacroTask'] = [ - { - source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], - }, - ]; - fixture = TestBed.createComponent(CanvasComponent); - component = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [CanvasComponent], + }) + .compileComponents() + .then(() => { + (window as typeof window & Record)['__zone_symbol__FakeAsyncTestMacroTask'] = [ + { + source: 'HTMLCanvasElement.toBlob', + callbackArgs: [{ size: 200 }], + }, + ]; + fixture = TestBed.createComponent(CanvasComponent); + component = fixture.componentInstance; + }); + })); it('should be able to generate blob data from canvas', fakeAsync(() => { fixture.detectChanges(); diff --git a/examples/example-app-v13/src/app/twain/twain.component.spec.ts b/examples/example-app-v13/src/app/twain/twain.component.spec.ts index 64843f26b6..09b8d3e149 100644 --- a/examples/example-app-v13/src/app/twain/twain.component.spec.ts +++ b/examples/example-app-v13/src/app/twain/twain.component.spec.ts @@ -21,31 +21,29 @@ describe('TwainComponent', () => { return el ? el.textContent : null; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [TwainComponent], - providers: [ - { - provide: TwainService, - useValue: { - getQuote: jest.fn(), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [TwainComponent], + providers: [ + { + provide: TwainService, + useValue: { + getQuote: jest.fn(), }, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - twainService = TestBed.inject(TwainService); - getQuoteSpy = jest.spyOn(twainService, 'getQuote'); - - getQuoteSpy.mockImplementation(() => of(testQuote)); - }); - }), - ); + }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TwainComponent); + component = fixture.componentInstance; + quoteEl = fixture.nativeElement.querySelector('.twain'); + twainService = TestBed.inject(TwainService); + getQuoteSpy = jest.spyOn(twainService, 'getQuote'); + + getQuoteSpy.mockImplementation(() => of(testQuote)); + }); + })); describe('when test with synchronous observable', () => { it('should not show quote before OnInit', () => { @@ -114,19 +112,16 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it( - 'should show quote after getQuote (waitForAsync)', - waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); + it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe('...'); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -142,18 +137,15 @@ describe('TwainComponent', () => { ); }); - it( - 'should show quote after getQuote', - waitForAsync(() => { - fixture.detectChanges(); + it('should show quote after getQuote', waitForAsync(() => { + fixture.detectChanges(); - twainService.getQuote().subscribe(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + twainService.getQuote().subscribe(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should display error when TwainService fails', fakeAsync(() => { getQuoteSpy.mockReturnValue(throwError(() => 'TwainService test failure')); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.spec.ts index b12363b69d..f13ecfb673 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.spec.ts @@ -5,38 +5,27 @@ import { ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app-initial.component'; describe('AppComponent (initial CLI version)', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent], - }).compileComponents(); - }), - ); - it( - 'should create the app', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }), - ); - it( - `should have as title 'app'`, - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('app'); - }), - ); - it( - 'should render title', - waitForAsync(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + })); + it('should create the app', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title', waitForAsync(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!'); + })); }); describe('AppComponent (initial CLI version - as it should be)', () => { diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.router.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.router.spec.ts index 7b549530c3..29dc0fba7d 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.router.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.router.spec.ts @@ -26,14 +26,12 @@ let router: Router; let location: SpyLocation; describe('AppComponent & RouterTestingModule', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [AppModule, RouterTestingModule.withRoutes(routes)], - providers: [{ provide: HeroService, useClass: TestHeroService }], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [AppModule, RouterTestingModule.withRoutes(routes)], + providers: [{ provide: HeroService, useClass: TestHeroService }], + }).compileComponents(); + })); it('should navigate to "Dashboard" immediately', fakeAsync(() => { createComponent(); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.spec.ts index 370cd83a69..7866693a2c 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.spec.ts @@ -21,59 +21,53 @@ let comp: AppComponent; let fixture: ComponentFixture; describe('AppComponent & TestModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent, + RouterLinkDirectiveStub, + BannerStubComponent, + RouterOutletStubComponent, + WelcomeStubComponent, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent, BannerStubComponent, RouterLinkDirectiveStub], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); describe('AppComponent & AppModule', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ imports: [AppModule] }) - .overrideModule(AppModule, { - remove: { imports: [AppRoutingModule] }, - add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ imports: [AppModule] }) + .overrideModule(AppModule, { + remove: { imports: [AppRoutingModule] }, + add: { declarations: [RouterLinkDirectiveStub, RouterOutletStubComponent] }, + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + }); + })); tests(); }); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner-initial.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner-initial.component.spec.ts index 0acdb5b29e..b29a8abeff 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner-initial.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner-initial.component.spec.ts @@ -7,11 +7,9 @@ describe('BannerComponent (initial CLI generated)', () => { let component: BannerComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [BannerComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard-hero.component.spec.ts index 66b0235c1e..1f67b659d6 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard-hero.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard-hero.component.spec.ts @@ -27,11 +27,9 @@ describe('DashboardHeroComponent when tested directly', () => { let heroDe: DebugElement; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); @@ -92,11 +90,9 @@ describe('DashboardHeroComponent when inside a test host', () => { let fixture: ComponentFixture; let heroEl: HTMLElement; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ declarations: [DashboardHeroComponent, TestHostComponent] }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(TestHostComponent); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.no-testbed.spec.ts index d04067162f..5ebee4160e 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.no-testbed.spec.ts @@ -28,15 +28,12 @@ describe('DashboardComponent class only', () => { expect(comp.heroes.length).toEqual(0); }); - it( - 'should HAVE heroes after HeroService gets them', - waitForAsync(() => { - comp.ngOnInit(); - heroService.lastHeroesResult?.subscribe(() => { - expect(comp.heroes.length).toBeGreaterThan(0); - }); - }), - ); + it('should HAVE heroes after HeroService gets them', waitForAsync(() => { + comp.ngOnInit(); + heroService.lastHeroesResult?.subscribe(() => { + expect(comp.heroes.length).toBeGreaterThan(0); + }); + })); it('should tell ROUTER to navigate by hero id', () => { const hero: Hero = { id: 42, name: 'Abbracadabra' }; diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.spec.ts index 4b7a98c6ac..179087b628 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/dashboard/dashboard.component.spec.ts @@ -21,30 +21,28 @@ describe('DashboardComponent (deep)', () => { let router: Router; let spy: ReturnType; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [CommonModule, FormsModule, RouterTestingModule], - declarations: [DashboardComponent, DashboardHeroComponent], - providers: [ - { - provide: HeroService, - useValue: { - getHeroes: () => of(getTestHeroes()), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [CommonModule, FormsModule, RouterTestingModule], + declarations: [DashboardComponent, DashboardHeroComponent], + providers: [ + { + provide: HeroService, + useValue: { + getHeroes: () => of(getTestHeroes()), }, - ], - schemas: [NO_ERRORS_SCHEMA], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - router = TestBed.inject(Router); - spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); - }); - }), - ); + }, + ], + schemas: [NO_ERRORS_SCHEMA], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + router = TestBed.inject(Router); + spy = jest.spyOn(router, 'navigateByUrl').mockResolvedValue(true); + }); + })); it('should not have heroes before ngOnInit', () => { expect(component.heroes.length).toEqual(0); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/async-helper.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/async-helper.spec.ts index 2030df3a72..531263644c 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/async-helper.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/async-helper.spec.ts @@ -23,53 +23,41 @@ describe('Angular async helper', () => { }, 0); }); - it( - 'should run async test with task (setTimeout)', - waitForAsync(() => { - setTimeout(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }, 0); - }), - ); - - it( - 'should run async test with task (clearInterval)', - waitForAsync(() => { - const id = setInterval(() => { - actuallyDone = true; - clearInterval(id); - expect(actuallyDone).toBeTruthy(); - }, 100); - }), - ); - - it( - 'should run async test with successful promise', - waitForAsync(() => { - const p = new Promise((resolve) => { - setTimeout(resolve, 10); - }); - p.then(() => { - actuallyDone = true; - expect(actuallyDone).toBeTruthy(); - }); - }), - ); - - it( - 'should run async test with failed promise', - waitForAsync(() => { - const p = new Promise((resolve, reject) => { - setTimeout(reject, 10); - }); - p.catch(() => { - actuallyDone = true; - // eslint-disable-next-line jest/no-conditional-expect - expect(actuallyDone).toBeTruthy(); - }); - }), - ); + it('should run async test with task (setTimeout)', waitForAsync(() => { + setTimeout(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }, 0); + })); + + it('should run async test with task (clearInterval)', waitForAsync(() => { + const id = setInterval(() => { + actuallyDone = true; + clearInterval(id); + expect(actuallyDone).toBeTruthy(); + }, 100); + })); + + it('should run async test with successful promise', waitForAsync(() => { + const p = new Promise((resolve) => { + setTimeout(resolve, 10); + }); + p.then(() => { + actuallyDone = true; + expect(actuallyDone).toBeTruthy(); + }); + })); + + it('should run async test with failed promise', waitForAsync(() => { + const p = new Promise((resolve, reject) => { + setTimeout(reject, 10); + }); + p.catch(() => { + actuallyDone = true; + // eslint-disable-next-line jest/no-conditional-expect + expect(actuallyDone).toBeTruthy(); + }); + })); it('should run async test with successful delayed Observable', async () => { const source = of(true).pipe(delay(10)); @@ -87,20 +75,17 @@ describe('Angular async helper', () => { .toPromise(); }); - it( - 'should run async test with successful delayed Observable (waitForAsync)', - waitForAsync(() => { - const source = of(true).pipe(delay(10)); - source.subscribe( - () => (actuallyDone = true), - // eslint-disable-next-line jest/no-jasmine-globals - (err) => fail(err), - () => { - expect(actuallyDone).toBeTruthy(); - }, - ); - }), - ); + it('should run async test with successful delayed Observable (waitForAsync)', waitForAsync(() => { + const source = of(true).pipe(delay(10)); + source.subscribe( + () => (actuallyDone = true), + // eslint-disable-next-line jest/no-jasmine-globals + (err) => fail(err), + () => { + expect(actuallyDone).toBeTruthy(); + }, + ); + })); it('should run async test with successful delayed Observable (fakeAsync)', fakeAsync(() => { const source = of(true).pipe(delay(10)); @@ -187,19 +172,16 @@ describe('Angular async helper', () => { callback(); } - it( - 'should wait until promise.then is called', - waitForAsync(() => { - let finished = false; - new Promise((res) => { - jsonp('localhost:8080/jsonp', () => { - finished = true; - res(); - }); - }).then(() => { - expect(finished).toBe(true); + it('should wait until promise.then is called', waitForAsync(() => { + let finished = false; + new Promise((res) => { + jsonp('localhost:8080/jsonp', () => { + finished = true; + res(); }); - }), - ); + }).then(() => { + expect(finished).toBe(true); + }); + })); }); }); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.spec.ts index 3f6cc85226..552785db74 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.spec.ts @@ -19,14 +19,11 @@ describe('demo (no TestBed):', () => { expect(service.getValue()).toBe('real value'); }); - it( - '#getObservableValue should return value from observable', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => { - expect(value).toBe('observable value'); - }); - }), - ); + it('#getObservableValue should return value from observable', waitForAsync(() => { + service.getObservableValue().subscribe((value) => { + expect(value).toBe('observable value'); + }); + })); it('#getPromiseValue should return value from a promise', async () => { await service.getPromiseValue().then((value) => { diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.testbed.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.testbed.spec.ts index 2e011b5f7c..83fd128417 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.testbed.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/demo/demo.testbed.spec.ts @@ -55,28 +55,19 @@ describe('demo (with TestBed):', () => { expect(TestBed.inject(NotProvided, null)).toBeNull(); }); - it( - 'test should wait for ValueService.getPromiseValue', - waitForAsync(() => { - service.getPromiseValue().then((value) => expect(value).toBe('promise value')); - }), - ); + it('test should wait for ValueService.getPromiseValue', waitForAsync(() => { + service.getPromiseValue().then((value) => expect(value).toBe('promise value')); + })); - it( - 'test should wait for ValueService.getObservableValue', - waitForAsync(() => { - service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); - }), - ); + it('test should wait for ValueService.getObservableValue', waitForAsync(() => { + service.getObservableValue().subscribe((value) => expect(value).toBe('observable value')); + })); - it( - 'test should wait for ValueService.getObservableDelayValue', - waitForAsync(() => { - service.getObservableDelayValue().subscribe((value) => { - expect(value).toBe('observable delay value'); - }); - }), - ); + it('test should wait for ValueService.getObservableDelayValue', waitForAsync(() => { + service.getObservableDelayValue().subscribe((value) => { + expect(value).toBe('observable delay value'); + }); + })); it('should allow the use of fakeAsync', fakeAsync(() => { let value = ''; @@ -141,13 +132,11 @@ describe('demo (with TestBed):', () => { TestBed.configureTestingModule({ providers: [ValueService] }); }); - beforeEach( - waitForAsync( - inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then((value) => (serviceValue = value)); - }), - ), - ); + beforeEach(waitForAsync( + inject([ValueService], (service: ValueService) => { + service.getPromiseValue().then((value) => (serviceValue = value)); + }), + )); it('should use asynchronously modified value ... in synchronous test', () => { expect(serviceValue).toBe('promise value'); @@ -155,13 +144,11 @@ describe('demo (with TestBed):', () => { }); describe('TestBed component tests', () => { - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [DemoModule], - }).compileComponents(); - }), - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [DemoModule], + }).compileComponents(); + })); it('should create a component with inline template', () => { const fixture = TestBed.createComponent(Child1Component); @@ -235,38 +222,35 @@ describe('demo (with TestBed):', () => { expect(span.textContent).toMatch(/is on/i); }); - it( - 'should support entering text in input box (ngModel)', - waitForAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; + it('should support entering text in input box (ngModel)', waitForAsync(() => { + const expectedOrigName = 'John'; + const expectedNewName = 'Sally'; - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); + const fixture = TestBed.createComponent(InputComponent); + fixture.detectChanges(); - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; + const comp = fixture.componentInstance; + const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - fixture - .whenStable() - .then(() => { - expect(input.value).toBe(expectedOrigName); + fixture + .whenStable() + .then(() => { + expect(input.value).toBe(expectedOrigName); - input.value = expectedNewName; + input.value = expectedNewName; - expect(comp.name).toBe(expectedOrigName); + expect(comp.name).toBe(expectedOrigName); - input.dispatchEvent(new Event('input')); + input.dispatchEvent(new Event('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName); - }); - }), - ); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.name).toBe(expectedNewName); + }); + })); it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { const expectedOrigName = 'John'; @@ -545,24 +529,21 @@ describe('demo (with TestBed):', () => { expect(child.childValue).toBe('foo'); }); - it( - 'changed child value flows to parent', - waitForAsync(() => { - fixture.detectChanges(); - getChild(); + it('changed child value flows to parent', waitForAsync(() => { + fixture.detectChanges(); + getChild(); - child.childValue = 'bar'; + child.childValue = 'bar'; - return new Promise((resolve) => { - setTimeout(() => resolve(), 0); - }).then(() => { - fixture.detectChanges(); + return new Promise((resolve) => { + setTimeout(() => resolve(), 0); + }).then(() => { + fixture.detectChanges(); - expect(child.ngOnChangesCounter).toBe(2); - expect(parent.parentValue).toBe('bar'); - }); - }), - ); + expect(child.ngOnChangesCounter).toBe(2); + expect(parent.parentValue).toBe('bar'); + }); + })); it('clicking "Close Child" triggers child OnDestroy', () => { fixture.detectChanges(); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-detail.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-detail.component.spec.ts index fb95645573..60f7299834 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-detail.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-detail.component.spec.ts @@ -30,41 +30,37 @@ describe('HeroDetailComponent', () => { }); describe('with HeroModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); describe('when navigate to existing hero', () => { let expectedHero: Hero; - beforeEach( - waitForAsync(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -108,19 +104,17 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach( - waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -132,20 +126,18 @@ describe('HeroDetailComponent', () => { }); describe('when navigate to non-existent hero id', () => { - beforeEach( - waitForAsync(() => { - activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + beforeEach(waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + })); it('should try to navigate back to hero list', () => { expect(page.gotoListSpy.mock.calls.length).toBeTruthy(); @@ -181,46 +173,42 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], + }) + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); - activatedRoute.setParamMap({ id: 99999 }); + activatedRoute.setParamMap({ id: 99999 }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - heroDetailsService = fixture.debugElement.injector.get( - HeroDetailService, - ) as unknown as HeroDetailServiceMock; + heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); }); - }), - ); + }); + })); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -260,79 +248,69 @@ describe('HeroDetailComponent', () => { }); describe('with FormsModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [FormsModule, RouterTestingModule], - declarations: [HeroDetailComponent, TitleCasePipe], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [FormsModule, RouterTestingModule], + declarations: [HeroDetailComponent, TitleCasePipe], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "formsModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("formsModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); describe('with SharedModule setup', () => { - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [SharedModule, RouterTestingModule], - declarations: [HeroDetailComponent], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - ], - }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [SharedModule, RouterTestingModule], + declarations: [HeroDetailComponent], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroService, useClass: TestHeroService }, + ], + }) + .compileComponents() + .then(() => { + const router = TestBed.inject(Router); + jest.spyOn(router, 'navigate').mockResolvedValue(true); + }); + })); - it( - "sharedModuleSetup: should display 1st hero's name", - waitForAsync(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); + it("sharedModuleSetup: should display 1st hero's name", waitForAsync(() => { + const expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.detectChanges(); + fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); + }); + })); }); }); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-list.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-list.component.spec.ts index d7ba271808..bb542e3249 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-list.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/hero/hero-list.component.spec.ts @@ -19,23 +19,21 @@ let fixture: ComponentFixture; let page: Page; describe('HeroListComponent', () => { - beforeEach( - waitForAsync(() => { - const routerSpy = { - navigate: jest.fn(), - }; - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy }, - ], - }) - .compileComponents() - .then(createComponent); - }), - ); + beforeEach(waitForAsync(() => { + const routerSpy = { + navigate: jest.fn(), + }; + + TestBed.configureTestingModule({ + imports: [HeroModule], + providers: [ + { provide: HeroService, useClass: TestHeroService }, + { provide: Router, useValue: routerSpy }, + ], + }) + .compileComponents() + .then(createComponent); + })); it('should display heroes', () => { expect(page.heroRows.length).toBeGreaterThan(0); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/model/hero.service.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/model/hero.service.spec.ts index 514e5efbae..08f6a1c2fa 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/model/hero.service.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/model/hero.service.spec.ts @@ -20,49 +20,43 @@ describe('HeroesService (with spies)', () => { heroService = new HeroService(httpClient); }); - it( - 'should return expected heroes (HttpClient called once)', - waitForAsync(() => { - const expectedHeroes: Hero[] = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ]; - - httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - - heroService.getHeroes().subscribe( - (heroes) => { - expect(heroes).toEqual(expectedHeroes); - }, - () => { - throw new Error('Error getting heroes'); - }, - ); - expect(httpClientSpy.get.mock.calls.length).toBe(1); - }), - ); - - it( - 'should return an error when the server returns a 404', - waitForAsync(() => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, - statusText: 'Not Found', - }); - - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + it('should return expected heroes (HttpClient called once)', waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; + + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); + + heroService.getHeroes().subscribe( + (heroes) => { + expect(heroes).toEqual(expectedHeroes); + }, + () => { + throw new Error('Error getting heroes'); + }, + ); + expect(httpClientSpy.get.mock.calls.length).toBe(1); + })); + + it('should return an error when the server returns a 404', waitForAsync(() => { + const errorResponse = new HttpErrorResponse({ + error: 'test 404 error', + status: 404, + statusText: 'Not Found', + }); - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - }), - ); + httpClientSpy.get.mockReturnValue(throwError(errorResponse)); + + heroService.getHeroes().subscribe( + () => { + throw new Error('expected an error, not heroes'); + }, + (error) => { + expect(error.message).toContain('test 404 error'); + }, + ); + })); }); describe('HeroesService (with mocks)', () => { diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/shared/canvas.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/shared/canvas.component.spec.ts index 1a0ed9bbda..b0cb4a5108 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/shared/canvas.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/shared/canvas.component.spec.ts @@ -6,24 +6,22 @@ describe('CanvasComponent', () => { let fixture: ComponentFixture; let component: CanvasComponent; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [CanvasComponent], - }) - .compileComponents() - .then(() => { - (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ - { - source: 'HTMLCanvasElement.toBlob', - callbackArgs: [{ size: 200 }], - }, - ]; - fixture = TestBed.createComponent(CanvasComponent); - component = fixture.componentInstance; - }); - }), - ); + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [CanvasComponent], + }) + .compileComponents() + .then(() => { + (window as typeof window & Record).__zone_symbol__FakeAsyncTestMacroTask = [ + { + source: 'HTMLCanvasElement.toBlob', + callbackArgs: [{ size: 200 }], + }, + ]; + fixture = TestBed.createComponent(CanvasComponent); + component = fixture.componentInstance; + }); + })); it('should be able to generate blob data from canvas', fakeAsync(() => { fixture.detectChanges(); diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/twain/twain.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/twain/twain.component.spec.ts index 32c089448d..875641ff8f 100644 --- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/twain/twain.component.spec.ts +++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/twain/twain.component.spec.ts @@ -21,31 +21,29 @@ describe('TwainComponent', () => { return el ? el.textContent : null; }; - beforeEach( - waitForAsync(() => { - void TestBed.configureTestingModule({ - declarations: [TwainComponent], - providers: [ - { - provide: TwainService, - useValue: { - getQuote: jest.fn(), - }, + beforeEach(waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [TwainComponent], + providers: [ + { + provide: TwainService, + useValue: { + getQuote: jest.fn(), }, - ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - twainService = TestBed.inject(TwainService); - getQuoteSpy = jest.spyOn(twainService, 'getQuote'); - - getQuoteSpy.mockImplementation(() => of(testQuote)); - }); - }), - ); + }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TwainComponent); + component = fixture.componentInstance; + quoteEl = fixture.nativeElement.querySelector('.twain'); + twainService = TestBed.inject(TwainService); + getQuoteSpy = jest.spyOn(twainService, 'getQuote'); + + getQuoteSpy.mockImplementation(() => of(testQuote)); + }); + })); describe('when test with synchronous observable', () => { it('should not show quote before OnInit', () => { @@ -114,19 +112,16 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it( - 'should show quote after getQuote (waitForAsync)', - waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); + it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe('...'); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -143,18 +138,15 @@ describe('TwainComponent', () => { .toPromise(); }); - it( - 'should show quote after getQuote', - waitForAsync(() => { - fixture.detectChanges(); + it('should show quote after getQuote', waitForAsync(() => { + fixture.detectChanges(); - twainService.getQuote().subscribe(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - }), - ); + twainService.getQuote().subscribe(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + })); it('should display error when TwainService fails', fakeAsync(() => { getQuoteSpy.mockReturnValue(throwError('TwainService test failure')); diff --git a/ngcc-jest-processor.js b/ngcc-jest-processor.js index b37f8baa78..2e76717624 100644 --- a/ngcc-jest-processor.js +++ b/ngcc-jest-processor.js @@ -1,5 +1,5 @@ console.warn( - 'ng-jest-processor is deprecated and will be removed in the next major version v12.' + + 'ngcc-jest-processor is deprecated and will be removed in the next major version v12.' + ' Please use jest-preset-angular/global-setup in Jest config instead, e.g. \n' + ` module.exports = {