Refactor Observable to avoid type assertion errors

Question

I'm writing unit tests for a CanDeactive Guard and I'm getting a type assertion error with my jasmine spec:

// Mock Guard defined at top of spec file
class MockGuardComponent implements ComponentCanDeactivate {
  // Set this value to the value you want to mock being returned from 
GuardedComponent
  returnValue: boolean | Observable<boolean>;

  canDeactivate(): boolean | Observable<boolean> {
    return this.returnValue || this.openConfirmDialog();
  }
}

it('will not route if guarded and user rejected the dialog', () => {
    // Mock the behavior of the MockGuardedComponent
    const subject$ = new Subject<boolean>();
    mockGuardComponent.returnValue = subject$.asObservable();
    const canDeactivate$ = <Observable<boolean>>(
      service.canDeactivate(mockGuardComponent)
    );
    canDeactivate$.subscribe((deactivate) => {
      // this is the real test
      expect(deactivate).toBeFalsy();
    });
    // Emulate the reject
    subject$.next(false);

}. );

This spec correctly throws the following error:

Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.

It doesn't like this part:

<Observable<boolean>>

I understand that it's probably better to use a BehaviorSubject instead but I'm already using a Subject so I'm not sure how to combine what I'm doing here. Any tips?

Answer 1

Change

const canDeactivate$ = <Observable<boolean>>(
      service.canDeactivate(mockGuardComponent)
    );

To

const canDeactivate$ = service.canDeactivate(mockGuardComponent) as Observable<boolean>;