Javascript 如何在AngularJS测试中将DOM更改与模型同步

我试图模拟用户动作，并测试AngularJS控制器对它们的反应

description（'测试控制器组件'、功能（）{
beforeach（注入函数（$compile、$rootScope、$httpBackend、$templateCache）{
scope=$rootScope.$new（）；
元素=角度。元素（“”）；
元素=$compile（元素）（范围）；
范围。$digest（）；
controller=element.controller（'signUp'）；
作用域：$apply（）；
}));
它（'应该呈现模板'，函数（）{
元素find（'input'）.val（'123'）；
范围。$digest（）；
expect（controller.firstName）.toBe（'123'）；
});
});

由于模型字段未更新，测试失败

Expected undefined to be '123'.
        at UserContext.<anonymous> (tests/calculator.controller.test.js:54:42)

预期未定义为“123”。
在UserContext。（tests/calculator.controller.test.js:54:42）

我知道这是反对AngualrJs方法的，但我想用它进行测试。

更多的“AngualrJs”-这里模拟用户输入的方法是访问输入并使用更改视图值。像这样的方法应该会奏效：

it('should reflect to the users input', function () {
    var input = element.find('input');
    var ngModelCtrl = input.controller('ngModel');
    ngModelCtrl.$setViewValue('Dan');
    expect(controller.firstName).toBe('Dan');
});

但是，如果您仍然希望继续您的方法，那么您必须在

输入

元素（使用）上触发一个

更新

事件，以便将该值应用于：

---

第二个解决方案正是我想要的。它补充了DOM集成。否则，会很奇怪为什么外部事件会被处理，而element.click（）是开箱即用的，而模型却被放在一边。

it('should reflect to the users input', function () {
    var input = element.find('input');
    var ngModelCtrl = input.controller('ngModel');
    ngModelCtrl.$setViewValue('Dan');
    expect(controller.firstName).toBe('Dan');
});

it('should reflect to the users input', function () {
    element.find('input').val('123').triggerHandler('input');
    expect(controller.firstName).toBe('123');
});