在 Angular 2 测试中伪造模块

Question

我想测试 Angular 2 服务中的一个功能。

service.ts

upload(){
  let file = new Transfer();
  file.upload(myfile).then( // my callback );
}

我想在我的测试中使用jasmine 模拟Transfer。我在我的

中试过这个

sevice.spec.ts

import { TransferMock as Transfer } from '../mocks/mocks' 模拟它。但它不起作用。这就是我的测试实例化的方式。

describe('authentication service' , () => {
  beforeEach(() => {
    auth = new Service(<any>new HttpMock(), <any>new StorageMock())
  });
  it('initialize authentication',() => {
    expect(auth).not.toEqual(null);
    auth.upload('file'); //it fails here
  });
})

编辑

Transfer 没有注入到服务中。 只有一个函数使用了Transfer。所以我猜不注入可以减少应用程序的初始加载时间（很高兴知道其他意见）。所以我想知道如果它是这样构造的，是否还有什么可以模拟的？

编辑

虽然我接受了 Martin 的回答，因为它是最佳实践，但是当您使用 ionic-native 插件时可能会出现一个问题。如果插件没有浏览器支持，它可能会失败。在这种情况下，当我注入它时发生了错误 FileTransfer is not defined 。所以我又回来了，寻找建议。

Answer 1

为了在测试中为类提供模拟，您需要在实现中注入该类。

在您的 ngModule 中添加 Transfer to your providers。然后只需将其注入您的服务。

然后在您的测试中，您可以在您的TestBed 提供程序中使用{ provide: Transfer, useClass: TransferMock }。

更新

依赖注入的主要目的是使代码可测试并允许模拟 - 伪造 - 服务存根。

更新

使用依赖注入，您可以为不同的环境配置一组不同的提供程序。

例如，如果您在浏览器中运行应用程序，并且在本机移动环境中，您可以更换您的配置。

在你的模块中你可以有这样的东西：

const TRANSFER_PROVIDER: any;

if (environment.browser) {
  TRANSFER_PROVIDER = Transfer;
} else {
  TRANSFER_PROVIDER = { provide: Transfer, useClass: NativeTransfer }
}

...
providers: [ TRANSFER_PROVIDER ]

NativeTransfer 可以是一个简单的存根，除了防止错误之外什么都不做，或者它可以让用户知道他们的浏览器不支持此功能。