title: Unit testing value of Observable returned from service (using async pipe)
body: <p>Running Angular/Jasmine/Karma, I have a component that consumes a service to set the value of an Observable 'items' array.  I display this using an async pipe.  Works great.</p>
  
  <p>Now, I'm trying to set up a unit test and got it to pass, but I'm not sure I'm correctly verifying that the 'items' array is getting the correct value.</p>
  
  <p>Here is the relevant component .html and .ts :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class ViperDashboardComponent implements OnInit, OnDestroy {
  
      items: Observable&lt;DashboardItem[]&gt;;
  
      constructor(private dashboardService: ViperDashboardService) { }
  
      ngOnInit() {
          this.items = this.dashboardService.getDashboardItems();
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item" *ngFor="let item of items | async"&gt;
              &lt;h3&gt;{{item.value}}&lt;/h3&gt;
              &lt;p&gt;{{item.detail}}&lt;/p&gt;
          &lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my component.spec.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    beforeEach(() =&gt; {
          fixture = TestBed.createComponent(ViperDashboardComponent);
          component = fixture.componentInstance;
  
          viperDashboardService =        
    fixture.debugElement.injector.get(ViperDashboardService);
  
          mockItems = [
              { key: 'item1', value: 'item 1', detail: 'This is item 1' },
              { key: 'item2', value: 'item 2', detail: 'This is item 2' },
              { key: 'item3', value: 'item 3', detail: 'This is item 3' }
          ];
  
          spy = spyOn(viperDashboardService, 'getDashboardItems')
              .and.returnValue(Observable.of&lt;DashboardItem[]&gt;(mockItems));
  
      });
  
      it('should create', () =&gt; {
          expect(component).toBeTruthy();
      });
  
      it('should call getDashboardItems after component initialzed', () =&gt; {
          fixture.detectChanges();
          expect(spy.calls.any()).toBe(true, 'getDashboardItems should be called');
      });
  
      it('should show the dashboard after component initialized', () =&gt; {
          fixture.detectChanges();
          expect(component.items).toEqual(Observable.of(mockItems));
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Specifically, I'd like to know:</p>
  
  <p>1) I started off creating an async "it" test, but was surprised when that didn't work.  Why does a synchronous test work when I'm working with async data streams?</p>
  
  <p>2) When I check the equivalence of component.items to the Observable.of(mockItems), am I really testing that the values are equal?  Or am I just testing that they are both Observables?  Is there a better way?</p>