如何在规范测试中模拟 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

无法读取 null 的属性“queryParams”

因此，当在routeStub 对象上调用属性queryParams 时，它为空。您将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');
  });
});