测试 angular 2 组件时如何模拟 @injected 服务？

Question

我有一个带有签名的组件：

constructor(private loremApiService: LoremApiService,
      private ipsumService: IpsumService,
      private dolorService: DolorService,
      @Inject('sitService') private sitService: library.service.Service) {
}

组件的规范文件设置为：

let component: PowerBiReportComponent;
let fixture: ComponentFixture<TestingComponent>;
const mockLoremApi = { methodThatIsCalled: () => {} };
const mockIpsumService = { };
const mockSitService = { };

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ TestingComponent ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
        providers: [
            { provide: LoremApiService, useValue: mockLoremApi },
            { provide: IpsumService, useValue: mockIpsumService },
            UnmockedService,
            { provide: library.service.Service, useValue: mockSitService }
        ]
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(TestingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

但是，由于 @Inject 装饰器，未使用提供程序，测试在运行时失败：

Error: StaticInjectorError(DynamicTestModule)[sitService]: 
  StaticInjectorError(Platform: core)[sitService]: 
  NullInjectorError: No provider for sitService!

尽管在组件中被@Injected，我如何强制 TestingModule 使用 mockSitService？

Answer 1

正如评论中所述@Inject(...)，在provide使用 Angular 的 DI 设置服务时，Angular 需要任何令牌与为属性提供的令牌相同。这也意味着应该将注入令牌导出到模块之外以供其他人使用该@Inject()语法。

如果服务是这样提供的：

@NgModule({
    providers: [
        { provide: SERVICE_TOKEN, useClass: Service }
    ]
})

然后@Inject()应该像这样设置（使用相同的注入令牌）：

constructor(@Inject(SERVICE_TOKEN) private service: Service) {
}

因此，在您的测试中，您通过（再次使用相同的注入令牌）模拟它：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        providers: [
            { provide: SOME_TOKEN, useValue: mockService }
        ]
    })
    .compileComponents();
}));

有关注入令牌的更多信息，请参阅Angular 文档。