如何模拟单元测试的角度路由状态

Question

我正在为我的组件编写单元测试，但在创建组件实例时遇到问题并显示以下错误：

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

请指导我缺少什么。

Answer 1

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

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