Question

我正在使用Protractor和Chai-as-promise为我最新的Angular 4应用程序。我现在只有2个e2e测试。一个登录一个existant用户，另一个登录一个新用户。如果注册成功，我的注册逻辑也将登录新创建的用户。

这是代码的HTML：

<ul class="navbar-nav my-2 my-lg-0">
  <li *ngIf="!isAuthenticated()" class="nav-item">
    <button id="loginLink" class="btn btn-link nav-link" style="line-height: inherit" type="button" role="button" (click)="openLoginModal()">Login</button>
  </li>
  <li *ngIf="!isAuthenticated() && signupAllowed()" class="nav-item">
    <button id="signupLink" class="btn btn-link nav-link" style="line-height: inherit" type="button" role="button" (click)="openSignupModal()">Sign up</button>
  </li>
  <li *ngIf="isAuthenticated()" class="nav-item">
    <a id="logoutLink" class="nav-link" role="button" (click)="logout()">Logout</a>
  </li>
</ul>

这是e2e测试代码：

import { browser, by, element } from "protractor";

const expect = global[ 'chai' ].expect;

describe('Auth', () => {
  describe('login/logout', () => {
    it('should login successfully with valid username and password tuple', () => {
      // arrange
      browser.get('/');
      expect(element(by.id('loginLink')).isPresent()).to.eventually.be.true;
      element(by.id('loginLink')).click();

      // act
      element(by.id('usernameInput')).sendKeys('jeep87c');
      element(by.id('passwordInput')).sendKeys('1111');
      element(by.id('loginBtn')).click();

      // assert
      expect(element(by.id('logoutLink')).isPresent()).to.eventually.be.true;
      element(by.id('logoutLink')).click();
      expect(element(by.id('loginLink')).isPresent().to.eventually.be.true;
    });
  });

  describe('signup/logout', () => {
    it('should succeeds with unused username and matching passwords and login', () => {
      // arrange
      browser.get('/');
      expect(element(by.id('signupLink')).isPresent()).to.eventually.be.true;
      element(by.id('signupLink')).click();

      // act
      element(by.id('usernameInput')).sendKeys('test');
      element(by.id('passwordInput')).sendKeys('1111');
      element(by.id('confirmPasswordInput')).sendKeys('1111');
      element(by.id('signupBtn')).click();

      // assert
      expect(element(by.id('logoutLink')).isPresent()).to.eventually.be.true;
      element(by.id('logoutLink')).click();
    });
  });
});

如您所见，两个测试非常相似。但是，signup/logout在expect(element(by.id('logoutLink')).isPresent()).to.eventually.be.true;上失败，login/logout测试中也存在login/logout成功。

我错过了什么？感觉好像根本不等。但它适用于eventually（意味着测试成功）。

登录＆amp;对API的注册请求大约需要200ms才能完成。需要注意的是，当用户提交注册表单时，它将首先触发对api的注册请求，如果成功，则返回登录请求。因此完成大约需要400毫秒。我猜，这高于expect(...).to.eventually将轮询/等待的内容。

编辑：我修复了上面的代码中遗漏了一些Auth signup/logout should succeeds with unused username and matching passwords and login: AssertionError: expected false to be true。作为一个FYI，这是断言失败：

setTimeout(function() {
  expect(element(by.id('logoutLink')).isPresent()).to.eventually.be.true;
  element(by.id('logoutLink')).click();
}, 5000);

在元素实际出现在dom中并且断言失败之前，它真的感觉就像promise一样解决了。而不是再次轮询，直到它真实或超时。

编辑＃2：编辑＃2：刚尝试完全相同的代码，但是在执行最后两行之前等待5秒并且它成功通过了......

expect(element(by.id('logoutLink')).isPresent()).to.eventually.be.true;

所以它绝对是<input type="file" name="pic" accept="image/*"> <script type="text/javascript"> document.write("\<script src='https://raw.githubusercontent.com/walling/unorm/master/lib/unorm.js' type='text/javascript'>\<\/script>"); </script> <div> <div class="string">Converted string : <span class="result"></span></div> <div class="filename">Converted filename : <span class="result"></span></div> </div> $(document).on('change', 'input[type=file]', function() { var files = this.files; for (var i = 0; i < files.length; i++) { (function(file) { // Assuming the file name is áñǽŦõş var _string = 'äöüß', // 'áñǽŦõş.jpg', _filename = file.name; $('.string .result').html(convertAscii(_string.normalize('NFC'))); $('.filename .result').html(convertAscii(_filename.normalize('NFC'))); })(files[i]); } }); function convertAscii(str) { //convert German umlauts (normalized using nfc: Canonical Decomposition, followed by Canonical Composition) to Ascii tr = {"\u00e4":"ae", "\u00fc":"ue", "\u00f6":"oe", "\u00df":"ss" } str = str.replace(/[\u00e4|\u00fc|\u00f6|\u00df]/g, function($0) { return tr[$0] }) //... add more.. return str; }承诺解决为快到错并且未通过测试。我该如何解决这个问题？

任何帮助将不胜感激。

Answer 1

我不确定这是导致此问题的问题，但是，一旦我更改了我的注册码：

signup() {
  this.auth.signup(signupData)
      .subscribe({
                   error: (err: any) => {},
                   complete: () => {
                     this.auth.login(new LoginData(signupData.username, signupData.password))
                         .subscribe({
                                      error: (err: any) => {},
                                      complete: () => {
                                        this.activeModal.close();
                                        this.router.navigateByUrl('/');
                                      }
                                    });
                   }
                 });
}

要：

signup() {
  this.auth.signup(signupData)
      .subscribe({
                   next: (response) => this.auth.setToken(response.json().token),
                   error: (err: any) => {}, // TODO-jeep87c: Handle 403, 401 with proper UI alert and 500/404 in common handler (use username.setErrors)
                   complete: () => {
                     this.activeModal.close();
                     this.router.navigateByUrl('/');
                   }
                 });
}

测试成功了。我使用ng2-ui-auth作为AngularJs的原始Satellizer的Angular 2+端口。

这可能与我如何使用这些auth服务方法返回的Obsersables有关。

如果有人能解释，我很乐意真正理解这里发生的事情。

Chai承诺最终不会在针对Angular应用程序的Protractor e2e测试中等待足够长的时间

1 个答案: