如何在Cypress组件测试中为Angular组件使用ngModel？

核心原因 #

ngModel是Angular的内置指令，并非你的组件直接定义的输入属性，因此不能直接在componentProperties中声明传递。要测试实现ControlValueAccessor的组件与ngModel的交互，需要借助Angular表单模块，通过测试模板绑定的方式来实现。

解决方案步骤 #

• 导入FormsModule：ngModel依赖该模块才能正常工作，测试时必须引入
• 通过包装模板绑定ngModel：不直接挂载目标组件，而是用内联模板或临时包装组件，将ngModel与测试变量绑定
• 监听ngModelChange：通过绑定事件或测试变量跟踪，验证组件交互后的模型值变化

完整测试示例（内联模板方式） #

import { FormsModule } from '@angular/forms';
import { ButtonBarComponent } from './button-bar.component';

it('Interacts properly with ngModel', () => {
  // 初始化测试用的模型变量
  let selectedValue = 'Option 1';

  cy.mount(`
    <app-button-bar 
      [options]="options" 
      [(ngModel)]="selectedValue"
      (ngModelChange)="updateSelectedValue($event)"
    ></app-button-bar>
  `, {
    declarations: [ButtonBarComponent],
    imports: [FormsModule], // 必须导入FormsModule
    componentProperties: {
      options: ['Option 1', 'Option 2', 'Option 3'],
      selectedValue,
      // 绑定ngModelChange事件，更新测试变量
      updateSelectedValue: (value: string) => {
        selectedValue = value;
      }
    }
  });

  // 验证初始值对应的按钮是否被选中
  cy.contains('Option 1').should('have.class', 'active');

  // 点击其他选项，验证模型值和UI同步更新
  cy.contains('Option 2').click();
  cy.wrap(selectedValue).should('eq', 'Option 2');
  cy.contains('Option 2').should('have.class', 'active');
});

可选方案：临时包装组件方式 #

如果更习惯组件类的写法，可以创建一个临时包装组件：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonBarComponent } from './button-bar.component';

@Component({
  template: `
    <app-button-bar 
      [options]="options" 
      [(ngModel)]="selectedValue"
      (ngModelChange)="onModelChange($event)"
    ></app-button-bar>
  `
})
class TestWrapperComponent {
  options = ['Option 1', 'Option 2', 'Option 3'];
  selectedValue = 'Option 1';
  // 用Cypress spy监听ngModelChange事件
  onModelChange = cy.spy().as('ngModelChangeSpy');
}

it('Interacts properly with ngModel via wrapper', () => {
  cy.mount(TestWrapperComponent, {
    declarations: [ButtonBarComponent],
    imports: [FormsModule]
  });

  // 验证初始选中状态
  cy.contains('Option 1').should('have.class', 'active');

  // 点击选项，验证事件触发和值更新
  cy.contains('Option 3').click();
  cy.get('@ngModelChangeSpy').should('have.been.calledWith', 'Option 3');
  cy.wrap(Cypress.component.selectedValue).should('eq', 'Option 3');
});

关键提示 #

• 务必导入FormsModule，否则Angular无法识别ngModel指令
• 不能直接通过componentProperties传递ngModel，必须通过模板绑定实现双向数据同步
• 可通过测试变量或Cypress spy，分别验证组件的初始渲染、用户交互后的视图更新和模型值变化

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