Angular：测试返回 observables 的守卫

Question

我正在尝试测试一个返回 observable 并调用另一个函数的身份验证守卫。我的后卫看起来像这样（从 Todd Motto 解除。干杯 Todd）：

@Injectable()
export class ProductSummaryLoadedGuard implements CanActivate {
  constructor(private store: Store<fromProductStore.State>) {}

  canActivate(): Observable<boolean> {
    return this.checkStore().pipe(
      switchMap(() => of(true)),
      catchError(() => of(false))
    );
  }

  checkStore(): Observable<boolean> {
    return this.store.pipe(select(fromProductStore.selectProductLoaded)).pipe(
      tap(loaded => {
        if (!loaded) {
          this.store.dispatch(new fromProductStore.LoadProductSummary());
        }
      }),
      filter(loaded => loaded),
      take(1)
    );
  }
}

我已经为此整理了规范的框架，导致问题的摘录是这样的：

it('should return true when checkStore() returns true', () => {
  spyOn(guard, 'checkStore').and.returnValue(of(true));

  const result = guard.canActivate();
  expect(result).toBeObservable(of(true));
});

执行此规范时，我在 Karma 中遇到此错误：

TypeError：无法读取未定义的属性“indexOf” 在 Function.TestScheduler.parseMarbles (./node_modules/rxjs/_esm5/internal/testing/TestScheduler.js?:243:21)

我在这里缺少什么？我不想只为这一种方法使用大理石测试，但如果有人可以建议一种方法，那么我很乐意尝试！

Answer 1

来自 NgRx 的示例 Effect testing 代码显示使用 toBeObservable 因此：

const expected = hot('-------a', {
  a: {
    type: '[Customers API] Search Customers Success',
    customers: [...],
  },
});

expect(
  effects.searchCustomers$({
    debounce: 20,
    scheduler: getTestScheduler(),
  })
).toBeObservable(expected);

.toBeObservable() 期待 TestHotObservable 或 TestColdObservable，它们具有 marbles 属性。我来到这里是因为使用不带参数的.toBeObservable() 得到TypeError: Cannot read property 'marbles' of undefined 的错误。

如果您想使用不是 TestXXXObservable 类型的 observable 进行测试，您必须订阅它们并在订阅中验证结果，如 NgRx testing example 所示：

// create an actions stream and immediately dispatch a GET action
actions$ = of({ type: '[Customers Page] Get Customers' });

// mock the service to prevent an HTTP request
customersServiceSpy.getAllCustomers.and.returnValue(of([...]));

// subscribe to the Effect stream and verify it dispatches a SUCCESS action
effects.getAll$.subscribe(action => {
  expect(action).toEqual({
    type: '[Customers API] Get Customers Success',
    customers: [...],
  });
});