title: Angular 2+: Testing form with mat-slide-toggle - change event won't fire
body: <p>I am not sure why the the change event isn't firing and therefore not triggering the function I registered for the change event.</p>
  
  <p>I know this works when I run it, but I can't get it in the spec.</p>
  
  <p>Here is a demo of what I am talking about... As you can see from the logs, the <code>toggle</code> never gets called:
  <a href="https://stackblitz.com/edit/angular-material-slide-toggle-test-utmbmy?file=app%2Fhello.component.spec.ts" rel="noreferrer">https://stackblitz.com/edit/angular-material-slide-toggle-test-utmbmy?file=app%2Fhello.component.spec.ts</a></p>
  
  <p>Roughly, this is my code here...</p>
  
  <p>component.html:</p>
  
  <pre><code>&lt;mat-slide-toggle [checked]="useDefault" (change)="toggle($event)"&gt;&lt;/mat-slide-toggle&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>...
  toggle(event: MatSlideToggleChange) {
    console.log('Toggle fired');
    this.useDefault = event.checked;
  }
  </code></pre>
  
  <p>In my spec.ts:</p>
  
  <pre><code>it('should trigger toggle...', () =&gt; {
    const componentDebug = fixture.debugElement;
    const slider: MatSlideToggle = 
       componentDebug.query(By.css('form mat-slide-toggle')).componentInstance;
  
    console.log('before ' + slider.checked);
    slider.toggle();
  
    fixture.detectChanges();
  
    console.log('after ' + slider.checked);
    console.log('useDefault ' + component.useDefault);
  });
  </code></pre>
  
  <p>The <code>after</code> logging does print out <code>slider.checked</code> to be the opposite value from <code>before</code>. However, the <code>component.useDefault</code> stays the same and the logging statement in the <code>toggle</code> function is never called, which means it never triggered it.</p>
  
  <p>Why is this going on and how do I fix this?</p>
  
  <p>I've tried placing the whole thing into <code>fakeAsync</code>, using <code>tick</code>, placing the 'after' code into <code>fixture.whenStable()</code> and <code>fixture.whenRenderingDone()</code>.</p>
  
  <p>I have a <code>NoopAnimationsModule</code> in the <code>TestBed</code>'s <code>import</code>.</p>