diff --git a/CHANGELOG.md b/CHANGELOG.md index 969e8a1c66..ff7d881cfb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [11.1.2](https://github.com/thymikee/jest-preset-angular/compare/v11.1.1...v11.1.2) (2022-04-24) + + +### Bug Fixes + +* correct deprecation message of `ngcc-jest-processor` ([3899abf](https://github.com/thymikee/jest-preset-angular/commit/3899abf5b886826a00d443db364d7b1fb085122b)), closes [#1411](https://github.com/thymikee/jest-preset-angular/issues/1411) + + + ## [11.1.1](https://github.com/thymikee/jest-preset-angular/compare/v11.0.1...v11.1.1) (2022-02-11) 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 006570e785..7130c9cf5a 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,15 +16,18 @@ 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 5d21339ded..62cd71a94c 100644 --- a/e2e/async/__tests__/async.spec.ts +++ b/e2e/async/__tests__/async.spec.ts @@ -73,11 +73,14 @@ 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 43e52f40c2..29f81783a8 100644 --- a/e2e/full-ivy-lib/__tests__/full-ivy-lib.spec.ts +++ b/e2e/full-ivy-lib/__tests__/full-ivy-lib.spec.ts @@ -5,14 +5,16 @@ 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 9cc45d3821..2b8760ff21 100644 --- a/e2e/partial-ivy-lib/__tests__/partial-ivy-lib.spec.ts +++ b/e2e/partial-ivy-lib/__tests__/partial-ivy-lib.spec.ts @@ -6,14 +6,16 @@ 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 1fe7bb3e53..9abf399653 100644 --- a/e2e/snapshot-serializers/__tests__/foo.component.spec.ts +++ b/e2e/snapshot-serializers/__tests__/foo.component.spec.ts @@ -22,14 +22,17 @@ 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 f13ecfb673..b12363b69d 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,27 +5,38 @@ 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 29dc0fba7d..7b549530c3 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,12 +26,14 @@ 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 7866693a2c..370cd83a69 100644 --- a/examples/example-app-v11/src/app/app.component.spec.ts +++ b/examples/example-app-v11/src/app/app.component.spec.ts @@ -21,53 +21,59 @@ 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 b29a8abeff..0acdb5b29e 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,9 +7,11 @@ 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 1f67b659d6..66b0235c1e 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,9 +27,11 @@ 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); @@ -90,9 +92,11 @@ 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 5ebee4160e..d04067162f 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,12 +28,15 @@ 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 179087b628..4b7a98c6ac 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,28 +21,30 @@ 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 531263644c..2030df3a72 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,41 +23,53 @@ 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)); @@ -75,17 +87,20 @@ 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)); @@ -172,16 +187,19 @@ 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(); + 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); }); - }).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 552785db74..3f6cc85226 100644 --- a/examples/example-app-v11/src/app/demo/demo.spec.ts +++ b/examples/example-app-v11/src/app/demo/demo.spec.ts @@ -19,11 +19,14 @@ 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 83fd128417..2e011b5f7c 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,19 +55,28 @@ 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 = ''; @@ -132,11 +141,13 @@ 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'); @@ -144,11 +155,13 @@ 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); @@ -222,35 +235,38 @@ 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'; @@ -529,21 +545,24 @@ 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 60f7299834..fb95645573 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,37 +30,41 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -104,17 +108,19 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach(waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -126,18 +132,20 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - 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(); @@ -173,42 +181,46 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach(waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], - }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + }) + .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); - - heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + heroDetailsService = fixture.debugElement.injector.get( + HeroDetailService, + ) as unknown as HeroDetailServiceMock; - fixture.detectChanges(); + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.whenStable().then(() => { fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); }); - }); - })); + }), + ); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -248,69 +260,79 @@ 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); - }); - })); - - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); - })); + }), + ); + }); - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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 bb542e3249..d7ba271808 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,21 +19,23 @@ 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 08f6a1c2fa..514e5efbae 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,43 +20,49 @@ 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', - }); + it( + 'should return expected heroes (HttpClient called once)', + waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); - - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - })); + 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)); + + 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 b0cb4a5108..1a0ed9bbda 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,22 +6,24 @@ 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 875641ff8f..32c089448d 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,29 +21,31 @@ 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', () => { @@ -112,16 +114,19 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); - - fixture.whenStable().then(() => { + it( + 'should show quote after getQuote (waitForAsync)', + waitForAsync(() => { fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - })); + expect(quoteEl.textContent).toBe('...'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + }), + ); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -138,15 +143,18 @@ describe('TwainComponent', () => { .toPromise(); }); - it('should show quote after getQuote', waitForAsync(() => { - fixture.detectChanges(); - - twainService.getQuote().subscribe(() => { + it( + 'should show quote after getQuote', + waitForAsync(() => { 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 f13ecfb673..b12363b69d 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,27 +5,38 @@ 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 29dc0fba7d..7b549530c3 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,12 +26,14 @@ 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 7866693a2c..370cd83a69 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,53 +21,59 @@ 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 b29a8abeff..0acdb5b29e 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,9 +7,11 @@ 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 1f67b659d6..66b0235c1e 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,9 +27,11 @@ 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); @@ -90,9 +92,11 @@ 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 5ebee4160e..d04067162f 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,12 +28,15 @@ 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 179087b628..4b7a98c6ac 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,28 +21,30 @@ 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 531263644c..2030df3a72 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,41 +23,53 @@ 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)); @@ -75,17 +87,20 @@ 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)); @@ -172,16 +187,19 @@ 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(); + 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); }); - }).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 552785db74..3f6cc85226 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,11 +19,14 @@ 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 83fd128417..2e011b5f7c 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,19 +55,28 @@ 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 = ''; @@ -132,11 +141,13 @@ 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'); @@ -144,11 +155,13 @@ 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); @@ -222,35 +235,38 @@ 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'; @@ -529,21 +545,24 @@ 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 60f7299834..fb95645573 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,37 +30,41 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -104,17 +108,19 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach(waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -126,18 +132,20 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - 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(); @@ -173,42 +181,46 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach(waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], - }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + }) + .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); - - heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + heroDetailsService = fixture.debugElement.injector.get( + HeroDetailService, + ) as unknown as HeroDetailServiceMock; - fixture.detectChanges(); + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.whenStable().then(() => { fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); }); - }); - })); + }), + ); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -248,69 +260,79 @@ 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); - }); - })); - - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); - })); + }), + ); + }); - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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 bb542e3249..d7ba271808 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,21 +19,23 @@ 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 08f6a1c2fa..514e5efbae 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,43 +20,49 @@ 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', - }); + it( + 'should return expected heroes (HttpClient called once)', + waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); - - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - })); + 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)); + + 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 b0cb4a5108..1a0ed9bbda 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,22 +6,24 @@ 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 875641ff8f..32c089448d 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,29 +21,31 @@ 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', () => { @@ -112,16 +114,19 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); - - fixture.whenStable().then(() => { + it( + 'should show quote after getQuote (waitForAsync)', + waitForAsync(() => { fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - })); + expect(quoteEl.textContent).toBe('...'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + }), + ); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -138,15 +143,18 @@ describe('TwainComponent', () => { .toPromise(); }); - it('should show quote after getQuote', waitForAsync(() => { - fixture.detectChanges(); - - twainService.getQuote().subscribe(() => { + it( + 'should show quote after getQuote', + waitForAsync(() => { 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 f13ecfb673..b12363b69d 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,27 +5,38 @@ 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 29dc0fba7d..7b549530c3 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,12 +26,14 @@ 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 7866693a2c..370cd83a69 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,53 +21,59 @@ 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 b29a8abeff..0acdb5b29e 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,9 +7,11 @@ 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 1f67b659d6..66b0235c1e 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,9 +27,11 @@ 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); @@ -90,9 +92,11 @@ 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 5ebee4160e..d04067162f 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,12 +28,15 @@ 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 4ac218a9a0..301bbd6d20 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,38 +21,42 @@ 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); @@ -75,10 +79,12 @@ 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 531263644c..2030df3a72 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,41 +23,53 @@ 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)); @@ -75,17 +87,20 @@ 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)); @@ -172,16 +187,19 @@ 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(); + 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); }); - }).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 552785db74..3f6cc85226 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,11 +19,14 @@ 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 83fd128417..2e011b5f7c 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,19 +55,28 @@ 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 = ''; @@ -132,11 +141,13 @@ 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'); @@ -144,11 +155,13 @@ 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); @@ -222,35 +235,38 @@ 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'; @@ -529,21 +545,24 @@ 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 60f7299834..fb95645573 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,37 +30,41 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -104,17 +108,19 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach(waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -126,18 +132,20 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - 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(); @@ -173,42 +181,46 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach(waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], - }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + }) + .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); - - heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + heroDetailsService = fixture.debugElement.injector.get( + HeroDetailService, + ) as unknown as HeroDetailServiceMock; - fixture.detectChanges(); + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.whenStable().then(() => { fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); }); - }); - })); + }), + ); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -248,69 +260,79 @@ 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); - }); - })); - - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); - })); + }), + ); + }); - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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 bb542e3249..d7ba271808 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,21 +19,23 @@ 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 08f6a1c2fa..514e5efbae 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,43 +20,49 @@ 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', - }); + it( + 'should return expected heroes (HttpClient called once)', + waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); - - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - })); + 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)); + + 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 b0cb4a5108..1a0ed9bbda 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,22 +6,24 @@ 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 875641ff8f..32c089448d 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,29 +21,31 @@ 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', () => { @@ -112,16 +114,19 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); - - fixture.whenStable().then(() => { + it( + 'should show quote after getQuote (waitForAsync)', + waitForAsync(() => { fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - })); + expect(quoteEl.textContent).toBe('...'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + }), + ); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -138,15 +143,18 @@ describe('TwainComponent', () => { .toPromise(); }); - it('should show quote after getQuote', waitForAsync(() => { - fixture.detectChanges(); - - twainService.getQuote().subscribe(() => { + it( + 'should show quote after getQuote', + waitForAsync(() => { 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 f13ecfb673..b12363b69d 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,27 +5,38 @@ 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 29dc0fba7d..7b549530c3 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,12 +26,14 @@ 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 7866693a2c..370cd83a69 100644 --- a/examples/example-app-v12/src/app/app.component.spec.ts +++ b/examples/example-app-v12/src/app/app.component.spec.ts @@ -21,53 +21,59 @@ 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 b29a8abeff..0acdb5b29e 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,9 +7,11 @@ 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 1f67b659d6..66b0235c1e 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,9 +27,11 @@ 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); @@ -90,9 +92,11 @@ 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 5ebee4160e..d04067162f 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,12 +28,15 @@ 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 179087b628..4b7a98c6ac 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,28 +21,30 @@ 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 531263644c..2030df3a72 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,41 +23,53 @@ 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)); @@ -75,17 +87,20 @@ 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)); @@ -172,16 +187,19 @@ 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(); + 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); }); - }).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 552785db74..3f6cc85226 100644 --- a/examples/example-app-v12/src/app/demo/demo.spec.ts +++ b/examples/example-app-v12/src/app/demo/demo.spec.ts @@ -19,11 +19,14 @@ 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 83fd128417..2e011b5f7c 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,19 +55,28 @@ 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 = ''; @@ -132,11 +141,13 @@ 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'); @@ -144,11 +155,13 @@ 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); @@ -222,35 +235,38 @@ 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'; @@ -529,21 +545,24 @@ 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 60f7299834..fb95645573 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,37 +30,41 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -104,17 +108,19 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach(waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -126,18 +132,20 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - 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(); @@ -173,42 +181,46 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach(waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], - }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + }) + .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); - - heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + heroDetailsService = fixture.debugElement.injector.get( + HeroDetailService, + ) as unknown as HeroDetailServiceMock; - fixture.detectChanges(); + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.whenStable().then(() => { fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); }); - }); - })); + }), + ); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -248,69 +260,79 @@ 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); - }); - })); - - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); - })); + }), + ); + }); - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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 bb542e3249..d7ba271808 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,21 +19,23 @@ 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 08f6a1c2fa..514e5efbae 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,43 +20,49 @@ 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', - }); + it( + 'should return expected heroes (HttpClient called once)', + waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); - - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - })); + 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)); + + 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 b0cb4a5108..1a0ed9bbda 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,22 +6,24 @@ 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 875641ff8f..32c089448d 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,29 +21,31 @@ 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', () => { @@ -112,16 +114,19 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); - - fixture.whenStable().then(() => { + it( + 'should show quote after getQuote (waitForAsync)', + waitForAsync(() => { fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - })); + expect(quoteEl.textContent).toBe('...'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + }), + ); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -138,15 +143,18 @@ describe('TwainComponent', () => { .toPromise(); }); - it('should show quote after getQuote', waitForAsync(() => { - fixture.detectChanges(); - - twainService.getQuote().subscribe(() => { + it( + 'should show quote after getQuote', + waitForAsync(() => { 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 f13ecfb673..b12363b69d 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,27 +5,38 @@ 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 29dc0fba7d..7b549530c3 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,12 +26,14 @@ 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 7866693a2c..370cd83a69 100644 --- a/examples/example-app-v13/src/app/app.component.spec.ts +++ b/examples/example-app-v13/src/app/app.component.spec.ts @@ -21,53 +21,59 @@ 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 b29a8abeff..0acdb5b29e 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,9 +7,11 @@ 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 1f67b659d6..66b0235c1e 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,9 +27,11 @@ 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); @@ -90,9 +92,11 @@ 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 5ebee4160e..d04067162f 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,12 +28,15 @@ 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 179087b628..4b7a98c6ac 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,28 +21,30 @@ 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 ca753b6655..210efa9d29 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,41 +23,53 @@ 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)); @@ -75,17 +87,20 @@ 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)); @@ -172,16 +187,19 @@ 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(); + 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); }); - }).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 6d6bb4f186..a4ad3f994a 100644 --- a/examples/example-app-v13/src/app/demo/demo.spec.ts +++ b/examples/example-app-v13/src/app/demo/demo.spec.ts @@ -19,11 +19,14 @@ 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 962f150ce0..dd8f103527 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,19 +55,28 @@ 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 = ''; @@ -132,11 +141,13 @@ 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'); @@ -144,11 +155,13 @@ 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); @@ -222,35 +235,38 @@ 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'; @@ -529,21 +545,24 @@ 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 83e2fffee8..35c5b111ed 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,37 +30,41 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -104,17 +108,19 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach(waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -126,18 +132,20 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - 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(); @@ -173,42 +181,46 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach(waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], - }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockImplementation(() => firstValueFrom(of(true))); + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + }) + .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); - - heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + heroDetailsService = fixture.debugElement.injector.get( + HeroDetailService, + ) as unknown as HeroDetailServiceMock; - fixture.detectChanges(); + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.whenStable().then(() => { fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); }); - }); - })); + }), + ); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -248,69 +260,79 @@ 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))); - }); - })); - - 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); + 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))); + }); + }), + ); - fixture.detectChanges(); + 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.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))); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); - })); + }), + ); + }); - 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); + 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))); + }); + }), + ); - fixture.detectChanges(); + 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.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 bb542e3249..d7ba271808 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,21 +19,23 @@ 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 a0d2931d4c..bda7a44911 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,43 +20,49 @@ 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(throwError(() => errorResponse)); + httpClientSpy.get.mockReturnValue(of(expectedHeroes)); - 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: (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)); + + 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 aa7898b34b..3431dbfbbd 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,22 +6,24 @@ 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 09b8d3e149..64843f26b6 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,29 +21,31 @@ 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', () => { @@ -112,16 +114,19 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); - - fixture.whenStable().then(() => { + it( + 'should show quote after getQuote (waitForAsync)', + waitForAsync(() => { fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - })); + expect(quoteEl.textContent).toBe('...'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + }), + ); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -137,15 +142,18 @@ describe('TwainComponent', () => { ); }); - it('should show quote after getQuote', waitForAsync(() => { - fixture.detectChanges(); - - twainService.getQuote().subscribe(() => { + it( + 'should show quote after getQuote', + waitForAsync(() => { 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 f13ecfb673..b12363b69d 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,27 +5,38 @@ 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 29dc0fba7d..7b549530c3 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,12 +26,14 @@ 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 7866693a2c..370cd83a69 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,53 +21,59 @@ 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 b29a8abeff..0acdb5b29e 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,9 +7,11 @@ 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 1f67b659d6..66b0235c1e 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,9 +27,11 @@ 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); @@ -90,9 +92,11 @@ 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 5ebee4160e..d04067162f 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,12 +28,15 @@ 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 179087b628..4b7a98c6ac 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,28 +21,30 @@ 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 531263644c..2030df3a72 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,41 +23,53 @@ 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)); @@ -75,17 +87,20 @@ 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)); @@ -172,16 +187,19 @@ 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(); + 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); }); - }).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 552785db74..3f6cc85226 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,11 +19,14 @@ 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 83fd128417..2e011b5f7c 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,19 +55,28 @@ 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 = ''; @@ -132,11 +141,13 @@ 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'); @@ -144,11 +155,13 @@ 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); @@ -222,35 +235,38 @@ 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'; @@ -529,21 +545,24 @@ 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 60f7299834..fb95645573 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,37 +30,41 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + expectedHero = firstHero; + activatedRoute.setParamMap({ id: expectedHero.id }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it("should display that hero's name", () => { expect(page.nameDisplay.textContent).toBe(expectedHero.name); @@ -104,17 +108,19 @@ describe('HeroDetailComponent', () => { }); describe('when navigate with no hero id', () => { - beforeEach(waitForAsync(() => { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - fixture.whenStable().then(() => { fixture.detectChanges(); - }); - })); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); + }), + ); it('should have hero.id === 0', () => { expect(component.hero.id).toBe(0); @@ -126,18 +132,20 @@ 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); - - fixture.detectChanges(); + beforeEach( + waitForAsync(() => { + activatedRoute.setParamMap({ id: 99999 }); + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - 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(); @@ -173,42 +181,46 @@ describe('HeroDetailComponent', () => { saveHero: ReturnType; }; - beforeEach(waitForAsync(() => { - void TestBed.configureTestingModule({ - imports: [HeroModule, RouterTestingModule], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroDetailService, useValue: {} }, - ], - }) - .overrideComponent(HeroDetailComponent, { - set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + imports: [HeroModule, RouterTestingModule], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: HeroDetailService, useValue: {} }, + ], }) - .compileComponents() - .then(() => { - const router = TestBed.inject(Router); - jest.spyOn(router, 'navigate').mockResolvedValue(true); + .overrideComponent(HeroDetailComponent, { + set: { providers: [{ provide: HeroDetailService, useClass: HeroDetailServiceMock }] }, + }) + .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); - - heroDetailsService = fixture.debugElement.injector.get(HeroDetailService) as unknown as HeroDetailServiceMock; + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + page = new Page(fixture); - hdsSpy = { - getHero: jest.spyOn(heroDetailsService, 'getHero'), - saveHero: jest.spyOn(heroDetailsService, 'saveHero'), - }; + heroDetailsService = fixture.debugElement.injector.get( + HeroDetailService, + ) as unknown as HeroDetailServiceMock; - fixture.detectChanges(); + hdsSpy = { + getHero: jest.spyOn(heroDetailsService, 'getHero'), + saveHero: jest.spyOn(heroDetailsService, 'saveHero'), + }; - fixture.whenStable().then(() => { fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + }); }); - }); - })); + }), + ); it('should have called `getHero`', () => { expect(hdsSpy.getHero.mock.calls.length).toEqual(1); @@ -248,69 +260,79 @@ 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); - }); - })); - - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(page.nameDisplay.textContent).toBe(expectedHero.name); }); - })); + }), + ); + }); - 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); + 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); + }); + }), + ); - fixture.detectChanges(); + 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.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 bb542e3249..d7ba271808 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,21 +19,23 @@ 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 08f6a1c2fa..514e5efbae 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,43 +20,49 @@ 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', - }); + it( + 'should return expected heroes (HttpClient called once)', + waitForAsync(() => { + const expectedHeroes: Hero[] = [ + { id: 1, name: 'A' }, + { id: 2, name: 'B' }, + ]; - httpClientSpy.get.mockReturnValue(throwError(errorResponse)); - - heroService.getHeroes().subscribe( - () => { - throw new Error('expected an error, not heroes'); - }, - (error) => { - expect(error.message).toContain('test 404 error'); - }, - ); - })); + 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)); + + 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 b0cb4a5108..1a0ed9bbda 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,22 +6,24 @@ 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 875641ff8f..32c089448d 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,29 +21,31 @@ 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', () => { @@ -112,16 +114,19 @@ describe('TwainComponent', () => { expect(errorMessage()).toBeNull(); })); - it('should show quote after getQuote (waitForAsync)', waitForAsync(() => { - fixture.detectChanges(); - expect(quoteEl.textContent).toBe('...'); - - fixture.whenStable().then(() => { + it( + 'should show quote after getQuote (waitForAsync)', + waitForAsync(() => { fixture.detectChanges(); - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull(); - }); - })); + expect(quoteEl.textContent).toBe('...'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(quoteEl.textContent).toBe(testQuote); + expect(errorMessage()).toBeNull(); + }); + }), + ); it('should show last quote (async)', async () => { fixture.detectChanges(); @@ -138,15 +143,18 @@ describe('TwainComponent', () => { .toPromise(); }); - it('should show quote after getQuote', waitForAsync(() => { - fixture.detectChanges(); - - twainService.getQuote().subscribe(() => { + it( + 'should show quote after getQuote', + waitForAsync(() => { 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/package.json b/package.json index 3693975c08..1131e0782a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jest-preset-angular", - "version": "11.1.1", + "version": "11.1.2", "description": "Jest preset configuration for Angular projects", "license": "MIT", "engines": {