модульное тестирование жасмина компонента, имеющего данные в сервисах, где этот сервис извлекает данные из другого сервиса в angular 2+

Question

Я пытался написать модульное тестирование httpmock одного из сервисов, который использует метод (функцию) для получения http get call, но не смог записать.

saveservice.service.ts - файл

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const envURL = sessionStorage.getItem('apiBaseURL');
 httpGet<T>(url) {
    const URL = envURL + url;
    return this.http.get<T>(URL, httpOptions);
  }

этот файл saveservice.service имеет httpGET (), который используется файлом work.service.ts

work.service.ts

import {SaveserviceService } from '../../.././my-service.service';

getworklist(employeeID){

    return this.saveservice.httpGet('work/v1/works?employeeid=' + employeeID);
  }

Вот как связаны рабочие службы и службы сохранения. Теперь я хочу написать пример модульного теста для work.component.tsфайл, но я не могу записать вызовы httpmock туда.

Для информации, apiUrl присутствует в другом файле с именем env.ts file-- env.ts

export const apivalue= {

    apiBaseUrl:"https://example.co/",
  };

work.component.ts

ngOnit(){
this.employeeID:this.id;
   this.workservice.getworkList(this.employeeID).subscribe(
      (data) => {
        this.workList = data;
       console.log(" ggghfghfgh", this.worklist);
      }, (error) => {
        console.log(error);}

Выше файла work.component.ts, для которого я должен написать блок-тесты. Пожалуйста, помогите мне завершить его.

work.component.spec.ts

 let httpMock: HttpTestingController;
 let injector: Injector;
  let workservice: WorksService;
let saveservice123: SaveService;

 providers: [
        Injector,
        HttpClient,
        HttpClientTestingModule,
        saveService,
        worksService
      ],

  httpMock = TestBed.get(HttpTestingController);
    workservice = TestBed.get(WorksService);
    saveservice123 = TestBed.get(SaveService)

  fit('getting work detsails indivually', async(() => {

    fixture = TestBed.createComponent(worksComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    workservice.getworkList(123).subscribe(() =>{});

    const request = httpMock.expectOne("work/v1/works?employeeid=")
    // expect(request.request.method).toBe('httpGet');
    // request.flush(xxxxx);

ошибка его выброса

Error: Expected one matching request for criteria "Match URL: work/v1/works?employeeGuid=", found none.

Пожалуйста, помогите, как узнать, чтобы написать примеры модульных тестов дляэтот тип .. Я тоже пытался с шпионом, но не смог завершить.

const mockdata = { id:1, title: "Hello world",  paste: "console.log('Hello world');"}
     const spyOnAdd = spyOn(service, "getworkList").and.returnValue(mockdata);

Answer 1

Сначала убедитесь, что ваш компонент реализует интерфейс OnInit, а его метод ngOnint переименован в ngOnInit.

Ваш компонентный тест компонента не должен заботиться о том, как WorkService реализован, но полностью сосредоточен на поведении самого компонента (блока) в определенных условиях. Поэтому вы должны смоделировать соответствующую часть WorkService.

. Предполагая, что SaveService является единственным параметром, предоставленным конструктору WorkService, простейшая реализация work.component.spec.ts может выглядеть следующим образом.

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
...

describe('WorkService', () => {

    const workList = [...]; // specify result of WorkService#getworklist
    const workService = new WorkService(null);
    let fixture: ComponentFixture<WorkComponent>;

    beforeEach(fakeAsync(() => {        
        spyOn(workService , 'getworklist').and.returnValue(Promise.resolve(workList));
        TestBed.configureTestingModule({
            imports: [...],
            declarations: [WorkComponent],
            providers: [
                { provide: WorkService, useValue: workService }
            ]
        });
        fixture = TestBed.createComponent(WorkComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        tick();
    }));

    it('getting work details individually', () => {
        expect(workService.getworklist).toHaveBeenCalled();
        expect(component.workList).toEqual(workList);
    });
});