Как проверить охранники в Angular 7 ngrx 6.1

Question

Мы использовали Angular 5 и обновили его до 7. На данный момент магазин выбирает wripes in pipe ();

Некоторые модульные тесты не пройдены:

export class MyGuard  {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
   
    this.store.dispatch(new Action());
    return this.store.pipe(
      select<IAppState>(getMainState),
      map((state: IState) => {
    this.router.navigate(['/', url]);
      }),
      catchError((a, b) => {
        this.router.navigate(['/', 'error']);
        return of(false);
      }),
    );
  }

И юнит-тест:

 it('should redirect to page ', inject(
    [MyGuard, Service],
    (guard: MyGuard, service: Service) => {
      spyOn(service, 'method').and.callFake(b => of({ id: { status: 'ok'} }));

      const route = new ActivatedRouteSnapshot();
      route.params = { id: '2' };
      const activation = guard.canActivate(route, {
        root: null,
        url: 'url',
      });

      if (activation instanceof Observable) {
        activation.subscribe(activationValue => {
          expect(activationValue).toBe(false);
expect(router.navigate).toHaveBeenCalled();

        });
      } else {
        fail('should not happen - should return an observable with true');
      }
    },
  ));

И мы получим ошибку, потому что активация (guard.canActivate) не наблюдается.Не могли бы вы помочь и рассказать, как провести рефакторинг юнит-тестов в соответствии с новым ngrx?

Answer 1

Похоже, есть несколько проблем с тем, что вы опубликовали.

Обновление: Изначально я думал, что вы использовали старый выбор rxjs, но это было неправильно.Убедитесь, что вы используете select from ngrx с таким импортом:

import { select } from '@ngrx/store';

Если вам требуется canActivate() для возврата Observable, не объявляйте его так:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

, а лучше объявить это так:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

Еще один проблемный раздел:

map((state: IState) => {
     this.router.navigate(['/', url]);
}),

Прежде всего, он не возвращаетсячто угодно, поэтому он разрывает наблюдаемую цепочку - возможно, самое простое решение - просто удалить фигурные скобки, чтобы он возвращал значение из this.router.navigate().Но в этом разделе есть вторая проблема: this.router.navigate возвращает обещание, а не наблюдаемое, поэтому, если вы хотите использовать его в наблюдаемой цепочке, вам нужно заключить его в from.Наконец, так как это само по себе Observable и возвращает Observable, вы захотите использовать такой оператор, как mergeMap или switchMap в зависимости от ваших потребностей.

Я не уверен, что вы пытаетесьсделать в пределах catchError, поэтому я оставил это в покое, но вы захотите проверить это в случае ошибки, чтобы убедиться, что она работает так, как вы ожидаете.

Я также нашел ваш текущий отступ довольносбивает с толку.

Наконец, вы не опубликовали детали того, как this.store выглядит в вашей конкретной реализации.Будьте уверены, это возвращает наблюдаемое!:)

Соберите все это вместе, и один возможный рефакторинг может выглядеть так:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

    this.store.dispatch(new Action());
    return this.store.pipe(
        select<IAppState>(getMainState),
        mergeMap((state: IState) => 
            from(this.router.navigate(['/', url]))
        ),
        catchError((a, b) => {
            this.router.navigate(['/', 'error']);
            return of(false);
        }),
    );
}

Я менее чем на 50% уверен, что это будет работать как есть, однако из-за всех неизвестныхЯ подробно изложил выше.Я надеюсь, что это поможет, по крайней мере, указать вам верное направление поиска ответа.