title: Angular test with karma fake XmlHttpRequest problems
body: <p>I'm trying to test an angular service (based on feathersJS) with the standard angular testing tools (Karma and Jasmine).</p>
  
  <p>As my service make XHR call to a back end (using socket.io), I want to mock those calls to test the service.</p>
  
  <p>I use sinon.js library that provide functionality to create fake server, and this parts works. </p>
  
  <p>My problem is that when I mock the XHR response in my test, there are others XHR requests from webpack that try to load "polyfill.js".
  This occurs when i call the authenticate method of my service, so because of webpack xhr request, the promise always fallback in the catch code.</p>
  
  <p>See details below, so if anyone can help on solving this "issue" or provide another advices on how to mock XHR requests in Angular/jasmine/karma tests</p>
  
  <p>Note that I think that mocking the global xmlHttpRequest object in browser can be tricky...</p>
  
  <p>Thank you !!</p>
  
  <p><strong><em>Details:</em></strong></p>
  
  <p>The full error is :</p>
  
  <blockquote>
    <p>Error: Socket connection timed out
        at setTimeout (<a href="http://localhost:9876/node_modules/@feathersjs/authentication-client/lib/passport.js?:120:1" rel="nofollow noreferrer">http://localhost:9876/node_modules/@feathersjs/authentication-client/lib/passport.js?:120:1</a>)
        at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
    (<a href="http://localhost:9876/_karma_webpack_/polyfills.js:2883:31" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.js:2883:31</a>)
        at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvokeTask
    (<a href="http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:319:1" rel="nofollow noreferrer">http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:319:1</a>)
        at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
    (<a href="http://localhost:9876/_karma_webpack_/polyfills.js:2882:36" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.js:2882:36</a>)
        at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (<a href="http://localhost:9876/_karma_webpack_/polyfills.js:2650:47" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.js:2650:47</a>)
        at ./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (<a href="http://localhost:9876/_karma_webpack_/polyfills.js:2958:34" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.js:2958:34</a>)
        at ZoneTask.invoke (<a href="http://localhost:9876/_karma_webpack_/polyfills.js:2947:48" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.js:2947:48</a>)
        at timer (<a href="http://localhost:9876/_karma_webpack_/polyfills.js:4516:29" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.js:4516:29</a>)"</p>
  </blockquote>
  
  <p>Note that my service doesn't make this XHR...</p>
  
  <p>Here is my (very simple) test spec in jasmine :</p>
  
  <pre><code>import { AppLoggerService } from '../../logger/app-logger/service/app-logger.service';
  import { fakeAsync, async, tick } from '@angular/core/testing';
  import { mock, instance, when, deepEqual, verify } from 'ts-mockito';
  import { FeathersjsBackendService } from './backend-feathers.service';
  import { BackendConfigClass } from 'src/app/shared/models/backend-config.model';
  import * as sinon from 'sinon'
  
  describe('Feathers backend service', () =&gt; {
      var MockLoggerService: AppLoggerService = null
      var feathersBackendService: FeathersjsBackendService = null
      const fakeURL: string = 'http://localhost/socket.io'
      var feathersBackendServiceConfig: BackendConfigClass = { apiEndPoint: fakeURL }
      var mockSocketServer: any = null;
  
      // create fake websocket server
      beforeAll(() =&gt; {
  
      })
  
  
      beforeEach( () =&gt; {
          mockSocketServer = sinon.createFakeServer()
          mockSocketServer.respondWith(/http:\/\/localhost\/socket\.io\/.*/, function (xhr, id) {
              xhr.respond(200, {}, 'authenticate')
          })
  
          mockSocketServer.respondWith(/^\/_karma_webpack_.*/, function (xhr, id) {
              xhr.respond(200, {}, 'webpack module')
          })
  
          MockLoggerService = mock(AppLoggerService)
          feathersBackendService = new FeathersjsBackendService(instance(MockLoggerService), feathersBackendServiceConfig)
          expect(feathersBackendService).not.toBeNull()
      })
  
      afterEach( () =&gt; {
          mockSocketServer.restore();
      })
  
      it('#1 - Should mock authenticate', () =&gt; {
          var isAuth: boolean = false;
          feathersBackendService.authenticate({ strategy: 'anonymous' })
              .then((user) =&gt; {
                  isAuth = true;
              })
              .catch((error) =&gt; {
                  let a = 0;
              })
          mockSocketServer.respond();
          expect(isAuth).toBe(true);
      })
  
  })
  </code></pre>