title: Jasmine test : Expected a SPY but got a Function error
body: <p>I have written a test for angular component using Jasmine and getting error . I basically want to test if loadPersonNotes is called when ngOnchanges is called</p>
  
  <pre><code>ComplianceNoteComponent should call getPersonNote FAILED
          Error: &lt;toHaveBeenCalled&gt; : Expected a spy, but got Function.
          Usage: expect(&lt;spyObj&gt;).toHaveBeenCalled()
              at &lt;Jasmine&gt;
  </code></pre>
  
  <p>I am not sure why it is complaining </p>
  
  <p>Jasmine Test</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { of, Observable } from 'rxjs';
  import { configureTestSuite } from 'ng-bullet';
  import { DxButtonModule } from 'devextreme-angular';
  import { NgxPermissionsModule } from 'ngx-permissions';
  
  import { SharedFontAwesomeModule } from '../../../../shared/shared-font-awesome.module';
  import { UserService } from '../../../../shared/services/user.service';
  import { ComplianceNoteComponent } from './compliance-note.component';
  import { IPersonNote } from '../../../../shared/models/IPersonNote';
  import { IUser } from '../../../../shared/models/IUser';
  import { nameof } from '../../../../shared/helpers/nameof';
  
  
  
  describe('ComplianceNoteComponent', () =&gt; {
    let component: ComplianceNoteComponent;
    let fixture: ComponentFixture&lt;ComplianceNoteComponent&gt;;
  
    const mockPersonNote = &lt;IPersonNote&gt;{
      authorId : 12,
      id : 1,
      personId : 101,
      note : 'This is a test note ',
      authorName: 'xys',
      createdBy: 'ABC',
      createdDate : new Date()
    };
  
    const mockUserService: UserService = &lt;UserService&gt;{
      getCurrentUser() {
        return &lt;IUser&gt;{ id: 1 };
      },
      getPersonNote(id: 1) { 
        return of ({}); }
    };
  
    configureTestSuite((() =&gt; {
      TestBed.configureTestingModule({
        imports: [DxButtonModule, SharedFontAwesomeModule, NgxPermissionsModule.forRoot()],
        declarations: [ComplianceNoteComponent],
        providers: [
          { provide: UserService, useValue: mockUserService }
        ]
      });
    }));
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ ComplianceNoteComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ComplianceNoteComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('should call getPersonNote', () =&gt; {
      spyOn(mockUserService, 'getPersonNote').and.returnValue(of(mockPersonNote)).and.callThrough();
      component.ngOnChanges();
      expect(component.loadPersonNotes).toHaveBeenCalled();
    });
  
  });
  </code></pre>
  
  <p>Component </p>
  
  <pre><code>import { UserService } from 'src/app/shared/services/user.service';
  import { IPersonNote } from 'src/app/shared/models/IPersonNote';
  
  @Component({
    selector: 'app-compliance-note',
    templateUrl: './compliance-note.component.html',
    styleUrls: ['./compliance-note.component.scss']
  })
  export class ComplianceNoteComponent implements OnChanges {
    @Input() id: number;
    public personNotes: IPersonNote;
    public isCurrentUser = false;
  
    constructor(  private userService: UserService) { }
  
    ngOnChanges() {
      this.loadPersonNotes();
    }
  
  
    loadPersonNotes() {
      this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
      this.userService.getPersonNote(this.id).subscribe((x: IPersonNote) =&gt; {
        this.personNotes = x;
      });
    }
  
  }
  </code></pre>
  
  <p>UserService</p>
  
  <pre><code>    public getPersonNote = (id: number): Observable&lt;IPersonNote&gt; =&gt;
      this.http.get&lt;IPersonNote&gt;(`${this.baseUrl}person-note/${id}`)  
  
  
  export interface IPersonNote {
      id: number;
      personId: number;
      note: string;
      authorId: number;
      authorName: string;
      createdBy: string;
      createdDate: Date;
  }   
  </code></pre>