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"