title: Getting TypeError pipe is not a function while testing angular component using observable with declarative approach using async
body: <blockquote>
    <p>When run the tests i am getting i am getting the  "TypeError: this.dashboardService.serviceAgents$.pipe is not a function" error.</p>
  </blockquote>
  
  <ul>
  <li>ServiceDashboard page code as below :</li>
  </ul>
  
  <pre><code>
       import { Component } from '@angular/core';
       import { ServiceDashboardService } from '../services/service-dashboard.service';
       import { tap } from 'rxjs/operators';
       import { ServiceAgent } from '../interfaces/service-agent';
       @Component({
           selector: 'app-service-dashboard',
           templateUrl: './service-dashboard.page.html',
           styleUrls: ['./service-dashboard.page.css'],
       })
       export class ServiceDashboardPage {
           serviceAgentSlideOptions: any = {
               slidesPerView: 4
           };
           serviceAgents$ = this.dashboardService.serviceAgents$
               .pipe(
                   tap(serviceAgents =&gt; {
                       this.serviceAgentSlideOptions.slidesPerView = serviceAgents.length &lt; 4 ? serviceAgents.length : 4;
                   })
               );
           constructor(private dashboardService: ServiceDashboardService) { }
       }  
  </code></pre>
  
  <ul>
  <li>Following is the unit test code for the ServiceDashboardPage.</li>
  </ul>
  
  <pre><code>      import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
        import { async, ComponentFixture, TestBed } from '@angular/core/testing';
        import { ServiceDashboardPage } from './service-dashboard.page';
        import { ServiceDashboardService } from '../services/service-dashboard.service';
        import { ServiceAgent } from '../interfaces/service-agent';
        import { of } from 'rxjs';
        describe('ServiceDashboardPage', () =&gt; {
            let component: ServiceDashboardPage;
            let fixture: ComponentFixture&lt;ServiceDashboardPage&gt;;
            let serviceDashboardServiceSpy: ServiceDashboardService;
            beforeEach(async(() =&gt; {
                serviceDashboardServiceSpy = jasmine.createSpyObj('ServiceDashboardService', 
             ['serviceAgents$']);
                TestBed.configureTestingModule({
                    declarations: [ServiceDashboardPage],
                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                    providers: [
                        { provide: ServiceDashboardService, useValue: serviceDashboardServiceSpy }
                    ]
                })
                .compileComponents();
            }));
            beforeEach(() =&gt; {
                fixture = TestBed.createComponent(ServiceDashboardPage);
                component = fixture.componentInstance;
                fixture.detectChanges();
            });
            it('should create', async(() =&gt; {
                (serviceDashboardServiceSpy.serviceAgents$ as unknown as 
             jasmine.Spy).and.returnValue(of([] as ServiceAgent[]));
                expect(component).toBeTruthy();
            }));
        });  
  </code></pre>