Here is a snippet from my component.ts file:
import { Component, OnInit } from '@angular/core';
import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';
import { PersonalDetailsComponent } from '../personal-details/personal-details.component'
@Component({
selector: 'app-profile-details',
templateUrl: './profile-details.component.html'
})
export class ProfileDetailsComponent implements OnInit {
@select(['customerData', 'personalDetails'])personalDetails:Observable<object>; //<------if i comment out @select statement, then the tests work
@select(['loading']) loading: Observable<boolean>;//<------if i comment out @select statement, then the tests work
constructor() { }
ngOnInit() { }
}
Below is how my jasmine test for the ProfileDetailsComponent looks like:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NgRedux, select } from 'ng2-redux';
import { ProfileDetailsComponent } from './profile-details.component';
import { customerData } from '../data/customerProfileDataMock';
import { PersonalDetailsComponent } from '../personal-details/personal-details.component'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
class RouterStub { navigate(params) { } }
class MockSelect { }
class MockObservable<T> {}
class NgReduxStub {
constructor() { }
dispatch = () => undefined;
getState = () => { return customerData; };
subscribe = () => undefined;
}
describe('ProfileDetailsComponent', () => {
let component: ProfileDetailsComponent;
let fixture: ComponentFixture<ProfileDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProfileDetailsComponent, PersonalDetailsComponent],
providers: [
{ provide: Router, useClass: RouterStub },
{ provide: select, useClass: MockSelect },
{ provide: NgRedux, useClass: NgReduxStub },
{ provide: Observable, useClass: MockObservable }
],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create the profile details page', () => {
expect(component).toBeTruthy();
});
});
Despite setting up mocks in the test, I'm encountering an issue where the @select statement is not being mocked correctly. This leads to an error when running the tests using the command 'ng test':
TypeError: ng_redux_1.NgRedux.instance is undefined in src/test.ts