Anuglar 9 юнит-тестирование для службы по запросу?

Question

Как мне написать тестовый пример для обслуживания в моем HomeComponent.spe c .ts файле. А для продолжить метод кнопки postRequest, вызываемый из файла home.service.ts. Я попробовал, но это не работает. Пожалуйста, помогите мне.

home.service.ts

import { Injectable } from '@angular/core';
import { API_ACTIONS } from 'src/app/global/constant/common-constant';
import { CommonService } from 'src/app/global/services/common.service';
import { environment } from 'src/environments/environment';

@Injectable()
export class HomeService {
  constructor(private commonService: CommonService) {}

  postRequest(requestData) {
    const endpoint = API_ACTIONS.LOAN_OFFERS;
    const url = environment.BASE_URL + environment.BASE_PATH + endpoint;
    return this.commonService.postApiCall(requestData, url, true);
  }
}

Вот мой HomeComponent.ts

proceed() {
  for (const fields in this.homeForm.controls) {
    if (this.homeForm.controls.hasOwnProperty(fields)) {
      this.homeForm.get(fields).markAsTouched();
    }
  }
  if (this.homeForm.invalid) {
    return;
  }

  const reqObj: any = {};
  reqObj.cardNumber = '1212'
  reqObj.consent = 'I Agree';
  reqObj.deviceId = '2cx3e';

  this.homeService.postRequest(reqObj).subscribe((response: any) => {
    console.log('response', response);
    if (response.meta.status === 0) {
      this.dataService.setLoanDetails(response.data);
      const homeFormRawValue = this.homeForm.getRawValue();
      this.dataService.setHomePageData(homeFormRawValue);

      this.router.navigate(['/dashboard']);
    }
  });
}

Вот my Spe c .ts

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let homeService: HomeService;
  let commonService: CommonService;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        RouterTestingModule,
        CommonModule,
        HttpClientModule,
        ToastrModule.forRoot({
          timeOut: 3000,
          positionClass: 'toast-bottom-right',
          maxOpened: 1,
          preventDuplicates: true,
        }),
      ],
      declarations: [HomeComponent],
      providers: [
        {
          provide: HomeService,
          useClass: MockHomeServiceStub,
        },
        CommonService,
        DataService,
      ],
    }).compileComponents();
    commonService = TestBed.inject(CommonService);
    homeService = TestBed.inject(HomeService);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
   it('form should be submitted when click on proceed button', () => {
    component.proceed();
   });

  it('test case of services', () => {
    const requestData = {
      cardNumber: '1212',
      consentText: 'I Agree TAndC',
      deviceId: '2c3c',
    };
    homeService.postRequest(requestData);
    expect(homeService.postRequest).toHaveBeenCalled();
  });

});

Вот мой postApiCall метод

import { Injectable } from '@angular/core';
import { HttpPostRequest } from '../models/http-post-request';
import { HttpRequestService } from './http-request.service';

@Injectable()
export class CommonService {
  constructor(private httpRequestService: HttpRequestService) {}

  postApiCall(reqObj, url, isLoader) {
    const postRequestObject: HttpPostRequest = new HttpPostRequest(
      url,
      reqObj,
      {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    );

    return this.httpRequestService.doPostRequest(postRequestObject, isLoader);
  }
}

Answer 1

Самый простой способ go о модульном тестировании - переопределить ваши зависимости. Попробуйте выполнить следующее в своем тесте:

  it('test case of services', () => {
    const requestData = {
      cardNumber: '1212',
      consentText: 'I Agree TAndC',
      deviceId: '2c3c',
    };
    (homeService as any).commonService.httpRequestService.doPostRequest = ()=> {`some object here to make your test pass`};
    homeService.postRequest(requestData);
    expect(homeService.postRequest).toHaveBeenCalled();
  });

Лучший способ сделать это - ввести фиктивное значение CommonService. Имейте в виду, что вам, вероятно, придется удалить зависимость CommonModule в вашем тестовом модуле. Вот как это будет выглядеть:

TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        RouterTestingModule,
 // If commonService is part of the common module, then you'll need to remove it
 //       CommonModule,  
        HttpClientModule,
        ToastrModule.forRoot({
          timeOut: 3000,
          positionClass: 'toast-bottom-right',
          maxOpened: 1,
          preventDuplicates: true,
        }),
      ],
      declarations: [HomeComponent],
      providers: [
        {
          provide: HomeService,
          useClass: MockHomeServiceStub,
        },
// Change this:
//        CommonService,
// To this:
  {
    provide: CommonService,
    useValue: {postApiCall: ()=> of('some value here')}
  }
        DataService,
      ],
    }).compileComponents();
    commonService = TestBed.inject(CommonService);
    homeService = TestBed.inject(HomeService);
  }));

Надеюсь, это поможет.