依赖于AngularJS表单验证的单元测试控制器

Question

在我的控制器中，我希望在表单有效时（例如在选项卡上按下时）调用一个操作。同时，我需要在表单提交成功后立即清除表单。我的代码如下：

app.controller('CommentFormController', function($scope) {
  $scope.submit = function() {
    if($scope.commentForm.$valid) {
      // submit form
      $scope.comment = '';
      $scope.commentForm.$setPristine();
    }
  }
});

我想测试这个功能，但看起来我必须手动创建$scope.contactForm并模拟$setPristine()函数。

有没有其他方法可以进行测试？我的意思是，在我的测试中，是否可以以某种方式获取底层的FormController实例？

你是如何处理这种情况的？

- grafthez

---

如果我找到一个不错的方法来实现这个，我会把它作为答案添加进去，但是目前我也处于同样的情况，并且有一些想法。当模板加载时，表单会自动绑定到作用域，这时会启用验证。在这些单元测试中，我们没有访问模板，这意味着我们应该进行端到端测试，但如果您需要模拟后端，这可能有点麻烦。团队也正在切换到 Protractor 进行端到端测试，但这些测试并不太适合 TDD。如果我取得任何进展，我会更新的。 - daddywoodland

我也想知道最好的方法来做到这一点，因为目前我正在做类似于以下的事情： $scope.commentForm = { $setPristine: function(){} }; - CallumD

是的，就像@daddywoodland所说的那样，似乎缺少模板 - 它可以在指令中工作（因为您添加了html并进行编译）。 - Luke Madera

Answer 1

将表单设置为原始状态会影响表单的状态，但不会将表单重置为您提供的默认值（如果您已经提供了）。相反，您可以使用DOM元素方法reset()。

像这样：

document.getElementById("yourform").reset();

或者，由于AngularJS和jQuery可以很好地协作，您可以使用CSS选择器（特别是在您想要同时清除多个表单时非常有用）。

因此，可以使用以下类似的代码：

```javascript $('form').trigger("reset"); ```

请保留HTML标记。

$("#yourform")[0].reset();

还有纯JavaScript的方法可以实现：

http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml

--- 所以总结一下，你不需要使用特定的方法来完成这个任务，只需使用DOM方法、jQuery或纯JavaScript即可。Google可能很快就会推出一种方法来实现这个功能。希望这可以帮到你。

- Zimon

Answer 2

@grafthez 我在控制器中尝试通过 $scope.myForm.$valid 验证表格是否有效时遇到了相同的问题。

我在https://dev59.com/oGQn5IYBdhLWcg3wGD1s#17129354上找到了解决方案。您可以尝试注入 $compile，然后执行 $compile(yourFormTemplate)($scope)。

- Kien