angularjs - Jasmine Karma 表单字段单元测试

Question

我想编写用户名、电子邮件验证和提交按钮单击的单元测试用例，而不使用 Protractor 。可以这样做吗？如果没有，那么我可以通过什么其他方式在它们上编写测试用例。

我的引用表格:

  <form  class="elegant-aero" name="sampleForm" novalidate>
  <p>
        <label>Username:</label>
        <input type="text" class="form-control" name="username" ng-model="username" required >
        <span ng-show="sampleForm.username.$error.required">Username is required.</span>
    </p>
    <p>
        <label>Email:</label>
        <input type="email" class="form-control" name="email" ng-model="email" required>
        <span ng-show="sampleForm.email.$error.required">Email is required.</span>
        <span ng-show="sampleForm.email.$error.email">Invalid email address.</span>
    </p>
    <p>
        <button class="btn btn-link" ng-click="reset()">Reset</button>
        <input type="submit" class="btn btn-primary" ng-disabled="sampleForm.$invalid" ng-click="checkData()">
    </p>
  </form>

Controller js文件供引用:

var validUsername = "索多里斯·拜斯"; var validEmail = "thodoris.bais@gmail.com";

   $scope.reset = function(){

        $scope.username = "";
        $scope.email = "";
   }   

app.controller("myCtrl", function($scope, $http) {
   $scope.checkData = function() {

        if ($scope.username != validUsername || $scope.email != validEmail) {
            alert("The data provided do not match with the default owner");
        } else {
            alert("Seems to be ok!");
        }
    }

});

请帮助，因为我是 Jasmine karma 的新手，刚刚开始学习。

提前致谢。

Answer 1

Protractor 是自然的解决方案

Karma 和 Jasmine 用于“单元测试”

换句话说，测试你的 Controller 或其他独立于前端的东西

但是，如果您想要一个不自然的解决方案，那么人们有时会在 karma 配置中预加载 html 并结合 Angulars 编译，但它会变得困惑