title: Angular unit test failing when using (submit)
body: <p>Using Angular v4.4.4, I am saving a form using the <code>(submit)</code> event on the <code>&lt;form&gt;</code> element. On the live code everything works correctly. However, in the unit test clicking on a <code>&lt;button&gt;</code> does not trigger <code>(submit)</code> and the test fails. For example,</p>
  
  <p>Component (pseudo-code):</p>
  
  <pre><code>@Component({
      template: `
          &lt;form [formGroup]="formGroup" (submit)="onSave()"&gt;
              Your name: &lt;input type="text" formControlName="name"&gt;
              &lt;button id="saveButton"&gt;Save&lt;/button&gt;
          &lt;/form&gt;
      `
  })
  export class FooComponent {
      public formGroup: FormGroup;
  
      public onSave(): void {
          // save and route somewhere
      }
  }
  </code></pre>
  
  <p>Unit test (pseudo-code):</p>
  
  <pre><code>describe('FooComponent', () =&gt; {
      let fixture, component, _router, routerSpy;
  
      beforeAll(done =&gt; (async() =&gt; {
          TestBed.configureTestingModule({
              imports: [
                  RouterTestingModule.withRoutes([]),
                  FormsModule,
                  ReactiveFormsModule
              ]
          });
  
          fixture = TestBed.createComponent(FooComponent);
          component = fixture.componentInstance;
          _router = fixture.debugElement.injector.get(Router);
          routerSpy = spyOn(_router, 'navigate');
          fixture.detectChanges();
      })().then(done).catch(done.fail));
  
      it('should save the form', () =&gt; {
          const saveButton = fixture.debugElement.query(By.css('#saveButton'));
          saveButton.triggerEventHandler('click', null);
          expect(routerSpy).toHaveBeenCalled();
  
          // the test fails because the form is not actually submitted
      });
  });
  </code></pre>
  
  <p>I am certain the problem is with the <code>(submit)</code> event because if I remove it and move the <code>onSave()</code> call to a <code>(click)</code> on the button the unit test does work.</p>
  
  <p>So this fails in a unit test:</p>
  
  <pre><code>&lt;form [formGroup]="formGroup" (submit)="onSave()"&gt;
  </code></pre>
  
  <p>But this succeeds:</p>
  
  <pre><code>&lt;button id="saveButton" (click)="onSave()"&gt;Save&lt;/button&gt;
  </code></pre>
  
  <p>What am I doing wrong in the spec?</p>