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

Question

我正在尝试模拟用户操作并测试AngularJS控制器对他们的反应。

describe('Testing a controller component', function () {
    beforeEach(inject(function ($compile, $rootScope, $httpBackend, $templateCache) {
        scope = $rootScope.$new();
        element = angular.element('<sign-up></sign-up>');
        element = $compile(element)(scope);
        scope.$digest();
        controller = element.controller('signUp');
        scope.$apply();
    }));
    it('should render template', function () {
        element.find('input').val('123');
        scope.$digest();
        expect(controller.firstName).toBe('123');
    });
});

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

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

我知道这违反了 AngualrJs 方法，但我想用它来进行测试。

Answer 1

更多 "AngualrJS" 模拟用户输入的方法 是访问输入的ngModelController并使用$setViewValue()方法更改视图值。这样的事情应该有效：

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');
});

但是，如果您仍然想继续使用您的方法，那么您必须在 input 元素上触发updateOn事件之一(使用 triggerHandler 方法(，以便该值将应用于$modelValue：

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