angular: bug(testing) Protractor stops working when service uses socket.io

What I did to fix the problem was using ngZone everywhere I have an observable that relies on socket.io.

So let’s say you have this method in your service that gives you an observable on a socket.io.

...
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();
        });
    }

Then you need to use the ngZone service to tell Angular to create the socket outside the Angular 2 zone and then execute the callback of the Observable inside the Angular 2 zone.

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);
          });
        });
    });

  }

This way protractor doesn’t hang waiting on the socket.

I reproduced the problem by doing really minimal changes to the offical starter repo. So to see the problem in action you can clone this repo:

https://github.com/choeller/quickstart

Everything I changed is in this commit:

https://github.com/choeller/quickstart/commit/e7d4c9d0b7029f45be5d5e0cb4c12aaa1af09930

Just clone the repo and run

npm run e2e

I may have found a workaround, but I’m not very familiar with Protractor in ng2 so I don’t know if it’s a useful workaround. If you look here, you can disable protractor waiting for angular. So, in my app.e2e-spec.ts file before each request I set

browser.ignoreSynchronization = true;

You can see my full file here:

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

describe('MyApp', () => {
  beforeEach(() => {
    browser.ignoreSynchronization = true;
    browser.get('');
  });

  it('should have a title', () => {
    expect(browser.getTitle()).toEqual('Ionic App');
  });
});

Is there another work around for this ? Setting browser.ignoreSynchronization = true; seems like it’ll be harder to write tests.

+1