带有量角器抛出错误的Angular2 e2e测试用例答案

【问题标题】：Angular2 e2e test case with protractor throwing error带有量角器抛出错误的Angular2 e2e测试用例
【发布时间】：2016-08-13 07:19:00
【问题描述】：

我已经使用angular2-webpack-starter 创建了我的应用程序，并且我已经使用了socket.io。我创建了一个通用服务来创建套接字连接并监听它的方法。用户登录后使用并初始化此服务。当应用程序运行并执行登录测试用例时，我正在使用以下代码检查 url：

browser.getCurrentUrl().then((url) => {
    expect(url).toEqual('/dashboard');    
});

问题是当套接字连接时，它会抛出错误“等待量角器在 15 秒后与页面同步超时”，如果未连接套接字，则相同的测试用例正在运行而没有任何错误。

【问题讨论】：

你试过expect(browser.driver.getCurrentUrl()).toEqual('/dashboard');吗？
此错误不仅适用于browser.getCurrentUrl()，而且此错误适用于我的所有测试用例，其中我为不同的选择器使用了一些不同的expect 条件。在未实现套接字之前，所有测试用例都在工作，但在添加套接字后它停止工作。
我敢打赌，您在测试和量角器控制流中实现套接字的方式有些不同步。你介意用相关的测试代码更新你的帖子吗？

标签： sockets angular protractor e2e-testing

【解决方案1】：

我不确定连接到套接字是否真的会使事情花费更长的时间，但如果 15 秒还不够，您可以更改 allScriptsTimeout:timeout_in_millis 在量角器配置文件中

protractor timeouts

【讨论】：

我已经尝试过了，但是没有用。我认为问题是因为在与服务器的连接完成后套接字连接保持打开状态并且量角器正在等待通过关闭连接来完成该过程。
我看到了同样的问题，我同意你的观点，它必须是 websockets。我们正在打开一个 websocket 并等待一个 observable。

【解决方案2】：

所以我找到的解决方案是：

（为了您的方便，这是从这里复制的。所有功劳归https://github.com/cpa-level-it

https://github.com/angular/angular/issues/11853#issuecomment-277185526)

我为解决这个问题所做的就是在我有一个依赖于 socket.io 的 observable 的任何地方使用 ngZone。

假设你的服务中有这个方法，它可以在 socket.io 上为你提供一个 observable。

private socket: SocketIOClient.Socket;

 public getSocketIOEvents(): Observable<SocketIOEvent> {

        if (this.socket == null) {
            this.socket = io.connect(this._socketPath);
        }

        return Observable.create((observer: any) => {
            this.socket.on('eventA', (item: any) => observer.next(new SocketIOEvent(item)));
            this.socket.on('eventB', (item: any) => observer.next(new SocketIOEvent(item)));
            return () => this.socket.close();
        });
    }

然后你需要使用 ngZone 服务告诉 Angular 在 Angular 2 区域外创建套接字，然后在 Angular 2 区域内执行 Observable 的回调。

import {  NgZone } from '@angular/core';
constructor(
    private socketService: SocketIOService,    ,
    private ngZone: NgZone) { }


ngOnInit() {

    // Subscribe to the Observable outside Angular zone...    
    this.ngZone.runOutsideAngular(() => {
      this.socketService
        .getSocketIOEvents()
        .subscribe(event => {

         // Come back into Angular zone when there is a callback from the Observable
           this.ngZone.run(() => {
            this.handleEvent(event);
          });
        });
    });

  }

这样量角器不会挂在套接字上等待。

【讨论】：