Angular unit test failing when using (submit)

Question

Using Angular v4.4.4, I am saving a form using the (submit) event on the <form> element. On the live code everything works correctly. However, in the unit test clicking on a <button> does not trigger (submit) and the test fails. For example,

Component (pseudo-code):

@Component({
    template: `
        <form [formGroup]="formGroup" (submit)="onSave()">
            Your name: <input type="text" formControlName="name">
            <button id="saveButton">Save</button>
        </form>
    `
})
export class FooComponent {
    public formGroup: FormGroup;

    public onSave(): void {
        // save and route somewhere
    }
}

Unit test (pseudo-code):

describe('FooComponent', () => {
    let fixture, component, _router, routerSpy;

    beforeAll(done => (async() => {
        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', () => {
        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
    });
});

I am certain the problem is with the (submit) event because if I remove it and move the onSave() call to a (click) on the button the unit test does work.

So this fails in a unit test:

<form [formGroup]="formGroup" (submit)="onSave()">

But this succeeds:

<button id="saveButton" (click)="onSave()">Save</button>

What am I doing wrong in the spec?

artiebits · Accepted Answer · 2017-11-20 09:44:47Z

6

Because you have no event handler on the button. That's why triggerEventHandler can't trigger any handler on the button. In your case you have to use saveButton.nativeElement.click() because now click event will be bubbled and submit event will be fired

answered Nov 20, 2017 at 9:44

artiebits

5,1951 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ebakunin Over a year ago

Perfect. Thank you.

Collectives™ on Stack Overflow

Angular unit test failing when using (submit)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related