javascript - 使用 AngularJS 中的表单对 ControllerAs 进行单元测试

Question

我在使用 Angular 时遇到以下情况:

Controller

function Controller () {
    // form used in template
    this.form ...
}

具有表单并使用此 Controller 的模板

模板

<div ng-controller="Controller as ctrl">
    <form name="ctrl.form">
    ...
</div>

我不得不说我很困惑为什么 Angular 除了自动添加 this.form 或 $scope 之外没有更好的方法将表单添加到 Controller .form，取决于您如何使用 Controller ，但我猜这是另一个问题。

我现在遇到的真正问题是我不确定应该如何测试它。如果我只是在测试中实例化 Controller ，那么我的表单是未定义的

$controller(' Controller 作为ctrl')

我确实找到了一种方法，只需编译模板即可

$scope = $rootScope.$new();
$compile(template)($scope);

但是因为模板中的 ng-controller 启动了一个新作用域，所以我无法直接使用 $scope.ctrl 访问 Controller ，而是必须执行类似 $scope.$$childHead.login

的操作

...我觉得它变得太复杂了。编辑:更不用说 $$ 表示“私有(private)”属性。

Answer 1

我自己解决了这个问题，但我不接受它，因为我认为这个解决方案不是很好。如果有人知道更好的方法，请留言。

编译模板的问题是，也不可能在 Controller 中插入模拟服务，至少我没有弄清楚。您在 $scope 上获得一个 Controller 实例，例如 $scope.ctrl，但仅此而已。

第二次尝试是仅在模板中找到表单，编译并将其添加到单独实例化的 Controller 中。这有效，但实际上并非如此，因为表单和 Controller 的 $scope 不同，因此对字段的任何更新都不会反射(reflect)在 Controller 状态上。

它最终的工作方式是用 $scope 实例化 Controller

ctrl = $controller('Controller as ctrl', {
        someDependency: mockDependency,
        $scope: $scope
    });

然后使用相同的 $scope 编译部分模板(只是表单)

var formTpl = angular.element(template).find('form');
form = $compile(formTpl)($scope);

这样， Controller 最终会出现在 $scope.ctrl 中，但由于表单已被命名为 name="ctrl.form"，因此它会被插入到 >$scope.ctrl.form 并且它在 Controller 内可见。