Cypress输入后未触发Angular表单验证问题求助

问题描述 #

我正在以组件测试模式测试如下Angular表单：

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

测试代码如下：

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

按钮在正常应用中可正常启用，但在Cypress中输入后始终处于禁用状态，推测是变更检测未触发，但不知道如何手动触发。

解决方案 #

1. 手动触发Angular变更检测 #

组件测试模式下，Cypress不会自动触发Angular的变更检测机制，你可以直接获取组件实例调用变更检测方法：

cy.get('@query').type(queryString, { delay: 50});
// 替换@yourComponent为你挂载组件时设置的别名
cy.get('@yourComponent').then(component => {
  component.detectChanges();
});
cy.get('@submit').should('be.enabled').click();

注：组件别名需要在挂载时设置，比如cy.mount(QueryFormComponent).as('yourComponent')

2. 通过Cypress组件实例触发变更 #

如果使用@cypress/angular插件，也可以直接通过全局组件实例触发：

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

3. 验证输入内容符合表单规则 #

先排除验证规则的问题：确认queryString满足query控件的验证要求（比如如果设置了Validators.required，则输入内容不能为空）。例如：

const queryString = '测试查询内容'; // 确保内容符合验证规则
cy.get('@query').type(queryString, { delay: 50});

4. 手动触发输入事件 #

有时候type命令没有完全模拟用户输入的所有事件，手动触发input事件可以确保Angular感知到值的变化：

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

内容的提问来源于stack exchange，提问作者PawZaw