Тест Жасмин: ожидал шпион, но получил ошибку функции

Question

Я написал тест для angular компонента, используя Jasmine и получаю ошибку. Я в основном хочу проверить, вызывается ли loadPersonNotes, когда вызывается ngOnchanges

ComplianceNoteComponent should call getPersonNote FAILED
        Error: <toHaveBeenCalled> : Expected a spy, but got Function.
        Usage: expect(<spyObj>).toHaveBeenCalled()
            at <Jasmine>

Я не уверен, почему он жалуется

Жасмин Test

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', () => {
  let component: ComplianceNoteComponent;
  let fixture: ComponentFixture<ComplianceNoteComponent>;

  const mockPersonNote = <IPersonNote>{
    authorId : 12,
    id : 1,
    personId : 101,
    note : 'This is a test note ',
    authorName: 'xys',
    createdBy: 'ABC',
    createdDate : new Date()
  };

  const mockUserService: UserService = <UserService>{
    getCurrentUser() {
      return <IUser>{ id: 1 };
    },
    getPersonNote(id: 1) { 
      return of ({}); }
  };

  configureTestSuite((() => {
    TestBed.configureTestingModule({
      imports: [DxButtonModule, SharedFontAwesomeModule, NgxPermissionsModule.forRoot()],
      declarations: [ComplianceNoteComponent],
      providers: [
        { provide: UserService, useValue: mockUserService }
      ]
    });
  }));

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ComplianceNoteComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ComplianceNoteComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should call getPersonNote', () => {
    spyOn(mockUserService, 'getPersonNote').and.returnValue(of(mockPersonNote)).and.callThrough();
    component.ngOnChanges();
    expect(component.loadPersonNotes).toHaveBeenCalled();
  });

});

Компонент

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) => {
      this.personNotes = x;
    });
  }

}

UserService

    public getPersonNote = (id: number): Observable<IPersonNote> =>
    this.http.get<IPersonNote>(`${this.baseUrl}person-note/${id}`)  


export interface IPersonNote {
    id: number;
    personId: number;
    note: string;
    authorId: number;
    authorName: string;
    createdBy: string;
    createdDate: Date;
}   

Answer 1

Проблема в том, что следующие expect ожидают spy, но вы предоставляете метод класса component.loadPersonNotes.

expect(component.loadPersonNotes).toHaveBeenCalled();

Чтобы сделать это, вам нужно создать шпиона на component.loadPersonNotes метод до вызова component.ngOnChanges.

spyOn(component, 'loadPersonNotes');
component.ngOnChanges();
expect(component.loadPersonNotes).toHaveBeenCalled();

В соответствии с описанием теста вы, однако, хотите убедиться, что getPersonNote из UserService вызывается. Поэтому вам, вероятно, придется пересмотреть свой expect.