Contexto

Tengo un componente con una forma básica (forma reactiva). Intento probar el evento de envío en este formulario para ver si llama correctamente al método necesario.

Mi problema

No puedo activar el evento de envío del formulario.

archivos

Componente.html

 <form class="form-horizontal" id="staticForm" [formGroup]="mySimpleForm" (ngSubmit)="sendMethod();" > <input type="text" formGroupName="email"> <button type="submit">Send form</button> </form>

componente.ts

 ngOnInit() { this.initSimpleForm(); } private initSimpleForm() { let file = null; this.mySimpleForm = this.formBuilder.group({ email: [ '', [ Validators.required ] ] }); } sendMethod() { console.log('submitted'); }

componente.spec.ts

 beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ MyComponent ], imports: [], providers: [ FormBuilder ], schemas: [NO_ERRORS_SCHEMA] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(MyComponent); comp = fixture.componentInstance; }); it(`should notify in console on form submit`, () => { spyOn(console, 'log'); comp.mySimpleForm.controls['email'].setValue('test@test.com'); fixture.debugElement.query(By.css('form')).triggerEventHandler('submit', null); fixture.detectChanges(); expect(console.log).toHaveBeenCalled(); // FAILS }); // TO make sure my spy on console log works, I made this and it works it(`will notify on direct sendMethod Call`, () => { spyOn(console, 'log'); comp.sendMethod(); fixture.detectChanges(); expect(console.log).toHaveBeenCalled(); // SUCCESS });

También probé eso en lugar de llamar a submit en el formulario:

 fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);

Entonces, ¿cómo activar el evento de envío de formulario?