angular - 我如何在规范测试中模拟 ngOnInit() 中的路由 queryParams

Question

失败:无法读取 null 属性“queryParams” 在

我假设这是因为我在 ngOnInit() 中有以下内容:

  ngOnInit() {
    this.route.queryParams.subscribe(async params => {
      this.userInfo = await JSON.parse(params['user_info']);
    });

到目前为止，我已尝试使用以下内容构建单元测试:

describe('AddItineraryPage', () => {
  let component: AddItineraryPage;
  let fixture: ComponentFixture<AddItineraryPage>;
  let routeStub;

  beforeEach(async(() => {
    routeStub = null;

    TestBed.configureTestingModule({
      declarations: [ AddItineraryPage ],
      imports: [IonicModule.forRoot(), FormsModule, ReactiveFormsModule, RouterTestingModule],
      providers: [
        {provide: ActivatedRoute, useValue: routeStub}
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(AddItineraryPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    routeStub.queryParams = {
    displayName: '',
    dateOfBirth: '',
    email: '',
    photos: [],
    location: '',
    bio: '',
    intDestination: [],
    userId: ''};

    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component).toBeTruthy();

    });
  });
});

Answer 1

Cannot read property 'queryParams' of null

因此，当在 routeStub 对象上调用属性 queryParams 时，它为 null。您将 routeStub 初始化为 null，因此这是有意义的。 ngOnInit() 在您第一次调用 fixture.detectChanges() 时被调用，因此您需要在之前为 routeStub 分配一些内容 你调用电话。

此外，在您的代码中，您还对 queryParams 调用 subscribe()，因此您需要将一个类似 Observable 的对象分配给该属性。您可以通过使用 Observable.of() 来使用实际的 Observable。

所以你的测试代码应该看起来更像

beforeEach(async(() => {
  routeStub = null;
  ...
  fixture = TestBed.createComponent(AddItineraryPage);
  component = fixture.componentInstance;
  // remove fixture.detectChanges() as it calls ngOnInit()
}));

it('should create', () => {
  routeStub = {
    queryParams: of({
      user_info: '{
        "displayName": "UserName"
      }'
      // not sure why you are calling `JSON.parse()`
      // but if you are doing that, then user_info should
      // be a JSON string
    })
  };

  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(component.userInfo.displayName).toBe('UserName');
  });
});