Угловое тестирование - Mocking InjectionToken

Question

Я пытаюсь протестировать службу Angular, которая обрабатывает соединения SignalR, которая принимает код для SignalR как InjectionToken.

Вот файл провайдера:

// signalr-provider.ts

import { InjectionToken } from '@angular/core';

export const SIGNALR_TOKEN = new InjectionToken('signalR');

export function signalRFactory() {
    return window['signalR'];
}

export const SIGNALR_PROVIDER = [ { provide: SIGNALR_TOKEN, useFactory: signalRFactory } ];

А вотservice:

// signalr-service.ts

import { Injectable, Inject } from '@angular/core';

import { SIGNALR_TOKEN } from './signalr-provider';
import { HubConnection } from '@aspnet/signalr';
import { environment } from '../../../environments/environment';

@Injectable()
export class SignalrService {
    private hubConnection: HubConnection;
    private baseUrl: string = environment.baseUrl;

    constructor(@Inject(SIGNALR_TOKEN) private signalR: any) {
        this.init();
    }

    init(): void {
        this.hubConnection = new this.signalR.HubConnectionBuilder().withUrl(`${this.baseUrl}/hubs/test`).build();
    }
}

Токен предоставляется в модуле приложения следующим образом:

// From app.module.ts

@NgModule({
    declarations: [...],
    imports: [...],
    providers: [ SIGNALR_PROVIDER, SignalrService ],
    bootstrap: [ AppComponent]
})
export class AppModule {}

Пока что мне не везет, когда я пытаюсь смоделировать InjectionToken в моем тестовом файле,и каждый раз получаю сообщение NullInjectorError: No provider for InjectionToken signalR!.

Вот моя первая попытка вернуть смоделированный объект из функции signalRFactory только со свойствами, необходимыми для первоначального соединения:

// signalr-service.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { InjectionToken } from '@angular/core';

import { SignalrService } from './signalr-service';

const SIGNALR_TOKEN = new InjectionToken('signalR');

function signalRFactory() {
    return {
        HubConnectionBuilder: () => {
            return {
                withUrl: (url) => {
                    return {
                        build: () => {}
                    };
                }
            };
        }
    };
}

const SIGNALR_PROVIDER = [ { provide: SIGNALR_TOKEN, useFactory: signalRFactory } ];

describe('ConnectionService', () => {
    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                providers: [ SIGNALR_PROVIDER, SignalrService ]
            });
        })
    );

    it('should exist', () => {
        const connectionService = TestBed.get(SignalrService);
        expect(connectionService).toBeTruthy();
    });
});

Во второй попытке я назначил макет объекта для переменной:

import { TestBed, async } from '@angular/core/testing';
import { InjectionToken } from '@angular/core';

import { SignalrService } from './signalr-service';

const SIGNALR_TOKEN = new InjectionToken('signalR');

const SIGNALR_VALUE = {
    HubConnectionBuilder: () => {
        return {
            withUrl: (url) => {
                return {
                    build: () => {}
                };
            }
        };
    }
};

const SIGNALR_PROVIDER = [ { provide: SIGNALR_TOKEN, useValue: SIGNALR_VALUE } ];

describe('ConnectionService', () => {
    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                providers: [ SIGNALR_PROVIDER, SignalrService ]
            });
        })
    );

    it('should exist', () => {
        const connectionService = TestBed.get(SignalrService);
        expect(connectionService).toBeTruthy();
    });
});

В третьей попытке я вынул SIGNALR_PROVIDER и попытался предоставить значение непосредственно в массиве провайдеров по фабрике и по прямому значению.:

Прямое значение:

import { TestBed, async } from '@angular/core/testing';
import { InjectionToken } from '@angular/core';

import { SignalrService } from './signalr-service';

const SIGNALR_TOKEN = new InjectionToken('signalR');

const SIGNALR_VALUE = {
    HubConnectionBuilder: () => {
        return {
            withUrl: (url) => {
                return {
                    build: () => {}
                };
            }
        };
    }
};

describe('ConnectionService', () => {
    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                providers: [ { provide: SIGNALR_TOKEN, useValue: SIGNALR_VALUE }, SignalrService ]
            });
        })
    );

    it('should exist', () => {
        const connectionService = TestBed.get(SignalrService);
        expect(connectionService).toBeTruthy();
    });
});

Завод:

import { TestBed, async } from '@angular/core/testing';
import { InjectionToken } from '@angular/core';

import { SignalrService } from './signalr-service';

const SIGNALR_TOKEN = new InjectionToken('signalR');

function signalRFactory() {
    return {
        HubConnectionBuilder: () => {
            return {
                withUrl: (url) => {
                    return {
                        build: () => {}
                    };
                }
            };
        }
    };
}

describe('ConnectionService', () => {
    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                providers: [ { provide: SIGNALR_TOKEN, useFactory: signalRFactory }, SignalrService ]
            });
        })
    );

    it('should exist', () => {
        const connectionService = TestBed.get(SignalrService);
        expect(connectionService).toBeTruthy();
    });
});

Каждая попытка все еще дает мне NullInjectorError: No provider for InjectionToken signalR! Я застрял.Очевидно, что-то я не знаю о InjectionToken.Кто-нибудь может указать мне правильное направление?

Answer 1

Разобрался - моя проблема заключалась в том, что я переопределил токен в тестовом файле, поэтому мой тест предоставлял мой смоделированный объект для совершенно другого токена, чем тот, который ожидал мой сервис.Изменение этого исправило это:

// signalr-service.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { InjectionToken } from '@angular/core';

import { SignalrService } from './signalr-service';

import { SIGNALR_TOKEN } from './signalr-provider'; // This is the change

function signalRFactory() {
    return {
        HubConnectionBuilder: () => {
            return {
                withUrl: (url) => {
                    return {
                        build: () => {}
                    };
                }
            };
        }
    };
}

const SIGNALR_PROVIDER = [ { provide: SIGNALR_TOKEN, useFactory: signalRFactory } ];

describe('ConnectionService', () => {
    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                providers: [ SIGNALR_PROVIDER, SignalrService ]
            });
        })
    );

    it('should exist', () => {
        const connectionService = TestBed.get(SignalrService);
        expect(connectionService).toBeTruthy();
    });
});