title: Testing a component that uses a service to get some data
body: <p>I have a service that reads some data from the store and then based on that data returns a boolean Observable. It is:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { Store } from '@ngrx/store';
  import * as _ from 'lodash';
  
  @Injectable()
  export class SomeService {
  
     enabledObv$: Observable&lt;any&gt;;
  
     constructor(private store: Store&lt;AppState&gt;) {
        enabledObv$ = this.store.select&lt;any&gt;(‘some-store’);
     }
  
     checkIfExists$(someData: any): Observable&lt;boolean&gt; {
  
     return this.enabledObv$.map(
         (dataClass: any) =&gt; {
             return _.includes(dataClass.someField, someData);
         });
     }
  
  }
  </code></pre>
  
  <p>Now, this service is being used in a component. Specifically, I am using the <code>checkIfExists$</code> method against some values that I have in my component.</p>
  
  <p>On running the tests I am getting the error:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { RouterTestingModule } from '@angular/router/testing';
  import { rootReducer } from '../../../../store/root-reducer';
  import { SomeComponent } from ‘./some.component';
  import { SomeService } from '../../../../shared/services/config/some.service';
  
  describe(‘SomeComponent’, () =&gt; {
      let component: SomeComponent;
      let fixture: ComponentFixture&lt;SomeComponent&gt;;
  
      beforeEach(async(() =&gt; {
  
      TestBed.configureTestingModule({
          declarations: [SomeComponent],
          imports: [// modules that the component is using],
          providers: [SomeService]
      }).compileComponents();
  
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(SomeComponent);
          component = fixture.componentInstance;
          fixture.detectChanges();
  
      });
  
      it('should create', () =&gt; {
          expect(component).toBeTruthy();
      });
  });
  </code></pre>
  
  <p>As suggested, adding the component code:</p>
  
  <pre><code>export class SomeComponent implements OnInit, OnDestroy {
  
      ifExistsA$: Observable&lt;boolean&gt;;
  
  // ------------------------------------------------------------------------------------
      constructor(private someService: SomeService, private store: Store&lt;AppState&gt;) {
      }
  
      ngOnInit() {
          this.initAEnabled();
      }
  
       private initAEnabled(): void {
          this.ifExistsA$ =
              this.someService.checkIfExists$(valueToBeChecked);
       }
  
  }
  </code></pre>
  
  <p>Now the ifExistsA$ is used in the HTML file with the async pipe to show something. The access is like: ifExistsA$ | async</p>
  
  <p>Essentially I am using <code>ifExistsA$</code> to show some data, depending on its presence in the store.</p>
  
  <p>On running this test I get the error:</p>
  
  <pre><code>TypeError: Cannot read property 'dataClass' of undefined
  </code></pre>
  
  <p>Where am I going wrong?<br>
  Do I have to do something with the service other than adding it as a provider?<br>
  Do I have to mock it?<br>
  If I have to mock it, do I have to provide some value for the <code>dataClass</code>?<br>
  If so then how do I do that?  </p>