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

Question

我正在尝试模拟用户操作并测试 AngularJS Controller 对它们的 react 。

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() method 更改 View 值.这样的事情应该有效:

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 method )，因此值将应用于 the $modelValue :

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