用于请求后服务的Anuglar 9单元测试？

Question

如何在HomeComponent.spec.ts文件中编写服务的测试用例。对于proceed按钮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']);
    }
  });
}

这里是我的特长

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

进行单元测试的最简单方法是重写依赖关系。考虑在测试中执行以下操作：

  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);
  }));

希望这会有所帮助。