I am using ngxs for state handling in angular, and I am trying to test our components as units, so preferably only with mock stores, states etc.
What we have in our component is something like:
export class SelectPlatformComponent {
@Select(PlatformListState) platformList$: Observable<PlatformListStateModel>;
constructor(private store: Store, private fb: FormBuilder) {
this.createForm();
this.selectPlatform();
}
createForm() {
this.selectPlatformForm = this.fb.group({
platform: null,
});
}
selectPlatform() {
const platformControl = this.selectPlatformForm.get('platform');
platformControl.valueChanges.forEach(
(value: Platform) => {
console.log("select platform " + value);
this.store.dispatch(new PlatformSelected(value));
}
);
}
}
And our fixture setup looks like this, so we can check calls on the store:
describe('SelectPlatformComponent', () => {
let component: SelectPlatformComponent;
let fixture: ComponentFixture<SelectPlatformComponent>;
let store: Store;
beforeEach(async(() => {
const storeSpy = jasmine.createSpyObj('Store', ['dispatch']);
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [SelectPlatformComponent],
providers: [{provide: Store, useValue: storeSpy}]
})
.compileComponents();
store = TestBed.get(Store);
}));
But when we run this, we get the following error:
Error: SelectFactory not connected to store!
at SelectPlatformComponent.createSelect (webpack:///./node_modules/@ngxs/store/fesm5/ngxs-store.js?:1123:23)
at SelectPlatformComponent.get [as platformList$] (webpack:///./node_modules/@ngxs/store/fesm5/ngxs-store.js?:1150:89)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/SelectPlatformComponent.ngfactory.js:78:87)
at Object.debugUpdateDirectives [as updateDirectives] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11028:21)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10425:14)
at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10666:21)
at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10608:13)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10431:5)
at callWithDebugContext (webpack:///./node_modules/@angular/core/fesm5/core.js?:11318:25)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (webpack:///./node_modules/@angular/core/fesm5/core.js?:10996:12)
I could enable the entire ngxs module for this, but then I would need to create services mocks to inject into state objects, which I do not like because I am then not testing the component in isolation anymore. I tried to create a mock SelectFactory, but it seems it is not exported from the module.
Is there a way to mock the SelectFactory, or inject some mocks into the platformList$ directly? Other suggestions?
PS: I also asked this on stackoverflow, but no real answer was given: https://stackoverflow.com/questions/51082002/how-to-mock-select-in-ngxs-when-using-a-mock-store
I am using ngxs for state handling in angular, and I am trying to test our components as units, so preferably only with mock stores, states etc.
What we have in our component is something like:
And our fixture setup looks like this, so we can check calls on the store:
But when we run this, we get the following error:
I could enable the entire ngxs module for this, but then I would need to create services mocks to inject into state objects, which I do not like because I am then not testing the component in isolation anymore. I tried to create a mock SelectFactory, but it seems it is not exported from the module.
Is there a way to mock the SelectFactory, or inject some mocks into the platformList$ directly? Other suggestions?
PS: I also asked this on stackoverflow, but no real answer was given: https://stackoverflow.com/questions/51082002/how-to-mock-select-in-ngxs-when-using-a-mock-store