How I can test ngrx effects using jasmine marbles? - jasmine

Question

I can't test NgRx effects. Can you help me?
Friends, help me please. I want test some effect, but i can't. I get error "Expected $[0].notification.value.payload to be a kind of Object, but was User({ name: '1212', roles: [ 'somerole' ] })".
I don't understand what wrong.
effect:
#Injectable({
providedIn: 'root'
})
#Injectable()
export class AuthEffects {
constructor(
private actions$: Actions,
private rootService: RootService,
private router: Router,
) {
}
#Effect()
authUser$: Observable<any> = this.actions$.pipe(
ofType(authActions.FETCHING),
map((action: authActions.Fetching) => action.payload),
switchMap((paylod: UserRequest) => this.rootService.login(paylod)
.pipe(
map((value) => {
const {sub, authorities} = value;
this.router.navigate(['/customers-list']);
return new authActions.Success(new User(sub, authorities));
}),
catchError(() => of(new authActions.Fail('wrong username or password')))
)
)
);
}
spec:
describe('AuthEffects', () => {
let effects: AuthEffects;
let rootService: jasmine.SpyObj<RootService>;
let actions: Observable<any>;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
providers: [
RootService,
AuthEffects,
provideMockActions(() => actions),
{
provide: RootService,
useValue: {
login: jasmine.createSpy()
}
}
]
});
effects = TestBed.get(AuthEffects);
rootService = TestBed.get(RootService);
});
it('should work', () => {
const userRequest: UserRequest = {
name: '1212',
password: 'alsj'
};
const userResponse: UserResponse = {
sub: '1212',
authorities: ['somerole']
};
const editedUser: User = {
name: '1212',
roles: ['somerole']
};
const action = new authActions.Fetching(userRequest);
const completion = new authActions.Success(editedUser);
actions = hot('-a', {a: action});
const response = cold('-a|', {a: userResponse});
rootService.login.and.returnValue(response);
const expected = cold('--b', {b: completion});
expect(effects.authUser$).toBeObservable(expected);
});
});
I tried make it according some example, but anything wrong.

Answer 1

You have to make a minor change to how you are setting the expect block in test. Try the following:
effects.authUser$.subscribe(actionSent => {
expect(actionSent).toBeObservable(expected)
})
instead of
expect(effects.authUser$).toBeObservable(expected);
I hope that will work for you.

Answer 2

seems like constructor break this. If I change effect code without constructor - its works
#Effect()
authUser$: Observable<any> = this.actions$.pipe(
ofType(authActions.FETCHING),
map((action: authActions.Fetching) => action.payload),
switchMap((paylod: UserRequest): any => this.rootService.login(paylod)
.pipe(
map((value: UserResponse) => {
const {sub, authorities} = value;
return new authActions.Success({
name: sub,
roles: authorities
});
}),
catchError(() => of(new authActions.Fail('wrong username or password')))
)
)
);