单元测试 Angular：多次使用 control.setValue(...) 时，仅在测试结束时触发 valueChanges

问题描述

我想用 FormControl 测试一个组件。以下是组件代码的风格：

[...]
export class MyComponent implements OnInit {
  control: FormControl = new FormControl();
  observable$: Observable<any>;

  ngOnInit() {
    this.observable$ = this.control.valueChanges.pipe([some modifiers]);
  }

}

和我的测试：

[...]

  it('should ...',() => {
    let result;
    component.observable$.subscribe((res) => {
      result = res;
    });

    expect(result).toVerifySomeCondition();

    component.control.setValue('some_value');
    expect(result).toVerifySomeOtherCondition();

    component.control.setValue('some_other_value');
    expect(result).toVerifySomeThirdCondition();
  });

...

问题是，订阅 component.observable$ 仅在测试结束时触发。所以测试失败了。

我尝试过类似的东西：

[...]

  it('should ...',fakeAsync(() => {
    let result;
    component.observable$.subscribe((res) => {
      result = res;
    });

    expect(result).toVerifySomeCondition();

    tick();

    component.control.setValue('some_value');
    expect(result).toVerifySomeOtherCondition();

    tick();

    component.control.setValue('some_other_value');
    expect(result).toVerifySomeThirdCondition();
  }));

...

但后来出现错误：Error: 1 periodic timer(s) still in the queue.。

如何测试 FormControl 的连续更改？

编辑：我也尝试过 fixture.detectChanges()，但没有成功。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）