diff --git a/modules/store/testing/spec/mock_store.spec.ts b/modules/store/testing/spec/mock_store.spec.ts index 8d093da32d..1a904ef8f4 100644 --- a/modules/store/testing/spec/mock_store.spec.ts +++ b/modules/store/testing/spec/mock_store.spec.ts @@ -516,106 +516,3 @@ describe('Refreshing state', () => { expect(getTodoItems('li')[0].nativeElement.textContent.trim()).toBe('bbb'); }); }); - -describe('Cleans up after each test', () => { - const selectData = createSelector( - (state: any) => state, - (state) => state.value - ); - - it('should return the mocked selectors value', (done: any) => { - TestBed.configureTestingModule({ - providers: [ - provideMockStore({ - initialState: { - value: 100, - }, - selectors: [{ selector: selectData, value: 200 }], - }), - ], - }); - - const store = TestBed.inject(Store); - store.pipe(select(selectData)).subscribe((v) => { - expect(v).toBe(200); - done(); - }); - }); - - it('should return the real value', (done: any) => { - TestBed.configureTestingModule({ - imports: [ - StoreModule.forRoot({} as any, { - initialState: { - value: 300, - }, - }), - ], - }); - - const store = TestBed.inject(Store); - store.pipe(select(selectData)).subscribe((v) => { - expect(v).toBe(300); - done(); - }); - }); -}); - -describe('Resets selectors after each test', () => { - const selectorUnderTest = createSelector( - (state: any) => state, - (state) => state.value - ); - let shouldSetMockStore = true; - - function setupModules(isMock: boolean) { - if (isMock) { - TestBed.configureTestingModule({ - providers: [ - provideMockStore({ - initialState: { - value: 100, - }, - selectors: [{ selector: selectorUnderTest, value: 200 }], - }), - ], - }); - } else { - TestBed.configureTestingModule({ - imports: [ - StoreModule.forRoot({} as any, { - initialState: { - value: 300, - }, - }), - ], - }); - } - } - - /** - * Tests run in random order, so that's why we have two attempts (one runs - * before another - in any order) and whichever runs the test first would - * setup MockStore and override selector. The next one would use the regular - * Store and verifies that the selector is cleared/reset. - */ - it('should reset selector - attempt one', (done: any) => { - setupModules(shouldSetMockStore); - const store: Store<{}> = TestBed.inject(Store); - store.select(selectorUnderTest).subscribe((v) => { - expect(v).toBe(shouldSetMockStore ? 200 : 300); - shouldSetMockStore = false; - done(); - }); - }); - - it('should reset selector - attempt two', (done: any) => { - setupModules(shouldSetMockStore); - const store: Store<{}> = TestBed.inject(Store); - store.select(selectorUnderTest).subscribe((v) => { - expect(v).toBe(shouldSetMockStore ? 200 : 300); - shouldSetMockStore = false; - done(); - }); - }); -}); diff --git a/modules/store/testing/src/mock_store.ts b/modules/store/testing/src/mock_store.ts index 8c02ebbb0f..1530ea7798 100644 --- a/modules/store/testing/src/mock_store.ts +++ b/modules/store/testing/src/mock_store.ts @@ -1,5 +1,4 @@ import { Inject, Injectable } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; import { Observable, BehaviorSubject } from 'rxjs'; import { Action, @@ -15,18 +14,6 @@ import { MockState } from './mock_state'; import { MockSelector } from './mock_selector'; import { MOCK_SELECTORS } from './tokens'; -if (typeof afterEach === 'function') { - afterEach(() => { - try { - const mockStore: MockStore | undefined = TestBed.inject(MockStore); - if (mockStore) { - mockStore.resetSelectors(); - } - // eslint-disable-next-line no-empty - } catch {} - }); -} - type OnlyMemoized = T extends string | MemoizedSelector ? MemoizedSelector : T extends MemoizedSelectorWithProps diff --git a/projects/example-app/jest.config.js b/projects/example-app/jest.config.js index fe84ba030a..ccda2087df 100644 --- a/projects/example-app/jest.config.js +++ b/projects/example-app/jest.config.js @@ -14,4 +14,5 @@ module.exports = { moduleNameMapper: { tslib: '../../node_modules/tslib/tslib.es6.js', }, + testRunner: 'jest-circus/runner', }; diff --git a/projects/example-app/src/app/auth/components/login-form.component.spec.ts b/projects/example-app/src/app/auth/components/login-form.component.spec.ts index cc4063735b..52aba4fbe0 100644 --- a/projects/example-app/src/app/auth/components/login-form.component.spec.ts +++ b/projects/example-app/src/app/auth/components/login-form.component.spec.ts @@ -59,7 +59,7 @@ describe('Login Page', () => { }; instance.form.setValue(credentials); - spyOn(instance.submitted, 'emit'); + jest.spyOn(instance.submitted, 'emit'); instance.submit(); expect(instance.submitted.emit).toHaveBeenCalledWith(credentials); diff --git a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts index a5828736be..ce5eaef0da 100644 --- a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts +++ b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts @@ -30,7 +30,7 @@ describe('Login Page', () => { instance = fixture.componentInstance; store = TestBed.inject(MockStore); - spyOn(store, 'dispatch'); + jest.spyOn(store, 'dispatch'); }); /** diff --git a/projects/example-app/src/app/auth/effects/auth.effects.spec.ts b/projects/example-app/src/app/auth/effects/auth.effects.spec.ts index 8bc26b1a4e..570a2c20b3 100644 --- a/projects/example-app/src/app/auth/effects/auth.effects.spec.ts +++ b/projects/example-app/src/app/auth/effects/auth.effects.spec.ts @@ -50,7 +50,7 @@ describe('AuthEffects', () => { routerService = TestBed.inject(Router); dialog = TestBed.inject(MatDialog); - spyOn(routerService, 'navigate').and.callThrough(); + jest.spyOn(routerService, 'navigate'); }); describe('login$', () => { diff --git a/projects/example-app/src/app/books/containers/collection-page.component.spec.ts b/projects/example-app/src/app/books/containers/collection-page.component.spec.ts index 7466816b92..4520e9cb97 100644 --- a/projects/example-app/src/app/books/containers/collection-page.component.spec.ts +++ b/projects/example-app/src/app/books/containers/collection-page.component.spec.ts @@ -43,7 +43,7 @@ describe('Collection Page', () => { instance = fixture.componentInstance; store = TestBed.inject(MockStore); - spyOn(store, 'dispatch'); + jest.spyOn(store, 'dispatch'); }); it('should compile', () => { diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts index 0fd75788f5..cae827bbf2 100644 --- a/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts +++ b/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts @@ -56,7 +56,7 @@ describe('Find Book Page', () => { instance = fixture.componentInstance; store = TestBed.inject(MockStore); - spyOn(store, 'dispatch'); + jest.spyOn(store, 'dispatch'); }); it('should compile', () => { diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts index 8f17f4ad75..8a2c72ed8d 100644 --- a/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts +++ b/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts @@ -35,7 +35,7 @@ describe('Selected Book Page', () => { instance = fixture.componentInstance; store = TestBed.inject(MockStore); - spyOn(store, 'dispatch'); + jest.spyOn(store, 'dispatch'); }); it('should compile', () => { diff --git a/projects/ngrx.io/content/examples/store-walkthrough/src/app/tests/app.component.1.spec.ts b/projects/ngrx.io/content/examples/store-walkthrough/src/app/tests/app.component.1.spec.ts index f1125ae8b2..939f3c7857 100644 --- a/projects/ngrx.io/content/examples/store-walkthrough/src/app/tests/app.component.1.spec.ts +++ b/projects/ngrx.io/content/examples/store-walkthrough/src/app/tests/app.component.1.spec.ts @@ -1,4 +1,5 @@ import { MemoizedSelector } from '@ngrx/store'; +import { Store, StoreModule } from '@ngrx/store'; import { provideMockStore, MockStore } from '@ngrx/store/testing'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing'; @@ -96,3 +97,51 @@ describe('AppComponent', () => { //#enddocregion mockSelector }); }); + +//#docregion resetMockSelector +describe('AppComponent reset selectors', () => { + let store: MockStore; + + afterEach(() => { + store?.resetSelectors(); + }); + + it('should return the mocked value', (done: any) => { + TestBed.configureTestingModule({ + providers: [ + provideMockStore({ + selectors: [ + { + selector: selectBooks, + value: [ + { + id: 'mockedId', + volumeInfo: { + title: 'Mocked Title', + authors: ['Mocked Author'], + }, + }, + ], + }, + ], + }), + ], + }); + + store = TestBed.inject(MockStore); + + store.select(selectBooks).subscribe((mockBooks) => { + expect(mockBooks).toEqual([ + { + id: 'mockedId', + volumeInfo: { + title: 'Mocked Title', + authors: ['Mocked Author'], + }, + }, + ]); + done(); + }); + }); +}); +//#enddocregion resetMockSelector diff --git a/projects/ngrx.io/content/guide/store/testing.md b/projects/ngrx.io/content/guide/store/testing.md index 2d6560a279..d0333b4905 100644 --- a/projects/ngrx.io/content/guide/store/testing.md +++ b/projects/ngrx.io/content/guide/store/testing.md @@ -73,11 +73,9 @@ Usage: In this example based on the [walkthrough](guide/store/walkthrough), we mock the `selectBooks` selector by using `overrideSelector`, passing in the `selectBooks` selector with a default mocked return value of an array of books. Similarly, we mock the `selectBookCollection` selector and pass the selector together with another array. In the test, we use `setResult()` to update the mock selectors to return new array values, then we use `MockStore.refreshState()` to trigger an emission from the `selectBooks` and `selectBookCollection` selectors. -
- -**Note:** `MockStore` will reset all of the mocked selectors after each test (in the `afterEach()` hook) by calling the `MockStore.resetSelectors()` method. +You can reset selectors by calling the `MockStore.resetSelectors()` method in the `afterEach()` hook. -
+ Try the .