Angular 2单元测试在嵌套ngModel元素时必须多次调用whenStable

Question

我很清楚这里的这个错误：

https://github.com/angular/angular/issues/10148

其中提到需要调用fixture.detectChanges();then a fixture.whenStable()。

但是，当我开始嵌套每个使用 ngModel 值访问器提供程序的元素时，我必须在循环中调用这两个方法。

有其他方法可以做到这一点吗？它看起来效率不是很高，我经常需要编辑这个函数。我可以用递归方法来简化它以防止重复，但这不是问题。

export function bugWhenStable(fixture: ComponentFixture<any>): Promise<any> {
    let def = new Promise(resolver => {
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
            fixture.whenStable().then(() => {
                fixture.detectChanges();
                fixture.whenStable().then(() => {
                    resolver();
                });
            });
        });
    });

    return def;
}

我的组件做了这样的事情：

<wm-comp1 [(ngModel)]="value"></wm-comp1>

在 Comp1 中我有

<wm-comp2 [(ngModel)]="value"></wm-comp2>

ETC。

Answer 1

您是否尝试过将承诺返回给下一个 then fn ？这将使它等待，直到它得到解决。我在我的规格中尝试过一次，效果非常好。看起来更干净。

export function bugWhenStable(fixture: ComponentFixture<any>): Promise<any> {
  let def = new Promise(resolver => {
    fixture.detectChanges();
    fixture.whenStable()
      .then(() => {
        fixture.detectChanges();

        return fixture.whenStable();
      }).then(() => {
        fixture.detectChanges();

        return fixture.whenStable()
      }).then(() => {
        resolver();
      });
  });

  return def;
}

也有人这样做，但我从未尝试过。

export function bugWhenStable(fixture: ComponentFixture<any>): Promise<any> {
  let def = new Promise(resolver => {
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    tick();
    resolver();
  });
});

return def;
}