test: update login-page.component.spec with mockstore

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<LoginPageComponent>;
- let store: Store<fromAuth.State>;
  let instance: LoginPageComponent;
+ let mockStore: MockStore<fromAuth.State>;
 
  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);
+ });
  });
 });

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<fromAuth.State>) {}
 
- ngOnInit() {}
-
  onSubmit(credentials: Credentials) {
  this.store.dispatch(new LoginPageActions.Login({ credentials }));
  }

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"