如何在单元测试中模拟angular中的路由状态

我正在为我的组件编写单元测试,但是在创建组件实例并显示以下错误时遇到了麻烦:

TypeError: Cannot read property 'patientId' of null 

我尝试模拟所有提供程序,包括路由器和活动路由器 这是我调用该组件的方式:

  public onSelectedOrganizationInsurance(organizationInsurance: OrganizationInsurance) {
    this.router.navigate(['../search-insurance-plan'],{
      relativeTo: this.activatedRoute,state: {
        selectedOrganizationInsurance: organizationInsurance,patientId: this.patientId
      }
    });

我的component.ts是

export class PatientInsurancePlanSearchComponent implements OnInit {

  private patientId: number = -1;
  public selectedOrganizationInsurance: OrganizationInsurance;
  public organizationInsurancePlans$: Observable<OrganizationInsurancePlan[]>;

  constructor(
    private router: Router,private activatedRoute: activatedRoute,private biilingHttpService: BillingHttpService
  ) {
    this.selectedOrganizationInsurance = new OrganizationInsurance();
  }

  ngOnInit() {
    this.patientId = history.state.patientId as number;
    this.selectedOrganizationInsurance = history.state.selectedOrganizationInsurance as OrganizationInsurance;
    this.organizationInsurancePlans$ = this.biilingHttpService.getOrganizationInsurancePlans(this.selectedOrganizationInsurance.id);
  }

spec.ts

class FakeInsurancePlanSearchComponent {
  @Input() public organizationInsurancePlans: OrganizationInsurancePlan[] = [];
  @Input() public selectedOrganizationInsurance: OrganizationInsurance;
  }
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PatientInsurancePlanSearchComponent,FakeInsurancePlanSearchComponent ],imports: [
        StoreModule.forRoot({}),HttpClientModule,RouterTestingModule,],providers: [
        Store,{
          provide: activatedRoute,useValue: {
            state: of({ selectedorganizationInsurancePlan: 'AETNA'})
        }
      },BillingHttpService
      ]
    })
    .compileComponents();
  }));

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

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

请指导我所缺少的内容。

LOVE11203 回答:如何在单元测试中模拟angular中的路由状态

您可以通过@ angular / common的“位置”注入来访问路由状态。 像这样:

constructor(private readonly location: Location) {}

ngOnInit() {
  this.patientId = this.location.getState().patientId as number;
}

现在您可以在单元测试中为位置创建间谍:

 let location: Location;

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PatientInsurancePlanSearchComponent,FakeInsurancePlanSearchComponent ],imports: [
        StoreModule.forRoot({}),HttpClientModule,RouterTestingModule,],providers: [
        Store,BillingHttpService
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    location = TestBed.inject(Location);
    fixture = TestBed.createComponent(PatientInsurancePlanSearchComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create',() => {
    spyOn(location,'getState').and.returnValue(yourObject);
    expect(component).toBeTruthy();
  });
本文链接:https://www.f2er.com/3154625.html

大家都在问