title: Angular 2 unit test must call whenStable multiple times when nesting ngModel elements
body: <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>