diff --git a/projects/jest-utils/src/lib/configure-test-suite.ts b/projects/jest-utils/src/lib/configure-test-suite.ts index f6ff3143..55cd1865 100644 --- a/projects/jest-utils/src/lib/configure-test-suite.ts +++ b/projects/jest-utils/src/lib/configure-test-suite.ts @@ -1,7 +1,10 @@ import { TestBed, getTestBed, ComponentFixture } from '@angular/core/testing'; import 'jest'; -// Ref: https://github.com/angular/angular/issues/12409 +/** + * Use with caution, this might brake some tests + * Ref: https://github.com/angular/angular/issues/12409 + */ export function configureJestSetup() { const testBedApi: any = getTestBed(); const originReset = TestBed.resetTestingModule; diff --git a/projects/testing-library/src/jest-utils/create-mock.ts b/projects/jest-utils/src/lib/create-mock.ts similarity index 100% rename from projects/testing-library/src/jest-utils/create-mock.ts rename to projects/jest-utils/src/lib/create-mock.ts diff --git a/projects/jest-utils/src/lib/index.ts b/projects/jest-utils/src/lib/index.ts index ea63e26e..5cd8585b 100644 --- a/projects/jest-utils/src/lib/index.ts +++ b/projects/jest-utils/src/lib/index.ts @@ -1 +1,2 @@ export * from './configure-test-suite'; +export * from './create-mock'; diff --git a/projects/testing-library/tests/jest-utils/create-mock.spec.ts b/projects/jest-utils/tests/create-mock.spec.ts similarity index 90% rename from projects/testing-library/tests/jest-utils/create-mock.spec.ts rename to projects/jest-utils/tests/create-mock.spec.ts index 1dd04b51..cb60997c 100644 --- a/projects/testing-library/tests/jest-utils/create-mock.spec.ts +++ b/projects/jest-utils/tests/create-mock.spec.ts @@ -1,8 +1,9 @@ -import { createMock, provideMock, Mock } from '../../src/jest-utils'; -import { render } from '../../src/public_api'; import { Component } from '@angular/core'; import { TestBed } from '@angular/core/testing'; +import { createMock, provideMock, Mock } from '../src/public_api'; +import { render } from '../../testing-library/src/public_api'; + class FixtureService { constructor(private foo: string, public bar: string) {} diff --git a/projects/testing-library/src/jest-utils/configure-test-suite.ts b/projects/testing-library/src/jest-utils/configure-test-suite.ts deleted file mode 100644 index f6ff3143..00000000 --- a/projects/testing-library/src/jest-utils/configure-test-suite.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { TestBed, getTestBed, ComponentFixture } from '@angular/core/testing'; -import 'jest'; - -// Ref: https://github.com/angular/angular/issues/12409 -export function configureJestSetup() { - const testBedApi: any = getTestBed(); - const originReset = TestBed.resetTestingModule; - - beforeAll(() => { - TestBed.resetTestingModule(); - TestBed.resetTestingModule = () => TestBed; - }); - - afterEach(() => { - testBedApi._activeFixtures.forEach((fixture: ComponentFixture) => fixture.destroy()); - testBedApi._instantiated = false; - }); - - afterAll(() => { - TestBed.resetTestingModule = originReset; - TestBed.resetTestingModule(); - }); -} diff --git a/projects/testing-library/src/jest-utils/index.ts b/projects/testing-library/src/jest-utils/index.ts deleted file mode 100644 index 5cd8585b..00000000 --- a/projects/testing-library/src/jest-utils/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './configure-test-suite'; -export * from './create-mock'; diff --git a/src/app/__snapshots__/app.component.spec.ts.snap b/src/app/__snapshots__/app.component.spec.ts.snap index 4cfbdf1f..8f9682ec 100644 --- a/src/app/__snapshots__/app.component.spec.ts.snap +++ b/src/app/__snapshots__/app.component.spec.ts.snap @@ -9,7 +9,7 @@ exports[`matches snapshot 1`] = ` style="text-align:center" >

- Welcome to app! + Welcome to app!

Angular Logo

- Here are some links to help you start: + Here are some links to help you start:

+ `; diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a4..1e153467 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,11 +1,13 @@
-

- Welcome to {{ title }}! -

- Angular Logo +

Welcome to {{ title }}!

+ Angular Logo
-

Here are some links to help you start:

+

Here are some links to help you start:

+ diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index cecd3677..372ab066 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,11 +1,12 @@ import { TestBed } from '@angular/core/testing'; import { Store } from '@ngrx/store'; import { provideMockStore } from '@ngrx/store/testing'; + import { render } from '@testing-library/angular'; -import { configureJestSetup } from '@testing-library/angular/jest-utils'; -import { AppComponent } from './app.component'; +import { provideMock } from '@testing-library/angular/jest-utils'; -configureJestSetup(); +import { AppComponent } from './app.component'; +import { GreetService } from './greet.service'; test(`matches snapshot`, async () => { const { container } = await render('', { @@ -36,5 +37,17 @@ test(`should be able to get the Store`, async () => { declarations: [AppComponent], providers: [provideMockStore()], }); - expect(TestBed.get(Store)).toBeDefined(); + expect(TestBed.get>(Store)).toBeDefined(); +}); + +test(`should provide a mock greet service`, async () => { + const component = await render(AppComponent, { + declarations: [AppComponent], + providers: [provideMockStore(), provideMock(GreetService)], + }); + const service: GreetService = TestBed.get(GreetService); + + component.click(component.getByText('Greet')); + + expect(service.greet).toHaveBeenCalled(); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cd32302d..137aab3d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; +import { GreetService } from './greet.service'; @Component({ selector: 'app-root', @@ -9,5 +10,9 @@ import { Store } from '@ngrx/store'; export class AppComponent { title = 'app'; - constructor(private store: Store) {} + constructor(private store: Store, private greetService: GreetService) {} + + greet() { + this.greetService.greet(); + } } diff --git a/src/app/greet.service.ts b/src/app/greet.service.ts new file mode 100644 index 00000000..93991444 --- /dev/null +++ b/src/app/greet.service.ts @@ -0,0 +1,10 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class GreetService { + greet(): void { + console.log('👋👋'); + } +}