Cypress doesn't trigger Angular form validation after input

Question

I'm trying to test a similar form (in component testing mode):

<form [formGroup]="queryForm" (ngSubmit)="onSubmit()">
    <input formControlName="query"/>
    <button [disabled]="!queryForm.valid"/>
</form>

with the test code:

cy.get('@query').type(queryString, { delay: 50});
cy.get('@submit').should('be.enabled').click();

The button works as expected in normal application, but inside Cypress it stays disabled after typing. How can I fix this? My guess was that the change detection wasn't triggered, but I don't know how to trigger it.

score 0 · Answer 1 · answered May 23 '23 at 12:18

I found the answer looking at this official example. Turns out that I needed to provide some additional configuration like this:

const config: MountConfig<QueryInputComponent> = {
  imports: [ReactiveFormsModule],
  providers: [FormBuilder],
};
it('mounts', () => {
  cy.mount(QueryInputComponent, config);
});

Cypress doesn't trigger Angular form validation after input

1 Answers1