如何测试带DOM的AngularJS组件？模板与模型绑定测试疑问

你现在碰到的核心问题很明确：$componentController只会创建组件的控制器实例，完全不会处理模板的渲染和绑定逻辑。这就是为什么你既找不到DOM里的#firstName元素，也看不到控制器上的firstName属性——模板里的ng-model="$ctrl.firstName"要等AngularJS渲染模板、触发绑定后，才会给控制器实例自动添加上这个属性，而你之前的测试根本没走模板渲染这一步。

要同时测试控制器逻辑和模板绑定，你需要让AngularJS在测试环境里完整渲染组件，而不是只实例化控制器。下面是具体的解决方法：

describe('sign-up component', function () {
  // 加载目标模块
  beforeEach(angular.mock.module('myApp'));

  beforeEach(angular.mock.inject(function($compile, $rootScope) {
    this.scope = $rootScope.$new();
    // 编译组件标签，生成对应的DOM元素
    this.componentElement = $compile('<sign-up></sign-up>')(this.scope);
    // 触发AngularJS的脏检查循环，完成模板渲染和数据绑定
    this.scope.$digest();
    // 获取组件的控制器实例
    this.signUpCtrl = this.componentElement.controller('signUp');
  }));

  it('should sync input value with controller property', function () {
    // 从组件DOM中找到目标input元素
    const firstNameInput = this.componentElement.find('#firstName');
    
    // 模拟用户输入：设置值并触发input事件
    firstNameInput.val('dan').trigger('input');
    // 再次触发脏检查，让AngularJS同步DOM值到控制器
    this.scope.$digest();

    // 验证控制器的属性是否被正确更新
    expect(this.signUpCtrl.firstName).toBe('dan');
    // 验证DOM值是否符合预期
    expect(firstNameInput.val()).toBe('dan');
  });
});

• 为什么之前的方法失效？

  • $componentController只是单纯实例化控制器，不会编译模板、挂载DOM，也不会触发AngularJS的绑定机制，所以模板里的ng-model逻辑根本没机会执行，自然不会给控制器添加上firstName属性，DOM里也不会有对应的元素。
  • 你用$document.find('#firstName')找不到元素，本质是因为组件模板从未被渲染到测试环境的DOM中。

• 修正后的核心操作

  • 使用$compile服务编译组件标签，生成真实的DOM元素并挂载到测试环境。
  • 调用$scope.$digest()触发脏检查，让AngularJS完成模板渲染、数据绑定的全部流程。
  • 通过element.controller('signUp')获取组件的控制器实例，此时控制器上已经有模板绑定生成的firstName属性了。
  • 模拟用户输入时，必须触发input（或change）事件，再调用$digest，AngularJS才会把DOM中的值同步到控制器属性里。

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