用业力假装XmlHttpRequest进行角度测试问题

时间:2018-12-06 06:17:02

标签: angular jasmine mocking xmlhttprequest karma-runner

我正在尝试使用标准的角度测试工具(Karma和Jasmine)来测试角度服务(基于feathersJS)。

当我的服务(使用socket.io)对后端进行XHR调用时,我想模拟这些调用以测试服务。

我使用sinon.js库,该库提供了创建假服务器的功能,而这部分工作正常。

我的问题是,当我在测试中模拟XHR响应时,还有来自Webpack的其他XHR请求试图加载“ polyfill.js”。 当我调用服务的authenticate方法时会发生这种情况,因此由于webpack xhr请求,promise总是回退到捕获代码中。

请参阅下面的详细信息,以便任何人都可以帮助解决此“问题”或提供其他建议,以帮助您了解如何在Angular / Jasmine / karma测试中模拟XHR请求

请注意,我认为在浏览器中模拟全局xmlHttpRequest对象可能很棘手...

谢谢!!

详细信息:

完整错误是:

  

错误:套接字连接超时       在setTimeout(http://localhost:9876/node_modules/@feathersjs/authentication-client/lib/passport.js?:120:1)       在ZoneDelegate ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask   (http://localhost:9876/_karma_webpack_/polyfills.js:2883:31)       在ProxyZoneSpec.push ../ node_modules / zone.js / dist / zone-testing.js.ProxyZoneSpec.onInvokeTask中   (http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:319:1)       在ZoneDelegate ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask   (http://localhost:9876/_karma_webpack_/polyfills.js:2882:36)       在Zone ../ node_modules / zone.js / dist / zone.js.Zone.runTask(http://localhost:9876/_karma_webpack_/polyfills.js:2650:47)       在./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask(http://localhost:9876/_karma_webpack_/polyfills.js:2958:34)       在ZoneTask.invoke(http://localhost:9876/_karma_webpack_/polyfills.js:2947:48)       在计时器(http://localhost:9876/_karma_webpack_/polyfills.js:4516:29)“

请注意,我的服务无法生成此XHR ...

这是我的茉莉(非常简单)测试规格:

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', () => {
    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(() => {

    })


    beforeEach( () => {
        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( () => {
        mockSocketServer.restore();
    })

    it('#1 - Should mock authenticate', () => {
        var isAuth: boolean = false;
        feathersBackendService.authenticate({ strategy: 'anonymous' })
            .then((user) => {
                isAuth = true;
            })
            .catch((error) => {
                let a = 0;
            })
        mockSocketServer.respond();
        expect(isAuth).toBe(true);
    })

})

1 个答案:

答案 0 :(得分:0)

经过大量测试,我认为嘲笑socket.io是个坏主意。 因此,我在项目中嵌入了一个假服务器,该服务器可对Ajax / socket.io查询提供静态响应。