title: How do use createSpyObj to mock an Observable in an Angular constructor?
body: <p>So I'm trying to solve this puzzle and I've been searching for answers and I'm a bit stuck.</p>
  <p>I'm working on a team, and I've been task with fixing some broken Jasmine Unit tests.</p>
  <p>One of our components which is basically for presentation mostly has a construction that gets a service injected into it. Pretty common for Angular.</p>
  <p>The component is set up like so</p>
  <p><strong>AppComponent</strong></p>
  <pre><code>  constructor(
      private router: Router,
      private myDataService: MyDataService,
    ) {
  
      this.myDataService.myDataObservable.subscribe((data: MyData) =&gt; {
        if ( data ) {
          this.updateProduct( headerData.productAlias );
        }
      });
    }
  </code></pre>
  <p>So what I've been trying to do is the most basic of tests, to just make sure it compiles.</p>
  <p><strong>AppComponent.Spec</strong></p>
  <pre><code>describe('AppComponent', () =&gt; {
  
    let myDataService: MyDataService;
  
    let component: AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    let el: DebugElement;
  
    let DataServiceSpecMock: any;
  
    beforeEach(waitForAsync(() =&gt; {
  
      const DataServiceSpecMock = jasmine.createSpyObj('MyDataService',['myDataObservable'])
  
      TestBed.configureTestingModule({
        imports: [
          RouterTestingModule,
          HttpClientTestingModule
        ],
        declarations: [
          AppComponent
        ],
        providers: [
          {
            provider: MyDataService,
            useValue: DataServiceSpecMock
          }
        ]
        })
        .compileComponents();
  
          myDataService = TestBed.inject(MyDataService);
         
          // TRYING TO RESOLVE THIS AS IF IT IS IN THE CONSTRUCTOR
          myDataService.myDataObservable.subscribe.and
           .returnValue(of(true))
  
          fixture = TestBed.createComponent(AppComponent);
          component = fixture.componentInstance;
          el = fixture.debugElement;
          fixture.detectChanges();
  
   
    }));
  
    it('should create the app', () =&gt; {
  
      // FAILS
      expect(component).toBeTruthy();
    });
  </code></pre>
  <p>No matter what I try I can't get it to mock the subscribe function and compile the test. I usually just get the same error.</p>
  <pre><code>&quot;Failed: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined&quot; 
  </code></pre>
  <p>I'm not sure what I'm doing wrong. I've looked at lots of examples, but most of them are not in constructors. My guess is this is some sort of asynchronous issue.</p>
  <p>Thanks so much in advance.</p>