Our Work

Angular NgRx Testing

Updated today

Import the StoreModule.forRoot in the TestBed configuration when testing components or services that inject store.

Reducing state is synchronous, so mocking out the store isn't required.

You can refer the example here: 
https://github.com/KtreeOpenSource/AngularExamples/tree/master/ngrxDemo

Step:1

Getting data from the store

.src/app/components/user-component/user-component.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromStore from '../../store/reducers/index';
@Component({
selector: 'app-user-component',
templateUrl: './user-component.component.html',
styleUrls: ['./user-component.component.css']
})
export class UserComponentComponent implements OnInit {
public users = [];
constructor(public store: Store<fromStore.State>) { }
ngOnInit() {
   this.store.select('user').subscribe(res => {
     this.users = res.users;
   });
}
getUsersFromSelectors() {
   this.store.select(fromStore.getUserName).subscribe(res => {
     console.log(res);
   });
}
}

Step:2

Importing the StoreModule.forRoot in TestBed configuration

.src/app/components/user-component/user-component.component.spec.ts
import { StoreModule, Store } from '@ngrx/store';
import * as fromRoot from '../../store/reducers/index';
beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [ UserComponentComponent ],
     imports: [
       HttpClientModule,
       StoreModule.forRoot({
           ...fromRoot.reducers
       })
     ],
   })
   .compileComponents();
}));

Step:3

Create store in the spec file

.src/app/components/user-component/user-component.component.spec.ts
describe('UserComponentComponent', () => {
let component: UserComponentComponent;
let fixture: ComponentFixture<UserComponentComponent>;
let store: Store<fromRoot.State>;
beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [ UserComponentComponent ],
     imports: [
       HttpClientModule,
       StoreModule.forRoot({
           ...fromRoot.reducers
       })
     ],
   })
   .compileComponents();
}));
beforeEach(() => {
   fixture = TestBed.createComponent(UserComponentComponent);
   component = fixture.componentInstance;
   store = TestBed.get(Store);
fixture.detectChanges();
});
it('should create', () => {
   expect(component).toBeTruthy();
});
});

Step:4

Testing the data exists in the store or not by dispatching the data to the store

.src/app/components/user-component/user-component.component.spec.ts
it('should check users exists or not in init', () => {
   const users = [{
     'id': 1,
     'userName': 'test1',
     'email': '[email protected]'
   }, {
     'id': 2,
     'userName': 'test2',
     'email': '[email protected]'
   }];
   store.dispatch(new UserActions.LoadUsers(users));
   component.ngOnInit();
   expect(component.users).toEqual(users);
});

Looking for Meanstack Developer?

Please Contact us if you have any Mean Stack Implementation requirements. Hire dedicated Mean Stack developers or Mean Stack Development services from KTree. KTree is Best offshore Web & Mobile development company with extensive experience in Angular Development

Request For Quote