title: Angular spy RxJS observable
body: <p>I want to test a service and mock the provider it gets. The problem is that I call an observable of that provider which I cant spy on:</p>
  <pre><code>export class MyDataService {
    destroy$ = new Subject();
  
    constructor(
      private wsService: WebsocketService
    ) {
      this.wsService
        .connected$
        .pipe(takeUntil(this.destroy$))
        .subscribe(connected =&gt; this.onConnected(connected));
     }
  
     myCoolFunction() {
        // ...
     }
  
     ngOnDestory() {
        this.destroy.next();
        this.destroy.complete();
     }
  }
  </code></pre>
  <p>My test:</p>
  <pre><code>describe('MyDataService', () =&gt; {
    let service: MyDataService;
  
    beforeEach(() =&gt; {
      const websocketServiceSpy = jasmine.createSpyObj('WebsocketService', [], ['connected$']);
  
      TestBed.configureTestingModule({
        providers: [
          {
            provide:  WebsocketService,
            useValue: websocketServiceSpy,
          }
        ],
      });
      service             = TestBed.inject(MyDataService);
    });
  
    it('should be created', () =&gt; {
      expect(service).toBeTruthy();
    });
  });
  </code></pre>
  <p>But it throws:</p>
  <blockquote>
  <p>Cannot read property 'pipe' of undefined</p>
  </blockquote>
  <p>How can I spy this.wsService.connected$ correctly?</p>