Ошибка: <spyOn>: не удалось найти объект для слежения за ролями ()

Question

Я пишу свой первый тест Angular 6. Я следую этому источнику https://www.youtube.com/watch?v=lTKhB6uAmno, чтобы создать свой тестовый файл, и в результате я обнаружил ошибку, которую не смог устранить. Я нашел похожий вопрос в SO, но, к сожалению, на этот вопрос не было получено ответа. Пожалуйста, помогите мне разобраться с этой ошибкой. Благодарю. Вот мои файлы,

component.ts

import { Component } from '@angular/core';
import { InputModel } from '../model/formInput';
import { APIService } from '../service/APIService';

@Component({
    selector: 'results-component',
    templateUrl: './result.component.html',
    styleUrls: ['./result.component.css']
})

export class ResultComponent {
    constructor(private apiService: APIService) { }
    sendTask(model: InputModel) {
        this.apiService.getRoles(model.TaskName)
            .subscribe(
                res => {
                    console.log(res)
                }, err => { console.log(err) });
    }
}

service.ts

import {Injectable} from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { ApiResponse } from '../model/ApiResponse';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()

export class APIService{

    private url:string = 'http://localhost:1/api/default';
    result:ApiResponse;
    private http:HttpClient;

    constructor(){}

    getRoles(taskName:string):Observable<ApiResponse>{
        var params = this.getParams(taskName);
        return this.http.get<ApiResponse>(this.url,{ params })
        .pipe(
            map((data:ApiResponse)=>data),
            catchError((err:ApiResponse)=>throwError(err))
            )
        }

    private getParams(taskName:string){
        let param = new HttpParams().set('taskName', taskName);
        return param;
    }
}

component.spec.ts

import { ResultComponent } from "./result.component";
import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
import { APIService } from "../service/APIService";
import { of } from "rxjs";
import { ApiResponse } from "../model/ApiResponse";
import { InputModel } from "../model/formInput";
import { HttpClientTestingModule } from "@angular/common/http/testing";

describe('ResultComponent', ()=>{
    let fixture:ComponentFixture<ResultComponent>;
    let component:ResultComponent;
    let apiService:APIService;
    let model:InputModel = new InputModel();
    let mockResponse : ApiResponse=
    {
        code:'0',
        data:{
            permissionsList:[
                {
                    orgRoles:'Edit Access TRUE',
                    roleType:'OPTIONAL'
                }
            ]
        },
        message:'',
        status:'success'
    };

    beforeEach(()=>{
        TestBed.configureTestingModule({
            imports:[HttpClientTestingModule],
            declarations:[ResultComponent],
            providers:[APIService]//,
            //{provide:HttpClient}]
        }).compileComponents();

        fixture = TestBed.createComponent(ResultComponent);
        component = fixture.componentInstance;
        apiService=TestBed.get(APIService);

        model.TaskName='Edit';
    });

    it('test service response', ()=>{
        spyOn(apiService, 'getRoles').and.returnValue(of(mockResponse));
         component.sendTask(model);
        expect(apiService.getOrgRoles).toHaveBeenCalled();
    });
})

Если я использую поддельный сервис, модульное тестирование работает нормально. Я не могу найти то, что мне не хватает в моем файле спецификаций.

Answer 1

Вы можете сделать это легко, не используя метод spyOn.

Вместо этого создайте spy object для своей службы и предоставьте этот шпионский объект в качестве службы в массиве провайдеров.

describe('Result component tests', () => {

  let fixture: ComponentFixture<ResultComponent>;
  let component: ResultComponent;

  let apiService: APIService;
  let spyApiService: jasmine.SpyObj<APIService>;

  let getRolesSubject;
  let mockResponse: ApiResponse =
    {
      code: '0',
      data: {
        permissionsList: [
          {
            orgRoles: 'Edit Access TRUE',
            roleType: 'OPTIONAL'
          }
        ]
      },
      message: '',
      status: 'success'
    };

  beforeEach(async(() => {
    getRolesSubject = new Subject();

    spyApiService = jasmine.createSpyObj('APIService', ['getRoles']);
    spyApiService.getRoles.and.returnValue(getRolesSubject.asObservable());

    TestBed.configureTestingModule({
      declarations: [ResultComponent],
      providers: [
        {provide: APIService, useValue: spyApiService},
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(ResultComponent);
      component = fixture.componentInstance;

      apiService = TestBed.get(APIService);
    });
  }));


  it('Should invoke getRoles of api service when ...', () => {
    component.sendTask(model);
    getRolesSubject.next(mockResponse);
    expect(apiService.getRoles).toHaveBeenCalled();
  });

});

И я использую subject для возврата значений в виде наблюдаемых из сервиса.

getRolesSubject.next(mockResponse);

Думаю, у вас есть несколько методов внутри метода подписки. Теперь вы можете также проверить их.