Angular 2 unit test must call whenStable multiple times when nesting ngModel elements
<p>I am well aware of this bug here:</p>

<p><a href="https://github.com/angular/angular/issues/10148" rel="noreferrer">https://github.com/angular/angular/issues/10148</a></p>

<p>Which mentions the need to call <code>fixture.detectChanges();</code> then a <code>fixture.whenStable()</code>.</p>

<p>However, when I start nesting elements that each makes a usage of the ngModel value accessor provider, I have to call these two methods in a loop.</p>

<p>Is there a different way to do this? It doesn't seem super efficient and I constantly need to edit this function. I could simplify this with a recursive method to prevent duplication, but that's not the question.</p>

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

    return def;
}
</code></pre>

<p>My components do something like this:</p>

<pre><code>&lt;wm-comp1 [(ngModel)]="value"&gt;&lt;/wm-comp1&gt;
</code></pre>

<p>Which in Comp1 I have</p>

<pre><code>&lt;wm-comp2 [(ngModel)]="value"&gt;&lt;/wm-comp2&gt;
</code></pre>

<p>etc.</p>