socket.io error on connect: Error: xhr poll error in Angular 2 with Nativescript using jasmine

[magar91]

I recently updated my nativescript-Angular 2 project and wanted to refactor my testing code, the initial import required for the test to run no longer works:

import "nativescript-angular/aplication"

now I have to add an import for "reflect metadata" and zone.js I managed this by adding the following import to my spec.ts file

import "reflect-metadata"

and changed my karma.conf.js file like this:

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'app/**/*.js',

      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/zone-node.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/jasmine-patch.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.js',
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [],

    customLaunchers: {
      android: {
        base: 'NS',
        platform: 'android'
      },
      ios: {
        base: 'NS',
        platform: 'ios'
      },
      ios_simulator: {
        base: 'NS',
        platform: 'ios',
        arguments: ['--emulator']
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  })
}

this is my spec file:

import "reflect-metadata";
import { Http, Headers, HttpModule, XHRBackend, 
        BaseRequestOptions, Response, 
        ResponseOptions, RequestMethod } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { LoginService } from '../../shared/login-service/login-service.service';
import { User } from '../../shared/user/user.model';
import { Config } from '../../shared/config';
import { inject, async, ComponentFixture, TestBed, 
        fakeAsync, getTestBed } from '@angular/core/testing';

describe('LoginService test', () => {
    let login : LoginService = null;
    let backend : MockBackend = null;
    let config = new Config();

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [
                LoginService,
                BaseRequestOptions,
                {
                    provide: Http,
                    deps: [MockBackend, BaseRequestOptions],
                    useFactory:
                        (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
                            return new Http(backend, defaultOptions);
                        }
                }
            ],
            imports: [
                HttpModule
            ]
        });

        TestBed.compileComponents();
    }));

    beforeEach(inject([LoginService, MockBackend], (userService: LoginService, mockBackend : MockBackend) => {
        login = userService;
        backend = mockBackend;
    }));
    
    it("should return token at succesful login",async(() =>{
        backend.connections.subscribe((connection: MockConnection) => {
            let options = new ResponseOptions({
                body: JSON.stringify({ token: "success" })
            });
            connection.mockRespond(new Response(options));
        });

        let user = new User();
        user.username = "admin";
        user.password = "password";
        login
            .login(user)
            .subscribe((response) => {
                expect(response).toEqual({ token: "success" })
            })
    }));

I get the following error in my console:

JS: NSUTR-socket.io: transport error
JS: NSUTR-socket.io: 1
JS: NSUTR: socket.io error on connect: Error: xhr poll error
JS: NSUTR-socket.io: 2
JS: NSUTR: socket.io error on connect: Error: xhr poll error
JS: NSUTR-socket.io: 3
JS: NSUTR: socket.io error on connect: Error: xhr poll error
23 12 2016 09:09:15.516:WARN [NativeScript / 23 (6.0; Samsung Galaxy S7)]: DiscoNativeScript / 23 (6.0; Samsung Galaxy S7) ERROR
  Disconnected, because no message in 10000 ms.
NativeScript / 23 (6.0; Samsung Galaxy S7): Executed 0 of 0 DISCONNECTED (10.005NativeScript / 23 (6.0; Samsung Galaxy S7): Executed 0 of 0 DISCONNECTED (10.005 secs / 0 secs)
JS: NSUTR-socket.io: 4
JS: NSUTR: socket.io error on connect: Error: xhr poll error

I've tried other solutions like this one, and wrote the spec as suggested in these examples angular 2 testing guide and angular 2 services with jasmine

any idea how to fix this?

[marcan2020]

Any update?
I'm trying to tests with fakeAsync and tick from @angular/core/testing.
I have similar config files (with Angular 4) as @magar91 and I get the same error when running my tests: JS: NSUTR: socket.io error on connect: Error: xhr poll error

[NickIliev]

Closing the issue due to inactivity