AngularJS 表单验证测试

【问题标题】：AngularJS form validation testingAngularJS 表单验证测试
【发布时间】：2014-10-12 19:02:32
【问题描述】：

有时表单会变得非常复杂，在代码更改后无法手动测试每个案例。我已经对项目进行了 karma 单元测试。

是否有任何工具或最佳实践可以使用 jasmine 和 karma 测试 AngularJS 表单验证？

例如，如何使用 jasmine 和 karma 自动测试这种形式？

<form name="appForm" novalidate>
    <div>
        Username: <input type="text" ng-model="data.username" name="username" ng-maxlength="15" required />
    </div>
    <div>
        Email: <input type="email" ng-model="data.email" name="email" required />
    </div>
    <div>
        Age: <input type="number" ng-model="data.age" name="age" />
    </div>
    <div>
        <button ng-click="submit()" ng-disabled="appForm.$invalid">Submit</button>
    </div>
</form>

【问题讨论】：

标签： angularjs forms validation

【解决方案1】：

这取决于您在测试表单验证时真正想要确定的内容。

如果您想确保不会提交无效的表单，那么这是一种情况。而且我认为这个案例没有问题。

如果您想确保为无效字段显示适当的消息，例如，您可以制定一个指令，了解您所有可能的字段限制（'required'、'ng-maxlength'、'url'等）并负责显示适当的错误消息。所以你只需要为这个指令创建测试。

例子：

<input type="text" ng-model="data.username" my-directive name="username" ng-maxlength="15" required />

myDirective 知道 required 和 ng-maxlength 限制，它们被放在字段上，它负责为字段的无效状态显示适当的错误消息。

【讨论】：