CODEWITHSUNDEEP
jasminekarma-runnerngrxjasmine-marbles
Heckler
Heckler

Reputation: 31

How I can test ngrx effects using jasmine marbles?

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.

Upvotes: 2

Views: 657

Answers (2)

Heckler
Heckler

Reputation: 31

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')))
        )
    )
  );

Upvotes: 0

RV.
RV.

Reputation: 2998

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.

Upvotes: 2

Related Questions