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 9da3433266..262d021cd4 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 @@ -2,36 +2,45 @@ import { TestBed, ComponentFixture } from '@angular/core/testing'; import { MatInputModule, MatCardModule } from '@angular/material'; import { ReactiveFormsModule } from '@angular/forms'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { StoreModule, Store, combineReducers } from '@ngrx/store'; +import { Store } from '@ngrx/store'; import { LoginPageComponent } from '@example-app/auth/containers/login-page.component'; import { LoginFormComponent } from '@example-app/auth/components/login-form.component'; import * as fromAuth from '@example-app/auth/reducers'; import { LoginPageActions } from '@example-app/auth/actions'; +import { MockStore, provideMockStore } from '@ngrx/store/testing'; describe('Login Page', () => { let fixture: ComponentFixture; - let store: Store; let instance: LoginPageComponent; + let mockStore: MockStore; beforeEach(() => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - StoreModule.forRoot({ - auth: combineReducers(fromAuth.reducers), - }), MatInputModule, MatCardModule, ReactiveFormsModule, ], + providers: [ + provideMockStore({ + initialState: { + auth: { + loginPage: { + pending: false, + }, + }, + }, + }), + ], declarations: [LoginPageComponent, LoginFormComponent], }); fixture = TestBed.createComponent(LoginPageComponent); instance = fixture.componentInstance; - store = TestBed.get(Store); + mockStore = TestBed.get(Store); - spyOn(store, 'dispatch').and.callThrough(); + spyOn(mockStore, 'dispatch').and.callThrough(); }); /** @@ -55,12 +64,14 @@ describe('Login Page', () => { expect(fixture).toMatchSnapshot(); }); - it('should dispatch a login event on submit', () => { - const credentials: any = {}; - const action = new LoginPageActions.Login({ credentials }); + describe('onSubmit()', () => { + it('should dispatch a login event on submit', () => { + const credentials: any = {}; + const action = new LoginPageActions.Login({ credentials }); - instance.onSubmit(credentials); + instance.onSubmit(credentials); - expect(store.dispatch).toHaveBeenCalledWith(action); + expect(mockStore.dispatch).toHaveBeenCalledWith(action); + }); }); }); diff --git a/projects/example-app/src/app/auth/containers/login-page.component.ts b/projects/example-app/src/app/auth/containers/login-page.component.ts index f56a2577f6..233f10f241 100644 --- a/projects/example-app/src/app/auth/containers/login-page.component.ts +++ b/projects/example-app/src/app/auth/containers/login-page.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { Store, select } from '@ngrx/store'; import { Credentials } from '@example-app/auth/models/user'; import * as fromAuth from '@example-app/auth/reducers'; @@ -15,14 +15,12 @@ import { LoginPageActions } from '@example-app/auth/actions'; `, styles: [], }) -export class LoginPageComponent implements OnInit { +export class LoginPageComponent { pending$ = this.store.pipe(select(fromAuth.getLoginPagePending)); error$ = this.store.pipe(select(fromAuth.getLoginPageError)); constructor(private store: Store) {} - ngOnInit() {} - onSubmit(credentials: Credentials) { this.store.dispatch(new LoginPageActions.Login({ credentials })); } diff --git a/tsconfig.json b/tsconfig.json index 79fe136de2..a60aa9506a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "@ngrx/effects/schematics-core": ["./modules/effects/schematics-core"], "@ngrx/store": ["./modules/store"], "@ngrx/store/schematics-core": ["./modules/store/schematics-core"], + "@ngrx/store/testing": ["./modules/store/testing"], "@ngrx/store-devtools": ["./modules/store-devtools"], "@ngrx/store-devtools/schematics-core": [ "./modules/store-devtools/schematics-core"