title: Angular: Testing guards that return observables
body: <p>I am trying to test an auth guard that returns an observable, and makes a call to another function. My guard looks like this (lifted from Todd Motto. Cheers Todd):</p>
  
  <pre><code>@Injectable()
  export class ProductSummaryLoadedGuard implements CanActivate {
    constructor(private store: Store&lt;fromProductStore.State&gt;) {}
  
    canActivate(): Observable&lt;boolean&gt; {
      return this.checkStore().pipe(
        switchMap(() =&gt; of(true)),
        catchError(() =&gt; of(false))
      );
    }
  
    checkStore(): Observable&lt;boolean&gt; {
      return this.store.pipe(select(fromProductStore.selectProductLoaded)).pipe(
        tap(loaded =&gt; {
          if (!loaded) {
            this.store.dispatch(new fromProductStore.LoadProductSummary());
          }
        }),
        filter(loaded =&gt; loaded),
        take(1)
      );
    }
  }
  </code></pre>
  
  <p>I have put together the skeleton of the spec for this, and the extract causing the issue is this:</p>
  
  <pre><code>it('should return true when checkStore() returns true', () =&gt; {
    spyOn(guard, 'checkStore').and.returnValue(of(true));
  
    const result = guard.canActivate();
    expect(result).toBeObservable(of(true));
  });
  </code></pre>
  
  <p>I run into this error in Karma when executing this spec:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'indexOf' of undefined
       at Function.TestScheduler.parseMarbles (./node_modules/rxjs/_esm5/internal/testing/TestScheduler.js?:243:21)</p>
  </blockquote>
  
  <p>What am I missing here? I don't want to go down the route of using marble testing for just this one method but if someone can suggest a way then I'd be happy to try it!</p>