1

我正在使用 angular-http-auth 和http://witoldsz.github.io/angular-http-auth/中的示例来显示我的登录表单。

这是 index.html 页面：

<!DOCTYPE html>
<html ng-app="rdx">
<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body class="auth">

  <div id="login-holder" style="display:none">
    <div id="loginbox">
      <div id="login-inner" ng-controller="UserController">
        <div class="row">
          <div class="col-sm-6 col-sm-offset-2">
            <div class="page-header"><h1>Please Sign In</h1></div>
            <div ng-if="message" class="panel panel-danger">
              <div class="panel-heading">Error</div>
              <div class="panel-body">{{message}}</div>
            </div>

            <form name="form" ng-submit="submit()">
              <div class="form-group">
                <label class="control-label">Username</label>
                <input class="form-control" ng-model="user.username" type="text" name="username" placeholder="Username" />
              </div>
              <div class="form-group">
                <label class="control-label">Password</label>
                <input class="form-control" ng-model="user.password" type="password" name="password" placeholder="Password" />
              </div>
              <input id="login-button" class="btn btn-primary" type="submit" value="Login" />
            </form>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>

  <div id="content">
    <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">AngularRDX</a>
    </div>
    <ul class="nav navbar-nav">
      <li ng-class="{ active: $state.includes('cases') }"><a ui-sref="cases.list">Cases</a></li>
      <li ng-class="{ active: $state.current.name == 'about' }"><a ui-sref="about">About</a></li>
    </ul>
    <p ng-if="user.name" class="navbar-text navbar-right">Signed in as {{user.name}}</p>
    </nav>

    <div class="container">

      <div ui-view>
      </div>

    </div>
  </div>

  <script src="angular/angular.js"></script>
  <script src="angular-ui-router/release/angular-ui-router.js"></script>
  <script src="angular-animate/angular-animate.js"></script>
  <script src="angular-http-auth/src/http-auth-interceptor.js"></script>
  <script src="jquery/dist/jquery.js"></script>
  <script src="js/app.js"></script>

</body>
</html>

它在这样的指令中处理：

angular.module('rdx.auth') 
.directive('auth', function() {
  return {
    restrict: 'C',
    link: function(scope, elem, attrs) {

        var login = $('#login-holder');
        var main = $('#content');

        scope.$on('event:auth-loginRequired', function() {
          login.slideDown('slow', function() {
          main.hide();
        });
        scope.$on('event:auth-loginConfirmed', function() {
          main.show();
          login.slideUp();
        });
    }
  }
});

在我的 Protactor 测试中，我通过单击发出受保护的 http 请求的菜单项来触发登录事件。服务器以 401 响应，并且 angular-http-auth 广播event:auth-loginRequired上面处理的事件。

it('should require a login and then display the list of cases', function() {
  browser.get('/'); 
  var usernameInput = element(by.model('user.username'));
  var passwordInput = element(by.model('user.password'));

  element(by.css('.navbar ul li')).click();
  expect(element(by.model('user.username')).isPresent()).toBe(true);
  //browser.sleep(500);
  usernameInput.sendKeys('admin');
  passwordInput.sendKeys('doit');
  element(by.id('login-button')).click();

  expect(element(by.css('.page-header')).isPresent()).toBe(true);
  var elems = element(by.repeater('c in cases').column('{{c.name}}'));
  expect(elems.getText()).toEqual('bob');
});

测试失败：

==== async task ====
WebElement.sendKeys([object Object])
==== async task ====
Asynchronous test function: it("should require a login and then display the list of cases")
Error
    at null.<anonymous> (/Users/csturm/dev/node/angularjs/rdx/test/e2e/cases.js:23:21)

第 23 行是：usernameInput.sendKeys('admin');

如果我取消注释browser.sleep(500)..，这个测试将起作用。我相信这是因为指令中的 jqueryslideDown到那时已经完成。

有没有另一种方法可以在没有睡眠的情况下做到这一点？我可以改用角度动画还是以某种方式阻止测试直到event:auth-loginRequired处理完？

4

0 回答 0